@firestitch/list 18.0.39 → 18.0.41

package/fesm2022/firestitch-list.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { Injectable, Directive, Input, Component, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, Pipe, ViewChildren, TemplateRef, ViewContainerRef, ViewChild, ContentChild, inject, HostListener, ContentChildren, InjectionToken, ChangeDetectorRef, Injector, Optional, Inject, NgModule } from '@angular/core';
+import { Injectable, Directive, Input, input, effect, Component, ChangeDetectionStrategy, HostBinding, EventEmitter, Output, Pipe, computed, TemplateRef, ViewContainerRef, ViewChild, ContentChild, inject, HostListener, ContentChildren, InjectionToken, ChangeDetectorRef, Injector, Optional, Inject, NgModule } from '@angular/core';
 import { BehaviorSubject, Subject, Observable, of, merge, from, combineLatest, EMPTY } from 'rxjs';
 import { takeUntil, take, filter, tap, skip, distinctUntilChanged, map, shareReplay, delay, switchMap, debounceTime, mapTo, catchError } from 'rxjs/operators';
 import { get, isString, isObject, isBoolean, isNumber, isFunction, cloneDeep, random, mergeWith } from 'lodash-es';
-import { MatCheckbox } from '@angular/material/checkbox';
 import { NgTemplateOutlet, NgIf, NgSwitch, NgSwitchCase, NgClass, NgFor, AsyncPipe, Location, DecimalPipe } from '@angular/common';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatIcon } from '@angular/material/icon';
 import * as i1$2 from '@firestitch/prompt';
 import * as i1 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
 import { MatButton, MatAnchor, MatIconButton, MatIconAnchor, MatFabButton, MatFabAnchor, MatMiniFabButton, MatMiniFabAnchor } from '@angular/material/button';
 import * as i5 from '@angular/router';
 import { RouterLink } from '@angular/router';
-import { MatIcon } from '@angular/material/icon';
 import * as i1$1 from '@firestitch/menu';
 import { FsMenuModule } from '@firestitch/menu';
 import * as i3 from '@angular/material/dialog';
@@ -214,6 +214,186 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             type: Injectable
         }] });
 
+var RowType;
+(function (RowType) {
+    RowType["Simple"] = "simple";
+    RowType["Group"] = "group";
+    RowType["GroupFooter"] = "groupFooter";
+    RowType["GroupChild"] = "groupChild";
+})(RowType || (RowType = {}));
+
+class BaseRow {
+    _rowType;
+    _index;
+    _readyToSwap = true;
+    _actionsUpdated$ = new Subject();
+    _data = {};
+    constructor(data = {}) {
+        this._data = data;
+    }
+    get data() {
+        return this._data;
+    }
+    get type() {
+        return this._rowType;
+    }
+    get index() {
+        return this._index;
+    }
+    set index(value) {
+        this._index = value;
+    }
+    get readyToSwap() {
+        return this._readyToSwap;
+    }
+    set readyToSwap(value) {
+        this._readyToSwap = value;
+    }
+    get actionsUpdated$() {
+        return this._actionsUpdated$.asObservable();
+    }
+    updateActions() {
+        return this._actionsUpdated$.next();
+    }
+    reorderData() {
+        return {
+            type: this._rowType,
+            data: this.data,
+            parent: null,
+        };
+    }
+}
+
+class ChildRow extends BaseRow {
+    _rowType = RowType.GroupChild;
+    _visible = true;
+    _parent;
+    constructor(data = {}, parent = null) {
+        super(data);
+        this._parent = parent;
+        if (this.parent) {
+            this._visible = this._parent.expanded;
+            this.index = this.parent.children.length;
+        }
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(value) {
+        this._visible = value;
+    }
+    get parent() {
+        return this._parent;
+    }
+    reorderData() {
+        return {
+            type: this._rowType,
+            data: this.data,
+            parent: this.parent.reorderData(),
+        };
+    }
+    destroy() { }
+}
+
+class GroupFooterRow extends BaseRow {
+    _rowType = RowType.GroupFooter;
+    _visible = true;
+    _parent;
+    constructor(data = {}, parent = null) {
+        super(data);
+        this._parent = parent;
+        if (this.parent) {
+            this.visible = this._parent.expanded;
+            this.index = this.parent.children.length;
+        }
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(value) {
+        this._visible = value;
+    }
+    get parent() {
+        return this._parent;
+    }
+    destroy() { }
+}
+
+class GroupRow extends BaseRow {
+    _rowType = RowType.Group;
+    _children = [];
+    _expanded = new BehaviorSubject(false);
+    constructor(data = {}, initialExpand = false) {
+        super(data);
+        if (initialExpand) {
+            this._expanded.next(initialExpand);
+        }
+    }
+    get children() {
+        return this._children;
+    }
+    get childrenData() {
+        return this._children
+            .map((child) => child.data);
+    }
+    get expanded() {
+        return this._expanded.getValue();
+    }
+    get expanded$() {
+        return this._expanded.asObservable();
+    }
+    toggleRowExpandStatus() {
+        this._expanded.next(!this.expanded);
+        this._updateChildrenVisibility();
+    }
+    destroy() {
+        this._children.forEach((child) => child.destroy());
+        this._expanded.complete();
+    }
+    _updateChildrenVisibility() {
+        this._children.forEach((row) => {
+            row.visible = this.expanded;
+        });
+    }
+}
+
+class SimpleRow extends BaseRow {
+    _rowType = RowType.Simple;
+    constructor(data = {}) {
+        super(data);
+    }
+    destroy() { }
+}
+
+function isGroupRow(row) {
+    return row.type === RowType.Group;
+}
+function isChildRow(row) {
+    return row.type === RowType.GroupChild;
+}
+function isGroupFooterRow(row) {
+    return row.type === RowType.GroupFooter;
+}
+function isChildTypeRow(row) {
+    return row.type === RowType.GroupChild || row.type === RowType.GroupFooter;
+}
+function makeRowFactory(data, rowType, opts = {}) {
+    switch (rowType) {
+        case RowType.Simple: {
+            return new SimpleRow(data);
+        }
+        case RowType.Group: {
+            return new GroupRow(data, opts.initialExpand);
+        }
+        case RowType.GroupChild: {
+            return new ChildRow(data, opts.parent);
+        }
+        case RowType.GroupFooter: {
+            return new GroupFooterRow(data, opts.parent);
+        }
+    }
+}
+
 var SelectionChangeType;
 (function (SelectionChangeType) {
     SelectionChangeType["AllVisibleSelectionChange"] = "AllVisibleSelectionChange";
@@ -308,7 +488,7 @@ class SelectionController {
         if (checked) {
             rows.forEach((row) => {
                 const identifier = this._rowIdentifier(row.data);
-                if (row.isGroup) {
+                if (isGroupRow(row)) {
                     this._setNumberOfSelectedChildrenInGroup(identifier, row.children.length);
                 }
                 else {
@@ -320,7 +500,7 @@ class SelectionController {
         else {
             rows.forEach((row) => {
                 const identifier = this._rowIdentifier(row.data);
-                if (row.isGroup) {
+                if (isGroupRow(row)) {
                     this._setNumberOfSelectedChildrenInGroup(identifier, 0);
                 }
                 else {
@@ -618,13 +798,13 @@ class SelectionController {
     }
     _selectRow(row) {
         const identifier = this._rowIdentifier(row.data);
-        if (row.isGroup) {
+        if (isGroupRow(row)) {
             row.children.forEach((childRow) => {
                 this._selectRow(childRow);
             });
         }
         else {
-            if (row.isChild) {
+            if (isChildRow(row)) {
                 this._selectChildRow(row);
             }
             this.selectedRows.set(identifier, row.data);
@@ -633,14 +813,14 @@ class SelectionController {
     }
     _deselectRow(row) {
         const identifier = this._rowIdentifier(row.data);
-        if (row.isGroup) {
+        if (isGroupRow(row)) {
             this.selectedGroups.delete(identifier);
             row.children.forEach((childRow) => {
                 this._deselectRow(childRow);
             });
         }
         else {
-            if (row.isChild && this.selectedRows.has(identifier)) {
+            if (isChildRow(row) && this.selectedRows.has(identifier)) {
                 this._deselectChildRow(row);
             }
             this.selectedRows.delete(identifier);
@@ -782,9 +962,9 @@ class FsListDraggableListDirective {
         }
         // Can not drag before first group and after last group
         const swapWithBoundaryGroupElement = (elemIndex === 0 || elemIndex === this._rows.length - 1)
-            && targetRow.isGroup
+            && isGroupRow(targetRow)
             // TODO fix isChild & all
-            && this.draggableItem.isChild;
+            && (isChildRow(this.draggableItem));
         if (!swapWithBoundaryGroupElement) {
             if (elemIndex !== null) {
                 if (targetRow.readyToSwap) {
@@ -989,7 +1169,7 @@ class FsListDraggableListDirective {
         this._draggableChildrenDirectives
             .forEach((dir) => {
             const isRowSelected = this._reorderController.selectionController?.isRowSelected(dir.row.data);
-            if (isRowSelected && !dir.row.isGroup) {
+            if (isRowSelected && !isGroupRow(dir.row)) {
                 this._selectedRowsDirectives.push(dir);
             }
         });
@@ -1023,219 +1203,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['rows']
             }] } });
 
-var RowType;
-(function (RowType) {
-    RowType["Simple"] = "simple";
-    RowType["Group"] = "group";
-    RowType["GroupFooter"] = "groupFooter";
-    RowType["GroupChild"] = "groupChild";
-})(RowType || (RowType = {}));
-
-class BaseRow {
-    index;
-    readyToSwap = true;
-    _rowType;
-    _data = {};
-    constructor(data = {}, rowType = RowType.Simple) {
-        this._data = data;
-        this._rowType = rowType;
-    }
-    get data() {
-        return this._data;
-    }
-    get type() {
-        return this._rowType;
-    }
-    getReorderData() {
-        return {
-            type: this._rowType,
-            data: this.data,
-            parent: null,
-        };
-    }
-}
-
-class ChildRow extends BaseRow {
-    visible = true;
-    _parent;
-    constructor(data = {}, parent = null) {
-        super(data, RowType.GroupChild);
-        this._parent = parent;
-        if (this.parent) {
-            this.visible = this._parent.expanded;
-            this.index = this.parent.children.length;
-        }
-    }
-    get parent() {
-        return this._parent;
-    }
-    get isChild() {
-        return true;
-    }
-    getReorderData() {
-        return {
-            type: this._rowType,
-            data: this.data,
-            parent: this.parent.getReorderData(),
-        };
-    }
-    destroy() { }
-}
-
-class GroupFooterRow extends BaseRow {
-    visible = true;
-    _parent;
-    constructor(data = {}, parent = null) {
-        super(data, RowType.GroupFooter);
-        this._parent = parent;
-        if (this.parent) {
-            this.visible = this._parent.expanded;
-            this.index = this.parent.children.length;
-        }
-    }
-    get parent() {
-        return this._parent;
-    }
-    get isGroupFooter() {
-        return true;
-    }
-    destroy() { }
-}
-
-class GroupRow extends BaseRow {
-    children = [];
-    _expanded = new BehaviorSubject(false);
-    constructor(data = {}, initialExpand = false) {
-        super(data, RowType.Group);
-        if (initialExpand) {
-            this._expanded.next(initialExpand);
-        }
-    }
-    get childrenData() {
-        return this.children
-            .map((child) => child.data);
-    }
-    get isGroup() {
-        return true;
-    }
-    get expanded() {
-        return this._expanded.getValue();
-    }
-    get expanded$() {
-        return this._expanded.asObservable();
-    }
-    updateChildrenIndexes() {
-        this.children.forEach((row, index) => {
-            row.index = index;
-        });
-    }
-    updateChildrenVisibility() {
-        this.children.forEach((row) => {
-            row.visible = this.expanded;
-        });
-    }
-    toggleRowExpandStatus() {
-        this._expanded.next(!this.expanded);
-        this.updateChildrenVisibility();
-    }
-    destroy() {
-        this.children.forEach((child) => child.destroy());
-        this._expanded.complete();
-    }
-}
-
-class SimpleRow extends BaseRow {
-    constructor(data = {}) {
-        super(data, RowType.Simple);
-    }
-    destroy() {
-    }
-}
-
-class Row {
-    _row;
-    _actionsUpdate$ = new Subject();
-    constructor(data = {}, rowType = RowType.Simple, { parent, initialExpand } = {}) {
-        switch (rowType) {
-            case RowType.Simple:
-                {
-                    this._row = new SimpleRow(data);
-                }
-                break;
-            case RowType.Group:
-                {
-                    this._row = new GroupRow(data, initialExpand);
-                }
-                break;
-            case RowType.GroupChild:
-                {
-                    this._row = new ChildRow(data, parent);
-                }
-                break;
-        }
-    }
-    get index() {
-        return this._row.index;
-    }
-    get actionsUpdate$() {
-        return this._actionsUpdate$.asObservable();
-    }
-    actionsUpdate() {
-        return this._actionsUpdate$.next(null);
-    }
-    set index(value) {
-        this._row.index = value;
-    }
-    get readyToSwap() {
-        return this._row.readyToSwap;
-    }
-    get visible() {
-        return this._row.visible;
-    }
-    set readyToSwap(value) {
-        this._row.readyToSwap = value;
-    }
-    get data() {
-        return this._row.data;
-    }
-    get type() {
-        return this._row.type;
-    }
-    get isGroup() {
-        return this._row instanceof GroupRow;
-    }
-    get isGroupChild() {
-        return this._row instanceof ChildRow;
-    }
-    get isGroupFooter() {
-        return this._row instanceof GroupFooterRow;
-    }
-    get parent() {
-        return this._row.parent;
-    }
-    get children() {
-        return this._row.children;
-    }
-    get expanded() {
-        return this._row.expanded;
-    }
-    get expanded$() {
-        return this._row.expanded$;
-    }
-    updateChildrenIndexes() {
-        this._row.updateChildrenIndexes();
-    }
-    toggleRowExpandStatus() {
-        this._row.toggleRowExpandStatus();
-    }
-    getReorderData() {
-        return this._row.getReorderData();
-    }
-    destroy() {
-        this._row.destroy();
-    }
-}
-
 var ActionType;
 (function (ActionType) {
     ActionType["Basic"] = "basic";
@@ -1533,95 +1500,256 @@ class Column {
             switch (key) {
                 case 'title':
                     {
-                        this.title = this.title || defaults.title;
+                        this.title = this.title || defaults.title;
+                    }
+                    break;
+                case 'sortable':
+                    {
+                        if (isBoolean(defaults.sortable)) {
+                            if (this.sortable === undefined) {
+                                this.sortable = defaults.sortable;
+                            }
+                        }
+                    }
+                    break;
+                case 'class':
+                    {
+                        this.headerConfigs.mergeClassByPriority(this.colStyles, defaults.header);
+                        this.groupHeaderConfigs.mergeClassByPriority(this.colStyles, defaults.cell);
+                        this.groupFooterConfigs.mergeClassByPriority(this.colStyles, defaults.cell);
+                        this.cellConfigs.mergeClassByPriority(this.colStyles, defaults.cell);
+                        this.footerConfigs.mergeClassByPriority(this.colStyles, defaults.footer);
+                    }
+                    break;
+                case 'align':
+                    {
+                        this.headerConfigs.mergeAlignByPriority(this.colStyles, defaults.header);
+                        this.groupHeaderConfigs.mergeAlignByPriority(this.colStyles, defaults.cell);
+                        this.groupFooterConfigs.mergeAlignByPriority(this.colStyles, defaults.cell);
+                        this.cellConfigs.mergeAlignByPriority(this.colStyles, defaults.cell);
+                        this.footerConfigs.mergeAlignByPriority(this.colStyles, defaults.footer);
+                    }
+                    break;
+            }
+        });
+        this.headerConfigs.updateClasesArray();
+        this.groupHeaderConfigs.updateClasesArray();
+        this.groupFooterConfigs.updateClasesArray();
+        this.cellConfigs.updateClasesArray();
+        this.footerConfigs.updateClasesArray();
+    }
+    /**
+     * Change sorting direction
+     */
+    changeDirection() {
+        this.sortingDirection = this.sortingDirection === SortingDirection.asc ? SortingDirection.desc : SortingDirection.asc;
+    }
+    updateVisibility(value) {
+        this._attributes.visible = value;
+    }
+    updateCustomizable(value) {
+        this._attributes.customizable = value;
+    }
+    _parseConfig(config) {
+        this._attributes = config.attributes;
+        this.headerTemplate = config.headerTemplate;
+        this.groupHeaderTemplate = config.groupHeaderTemplate;
+        this.groupFooterTemplate = config.groupFooterTemplate;
+        this.cellTemplate = config.cellTemplate;
+        this.footerTemplate = config.footerTemplate;
+        this.headerConfigs = new StyleConfig(config.headerConfigs);
+        this.groupHeaderConfigs = new StyleConfig(config.groupHeaderConfigs);
+        this.groupFooterConfigs = new StyleConfig(config.groupFooterConfigs);
+        this.cellConfigs = new StyleConfig(config.cellConfigs);
+        this.footerConfigs = new StyleConfig(config.footerConfigs);
+        this.expandTrigger = config.expandTrigger;
+        this._defaultDirection = config.attributes.direction;
+    }
+}
+
+class ColumnAsyncAttribute extends BehaviorSubject {
+    constructor(value) {
+        super(Object.freeze(value));
+    }
+    next(value) {
+        const newValue = value;
+        const oldValue = this.getValue();
+        if (newValue !== oldValue) {
+            super.next(Object.freeze(value));
+        }
+    }
+}
+
+class ColumnAttributes {
+    _title;
+    _name;
+    _customizable = true;
+    _sortable;
+    _sortableDefault;
+    _direction$ = new ColumnAsyncAttribute(null);
+    _align;
+    _width;
+    _className;
+    _visible$ = new ColumnAsyncAttribute(true);
+    constructor(attrs = {}) {
+        this._init(attrs);
+    }
+    // title
+    set title(value) {
+        this._title = value;
+    }
+    get title() {
+        return this._title;
+    }
+    // name
+    set name(value) {
+        this._name = value;
+    }
+    get name() {
+        return this._name;
+    }
+    // customize
+    set customizable(value) {
+        this._customizable = value;
+    }
+    get customizable() {
+        return this._customizable;
+    }
+    // sortable
+    set sortable(value) {
+        this._sortable = value;
+    }
+    get sortable() {
+        return this._sortable;
+    }
+    // sortableDefault
+    set sortableDefault(value) {
+        this._sortableDefault = value;
+        if (this.sortableDefault) {
+            this.sortable = true;
+        }
+    }
+    get sortableDefault() {
+        return this._sortableDefault;
+    }
+    // direction
+    set direction(value) {
+        this.sortable = true;
+        this._direction$.next(value);
+    }
+    get direction() {
+        return this._direction$.value;
+    }
+    get direction$() {
+        return this._direction$.asObservable();
+    }
+    // align
+    set align(value) {
+        this._align = value;
+    }
+    get align() {
+        return this._align;
+    }
+    // width
+    set width(value) {
+        this._width = value;
+    }
+    get width() {
+        return this._width;
+    }
+    // className
+    set className(value) {
+        this._className = value;
+    }
+    get className() {
+        return this._className;
+    }
+    // visibility
+    set visible(value) {
+        this._visible$.next(value);
+    }
+    get visible() {
+        return this._visible$.getValue();
+    }
+    get visible$() {
+        return this._visible$.asObservable();
+    }
+    _init(attrs) {
+        Object.keys(attrs)
+            .forEach((key) => {
+            switch (key) {
+                case 'title':
+                    {
+                        this.title = attrs[key];
+                    }
+                    break;
+                case 'name':
+                    {
+                        this.name = attrs[key];
+                    }
+                    break;
+                case 'align':
+                    {
+                        this.align = attrs[key];
+                    }
+                    break;
+                case 'direction':
+                    {
+                        this.direction = attrs[key];
                     }
                     break;
                 case 'sortable':
                     {
-                        if (isBoolean(defaults.sortable)) {
-                            if (this.sortable === undefined) {
-                                this.sortable = defaults.sortable;
-                            }
-                        }
+                        this.sortable = attrs[key];
                     }
                     break;
-                case 'class':
+                case 'show':
                     {
-                        this.headerConfigs.mergeClassByPriority(this.colStyles, defaults.header);
-                        this.groupHeaderConfigs.mergeClassByPriority(this.colStyles, defaults.cell);
-                        this.groupFooterConfigs.mergeClassByPriority(this.colStyles, defaults.cell);
-                        this.cellConfigs.mergeClassByPriority(this.colStyles, defaults.cell);
-                        this.footerConfigs.mergeClassByPriority(this.colStyles, defaults.footer);
+                        this.visible = attrs[key];
                     }
                     break;
-                case 'align':
+                case 'visible':
                     {
-                        this.headerConfigs.mergeAlignByPriority(this.colStyles, defaults.header);
-                        this.groupHeaderConfigs.mergeAlignByPriority(this.colStyles, defaults.cell);
-                        this.groupFooterConfigs.mergeAlignByPriority(this.colStyles, defaults.cell);
-                        this.cellConfigs.mergeAlignByPriority(this.colStyles, defaults.cell);
-                        this.footerConfigs.mergeAlignByPriority(this.colStyles, defaults.footer);
+                        this.visible = attrs[key];
                     }
                     break;
             }
         });
-        this.headerConfigs.updateClasesArray();
-        this.groupHeaderConfigs.updateClasesArray();
-        this.groupFooterConfigs.updateClasesArray();
-        this.cellConfigs.updateClasesArray();
-        this.footerConfigs.updateClasesArray();
-    }
-    /**
-     * Change sorting direction
-     */
-    changeDirection() {
-        this.sortingDirection = this.sortingDirection === SortingDirection.asc ? SortingDirection.desc : SortingDirection.asc;
-    }
-    updateVisibility(value) {
-        this._attributes.visible = value;
-    }
-    updateCustomizable(value) {
-        this._attributes.customizable = value;
-    }
-    _parseConfig(config) {
-        this._attributes = config.attributes;
-        this.headerTemplate = config.headerTemplate;
-        this.groupHeaderTemplate = config.groupHeaderTemplate;
-        this.groupFooterTemplate = config.groupFooterTemplate;
-        this.cellTemplate = config.cellTemplate;
-        this.footerTemplate = config.footerTemplate;
-        this.headerConfigs = new StyleConfig(config.headerConfigs);
-        this.groupHeaderConfigs = new StyleConfig(config.groupHeaderConfigs);
-        this.groupFooterConfigs = new StyleConfig(config.groupFooterConfigs);
-        this.cellConfigs = new StyleConfig(config.cellConfigs);
-        this.footerConfigs = new StyleConfig(config.footerConfigs);
-        this.expandTrigger = config.expandTrigger;
-        this._defaultDirection = config.attributes.direction;
     }
 }
 
+class ColumnsColumn {
+    template;
+    name;
+    show;
+    title;
+    disabled;
+}
+
 class FsCellComponent {
     isColl = true;
     role = 'gridcell';
     column;
-    row; // tmp
     rowIndex;
+    row = input();
     cellContext = {};
     cellTemplate;
     _destroy$ = new Subject();
+    constructor() {
+        effect(() => {
+            const currentRow = this.row();
+            if (currentRow) {
+                this.cellContext.groupIndex = currentRow.index;
+            }
+        });
+    }
     ngOnInit() {
         this._listenGroupOpen();
     }
-    ngDoCheck() {
-        // TODO fixme remove or improve
-        if (this.row) {
-            this.cellContext.groupIndex = this.row.index;
-        }
-    }
     ngOnChanges(changes) {
         if (changes.rowIndex?.currentValue !== changes.rowIndex?.previousValue) {
             this.cellContext.index = this.rowIndex;
-            this.cellContext.groupIndex = this.row.index;
+            this.cellContext.groupIndex = this.row().index;
         }
         if (changes.column?.currentValue !== changes.column?.previousValue) {
             this._initCellContext();
@@ -1633,41 +1761,45 @@ class FsCellComponent {
         this._destroy$.complete();
     }
     _initCellContext() {
+        const currentRow = this.row();
         this.cellContext.index = this.rowIndex;
-        if (this.row) {
-            if (this.row.isGroup) {
-                this.cellContext.groupIndex = this.row.index;
+        if (currentRow) {
+            if (isGroupRow(currentRow)) {
+                this.cellContext.groupIndex = currentRow.index;
             }
-            else if (this.row.isChild || this.row.isGroupFooter) {
-                this.cellContext.groupIndex = this.row.index;
-                this.cellContext.groupRow = this.row.parent.data;
-                this.cellContext.group = this.row.parent.data;
+            else if (isChildTypeRow(currentRow)) {
+                this.cellContext.groupIndex = currentRow.index;
+                this.cellContext.groupRow = currentRow.parent.data;
+                this.cellContext.group = currentRow.parent.data;
             }
-            if (this.row.isGroup) {
-                this.cellContext.group = this.row.data;
-                this.cellContext.groupChildren = this.row.children
+            if (isGroupRow(currentRow)) {
+                this.cellContext.group = currentRow.data;
+                this.cellContext.groupChildren = currentRow.children
                     .map((child) => child.data);
             }
-            else if (this.row.isGroupFooter) {
-                this.cellContext.group = this.row.parent.data;
-                this.cellContext.groupIndex = this.row.index;
-                this.cellContext.groupChildren = this.row.parent.children
+            else if (isGroupFooterRow(currentRow)) {
+                this.cellContext.group = currentRow.parent.data;
+                this.cellContext.groupIndex = currentRow.index;
+                this.cellContext.groupChildren = currentRow.parent.children
                     .map((child) => child.data);
             }
         }
         this.cellContext.column = this.column;
-        if (this.row) {
-            this.cellContext.$implicit = this.row.data;
-            this.cellContext.row = this.row.data;
-            this.cellContext.value = this.row.data[this.column.name];
-            this.cellContext.expanded = this.row.expanded;
+        if (currentRow) {
+            this.cellContext.$implicit = currentRow.data;
+            this.cellContext.row = currentRow.data;
+            this.cellContext.value = currentRow.data[this.column.name];
+            if (isGroupRow(currentRow)) {
+                this.cellContext.expanded = currentRow.expanded;
+            }
         }
     }
     _initCellTemplate() {
-        if (this.row?.isGroup) {
+        const currentRow = this.row();
+        if (currentRow && isGroupRow(currentRow)) {
             this.cellTemplate = this.column.groupHeaderTemplate || this.column.cellTemplate;
         }
-        else if (this.row?.isGroupFooter) {
+        else if (currentRow && isGroupFooterRow(currentRow)) {
             this.cellTemplate = this.column.groupFooterTemplate || this.column.cellTemplate;
         }
         else {
@@ -1675,8 +1807,9 @@ class FsCellComponent {
         }
     }
     _listenGroupOpen() {
-        if (this.row && this.row.isGroup) {
-            this.row.expanded$
+        const currentRow = this.row();
+        if (currentRow && isGroupRow(currentRow)) {
+            currentRow.expanded$
                 .pipe(takeUntil(this._destroy$))
                 .subscribe((status) => {
                 this.cellContext.expanded = status;
@@ -1684,12 +1817,12 @@ class FsCellComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsCellComponent, isStandalone: true, selector: "[fs-cell]", inputs: { column: "column", row: "row", rowIndex: "rowIndex" }, host: { properties: { "class.fs-list-col": "this.isColl", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.7", type: FsCellComponent, isStandalone: true, selector: "[fs-cell]", inputs: { column: { classPropertyName: "column", publicName: "column", isSignal: false, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: false, isRequired: false, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.fs-list-col": "this.isColl", "attr.role": "this.role" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #defaultCellTemplate let-value=\"value\">\n  {{value}}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-cell]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #defaultCellTemplate let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n" }]
-        }], propDecorators: { isColl: [{
+            args: [{ selector: '[fs-cell]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "<ng-template [ngTemplateOutlet]=\"cellTemplate || defaultCellTemplate\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #defaultCellTemplate let-value=\"value\">\n  {{value}}\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { isColl: [{
                 type: HostBinding,
                 args: ['class.fs-list-col']
             }], role: [{
@@ -1697,8 +1830,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 args: ['attr.role']
             }], column: [{
                 type: Input
-            }], row: [{
-                type: Input
             }], rowIndex: [{
                 type: Input
             }] } });
@@ -1936,7 +2067,7 @@ class FsRowComponent {
     _renderer;
     _draggableList;
     role = 'row';
-    row;
+    row = input();
     rowActionsRaw = [];
     groupActionsRaw = [];
     hasRowActions = false;
@@ -1952,7 +2083,6 @@ class FsRowComponent {
     reorderPosition;
     reorderStrategy;
     reorderMultiple;
-    cellRefs;
     ReorderPosition = ReorderPosition;
     ReorderStrategy = ReorderStrategy;
     rowActions = [];
@@ -1972,15 +2102,6 @@ class FsRowComponent {
         this._draggableList = _draggableList;
         this._rowDiffer = _differs.find({}).create();
     }
-    get isGroupRow() {
-        return this.row.isGroup;
-    }
-    get isGroupChildRow() {
-        return this.row.isGroupChild;
-    }
-    get isGroupFooterRow() {
-        return this.row.isGroupFooter;
-    }
     get isDragDisabled() {
         return !this.selected && this.reorderMultiple && !!this.selection.selectedRows.size;
     }
@@ -1988,7 +2109,10 @@ class FsRowComponent {
         const multiple = this.reorderMultiple;
         return multiple && this.selected;
     }
-    get rowCssClass() {
+    rowCustomClass = computed(() => {
+        if (!this.row()) {
+            return;
+        }
         let classes = ['fs-list-row'];
         if (this.rowIndex % 2 !== 0) {
             classes.push('fs-list-row-odd');
@@ -1996,13 +2120,13 @@ class FsRowComponent {
         if (this.rowIndex % 2 === 0) {
             classes.push('fs-list-row-even');
         }
-        if (this.row?.isGroup) {
+        if (isGroupRow(this.row())) {
             classes.push('fs-list-row-group');
         }
-        else if (this.row?.isChild) { // TODO fix isChild & all
+        else if (isChildRow(this.row())) {
             classes.push('fs-list-row-group-child');
         }
-        else if (this.row?.isGroupFooter) {
+        else if (isGroupFooterRow(this.row())) {
             classes.push('fs-list-row-group-footer');
         }
         else {
@@ -2018,10 +2142,7 @@ class FsRowComponent {
             ];
         }
         return classes.join(' ');
-    }
-    get dragCellVisible() {
-        return !this.row.isGroup;
-    }
+    });
     get leftDragDropEnabled() {
         return this.reorderEnabled
             && this.reorderPosition === ReorderPosition.Left
@@ -2034,15 +2155,12 @@ class FsRowComponent {
     }
     ngOnInit() {
         this._initRowEvents();
-        this._initSelection();
-        if (this.row) {
+        if (this.row()) {
             this._initRowActionsUpdate();
         }
-        if (this.row && this.row.isGroup) {
-            if (this.row && this.row.isGroup && this.groupActionsRaw) {
-                this.rowActions = this.groupActionsRaw.map((action) => new RowAction(action));
-                this._filterActionsByCategories();
-            }
+        if (this.row() && isGroupRow(this.row()) && this.groupActionsRaw) {
+            this.rowActions = this.groupActionsRaw.map((action) => new RowAction(action));
+            this._filterActionsByCategories();
         }
         else if (this.rowActionsRaw) {
             this.rowActions = this.rowActionsRaw.map((action) => new RowAction(action));
@@ -2054,11 +2172,23 @@ class FsRowComponent {
             this.updateRowActions();
         }
     }
+    ngAfterViewInit() {
+        this._initSelection();
+    }
+    isGroupRow = computed(() => {
+        return isGroupRow(this.row());
+    });
+    isGroupFooterRow = computed(() => {
+        return isGroupFooterRow(this.row());
+    });
+    dragCellVisible = computed(() => {
+        return !isGroupRow(this.row());
+    });
     updateRowActions() {
         if (this.rowActions) {
             this.rowActions.forEach((action) => {
-                action.checkShowStatus(this.row.data, this.rowIndex);
-                action.updateLink(this.row.data);
+                action.checkShowStatus(this.row().data, this.rowIndex);
+                action.updateLink(this.row().data);
             });
             this._filterActionsByCategories();
         }
@@ -2077,7 +2207,7 @@ class FsRowComponent {
      * @param event
      */
     selectRow(event) {
-        this.selection.rowSelectionChange(this.row, event.checked);
+        this.selection.rowSelectionChange(this.row(), event.checked);
         this._cdRef.markForCheck();
     }
     /**
@@ -2105,7 +2235,7 @@ class FsRowComponent {
                 .listen(this.el.nativeElement, event, (evt) => {
                 this.rowEvents[event]({
                     event: evt,
-                    row: this.row.data,
+                    row: this.row().data,
                     rowIndex: this.rowIndex,
                 });
             });
@@ -2113,8 +2243,8 @@ class FsRowComponent {
         });
     }
     _initRowActionsUpdate() {
-        if (this.row.actionsUpdate$) {
-            this.row.actionsUpdate$
+        if (this.row().actionsUpdated$) {
+            this.row().actionsUpdated$
                 .pipe(takeUntil(this._destroy$))
                 .subscribe(() => {
                 this.updateRowActions();
@@ -2123,17 +2253,18 @@ class FsRowComponent {
     }
     _getRowClasses(rowClass) {
         const classes = [];
+        const currentRow = this.row();
         const options = {
             index: this.rowIndex,
-            type: this.row.type,
+            type: currentRow.type,
         };
-        if (this.row.isGroup) {
-            options.groupIndex = this.row.index;
+        if (isGroupRow(currentRow)) {
+            options.groupIndex = currentRow.index;
         }
-        else if (this.row.isChild || this.row.isGroupFooter) { // TODO fix isChild & all
-            options.groupIndex = this.row.parent.index;
+        else if (isChildTypeRow(currentRow)) {
+            options.groupIndex = currentRow.parent.index;
         }
-        const resultClass = rowClass(this.row.data, options);
+        const resultClass = rowClass(this.row().data, options);
         if (resultClass) {
             if (typeof resultClass === 'string') {
                 classes.push(resultClass);
@@ -2153,8 +2284,8 @@ class FsRowComponent {
      * Subscribe to selection change events
      */
     _initSelection() {
-        if (this.selection) {
-            this.selected = this.row && this.selection.isRowSelected(this.row.data);
+        if (this.selection && this.row()) {
+            this.selected = this.selection.isRowSelected(this.row().data);
             this.selection.selectionChange$
                 .pipe(
             // // Would like to respond only when checkbox on top is changed
@@ -2165,9 +2296,10 @@ class FsRowComponent {
             // }),
             takeUntil(this._destroy$))
                 .subscribe(() => {
-                this.selected = this.row && this.selection.isRowSelected(this.row.data);
-                if (this.row?.isGroup) {
-                    const groupSelection = this.selection.isGroupSelected(this.row);
+                const currentRow = this.row();
+                this.selected = currentRow && this.selection.isRowSelected(currentRow.data);
+                if (isGroupRow(currentRow)) {
+                    const groupSelection = this.selection.isGroupSelected(currentRow);
                     if (groupSelection === 'indeterminate') {
                         this.selected = true;
                         this.indeterminateSelected = true;
@@ -2201,11 +2333,13 @@ class FsRowComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: FsListDraggableListDirective }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowComponent, isStandalone: true, selector: "[fs-list-row]", inputs: { row: "row", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", hasRowActions: "hasRowActions", rowEvents: "rowEvents", rowClass: "rowClass", restoreMode: "restoreMode", rowIndex: "rowIndex", columns: "columns", selection: "selection", rowRemoved: "rowRemoved", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, host: { properties: { "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isGroupFooter\">\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td\n    fs-cell\n    *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n    [ngClass]=\"{ 'primary-col': isFirst }\"\n    [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n    class=\"fs-list-col actions-col\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions\n      [row]=\"row\"\n      [index]=\"rowIndex\"\n      [rowActions]=\"rowActions\"\n      [menuRowActions]=\"menuRowActions\"\n      [inlineRowActions]=\"inlineRowActions\"\n      [restoreAction]=\"restoreAction\"\n      [restoreMode]=\"restoreMode\"\n      [rowRemoved]=\"rowRemoved\">\n    </fs-list-row-actions>\n  </ng-container>\n</td>\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td\n        class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\">\n      <mat-icon>\n        drag_handle\n      </mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>", styles: [":host.drag-hidden{display:none}:host.draggable{opacity:.8;position:fixed;z-index:9999;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:5px}:host.draggable td{border:none;background-color:#fff}:host.draggable-elem td{background-color:#c3c3c3}:host.fs-list-row-clickable{cursor:pointer}td.drag-col{width:1%!important;white-space:nowrap;text-align:center;cursor:grab}td.drag-col.drag-disabled{opacity:.4;cursor:no-drop}td.drag-col mat-icon{display:flex}td.fs-list-col-selection{padding:10px;width:1%!important}td.actions-col{width:1%;white-space:nowrap;overflow:hidden}td.actions-col .row-inline-action{margin-left:12px;display:inline-block}td.actions-col .row-inline-action:first-child{margin-left:0}td.actions-col .row-inline-action-icon,td.actions-col .row-inline-action-fab,td.actions-col .row-inline-action-mini-fab,td.actions-col .row-menu-action{width:35px;justify-content:center;align-items:center}td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.7", type: FsRowComponent, isStandalone: true, selector: "[fs-list-row]", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rowActionsRaw: { classPropertyName: "rowActionsRaw", publicName: "rowActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, groupActionsRaw: { classPropertyName: "groupActionsRaw", publicName: "groupActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, hasRowActions: { classPropertyName: "hasRowActions", publicName: "hasRowActions", isSignal: false, isRequired: false, transformFunction: null }, rowEvents: { classPropertyName: "rowEvents", publicName: "rowEvents", isSignal: false, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: false, isRequired: false, transformFunction: null }, restoreMode: { classPropertyName: "restoreMode", publicName: "restoreMode", isSignal: false, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, rowRemoved: { classPropertyName: "rowRemoved", publicName: "rowRemoved", isSignal: false, isRequired: false, transformFunction: null }, activeFiltersCount: { classPropertyName: "activeFiltersCount", publicName: "activeFiltersCount", isSignal: false, isRequired: false, transformFunction: null }, reorderEnabled: { classPropertyName: "reorderEnabled", publicName: "reorderEnabled", isSignal: false, isRequired: false, transformFunction: null }, reorderPosition: { classPropertyName: "reorderPosition", publicName: "reorderPosition", isSignal: false, isRequired: false, transformFunction: null }, reorderStrategy: { classPropertyName: "reorderStrategy", publicName: "reorderStrategy", isSignal: false, isRequired: false, transformFunction: null }, reorderMultiple: { classPropertyName: "reorderMultiple", publicName: "reorderMultiple", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.rowCustomClass()", "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection" } }, ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!isGroupFooterRow()\">\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td\n    fs-cell\n    *ngIf=\"(isGroupRow() && !column.groupHeaderColspanned)\n        || (isGroupFooterRow() && !column.groupFooterColspanned)\n        || (!isGroupRow() && !isGroupFooterRow() && !column.cellColspanned)\"\n    [column]=\"column\"\n    [row]=\"row()\"\n    [rowIndex]=\"rowIndex\"\n    [class]=\"(isGroupRow() && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow() && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow() && column.cellConfigs.classesString)\"\n    [ngClass]=\"{ 'primary-col': isFirst }\"\n    [attr.colspan]=\"(isGroupRow() && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow() && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n    class=\"fs-list-col actions-col\">\n  <ng-container *ngIf=\"!isGroupFooterRow()\">\n    <fs-list-row-actions\n      [row]=\"row()\"\n      [index]=\"rowIndex\"\n      [rowActions]=\"rowActions\"\n      [menuRowActions]=\"menuRowActions\"\n      [inlineRowActions]=\"inlineRowActions\"\n      [restoreAction]=\"restoreAction\"\n      [restoreMode]=\"restoreMode\"\n      [rowRemoved]=\"rowRemoved\">\n    </fs-list-row-actions>\n  </ng-container>\n</td>\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible() && !isGroupFooterRow(); else emptyCell\">\n    <td\n        class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\">\n      <mat-icon>\n        drag_handle\n      </mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>\n", styles: [":host.drag-hidden{display:none}:host.draggable{opacity:.8;position:fixed;z-index:9999;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:5px}:host.draggable td{border:none;background-color:#fff}:host.draggable-elem td{background-color:#c3c3c3}:host.fs-list-row-clickable{cursor:pointer}td.drag-col{width:1%!important;white-space:nowrap;text-align:center;cursor:grab}td.drag-col.drag-disabled{opacity:.4;cursor:no-drop}td.drag-col mat-icon{display:flex}td.fs-list-col-selection{padding:10px;width:1%!important}td.actions-col{width:1%;white-space:nowrap;overflow:hidden}td.actions-col .row-inline-action{margin-left:12px;display:inline-block}td.actions-col .row-inline-action:first-child{margin-left:0}td.actions-col .row-inline-action-icon,td.actions-col .row-inline-action-fab,td.actions-col .row-inline-action-mini-fab,td.actions-col .row-menu-action{width:35px;justify-content:center;align-items:center}td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "rowIndex", "row"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-list-row]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+            args: [{ selector: '[fs-list-row]', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': "this.rowCustomClass()",
+                    }, standalone: true, imports: [
                         NgIf,
                         NgTemplateOutlet,
                         MatCheckbox,
@@ -2215,12 +2349,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         FsRowActionsComponent,
                         MatIcon,
                         AsyncPipe,
-                    ], template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isGroupFooter\">\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td\n    fs-cell\n    *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n    [ngClass]=\"{ 'primary-col': isFirst }\"\n    [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n    class=\"fs-list-col actions-col\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions\n      [row]=\"row\"\n      [index]=\"rowIndex\"\n      [rowActions]=\"rowActions\"\n      [menuRowActions]=\"menuRowActions\"\n      [inlineRowActions]=\"inlineRowActions\"\n      [restoreAction]=\"restoreAction\"\n      [restoreMode]=\"restoreMode\"\n      [rowRemoved]=\"rowRemoved\">\n    </fs-list-row-actions>\n  </ng-container>\n</td>\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td\n        class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\">\n      <mat-icon>\n        drag_handle\n      </mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>", styles: [":host.drag-hidden{display:none}:host.draggable{opacity:.8;position:fixed;z-index:9999;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:5px}:host.draggable td{border:none;background-color:#fff}:host.draggable-elem td{background-color:#c3c3c3}:host.fs-list-row-clickable{cursor:pointer}td.drag-col{width:1%!important;white-space:nowrap;text-align:center;cursor:grab}td.drag-col.drag-disabled{opacity:.4;cursor:no-drop}td.drag-col mat-icon{display:flex}td.fs-list-col-selection{padding:10px;width:1%!important}td.actions-col{width:1%;white-space:nowrap;overflow:hidden}td.actions-col .row-inline-action{margin-left:12px;display:inline-block}td.actions-col .row-inline-action:first-child{margin-left:0}td.actions-col .row-inline-action-icon,td.actions-col .row-inline-action-fab,td.actions-col .row-inline-action-mini-fab,td.actions-col .row-menu-action{width:35px;justify-content:center;align-items:center}td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"] }]
+                    ], template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!isGroupFooterRow()\">\n      <mat-checkbox\n        (change)=\"selectRow($event)\"\n        [checked]=\"selected\"\n        [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td\n    fs-cell\n    *ngIf=\"(isGroupRow() && !column.groupHeaderColspanned)\n        || (isGroupFooterRow() && !column.groupFooterColspanned)\n        || (!isGroupRow() && !isGroupFooterRow() && !column.cellColspanned)\"\n    [column]=\"column\"\n    [row]=\"row()\"\n    [rowIndex]=\"rowIndex\"\n    [class]=\"(isGroupRow() && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow() && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow() && column.cellConfigs.classesString)\"\n    [ngClass]=\"{ 'primary-col': isFirst }\"\n    [attr.colspan]=\"(isGroupRow() && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow() && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n    *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n    class=\"fs-list-col actions-col\">\n  <ng-container *ngIf=\"!isGroupFooterRow()\">\n    <fs-list-row-actions\n      [row]=\"row()\"\n      [index]=\"rowIndex\"\n      [rowActions]=\"rowActions\"\n      [menuRowActions]=\"menuRowActions\"\n      [inlineRowActions]=\"inlineRowActions\"\n      [restoreAction]=\"restoreAction\"\n      [restoreMode]=\"restoreMode\"\n      [rowRemoved]=\"rowRemoved\">\n    </fs-list-row-actions>\n  </ng-container>\n</td>\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible() && !isGroupFooterRow(); else emptyCell\">\n    <td\n        class=\"fs-list-col drag-col\"\n        [class.drag-disabled]=\"isDragDisabled\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\">\n      <mat-icon>\n        drag_handle\n      </mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>\n", styles: [":host.drag-hidden{display:none}:host.draggable{opacity:.8;position:fixed;z-index:9999;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:5px}:host.draggable td{border:none;background-color:#fff}:host.draggable-elem td{background-color:#c3c3c3}:host.fs-list-row-clickable{cursor:pointer}td.drag-col{width:1%!important;white-space:nowrap;text-align:center;cursor:grab}td.drag-col.drag-disabled{opacity:.4;cursor:no-drop}td.drag-col mat-icon{display:flex}td.fs-list-col-selection{padding:10px;width:1%!important}td.actions-col{width:1%;white-space:nowrap;overflow:hidden}td.actions-col .row-inline-action{margin-left:12px;display:inline-block}td.actions-col .row-inline-action:first-child{margin-left:0}td.actions-col .row-inline-action-icon,td.actions-col .row-inline-action-fab,td.actions-col .row-inline-action-mini-fab,td.actions-col .row-menu-action{width:35px;justify-content:center;align-items:center}td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: FsListDraggableListDirective }], propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], row: [{
-                type: Input
             }], rowActionsRaw: [{
                 type: Input
             }], groupActionsRaw: [{
@@ -2254,15 +2386,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                 type: Input
             }], reorderMultiple: [{
                 type: Input
-            }], cellRefs: [{
-                type: ViewChildren,
-                args: ['td']
             }], isMultipleSelection: [{
                 type: HostBinding,
                 args: ['class.multiple-selection']
-            }], rowCssClass: [{
-                type: HostBinding,
-                args: ['class']
             }] } });
 
 class FsListDraggableRowDirective {
@@ -2315,8 +2441,8 @@ class FsListDraggableRowDirective {
         this.row.readyToSwap = this._reorderController.moveDropCallback({
             row1: currentEl?.data,
             row2: targetEl?.data,
-            group1: currentEl?.parent?.data,
-            group2: targetEl?.parent?.data,
+            group1: isChildTypeRow(currentEl) ? currentEl.parent?.data : null,
+            group2: isChildTypeRow(targetEl) ? targetEl.parent?.data : null,
         });
         if (!this.row.readyToSwap) {
             this._renderer.addClass(this._el.nativeElement, 'fs-list-swap-restricted');
@@ -2569,11 +2695,11 @@ class FsFooterCellComponent extends FsCellComponent {
         super();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterCellComponent, isStandalone: true, selector: "[fs-list-footer-cell]", usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #cell let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterCellComponent, isStandalone: true, selector: "[fs-list-footer-cell]", usesInheritance: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #cell let-value=\"value\">\n  {{value}}\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterCellComponent, decorators: [{
             type: Component,
-            args: [{ selector: '[fs-list-footer-cell]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\r\n\r\n<ng-template #cell let-value=\"value\">\r\n  {{value}}\r\n</ng-template>\r\n" }]
+            args: [{ selector: '[fs-list-footer-cell]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgTemplateOutlet], template: "<ng-template [ngTemplateOutlet]=\"column.footerTemplate || cell\" [ngTemplateOutletContext]=\"cellContext\"></ng-template>\n\n<ng-template #cell let-value=\"value\">\n  {{value}}\n</ng-template>\n" }]
         }], ctorParameters: () => [] });
 
 class FsFooterRowComponent extends FsRowComponent {
@@ -2581,7 +2707,7 @@ class FsFooterRowComponent extends FsRowComponent {
         super(el, cdRef, differs, renderer, null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterRowComponent, isStandalone: true, selector: "[fs-list-footer-row]", usesInheritance: true, ngImport: i0, template: "<td\n  *ngIf=\"leftDragDropEnabled\"\n  class=\"fs-list-col drag-col\">\n</td>\n<td\n  *ngIf=\"selection\"\n  class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td\n    *ngIf=\"!column.footerColspanned\"\n    fs-list-footer-cell\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [ngClass]=\"column.footerConfigs.classesArray\"\n    [attr.colspan]=\"column.footerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<td\n  *ngIf=\"rightDragDropEnabled\"\n  class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterRowComponent, isStandalone: true, selector: "[fs-list-footer-row]", usesInheritance: true, ngImport: i0, template: "<td\n  *ngIf=\"leftDragDropEnabled\"\n  class=\"fs-list-col drag-col\">\n</td>\n<td\n  *ngIf=\"selection\"\n  class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td\n    *ngIf=\"!column.footerColspanned\"\n    fs-list-footer-cell\n    [column]=\"column\"\n    [row]=\"row()\"\n    [rowIndex]=\"rowIndex\"\n    [ngClass]=\"column.footerConfigs.classesArray\"\n    [attr.colspan]=\"column.footerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<td\n  *ngIf=\"rightDragDropEnabled\"\n  class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->\n", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterRowComponent, decorators: [{
             type: Component,
@@ -2590,7 +2716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                         NgFor,
                         FsFooterCellComponent,
                         NgClass,
-                    ], template: "<td\n  *ngIf=\"leftDragDropEnabled\"\n  class=\"fs-list-col drag-col\">\n</td>\n<td\n  *ngIf=\"selection\"\n  class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td\n    *ngIf=\"!column.footerColspanned\"\n    fs-list-footer-cell\n    [column]=\"column\"\n    [row]=\"row\"\n    [rowIndex]=\"rowIndex\"\n    [ngClass]=\"column.footerConfigs.classesArray\"\n    [attr.colspan]=\"column.footerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<td\n  *ngIf=\"rightDragDropEnabled\"\n  class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"] }]
+                    ], template: "<td\n  *ngIf=\"leftDragDropEnabled\"\n  class=\"fs-list-col drag-col\">\n</td>\n<td\n  *ngIf=\"selection\"\n  class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td\n    *ngIf=\"!column.footerColspanned\"\n    fs-list-footer-cell\n    [column]=\"column\"\n    [row]=\"row()\"\n    [rowIndex]=\"rowIndex\"\n    [ngClass]=\"column.footerConfigs.classesArray\"\n    [attr.colspan]=\"column.footerConfigs.colspan\"\n    [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n<!-- Drag -->\n<td\n  *ngIf=\"rightDragDropEnabled\"\n  class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->\n", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }] });
 
 class FsFooterComponent {
@@ -2657,157 +2783,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
                     ], template: "<div class=\"wrap\">\n  <span class=\"title\">\n    <ng-template [ngIf]=\"!column.headerTemplate\">\n      {{ column.title }}\n    </ng-template>\n    <ng-template\n      [ngIf]=\"column.headerTemplate\"\n      [ngTemplateOutlet]=\"column.headerTemplate\"\n      [ngTemplateOutletContext]=\"cellContext\">\n    </ng-template>\n  </span>\n  <div\n      class=\"direction\"\n      *ngIf=\"column.ordered\"\n      [ngSwitch]=\"column.sortingDirection$ | async\">\n    <mat-icon *ngSwitchCase=\"'asc'\">\n      arrow_downward\n    </mat-icon>\n    <mat-icon *ngSwitchCase=\"'desc'\">\n      arrow_upward\n    </mat-icon>\n  </div>\n</div>", styles: [".wrap{display:inline-flex;align-items:center}.wrap mat-icon{font-size:14px;display:block;height:14px;width:14px}.wrap .direction{margin-left:5px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }] });
 
-class ColumnAsyncAttribute extends BehaviorSubject {
-    constructor(value) {
-        super(Object.freeze(value));
-    }
-    next(value) {
-        const newValue = value;
-        const oldValue = this.getValue();
-        if (newValue !== oldValue) {
-            super.next(Object.freeze(value));
-        }
-    }
-}
-
-class ColumnAttributes {
-    _title;
-    _name;
-    _customizable = true;
-    _sortable;
-    _sortableDefault;
-    _direction$ = new ColumnAsyncAttribute(null);
-    _align;
-    _width;
-    _className;
-    _visible$ = new ColumnAsyncAttribute(true);
-    constructor(attrs = {}) {
-        this._init(attrs);
-    }
-    // title
-    set title(value) {
-        this._title = value;
-    }
-    get title() {
-        return this._title;
-    }
-    // name
-    set name(value) {
-        this._name = value;
-    }
-    get name() {
-        return this._name;
-    }
-    // customize
-    set customizable(value) {
-        this._customizable = value;
-    }
-    get customizable() {
-        return this._customizable;
-    }
-    // sortable
-    set sortable(value) {
-        this._sortable = value;
-    }
-    get sortable() {
-        return this._sortable;
-    }
-    // sortableDefault
-    set sortableDefault(value) {
-        this._sortableDefault = value;
-        if (this.sortableDefault) {
-            this.sortable = true;
-        }
-    }
-    get sortableDefault() {
-        return this._sortableDefault;
-    }
-    // direction
-    set direction(value) {
-        this.sortable = true;
-        this._direction$.next(value);
-    }
-    get direction() {
-        return this._direction$.value;
-    }
-    get direction$() {
-        return this._direction$.asObservable();
-    }
-    // align
-    set align(value) {
-        this._align = value;
-    }
-    get align() {
-        return this._align;
-    }
-    // width
-    set width(value) {
-        this._width = value;
-    }
-    get width() {
-        return this._width;
-    }
-    // className
-    set className(value) {
-        this._className = value;
-    }
-    get className() {
-        return this._className;
-    }
-    // visibility
-    set visible(value) {
-        this._visible$.next(value);
-    }
-    get visible() {
-        return this._visible$.getValue();
-    }
-    get visible$() {
-        return this._visible$.asObservable();
-    }
-    _init(attrs) {
-        Object.keys(attrs)
-            .forEach((key) => {
-            switch (key) {
-                case 'title':
-                    {
-                        this.title = attrs[key];
-                    }
-                    break;
-                case 'name':
-                    {
-                        this.name = attrs[key];
-                    }
-                    break;
-                case 'align':
-                    {
-                        this.align = attrs[key];
-                    }
-                    break;
-                case 'direction':
-                    {
-                        this.direction = attrs[key];
-                    }
-                    break;
-                case 'sortable':
-                    {
-                        this.sortable = attrs[key];
-                    }
-                    break;
-                case 'show':
-                    {
-                        this.visible = attrs[key];
-                    }
-                    break;
-                case 'visible':
-                    {
-                        this.visible = attrs[key];
-                    }
-                    break;
-            }
-        });
-    }
-}
-
 class SortingController {
     config;
     sortingColumns = [];
@@ -3058,9 +3033,10 @@ class FsHeadComponent {
      * Track By for improve change detection
      *
      * @param index
+     * @param column
      */
-    trackByFn(index) {
-        return index;
+    trackByFn(index, column) {
+        return column.name || column.title || index;
     }
     /**
      * Subscribe to sorting change
@@ -3389,7 +3365,7 @@ class DataController {
     }
     get reorderData() {
         return this._rowsStack
-            .map((row) => row.getReorderData());
+            .map((row) => row.reorderData());
     }
     setGroupConfig(group) {
         if (group) {
@@ -3443,12 +3419,12 @@ class DataController {
         const rowIndex = this._rowsStack.findIndex((listRow) => {
             return trackBy(listRow.data, targetRow);
         });
-        if (rowIndex > -1) {
-            this._rowsStack[rowIndex] = new Row(targetRow, RowType.Simple, { initialExpand: this._initialExpand });
-            this._updateVisibleRows();
-            return true;
+        if (rowIndex === -1) {
+            return false;
         }
-        return false;
+        this._rowsStack[rowIndex] = makeRowFactory(targetRow, RowType.Simple);
+        this._updateVisibleRows();
+        return true;
     }
     /**
      * Update data for specified row
@@ -3532,7 +3508,7 @@ class DataController {
     }
     toggleRowGroup(rowData) {
         const row = this.visibleRows.find((visibleRow) => visibleRow.data === rowData);
-        row.toggleRowExpandStatus();
+        row?.toggleRowExpandStatus();
         this._updateVisibleRows();
     }
     finishReorder() {
@@ -3541,7 +3517,7 @@ class DataController {
             let group;
             this._rowsStack
                 .forEach((row, index) => {
-                if (row.isGroup && row !== group) {
+                if (isGroupRow(row) && row !== group) {
                     group = row;
                 }
                 else {
@@ -3559,7 +3535,7 @@ class DataController {
         }
         else {
             rows = rows.map((row) => {
-                return new Row(row, RowType.Simple, { initialExpand: this._initialExpand });
+                return makeRowFactory(row, RowType.Simple);
             });
             this._rowsStack = [...rows];
         }
@@ -3570,7 +3546,7 @@ class DataController {
         }
         else {
             rows = rows.map((row) => {
-                return new Row(row, RowType.Simple, { initialExpand: this._initialExpand });
+                return makeRowFactory(row, RowType.Simple);
             });
             this._rowsStack = [...this._rowsStack, ...rows];
         }
@@ -3581,7 +3557,7 @@ class DataController {
     _updateVisibleRows() {
         this.visibleRows = this._rowsStack
             .filter((row) => {
-            return (!row.isChild && !row.isGroupFooter) || row.visible;
+            return !isChildTypeRow(row) || row.visible;
         });
     }
     _updateRow(targetRow, trackBy) {
@@ -3594,7 +3570,7 @@ class DataController {
         if (targetIndex !== -1) {
             const updateTarget = this._rowsStack[targetIndex];
             const updatedData = { ...updateTarget.data, ...targetRow };
-            this._rowsStack[targetIndex] = new Row(updatedData, updateTarget.type, {
+            this._rowsStack[targetIndex] = makeRowFactory(updatedData, updateTarget.type, {
                 parent: updateTarget.parent,
                 initialExpand: updateTarget.expanded,
             });
@@ -3627,21 +3603,17 @@ class DataController {
         }
         const groupRows = [];
         rows.forEach((row) => {
-            const mainGroup = this._groupByFn(row);
-            const mainGroupKey = this._compareByFn(mainGroup);
-            if (!this._store.has(mainGroupKey)) {
-                const group = new GroupRow(mainGroup, this._initialExpand);
+            const groupData = this._groupByFn(row);
+            const groupKey = this._compareByFn(groupData);
+            let group = this._store.get(groupKey);
+            if (!group) {
+                group = makeRowFactory(groupData, RowType.Group, { initialExpand: this._initialExpand });
                 group.index = groupRows.length;
                 groupRows.push(group);
-                const childRow = new ChildRow(row, group);
-                this._store.set(mainGroupKey, group);
-                group.children.push(childRow);
-            }
-            else {
-                const group = this._store.get(mainGroupKey);
-                const childRow = new ChildRow(row, group);
-                group.children.push(childRow);
+                this._store.set(groupKey, group);
             }
+            const childRow = makeRowFactory(row, RowType.GroupChild, { parent: group });
+            group.children.push(childRow);
         });
         groupRows.forEach((groupRow) => {
             const footerIndex = groupRow.children
@@ -3653,12 +3625,13 @@ class DataController {
             });
             if (footerIndex !== -1) {
                 const footerRow = groupRow.children.splice(footerIndex, footerIndex + 1)[0];
-                groupRow.children.push(new GroupFooterRow(footerRow.data, groupRow));
+                const newRow = makeRowFactory(footerRow.data, RowType.GroupFooter, { parent: groupRow });
+                groupRow.children.push(newRow);
             }
         });
         return Array.from(this._store.values())
             .reduce((acc, item) => {
-            if (item.isGroup) {
+            if (isGroupRow(item)) {
                 acc.push(item, ...item.children);
             }
             else {
@@ -3852,7 +3825,7 @@ class ActionsController {
         action.click = () => {
             this._filterRef.updateActions([this._doneAction]);
             this._filterRef.hideKeywordField();
-            this._filterRef.hideFiltersBtn();
+            this._filterRef.hideFilters();
             actionClickFn(null);
         };
         this._reorderAction = action;
@@ -3863,7 +3836,7 @@ class ActionsController {
         this._doneAction.click = () => {
             this._filterRef.updateActions(this._actions);
             this._filterRef.showKeywordField();
-            this._filterRef.showFiltersBtn();
+            this._filterRef.showFilters();
             actionClickFn(null);
         };
     }
@@ -4945,7 +4918,6 @@ class List {
         if (this.filterConfig) {
             return;
         }
-        const sortValues = this.sorting.makeSortingList();
         const sortConfig = this.sorting.sortingColumn
             ? { value: this.sorting.sortingColumn.name, direction: this.sorting.sortingColumn.direction }
             : null;
@@ -4956,7 +4928,6 @@ class List {
             actions: this.actions.actions,
             queryParam: this.queryParam,
             autofocus: this.autoFocus,
-            sorts: sortValues,
             sort: sortConfig,
             chips: this.chips,
             autoReload: this.autoReload,
@@ -4970,7 +4941,6 @@ class List {
         if (this._persistance.queryEnabled) {
             this.filterConfig.persist = {
                 name: this._persistance.name,
-                persistQuery: true,
             };
         }
     }
@@ -5502,11 +5472,11 @@ class FsListLoaderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListLoaderComponent, isStandalone: true, selector: "fs-list-loader", inputs: { columns: "columns", loaderLines: "loaderLines" }, usesOnChanges: true, ngImport: i0, template: "<table>\r\n  <thead>\r\n    <tr>\r\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let row of rows; let index=index\">\r\n      <td *ngFor=\"let col of cols; let column = index\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsListLoaderComponent, isStandalone: true, selector: "fs-list-loader", inputs: { columns: "columns", loaderLines: "loaderLines" }, usesOnChanges: true, ngImport: i0, template: "<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows; let index=index\">\n      <td *ngFor=\"let col of cols; let column = index\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-list-loader', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor], template: "<table>\r\n  <thead>\r\n    <tr>\r\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\r\n      </th>\r\n    </tr>\r\n  </thead>\r\n  <tbody>\r\n    <tr *ngFor=\"let row of rows; let index=index\">\r\n      <td *ngFor=\"let col of cols; let column = index\">\r\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\r\n      </td>\r\n    </tr>\r\n  </tbody>\r\n</table>\r\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"] }]
+            args: [{ selector: 'fs-list-loader', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgFor], template: "<table>\n  <thead>\n    <tr>\n      <th *ngFor=\"let col of cols; let column = index\" [width]=\"widths[column] + '%'\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"(placeholderWidths[0][column]/2)  + '%'\"></div>\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of rows; let index=index\">\n      <td *ngFor=\"let col of cols; let column = index\">\n        <div class=\"fs-skeleton-placeholder\" [style.width]=\"placeholderWidths[index][column] + '%'\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n", styles: ["table{width:100%;border-spacing:0}.fs-skeleton-placeholder{opacity:.5}:host ::ng-deep tbody tr:hover td{background:transparent}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], loaderLines: [{
@@ -5923,8 +5893,8 @@ class FsListComponent {
             .pipe(takeUntil(this._destroy))
             .subscribe((row) => {
             this.list.dataController.removeData(row);
-            this.body.rows
-                .forEach((bodyRow) => bodyRow.actionsUpdate());
+            this.list.dataController.visibleRows
+                .forEach((row) => row.updateActions());
         });
     }
     _subscribeToGroupExpandStatusChange() {