@firestitch/list 12.1.5 → 12.3.0

package/fesm2015/firestitch-list.js

@@ -35,20 +35,17 @@ import { takeUntil, tap, skip, distinctUntilChanged, take, map, debounceTime, sw
 import * as i3$3 from '@firestitch/selection';
 import { getNormalizedPath } from '@firestitch/common';
 import * as i9 from '@firestitch/drawer';
-import { __decorate, __metadata } from 'tslib';
-import { Model, Alias } from 'tsmodels';
 import * as i1 from '@firestitch/store';
 import { FsPersistanceStore } from '@firestitch/store';
 import * as i5 from '@angular/flex-layout/extended';
 import * as i3$2 from '@angular/flex-layout/flex';
 
-class StyleConfig extends Model {
+class StyleConfig {
     constructor(config = {}) {
-        super();
         this.className = []; // Can't be used in tempaltes!
         this.classesArray = []; // Can be used in tempaltes
         this.classesString = '';
-        this._fromJSON(config);
+        this._init(config);
     }
     /**
      * Create static array of styles for using in templates
@@ -98,6 +95,11 @@ class StyleConfig extends Model {
         }
         this.className = targetValue;
     }
+    _init(config) {
+        this.colspan = config.colspan;
+        this.align = config.align;
+        this.className = config.className;
+    }
     /**
      * Merge params into array
      * @param to
@@ -112,18 +114,6 @@ class StyleConfig extends Model {
         }
     }
 }
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], StyleConfig.prototype, "colspan", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], StyleConfig.prototype, "align", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], StyleConfig.prototype, "className", void 0);
 
 var SortingDirection;
 (function (SortingDirection) {
@@ -139,11 +129,13 @@ const ALLOWED_DEFAULTS = [
 class Column {
     constructor(colConfig, 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;
@@ -235,7 +227,8 @@ class Column {
                 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);
                     }
@@ -243,7 +236,8 @@ class Column {
                 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);
                     }
@@ -251,7 +245,8 @@ class Column {
             }
         });
         this.headerConfigs.updateClasesArray();
-        this.groupCellConfigs.updateClasesArray();
+        this.groupHeaderConfigs.updateClasesArray();
+        this.groupFooterConfigs.updateClasesArray();
         this.cellConfigs.updateClasesArray();
         this.footerConfigs.updateClasesArray();
     }
@@ -272,11 +267,13 @@ class Column {
     _parseConfig(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;
@@ -292,14 +289,13 @@ var ActionType;
     ActionType["MiniFab"] = "mini-fab";
 })(ActionType || (ActionType = {}));
 
-class RowAction extends Model {
+class RowAction {
     constructor(config = {}) {
-        super();
         this.label = '';
         this.classArray = [];
         this.isShown = true;
         this._isGroup = false;
-        this._fromJSON(config);
+        this._init(config);
         if (Array.isArray(this.rowActions)) {
             this._isGroup = true;
         }
@@ -307,14 +303,16 @@ class RowAction extends Model {
     get isGroup() {
         return this._isGroup;
     }
-    _fromJSON(value) {
-        super._fromJSON(value);
-        if (value.type === void 0) {
-            this.type = ActionType.Basic;
-        }
-        if (this.menu === void 0) {
-            this.menu = true;
-        }
+    _init(value) {
+        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 : ActionType.Basic;
+        this.show = value.show;
+        this.restore = value.restore;
+        this.rowActions = (_c = value.rowActions) === null || _c === void 0 ? void 0 : _c.map((action) => new RowAction(action));
         // Re-assign click function
         const clickFn = value.click;
         this.click = (row, event, index, rowActionsRef = null) => {
@@ -398,38 +396,6 @@ class RowAction extends Model {
         }
     }
 }
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], RowAction.prototype, "icon", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], RowAction.prototype, "menu", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], RowAction.prototype, "remove", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], RowAction.prototype, "className", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], RowAction.prototype, "type", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Function)
-], RowAction.prototype, "show", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], RowAction.prototype, "restore", void 0);
-__decorate([
-    Alias('rowActions', RowAction),
-    __metadata("design:type", Array)
-], RowAction.prototype, "rowActions", void 0);
 
 class ColumnsController {
     constructor() {
@@ -557,7 +523,8 @@ class ColumnsController {
         });
         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();
@@ -707,7 +674,8 @@ var RowType;
 (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";
 })(RowType || (RowType = {}));
 
 class BaseRow {
@@ -804,6 +772,25 @@ class SimpleRow extends BaseRow {
     }
 }
 
+class GroupFooterRow extends BaseRow {
+    constructor(data = {}, parent = null) {
+        super(data, RowType.GroupFooter);
+        this.visible = true;
+        this._parent = parent;
+        if (this.parent) {
+            this.visible = this._parent.expanded;
+            this.index = this.parent.children.length;
+        }
+    }
+    get parent() {
+        return this._parent;
+    }
+    get isFooter() {
+        return true;
+    }
+    destroy() { }
+}
+
 class Row {
     constructor(data = {}, rowType = RowType.Simple, { parent, initialExpand } = {}) {
         switch (rowType) {
@@ -851,6 +838,9 @@ class Row {
     get isChild() {
         return this._row instanceof ChildRow;
     }
+    get isFooter() {
+        return this._row instanceof GroupFooterRow;
+    }
     get parent() {
         return this._row.parent;
     }
@@ -938,6 +928,7 @@ class DataController {
         if (group) {
             this._groupByFn = group.groupBy;
             this._compareByFn = group.compareBy;
+            this._footerRowFn = group.footer || (() => false);
             this._initialExpand = (_a = group.initialExpand) !== null && _a !== void 0 ? _a : true;
             // group mode enabled by default
             this._groupEnabled = (group.enabled !== void 0)
@@ -1081,6 +1072,7 @@ class DataController {
         const row = this.visibleRows.find((visibleRow) => visibleRow.data === rowData);
         row.toggleRowExpandStatus();
         this._updateVisibleRows();
+        console.log(this._rowsStack);
     }
     _updateRowsStack(rows) {
         this._destroyRowsStack();
@@ -1112,7 +1104,7 @@ class DataController {
     _updateVisibleRows() {
         this.visibleRows = this._rowsStack
             .filter((row) => {
-            return !row.isChild || row.visible;
+            return (!row.isChild && !row.isFooter) || row.visible;
         });
     }
     updateRow(targetRow, trackBy) {
@@ -1157,9 +1149,15 @@ class DataController {
             return rows;
         }
         let numberOfGroups = 0;
+        const footerRows = new Map();
         rows.forEach((row) => {
             const mainGroup = this._groupByFn(row);
+            const isFooterRow = this._footerRowFn(row);
             const mainGroupKey = this._compareByFn(mainGroup);
+            if (isFooterRow) {
+                footerRows.set(mainGroupKey, row);
+                return;
+            }
             if (!this._store.has(mainGroupKey)) {
                 const group = new GroupRow(mainGroup, this._initialExpand);
                 group.index = numberOfGroups;
@@ -1174,6 +1172,13 @@ class DataController {
                 group.children.push(childRow);
             }
         });
+        for (const [key, value] of footerRows) {
+            const group = this._store.get(key);
+            if (group) {
+                const footerRow = new GroupFooterRow(value, group);
+                group.children.push(footerRow);
+            }
+        }
         return Array.from(this._store.values())
             .reduce((acc, item) => {
             if (item.isGroup) {
@@ -2568,9 +2573,8 @@ class ExternalParamsController {
 }
 
 const SHOW_DELETED_FILTERS_KEY = '$$_show_deleted_$$';
-class List extends Model {
+class List {
     constructor(el, config = {}, fsScroll, selectionDialog, router, route, persistance, inDialog) {
-        super();
         this.el = el;
         this.config = config;
         this.fsScroll = fsScroll;
@@ -2580,7 +2584,6 @@ class List extends Model {
         this.persistance = persistance;
         this.inDialog = inDialog;
         this.filters = [];
-        this.scrollable = false;
         // @Alias('rows') private _rows: any;
         this.initialized$ = new BehaviorSubject(false);
         this.loading$ = new BehaviorSubject(false);
@@ -2603,7 +2606,6 @@ class List extends Model {
         this.emptyStateEnabled = false;
         this.onDestroy$ = new Subject();
         this._filtersQuery = new BehaviorSubject(null);
-        this._fromJSON(config);
         this.initialize(config);
         this._headerConfig = new StyleConfig(config.header);
         this._groupCellConfig = new StyleConfig(config.cell);
@@ -2793,6 +2795,24 @@ class List extends Model {
      * @param config
      */
     initialize(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();
@@ -3077,7 +3097,7 @@ class List extends Model {
             persist: this.persist,
             items: this.filters || [],
             savedFilters: this.savedFilters,
-            inline: this.inlineFilters,
+            // inline: this.inlineFilters,
             actions: this.actions.actions,
             queryParam: this.queryParam,
             sorts: sortValues,
@@ -3233,82 +3253,6 @@ class List extends Model {
         }
     }
 }
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], List.prototype, "heading", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], List.prototype, "trackBy", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], List.prototype, "subheading", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "inlineFilters", void 0);
-__decorate([
-    Alias('rowActions'),
-    __metadata("design:type", Array)
-], List.prototype, "rowActionsRaw", void 0);
-__decorate([
-    Alias('rowClass'),
-    __metadata("design:type", Object)
-], List.prototype, "rowClass", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "rowEvents", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "restore", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "columnTemplates", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], List.prototype, "persist", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "filters", void 0);
-__decorate([
-    Alias('filterInit'),
-    __metadata("design:type", Function)
-], List.prototype, "filterInitCb", void 0);
-__decorate([
-    Alias('filterChange'),
-    __metadata("design:type", Function)
-], List.prototype, "filterChangeCb", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "savedFilters", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "scrollable", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "noResults", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "emptyState", void 0);
-__decorate([
-    Alias('fetch'),
-    __metadata("design:type", Function)
-], List.prototype, "fetchFn", void 0);
-__decorate([
-    Alias('afterFetch'),
-    __metadata("design:type", Function)
-], List.prototype, "afterFetchFn", void 0);
 
 var ReorderPosition;
 (function (ReorderPosition) {
@@ -3524,14 +3468,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class']
             }] } });
 
-class FsListGroupCellDirective extends FsListCellDirective {
+class FsListGroupHeaderDirective extends FsListCellDirective {
 }
-FsListGroupCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupCellDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-FsListGroupCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListGroupCellDirective, selector: "[fs-list-group-cell]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupCellDirective, decorators: [{
+FsListGroupHeaderDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupHeaderDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsListGroupHeaderDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListGroupHeaderDirective, selector: "[fs-list-group-cell],[fs-list-group-header]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupHeaderDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[fs-list-group-cell]'
+                    selector: '[fs-list-group-cell],[fs-list-group-header]'
+                }]
+        }] });
+
+class FsListGroupFooterDirective extends FsListCellDirective {
+}
+FsListGroupFooterDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupFooterDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+FsListGroupFooterDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FsListGroupFooterDirective, selector: "[fs-list-group-footer]", usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListGroupFooterDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fs-list-group-footer]'
                 }]
         }] });
 
@@ -3618,7 +3573,7 @@ class FsListColumnDirective {
     }
 }
 FsListColumnDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-FsListColumnDirective.ɵdir = i0.ɵɵ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: TemplateRef, static: true }, { propertyName: "headerConfigs", first: true, predicate: FsListHeaderDirective, descendants: true, static: true }, { propertyName: "groupCellTemplate", first: true, predicate: FsListGroupCellDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "groupCellConfigs", first: true, predicate: FsListGroupCellDirective, descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: FsListCellDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "cellConfigs", first: true, predicate: FsListCellDirective, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: FsListFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "footerConfigs", first: true, predicate: FsListFooterDirective, descendants: true, static: true }, { propertyName: "expandTrigger", predicate: FsListGroupExpandTriggerDirective, descendants: true }], ngImport: i0 });
+FsListColumnDirective.ɵdir = i0.ɵɵ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: TemplateRef, static: true }, { propertyName: "headerConfigs", first: true, predicate: FsListHeaderDirective, descendants: true, static: true }, { propertyName: "groupHeaderTemplate", first: true, predicate: FsListGroupHeaderDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "groupHeaderConfigs", first: true, predicate: FsListGroupHeaderDirective, descendants: true, static: true }, { propertyName: "groupFooterTemplate", first: true, predicate: FsListGroupFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "groupFooterConfigs", first: true, predicate: FsListGroupFooterDirective, descendants: true, static: true }, { propertyName: "cellTemplate", first: true, predicate: FsListCellDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "cellConfigs", first: true, predicate: FsListCellDirective, descendants: true, static: true }, { propertyName: "footerTemplate", first: true, predicate: FsListFooterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "footerConfigs", first: true, predicate: FsListFooterDirective, descendants: true, static: true }, { propertyName: "expandTrigger", predicate: FsListGroupExpandTriggerDirective, descendants: true }], ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListColumnDirective, decorators: [{
             type: Directive,
             args: [{
@@ -3630,12 +3585,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], headerConfigs: [{
                 type: ContentChild,
                 args: [FsListHeaderDirective, { static: true }]
-            }], groupCellTemplate: [{
+            }], groupHeaderTemplate: [{
+                type: ContentChild,
+                args: [FsListGroupHeaderDirective, { read: TemplateRef, static: true }]
+            }], groupHeaderConfigs: [{
+                type: ContentChild,
+                args: [FsListGroupHeaderDirective, { static: true }]
+            }], groupFooterTemplate: [{
                 type: ContentChild,
-                args: [FsListGroupCellDirective, { read: TemplateRef, static: true }]
-            }], groupCellConfigs: [{
+                args: [FsListGroupFooterDirective, { read: TemplateRef, static: true }]
+            }], groupFooterConfigs: [{
                 type: ContentChild,
-                args: [FsListGroupCellDirective, { static: true }]
+                args: [FsListGroupFooterDirective, { static: true }]
             }], expandTrigger: [{
                 type: ContentChildren,
                 args: [FsListGroupExpandTriggerDirective, { descendants: true }]
@@ -3880,7 +3841,7 @@ class FsCellComponent {
             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;
             }
@@ -3894,8 +3855,12 @@ class FsCellComponent {
         }
     }
     _initCellTemplate() {
-        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;
@@ -4460,6 +4425,15 @@ class FsRowComponent {
         this._destroy$ = new Subject();
         this._rowDiffer = _differs.find({}).create();
     }
+    get isGroupRow() {
+        return this.row.isGroup;
+    }
+    get isChildRow() {
+        return this.row.isChild;
+    }
+    get isGroupFooterRow() {
+        return this.row.isFooter;
+    }
     get rowCssClass() {
         let cls = 'fs-list-row';
         if (this.rowIndex % 2 !== 0)
@@ -4623,7 +4597,7 @@ class FsRowComponent {
     }
 }
 FsRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowComponent, deps: [{ token: i0.ElementRef }, { token: ReorderController }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: FsListDraggableListDirective }], target: i0.ɵɵFactoryTarget.Component });
-FsRowComponent.ɵcmp = i0.ɵɵ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, 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.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.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$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsRowComponent.ɵcmp = i0.ɵɵ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, 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.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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.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$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowComponent, decorators: [{
             type: Component,
             args: [{
@@ -5388,7 +5362,8 @@ FsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FsListCellDirective,
         FsListHeaderDirective,
         FsListFooterDirective,
-        FsListGroupCellDirective,
+        FsListGroupHeaderDirective,
+        FsListGroupFooterDirective,
         FsListGroupExpandTriggerDirective,
         FsListDraggableListDirective,
         FsListDraggableRowDirective,
@@ -5419,7 +5394,8 @@ FsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FsListCellDirective,
         FsListHeaderDirective,
         FsListFooterDirective,
-        FsListGroupCellDirective,
+        FsListGroupHeaderDirective,
+        FsListGroupFooterDirective,
         FsListGroupExpandTriggerDirective,
         FsListEmptyStateDirective,
         FsListContentDirective] });
@@ -5487,7 +5463,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsListCellDirective,
                         FsListHeaderDirective,
                         FsListFooterDirective,
-                        FsListGroupCellDirective,
+                        FsListGroupHeaderDirective,
+                        FsListGroupFooterDirective,
                         FsListGroupExpandTriggerDirective,
                         FsListDraggableListDirective,
                         FsListDraggableRowDirective,
@@ -5507,7 +5484,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsListCellDirective,
                         FsListHeaderDirective,
                         FsListFooterDirective,
-                        FsListGroupCellDirective,
+                        FsListGroupHeaderDirective,
+                        FsListGroupFooterDirective,
                         FsListGroupExpandTriggerDirective,
                         FsListEmptyStateDirective,
                         FsListContentDirective,
@@ -5526,5 +5504,5 @@ function FsListConfigFactory(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionType, Column, FS_LIST_CONFIG, FS_LIST_DEFAULT_CONFIG, FsBodyComponent, FsCellComponent, FsFooterCellComponent, FsFooterComponent, FsFooterRowComponent, FsHeadCellComponent, FsHeadComponent, FsListCellDirective, FsListColumnDirective, FsListComponent, FsListContentDirective, FsListEmptyStateDirective, FsListFooterDirective, FsListGroupCellDirective, FsListGroupExpandTriggerDirective, FsListHeaderDirective, FsListLoaderComponent, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig };
+export { ActionType, Column, FS_LIST_CONFIG, FS_LIST_DEFAULT_CONFIG, FsBodyComponent, FsCellComponent, FsFooterCellComponent, FsFooterComponent, FsFooterRowComponent, FsHeadCellComponent, FsHeadComponent, FsListCellDirective, FsListColumnDirective, FsListComponent, FsListContentDirective, FsListEmptyStateDirective, FsListFooterDirective, FsListGroupExpandTriggerDirective, FsListGroupFooterDirective, FsListGroupHeaderDirective, FsListHeaderDirective, FsListLoaderComponent, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig };
 //# sourceMappingURL=firestitch-list.js.map