@firestitch/list 12.1.5 → 12.3.0

package/bundles/firestitch-list.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/core'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner'), require('@angular/flex-layout'), require('@firestitch/filter'), require('@firestitch/scroll'), require('@firestitch/menu'), require('@firestitch/prompt'), require('@firestitch/file'), require('lodash-es'), require('rxjs'), require('rxjs/operators'), require('@firestitch/common'), require('tsmodels'), require('@firestitch/store'), require('@firestitch/selection'), require('@firestitch/drawer'), require('@angular/flex-layout/extended'), require('@angular/flex-layout/flex')) :
-    typeof define === 'function' && define.amd ? define('@firestitch/list', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/checkbox', '@angular/material/core', '@angular/material/dialog', '@angular/material/icon', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/progress-spinner', '@angular/flex-layout', '@firestitch/filter', '@firestitch/scroll', '@firestitch/menu', '@firestitch/prompt', '@firestitch/file', 'lodash-es', 'rxjs', 'rxjs/operators', '@firestitch/common', 'tsmodels', '@firestitch/store', '@firestitch/selection', '@firestitch/drawer', '@angular/flex-layout/extended', '@angular/flex-layout/flex'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.list = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.checkbox, global.ng.material.core, global.ng.material.dialog, global.ng.material.icon, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.progressSpinner, global.ng.flexLayout, global.i2, global.i2$4, global.i2$3, global.i1$1, global.i4$1, global.lodashEs, global.rxjs, global.rxjs.operators, global.common, global.tsmodels, global.i1, global.i3$3, global.i9, global.ng.flexLayout.extended, global.ng.flexLayout.flex));
-})(this, (function (exports, i0, i3$1, i6$1, i2$2, i2$1, i4$2, i4, i3, menu, i6, progressSpinner, flexLayout, i2, i2$4, i2$3, i1$1, i4$1, lodashEs, rxjs, operators, common, tsmodels, i1, i3$3, i9, i5, i3$2) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/core'), require('@angular/material/dialog'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/progress-spinner'), require('@angular/flex-layout'), require('@firestitch/filter'), require('@firestitch/scroll'), require('@firestitch/menu'), require('@firestitch/prompt'), require('@firestitch/file'), require('lodash-es'), require('rxjs'), require('rxjs/operators'), require('@firestitch/common'), require('@firestitch/store'), require('@firestitch/selection'), require('@firestitch/drawer'), require('@angular/flex-layout/extended'), require('@angular/flex-layout/flex')) :
+    typeof define === 'function' && define.amd ? define('@firestitch/list', ['exports', '@angular/core', '@angular/common', '@angular/router', '@angular/material/button', '@angular/material/checkbox', '@angular/material/core', '@angular/material/dialog', '@angular/material/icon', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/progress-spinner', '@angular/flex-layout', '@firestitch/filter', '@firestitch/scroll', '@firestitch/menu', '@firestitch/prompt', '@firestitch/file', 'lodash-es', 'rxjs', 'rxjs/operators', '@firestitch/common', '@firestitch/store', '@firestitch/selection', '@firestitch/drawer', '@angular/flex-layout/extended', '@angular/flex-layout/flex'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.firestitch = global.firestitch || {}, global.firestitch.list = {}), global.ng.core, global.ng.common, global.ng.router, global.ng.material.button, global.ng.material.checkbox, global.ng.material.core, global.ng.material.dialog, global.ng.material.icon, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.progressSpinner, global.ng.flexLayout, global.i2, global.i2$4, global.i2$3, global.i1$1, global.i4$1, global.lodashEs, global.rxjs, global.rxjs.operators, global.common, global.i1, global.i3$3, global.i9, global.ng.flexLayout.extended, global.ng.flexLayout.flex));
+})(this, (function (exports, i0, i3$1, i6$1, i2$2, i2$1, i4$2, i4, i3, menu, i6, progressSpinner, flexLayout, i2, i2$4, i2$3, i1$1, i4$1, lodashEs, rxjs, operators, common, i1, i3$3, i9, i5, i3$2) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -360,16 +360,13 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var StyleConfig = /** @class */ (function (_super) {
-        __extends(StyleConfig, _super);
+    var StyleConfig = /** @class */ (function () {
         function StyleConfig(config) {
             if (config === void 0) { config = {}; }
-            var _this = _super.call(this) || this;
-            _this.className = []; // Can't be used in tempaltes!
-            _this.classesArray = []; // Can be used in tempaltes
-            _this.classesString = '';
-            _this._fromJSON(config);
-            return _this;
+            this.className = []; // Can't be used in tempaltes!
+            this.classesArray = []; // Can be used in tempaltes
+            this.classesString = '';
+            this._init(config);
         }
         /**
          * Create static array of styles for using in templates
@@ -419,6 +416,11 @@
             }
             this.className = targetValue;
         };
+        StyleConfig.prototype._init = function (config) {
+            this.colspan = config.colspan;
+            this.align = config.align;
+            this.className = config.className;
+        };
         /**
          * Merge params into array
          * @param to
@@ -433,19 +435,7 @@
             }
         };
         return StyleConfig;
-    }(tsmodels.Model));
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], StyleConfig.prototype, "colspan", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", String)
-    ], StyleConfig.prototype, "align", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], StyleConfig.prototype, "className", void 0);
+    }());
 
     exports.SortingDirection = void 0;
     (function (SortingDirection) {
@@ -462,11 +452,13 @@
         function Column(colConfig, colDefaults) {
             if (colDefaults === void 0) { colDefaults = false; }
             this.headerConfigs = new StyleConfig();
-            this.groupCellConfigs = new StyleConfig();
+            this.groupHeaderConfigs = new StyleConfig();
+            this.groupFooterConfigs = new StyleConfig();
             this.cellConfigs = new StyleConfig();
             this.footerConfigs = new StyleConfig();
             this.headerColspanned = false;
-            this.groupCellColspanned = false;
+            this.groupHeaderColspanned = false;
+            this.groupFooterColspanned = false;
             this.cellColspanned = false;
             this.footerColspanned = false;
             this._ordered = false;
@@ -611,7 +603,8 @@
                     case 'class':
                         {
                             _this.headerConfigs.mergeClassByPriority(_this.colStyles, defaults.header);
-                            _this.groupCellConfigs.mergeClassByPriority(_this.colStyles, defaults.cell);
+                            _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);
                         }
@@ -619,7 +612,8 @@
                     case 'align':
                         {
                             _this.headerConfigs.mergeAlignByPriority(_this.colStyles, defaults.header);
-                            _this.groupCellConfigs.mergeAlignByPriority(_this.colStyles, defaults.cell);
+                            _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);
                         }
@@ -627,7 +621,8 @@
                 }
             });
             this.headerConfigs.updateClasesArray();
-            this.groupCellConfigs.updateClasesArray();
+            this.groupHeaderConfigs.updateClasesArray();
+            this.groupFooterConfigs.updateClasesArray();
             this.cellConfigs.updateClasesArray();
             this.footerConfigs.updateClasesArray();
         };
@@ -648,11 +643,13 @@
         Column.prototype._parseConfig = function (config) {
             this._attributes = config.attributes;
             this.headerTemplate = config.headerTemplate;
-            this.groupCellTemplate = config.groupCellTemplate;
+            this.groupHeaderTemplate = config.groupHeaderTemplate;
+            this.groupFooterTemplate = config.groupFooterTemplate;
             this.cellTemplate = config.cellTemplate;
             this.footerTemplate = config.footerTemplate;
             this.headerConfigs = new StyleConfig(config.headerConfigs);
-            this.groupCellConfigs = new StyleConfig(config.groupCellConfigs);
+            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;
@@ -669,20 +666,17 @@
         ActionType["MiniFab"] = "mini-fab";
     })(exports.ActionType || (exports.ActionType = {}));
 
-    var RowAction = /** @class */ (function (_super) {
-        __extends(RowAction, _super);
+    var RowAction = /** @class */ (function () {
         function RowAction(config) {
             if (config === void 0) { config = {}; }
-            var _this = _super.call(this) || this;
-            _this.label = '';
-            _this.classArray = [];
-            _this.isShown = true;
-            _this._isGroup = false;
-            _this._fromJSON(config);
-            if (Array.isArray(_this.rowActions)) {
-                _this._isGroup = true;
+            this.label = '';
+            this.classArray = [];
+            this.isShown = true;
+            this._isGroup = false;
+            this._init(config);
+            if (Array.isArray(this.rowActions)) {
+                this._isGroup = true;
             }
-            return _this;
         }
         Object.defineProperty(RowAction.prototype, "isGroup", {
             get: function () {
@@ -691,15 +685,17 @@
             enumerable: false,
             configurable: true
         });
-        RowAction.prototype._fromJSON = function (value) {
+        RowAction.prototype._init = function (value) {
             var _this = this;
-            _super.prototype._fromJSON.call(this, value);
-            if (value.type === void 0) {
-                this.type = exports.ActionType.Basic;
-            }
-            if (this.menu === void 0) {
-                this.menu = true;
-            }
+            var _a, _b, _c;
+            this.icon = value.icon;
+            this.menu = (_a = value.menu) !== null && _a !== void 0 ? _a : true;
+            this.remove = value.remove;
+            this.className = value.className;
+            this.type = (_b = value.type) !== null && _b !== void 0 ? _b : exports.ActionType.Basic;
+            this.show = value.show;
+            this.restore = value.restore;
+            this.rowActions = (_c = value.rowActions) === null || _c === void 0 ? void 0 : _c.map(function (action) { return new RowAction(action); });
             // Re-assign click function
             var clickFn = value.click;
             this.click = function (row, event, index, rowActionsRef) {
@@ -784,39 +780,7 @@
             }
         };
         return RowAction;
-    }(tsmodels.Model));
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", String)
-    ], RowAction.prototype, "icon", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Boolean)
-    ], RowAction.prototype, "menu", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], RowAction.prototype, "remove", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", String)
-    ], RowAction.prototype, "className", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", String)
-    ], RowAction.prototype, "type", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Function)
-    ], RowAction.prototype, "show", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Boolean)
-    ], RowAction.prototype, "restore", void 0);
-    __decorate([
-        tsmodels.Alias('rowActions', RowAction),
-        __metadata("design:type", Array)
-    ], RowAction.prototype, "rowActions", void 0);
+    }());
 
     var ColumnsController = /** @class */ (function () {
         function ColumnsController() {
@@ -998,7 +962,8 @@
             });
             this._theadClass = this.hasHeader ? 'has-header' : '';
             this._updateColspans('headerConfigs', 'headerColspanned');
-            this._updateColspans('groupCellConfigs', 'groupCellColspanned');
+            this._updateColspans('groupHeaderConfigs', 'groupHeaderColspanned');
+            this._updateColspans('groupFooterConfigs', 'groupFooterColspanned');
             this._updateColspans('cellConfigs', 'cellColspanned');
             this._updateColspans('footerConfigs', 'footerColspanned');
             this.updateVisibleColumns();
@@ -1167,7 +1132,8 @@
     (function (RowType) {
         RowType[RowType["Simple"] = 0] = "Simple";
         RowType[RowType["Group"] = 1] = "Group";
-        RowType[RowType["Child"] = 2] = "Child";
+        RowType[RowType["GroupFooter"] = 2] = "GroupFooter";
+        RowType[RowType["Child"] = 3] = "Child";
     })(exports.RowType || (exports.RowType = {}));
 
     var BaseRow = /** @class */ (function () {
@@ -1309,6 +1275,38 @@
         return SimpleRow;
     }(BaseRow));
 
+    var GroupFooterRow = /** @class */ (function (_super) {
+        __extends(GroupFooterRow, _super);
+        function GroupFooterRow(data, parent) {
+            if (data === void 0) { data = {}; }
+            if (parent === void 0) { parent = null; }
+            var _this = _super.call(this, data, exports.RowType.GroupFooter) || this;
+            _this.visible = true;
+            _this._parent = parent;
+            if (_this.parent) {
+                _this.visible = _this._parent.expanded;
+                _this.index = _this.parent.children.length;
+            }
+            return _this;
+        }
+        Object.defineProperty(GroupFooterRow.prototype, "parent", {
+            get: function () {
+                return this._parent;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(GroupFooterRow.prototype, "isFooter", {
+            get: function () {
+                return true;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        GroupFooterRow.prototype.destroy = function () { };
+        return GroupFooterRow;
+    }(BaseRow));
+
     var Row = /** @class */ (function () {
         function Row(data, rowType, _a) {
             if (data === void 0) { data = {}; }
@@ -1387,6 +1385,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(Row.prototype, "isFooter", {
+            get: function () {
+                return this._row instanceof GroupFooterRow;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(Row.prototype, "parent", {
             get: function () {
                 return this._row.parent;
@@ -1539,6 +1544,7 @@
             if (group) {
                 this._groupByFn = group.groupBy;
                 this._compareByFn = group.compareBy;
+                this._footerRowFn = group.footer || (function () { return false; });
                 this._initialExpand = (_a = group.initialExpand) !== null && _a !== void 0 ? _a : true;
                 // group mode enabled by default
                 this._groupEnabled = (group.enabled !== void 0)
@@ -1684,6 +1690,7 @@
             var row = this.visibleRows.find(function (visibleRow) { return visibleRow.data === rowData; });
             row.toggleRowExpandStatus();
             this._updateVisibleRows();
+            console.log(this._rowsStack);
         };
         DataController.prototype._updateRowsStack = function (rows) {
             var _this = this;
@@ -1717,7 +1724,7 @@
         DataController.prototype._updateVisibleRows = function () {
             this.visibleRows = this._rowsStack
                 .filter(function (row) {
-                return !row.isChild || row.visible;
+                return (!row.isChild && !row.isFooter) || row.visible;
             });
         };
         DataController.prototype.updateRow = function (targetRow, trackBy) {
@@ -1758,14 +1765,21 @@
          * Split existing rows by groups and store them for future use
          */
         DataController.prototype.groupRowsBy = function (rows) {
+            var e_1, _b;
             var _this = this;
             if (!this._groupByFn || !this._compareByFn) {
                 return rows;
             }
             var numberOfGroups = 0;
+            var footerRows = new Map();
             rows.forEach(function (row) {
                 var mainGroup = _this._groupByFn(row);
+                var isFooterRow = _this._footerRowFn(row);
                 var mainGroupKey = _this._compareByFn(mainGroup);
+                if (isFooterRow) {
+                    footerRows.set(mainGroupKey, row);
+                    return;
+                }
                 if (!_this._store.has(mainGroupKey)) {
                     var group = new GroupRow(mainGroup, _this._initialExpand);
                     group.index = numberOfGroups;
@@ -1780,6 +1794,23 @@
                     group.children.push(childRow);
                 }
             });
+            try {
+                for (var footerRows_1 = __values(footerRows), footerRows_1_1 = footerRows_1.next(); !footerRows_1_1.done; footerRows_1_1 = footerRows_1.next()) {
+                    var _c = __read(footerRows_1_1.value, 2), key = _c[0], value = _c[1];
+                    var group = this._store.get(key);
+                    if (group) {
+                        var footerRow = new GroupFooterRow(value, group);
+                        group.children.push(footerRow);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (footerRows_1_1 && !footerRows_1_1.done && (_b = footerRows_1.return)) _b.call(footerRows_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
             return Array.from(this._store.values())
                 .reduce(function (acc, item) {
                 if (item.isGroup) {
@@ -3404,56 +3435,51 @@
     }());
 
     var SHOW_DELETED_FILTERS_KEY = '$$_show_deleted_$$';
-    var List = /** @class */ (function (_super) {
-        __extends(List, _super);
+    var List = /** @class */ (function () {
         function List(el, config, fsScroll, selectionDialog, router, route, persistance, inDialog) {
             if (config === void 0) { config = {}; }
-            var _this = _super.call(this) || this;
-            _this.el = el;
-            _this.config = config;
-            _this.fsScroll = fsScroll;
-            _this.selectionDialog = selectionDialog;
-            _this.router = router;
-            _this.route = route;
-            _this.persistance = persistance;
-            _this.inDialog = inDialog;
-            _this.filters = [];
-            _this.scrollable = false;
+            this.el = el;
+            this.config = config;
+            this.fsScroll = fsScroll;
+            this.selectionDialog = selectionDialog;
+            this.router = router;
+            this.route = route;
+            this.persistance = persistance;
+            this.inDialog = inDialog;
+            this.filters = [];
             // @Alias('rows') private _rows: any;
-            _this.initialized$ = new rxjs.BehaviorSubject(false);
-            _this.loading$ = new rxjs.BehaviorSubject(false);
-            _this.paging = new PaginationController();
-            _this.columns = new ColumnsController();
-            _this.actions = new ActionsController();
-            _this.dataController = new DataController();
-            _this.sorting = new SortingController();
-            _this.filterConfig = null;
-            _this.fetch$ = new rxjs.Subject();
-            _this.fetchComplete$ = new rxjs.Subject();
-            _this.filtersReady$ = new rxjs.Subject();
-            _this.status = true;
-            _this.chips = false;
-            _this.filterInput = true;
-            _this.queryParam = false;
-            _this.restoreMode = false;
-            _this.initialFetch = true;
+            this.initialized$ = new rxjs.BehaviorSubject(false);
+            this.loading$ = new rxjs.BehaviorSubject(false);
+            this.paging = new PaginationController();
+            this.columns = new ColumnsController();
+            this.actions = new ActionsController();
+            this.dataController = new DataController();
+            this.sorting = new SortingController();
+            this.filterConfig = null;
+            this.fetch$ = new rxjs.Subject();
+            this.fetchComplete$ = new rxjs.Subject();
+            this.filtersReady$ = new rxjs.Subject();
+            this.status = true;
+            this.chips = false;
+            this.filterInput = true;
+            this.queryParam = false;
+            this.restoreMode = false;
+            this.initialFetch = true;
             // Empty state
-            _this.emptyStateEnabled = false;
-            _this.onDestroy$ = new rxjs.Subject();
-            _this._filtersQuery = new rxjs.BehaviorSubject(null);
-            _this._fromJSON(config);
-            _this.initialize(config);
-            _this._headerConfig = new StyleConfig(config.header);
-            _this._groupCellConfig = new StyleConfig(config.cell);
-            _this._cellConfig = new StyleConfig(config.cell);
-            _this._footerConfig = new StyleConfig(config.footer);
-            _this.initialized$.next(true);
-            _this.subscribe();
-            if (_this.initialFetch) {
-                _this.dataController.setOperation(exports.FsListState.Load);
-                _this.fetch$.next();
+            this.emptyStateEnabled = false;
+            this.onDestroy$ = new rxjs.Subject();
+            this._filtersQuery = new rxjs.BehaviorSubject(null);
+            this.initialize(config);
+            this._headerConfig = new StyleConfig(config.header);
+            this._groupCellConfig = new StyleConfig(config.cell);
+            this._cellConfig = new StyleConfig(config.cell);
+            this._footerConfig = new StyleConfig(config.footer);
+            this.initialized$.next(true);
+            this.subscribe();
+            if (this.initialFetch) {
+                this.dataController.setOperation(exports.FsListState.Load);
+                this.fetch$.next();
             }
-            return _this;
         }
         Object.defineProperty(List.prototype, "hasSavedFilters", {
             get: function () {
@@ -3646,6 +3672,24 @@
          * @param config
          */
         List.prototype.initialize = function (config) {
+            var _a;
+            this.heading = config.heading;
+            this.trackBy = config.trackBy;
+            this.subheading = config.subheading;
+            this.rowActionsRaw = config.rowActions;
+            this.rowClass = config.rowClass;
+            this.rowEvents = config.rowEvents;
+            this.restore = config.restore;
+            this.persist = config.persist;
+            this.filters = (_a = config.filters) !== null && _a !== void 0 ? _a : [];
+            this.filterInitCb = config.filterInit;
+            this.filterChangeCb = config.filterChange;
+            this.savedFilters = config.savedFilters;
+            this.scrollable = config.scrollable;
+            this.noResults = config.noResults;
+            this.emptyState = config.emptyState;
+            this.fetchFn = config.fetch;
+            this.afterFetchFn = config.afterFetch;
             this.columns.initConfig(config.column);
             this.initDefaultOptions(config);
             this.initRestore();
@@ -3937,7 +3981,7 @@
                 persist: this.persist,
                 items: this.filters || [],
                 savedFilters: this.savedFilters,
-                inline: this.inlineFilters,
+                // inline: this.inlineFilters,
                 actions: this.actions.actions,
                 queryParam: this.queryParam,
                 sorts: sortValues,
@@ -4095,83 +4139,7 @@
             }
         };
         return List;
-    }(tsmodels.Model));
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", String)
-    ], List.prototype, "heading", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", String)
-    ], List.prototype, "trackBy", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", String)
-    ], List.prototype, "subheading", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], List.prototype, "inlineFilters", void 0);
-    __decorate([
-        tsmodels.Alias('rowActions'),
-        __metadata("design:type", Array)
-    ], List.prototype, "rowActionsRaw", void 0);
-    __decorate([
-        tsmodels.Alias('rowClass'),
-        __metadata("design:type", Object)
-    ], List.prototype, "rowClass", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], List.prototype, "rowEvents", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], List.prototype, "restore", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], List.prototype, "columnTemplates", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Boolean)
-    ], List.prototype, "persist", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], List.prototype, "filters", void 0);
-    __decorate([
-        tsmodels.Alias('filterInit'),
-        __metadata("design:type", Function)
-    ], List.prototype, "filterInitCb", void 0);
-    __decorate([
-        tsmodels.Alias('filterChange'),
-        __metadata("design:type", Function)
-    ], List.prototype, "filterChangeCb", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], List.prototype, "savedFilters", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], List.prototype, "scrollable", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], List.prototype, "noResults", void 0);
-    __decorate([
-        tsmodels.Alias(),
-        __metadata("design:type", Object)
-    ], List.prototype, "emptyState", void 0);
-    __decorate([
-        tsmodels.Alias('fetch'),
-        __metadata("design:type", Function)
-    ], List.prototype, "fetchFn", void 0);
-    __decorate([
-        tsmodels.Alias('afterFetch'),
-        __metadata("design:type", Function)
-    ], List.prototype, "afterFetchFn", void 0);
+    }());
 
     exports.ReorderPosition = void 0;
     (function (ReorderPosition) {
@@ -4430,19 +4398,35 @@
                     args: ['class']
                 }] } });
 
-    var FsListGroupCellDirective = /** @class */ (function (_super) {
-        __extends(FsListGroupCellDirective, _super);
-        function FsListGroupCellDirective() {
+    var FsListGroupHeaderDirective = /** @class */ (function (_super) {
+        __extends(FsListGroupHeaderDirective, _super);
+        function FsListGroupHeaderDirective() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        return FsListGroupCellDirective;
+        return FsListGroupHeaderDirective;
     }(FsListCellDirective));
-    FsListGroupCellDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsListGroupCellDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
-    FsListGroupCellDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListGroupCellDirective, selector: "[fs-list-group-cell]", usesInheritance: true, ngImport: i0__namespace });
-    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsListGroupCellDirective, decorators: [{
+    FsListGroupHeaderDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsListGroupHeaderDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    FsListGroupHeaderDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]", usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsListGroupHeaderDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
-                        selector: '[fs-list-group-cell]'
+                        selector: '[fs-list-group-cell],[fs-list-group-header]'
+                    }]
+            }] });
+
+    var FsListGroupFooterDirective = /** @class */ (function (_super) {
+        __extends(FsListGroupFooterDirective, _super);
+        function FsListGroupFooterDirective() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return FsListGroupFooterDirective;
+    }(FsListCellDirective));
+    FsListGroupFooterDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsListGroupFooterDirective, deps: null, target: i0__namespace.ɵɵFactoryTarget.Directive });
+    FsListGroupFooterDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListGroupFooterDirective, selector: "[fs-list-group-footer]", usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsListGroupFooterDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[fs-list-group-footer]'
                     }]
             }] });
 
@@ -4580,7 +4564,7 @@
         return FsListColumnDirective;
     }());
     FsListColumnDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsListColumnDirective, deps: [], target: i0__namespace.ɵɵFactoryTarget.Directive });
-    FsListColumnDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListColumnDirective, selector: "fs-list-column", inputs: { visible: ["show", "visible"], title: "title", name: "name", customize: "customize", sortable: "sortable", sortableDefault: "sortableDefault", direction: "direction", align: "align", width: "width", className: ["class", "className"] }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsListHeaderDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headerConfigs", first: true, predicate: FsListHeaderDirective, descendants: true, static: true }, { propertyName: "groupCellTemplate", first: true, predicate: FsListGroupCellDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "groupCellConfigs", first: true, predicate: FsListGroupCellDirective, descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: FsListCellDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "cellConfigs", first: true, predicate: FsListCellDirective, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: FsListFooterDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "footerConfigs", first: true, predicate: FsListFooterDirective, descendants: true, static: true }, { propertyName: "expandTrigger", predicate: FsListGroupExpandTriggerDirective, descendants: true }], ngImport: i0__namespace });
+    FsListColumnDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListColumnDirective, selector: "fs-list-column", inputs: { visible: ["show", "visible"], title: "title", name: "name", customize: "customize", sortable: "sortable", sortableDefault: "sortableDefault", direction: "direction", align: "align", width: "width", className: ["class", "className"] }, queries: [{ propertyName: "headerTemplate", first: true, predicate: FsListHeaderDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "headerConfigs", first: true, predicate: FsListHeaderDirective, descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: FsListGroupHeaderDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "groupHeaderConfigs", first: true, predicate: FsListGroupHeaderDirective, descendants: true, static: true }, { propertyName: "groupFooterTemplate", first: true, predicate: FsListGroupFooterDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "groupFooterConfigs", first: true, predicate: FsListGroupFooterDirective, descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: FsListCellDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "cellConfigs", first: true, predicate: FsListCellDirective, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: FsListFooterDirective, descendants: true, read: i0.TemplateRef, static: true }, { propertyName: "footerConfigs", first: true, predicate: FsListFooterDirective, descendants: true, static: true }, { propertyName: "expandTrigger", predicate: FsListGroupExpandTriggerDirective, descendants: true }], ngImport: i0__namespace });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsListColumnDirective, decorators: [{
                 type: i0.Directive,
                 args: [{
@@ -4592,12 +4576,18 @@
                 }], headerConfigs: [{
                     type: i0.ContentChild,
                     args: [FsListHeaderDirective, { static: true }]
-                }], groupCellTemplate: [{
+                }], groupHeaderTemplate: [{
+                    type: i0.ContentChild,
+                    args: [FsListGroupHeaderDirective, { read: i0.TemplateRef, static: true }]
+                }], groupHeaderConfigs: [{
+                    type: i0.ContentChild,
+                    args: [FsListGroupHeaderDirective, { static: true }]
+                }], groupFooterTemplate: [{
                     type: i0.ContentChild,
-                    args: [FsListGroupCellDirective, { read: i0.TemplateRef, static: true }]
-                }], groupCellConfigs: [{
+                    args: [FsListGroupFooterDirective, { read: i0.TemplateRef, static: true }]
+                }], groupFooterConfigs: [{
                     type: i0.ContentChild,
-                    args: [FsListGroupCellDirective, { static: true }]
+                    args: [FsListGroupFooterDirective, { static: true }]
                 }], expandTrigger: [{
                     type: i0.ContentChildren,
                     args: [FsListGroupExpandTriggerDirective, { descendants: true }]
@@ -4859,7 +4849,7 @@
                 if (this.row.isGroup) {
                     this.cellContext.groupIndex = this.row.index;
                 }
-                else if (this.row.isChild) {
+                else if (this.row.isChild || this.row.isFooter) {
                     this.cellContext.groupChildIndex = this.row.index;
                     this.cellContext.groupRow = this.row.parent.data;
                 }
@@ -4873,8 +4863,12 @@
             }
         };
         FsCellComponent.prototype._initCellTemplate = function () {
-            if (this.row && this.row.isGroup) {
-                this.cellTemplate = this.column.groupCellTemplate || this.column.cellTemplate;
+            var _a, _b;
+            if ((_a = this.row) === null || _a === void 0 ? void 0 : _a.isGroup) {
+                this.cellTemplate = this.column.groupHeaderTemplate || this.column.cellTemplate;
+            }
+            else if ((_b = this.row) === null || _b === void 0 ? void 0 : _b.isFooter) {
+                this.cellTemplate = this.column.groupFooterTemplate || this.column.cellTemplate;
             }
             else {
                 this.cellTemplate = this.column.cellTemplate;
@@ -5474,6 +5468,27 @@
             this._destroy$ = new rxjs.Subject();
             this._rowDiffer = _differs.find({}).create();
         }
+        Object.defineProperty(FsRowComponent.prototype, "isGroupRow", {
+            get: function () {
+                return this.row.isGroup;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FsRowComponent.prototype, "isChildRow", {
+            get: function () {
+                return this.row.isChild;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(FsRowComponent.prototype, "isGroupFooterRow", {
+            get: function () {
+                return this.row.isFooter;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(FsRowComponent.prototype, "rowCssClass", {
             get: function () {
                 var e_1, _b;
@@ -5665,7 +5680,7 @@
         return FsRowComponent;
     }());
     FsRowComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsRowComponent, deps: [{ token: i0__namespace.ElementRef }, { token: ReorderController }, { token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.KeyValueDiffers }, { token: i0__namespace.Renderer2 }, { token: FsListDraggableListDirective }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsRowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowComponent, 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" }, host: { properties: { "attr.role": "this.role", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0__namespace, template: "<!-- Drag -->\n<ng-container *ngIf=\"reorderController.leftReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Selection -->\n<ng-container *ngIf=\"selection\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <mat-checkbox (change)=\"selectRow($event)\"\n                  [checked]=\"selected\"\n                  [indeterminate]=\"indeterminateSelected\">\n    </mat-checkbox>\n  </td>\n</ng-container>\n\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td fs-cell\n      *ngIf=\"(row.isGroup && !column.groupCellColspanned) || (!row.isGroup && !column.cellColspanned)\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [class]=\"column.cellConfigs.classesString\"\n      [ngClass]=\"{ 'primary-col': isFirst }\"\n      [attr.colspan]=\"(row.isGroup && column.groupCellConfigs.colspan) || column.cellConfigs.colspan\"\n      [attr.width]=\"column.width\"\n  >\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<ng-container *ngIf=\"reorderController.rightReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.manualReorderActivated$ | async)\" class=\"fs-list-col row-actions\">\n  <fs-list-row-actions [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</td>\n\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible; else emptyCell\">\n    <td class=\"fs-list-col drag-col\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\"\n    >\n      <mat-icon>drag_handle</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", components: [{ type: i2__namespace.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsRowComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowComponent, 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" }, host: { properties: { "attr.role": "this.role", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0__namespace, template: "<!-- Drag -->\n<ng-container *ngIf=\"reorderController.leftReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Selection -->\n<ng-container *ngIf=\"selection\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isFooter\">\n      <mat-checkbox (change)=\"selectRow($event)\"\n                    [checked]=\"selected\"\n                    [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td 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  >\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<ng-container *ngIf=\"reorderController.rightReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.manualReorderActivated$ | async)\" class=\"fs-list-col row-actions\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions [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\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td class=\"fs-list-col drag-col\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\"\n    >\n      <mat-icon>drag_handle</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", components: [{ type: i2__namespace.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5__namespace.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsRowComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -6494,7 +6509,8 @@
             FsListCellDirective,
             FsListHeaderDirective,
             FsListFooterDirective,
-            FsListGroupCellDirective,
+            FsListGroupHeaderDirective,
+            FsListGroupFooterDirective,
             FsListGroupExpandTriggerDirective,
             FsListDraggableListDirective,
             FsListDraggableRowDirective,
@@ -6526,7 +6542,8 @@
             FsListCellDirective,
             FsListHeaderDirective,
             FsListFooterDirective,
-            FsListGroupCellDirective,
+            FsListGroupHeaderDirective,
+            FsListGroupFooterDirective,
             FsListGroupExpandTriggerDirective,
             FsListEmptyStateDirective,
             FsListContentDirective] });
@@ -6594,7 +6611,8 @@
                             FsListCellDirective,
                             FsListHeaderDirective,
                             FsListFooterDirective,
-                            FsListGroupCellDirective,
+                            FsListGroupHeaderDirective,
+                            FsListGroupFooterDirective,
                             FsListGroupExpandTriggerDirective,
                             FsListDraggableListDirective,
                             FsListDraggableRowDirective,
@@ -6614,7 +6632,8 @@
                             FsListCellDirective,
                             FsListHeaderDirective,
                             FsListFooterDirective,
-                            FsListGroupCellDirective,
+                            FsListGroupHeaderDirective,
+                            FsListGroupFooterDirective,
                             FsListGroupExpandTriggerDirective,
                             FsListEmptyStateDirective,
                             FsListContentDirective,
@@ -6649,8 +6668,9 @@
     exports.FsListContentDirective = FsListContentDirective;
     exports.FsListEmptyStateDirective = FsListEmptyStateDirective;
     exports.FsListFooterDirective = FsListFooterDirective;
-    exports.FsListGroupCellDirective = FsListGroupCellDirective;
     exports.FsListGroupExpandTriggerDirective = FsListGroupExpandTriggerDirective;
+    exports.FsListGroupFooterDirective = FsListGroupFooterDirective;
+    exports.FsListGroupHeaderDirective = FsListGroupHeaderDirective;
     exports.FsListHeaderDirective = FsListHeaderDirective;
     exports.FsListLoaderComponent = FsListLoaderComponent;
     exports.FsListModule = FsListModule;