@firestitch/list 12.1.5 → 12.2.0

package/fesm2015/firestitch-list.js

@@ -139,11 +139,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 +237,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 +246,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 +255,8 @@ class Column {
             }
         });
         this.headerConfigs.updateClasesArray();
-        this.groupCellConfigs.updateClasesArray();
+        this.groupHeaderConfigs.updateClasesArray();
+        this.groupFooterConfigs.updateClasesArray();
         this.cellConfigs.updateClasesArray();
         this.footerConfigs.updateClasesArray();
     }
@@ -272,11 +277,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;
@@ -557,7 +564,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 +715,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 +813,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 +879,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 +969,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 +1113,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 +1145,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 +1190,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 +1213,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) {
@@ -3524,14 +3570,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['class']
             }] } });
 
-class FsListGroupCellDirective extends FsListCellDirective {
+class FsListGroupHeaderDirective extends FsListCellDirective {
+}
+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],[fs-list-group-header]'
+                }]
+        }] });
+
+class FsListGroupFooterDirective 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: [{
+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-cell]'
+                    selector: '[fs-list-group-footer]'
                 }]
         }] });
 
@@ -3618,7 +3675,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 +3687,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], headerConfigs: [{
                 type: ContentChild,
                 args: [FsListHeaderDirective, { static: true }]
-            }], groupCellTemplate: [{
+            }], groupHeaderTemplate: [{
                 type: ContentChild,
-                args: [FsListGroupCellDirective, { read: TemplateRef, static: true }]
-            }], groupCellConfigs: [{
+                args: [FsListGroupHeaderDirective, { read: TemplateRef, static: true }]
+            }], groupHeaderConfigs: [{
                 type: ContentChild,
-                args: [FsListGroupCellDirective, { static: true }]
+                args: [FsListGroupHeaderDirective, { static: true }]
+            }], groupFooterTemplate: [{
+                type: ContentChild,
+                args: [FsListGroupFooterDirective, { read: TemplateRef, static: true }]
+            }], groupFooterConfigs: [{
+                type: ContentChild,
+                args: [FsListGroupFooterDirective, { static: true }]
             }], expandTrigger: [{
                 type: ContentChildren,
                 args: [FsListGroupExpandTriggerDirective, { descendants: true }]
@@ -3880,7 +3943,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 +3957,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 +4527,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 +4699,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]=\"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 +5464,8 @@ FsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FsListCellDirective,
         FsListHeaderDirective,
         FsListFooterDirective,
-        FsListGroupCellDirective,
+        FsListGroupHeaderDirective,
+        FsListGroupFooterDirective,
         FsListGroupExpandTriggerDirective,
         FsListDraggableListDirective,
         FsListDraggableRowDirective,
@@ -5419,7 +5496,8 @@ FsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FsListCellDirective,
         FsListHeaderDirective,
         FsListFooterDirective,
-        FsListGroupCellDirective,
+        FsListGroupHeaderDirective,
+        FsListGroupFooterDirective,
         FsListGroupExpandTriggerDirective,
         FsListEmptyStateDirective,
         FsListContentDirective] });
@@ -5487,7 +5565,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsListCellDirective,
                         FsListHeaderDirective,
                         FsListFooterDirective,
-                        FsListGroupCellDirective,
+                        FsListGroupHeaderDirective,
+                        FsListGroupFooterDirective,
                         FsListGroupExpandTriggerDirective,
                         FsListDraggableListDirective,
                         FsListDraggableRowDirective,
@@ -5507,7 +5586,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         FsListCellDirective,
                         FsListHeaderDirective,
                         FsListFooterDirective,
-                        FsListGroupCellDirective,
+                        FsListGroupHeaderDirective,
+                        FsListGroupFooterDirective,
                         FsListGroupExpandTriggerDirective,
                         FsListEmptyStateDirective,
                         FsListContentDirective,
@@ -5526,5 +5606,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