@firestitch/list 12.4.0 → 12.5.0

package/app/interfaces/listconfig.interface.d.ts

@@ -61,7 +61,7 @@ export interface FsListGroupConfig {
     initialExpand?: boolean;
     groupBy?: (row: any) => any;
     compareBy?: (row: any) => any;
-    footer?: (row: any) => boolean;
+    footer?: (row: any, group?: any) => boolean;
     actions?: (FsListRowActionGroup | FsListRowAction)[];
 }
 export interface FsListLoadMoreConfig {
@@ -246,5 +246,4 @@ export declare type FsListAfterContentInitFn = (query: Record<string, any>, data
 export interface FsListRowClassOptions {
     index: number;
     groupIndex?: number;
-    groupChildIndex?: number;
 }

package/app/models/row/group-footer-row.d.ts

@@ -5,6 +5,6 @@ export declare class GroupFooterRow extends BaseRow {
     private readonly _parent;
     constructor(data?: any, parent?: GroupRow);
     get parent(): GroupRow;
-    get isFooter(): boolean;
+    get isGroupFooter(): boolean;
     destroy(): void;
 }

package/app/models/row/group-row.d.ts

@@ -5,6 +5,7 @@ export declare class GroupRow extends BaseRow {
     children: (ChildRow | GroupFooterRow)[];
     private readonly _expanded;
     constructor(data?: any, initialExpand?: boolean);
+    get childrenData(): any[];
     get isGroup(): boolean;
     get expanded(): boolean;
     get expanded$(): import("rxjs").Observable<boolean>;

package/app/models/row.d.ts

@@ -18,7 +18,7 @@ export declare class Row {
     get type(): RowType;
     get isGroup(): boolean;
     get isChild(): boolean;
-    get isFooter(): boolean;
+    get isGroupFooter(): boolean;
     get parent(): GroupRow;
     get children(): (ChildRow | GroupFooterRow)[];
     get expanded(): boolean;

package/bundles/firestitch-list.umd.js

@@ -1183,6 +1183,14 @@
             }
             return _this;
         }
+        Object.defineProperty(GroupRow.prototype, "childrenData", {
+            get: function () {
+                return this.children
+                    .map(function (child) { return child.data; });
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(GroupRow.prototype, "isGroup", {
             get: function () {
                 return true;
@@ -1297,7 +1305,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(GroupFooterRow.prototype, "isFooter", {
+        Object.defineProperty(GroupFooterRow.prototype, "isGroupFooter", {
             get: function () {
                 return true;
             },
@@ -1386,7 +1394,7 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(Row.prototype, "isFooter", {
+        Object.defineProperty(Row.prototype, "isGroupFooter", {
             get: function () {
                 return this._row instanceof GroupFooterRow;
             },
@@ -1725,7 +1733,7 @@
         DataController.prototype._updateVisibleRows = function () {
             this.visibleRows = this._rowsStack
                 .filter(function (row) {
-                return (!row.isChild && !row.isFooter) || row.visible;
+                return (!row.isChild && !row.isGroupFooter) || row.visible;
             });
         };
         DataController.prototype.updateRow = function (targetRow, trackBy) {
@@ -1766,25 +1774,19 @@
          * 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 groupRows = [];
             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;
-                    numberOfGroups++;
+                    group.index = groupRows.length;
+                    groupRows.push(group);
                     var childRow = new ChildRow(row, group);
                     _this._store.set(mainGroupKey, group);
                     group.children.push(childRow);
@@ -1795,23 +1797,16 @@
                     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);
+            groupRows.forEach(function (groupRow) {
+                var footerIndex = groupRow.children
+                    .findIndex(function (row) {
+                    return _this._footerRowFn(row.data, Object.assign(Object.assign({}, groupRow.data), { children: groupRow.childrenData }));
+                });
+                if (footerIndex !== -1) {
+                    var footerRow = groupRow.children.slice(footerIndex, footerIndex + 1)[0];
+                    groupRow.children.push(new GroupFooterRow(footerRow.data, groupRow));
                 }
-                finally { if (e_1) throw e_1.error; }
-            }
+            });
             return Array.from(this._store.values())
                 .reduce(function (acc, item) {
                 if (item.isGroup) {
@@ -4875,9 +4870,21 @@
                 if (this.row.isGroup) {
                     this.cellContext.groupIndex = this.row.index;
                 }
-                else if (this.row.isChild || this.row.isFooter) {
-                    this.cellContext.groupChildIndex = this.row.index;
+                else if (this.row.isChild || this.row.isGroupFooter) {
+                    this.cellContext.groupIndex = this.row.index;
                     this.cellContext.groupRow = this.row.parent.data;
+                    this.cellContext.group = this.row.parent.data;
+                }
+                if (this.row.isGroup) {
+                    this.cellContext.group = this.row.data;
+                    this.cellContext.groupChildren = this.row.children
+                        .map(function (child) { return child.data; });
+                }
+                else if (this.row.isGroupFooter) {
+                    this.cellContext.group = this.row.parent.data;
+                    this.cellContext.groupIndex = this.row.index;
+                    this.cellContext.groupChildren = this.row.parent.children
+                        .map(function (child) { return child.data; });
                 }
             }
             this.cellContext.column = this.column;
@@ -4893,7 +4900,7 @@
             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) {
+            else if ((_b = this.row) === null || _b === void 0 ? void 0 : _b.isGroupFooter) {
                 this.cellTemplate = this.column.groupFooterTemplate || this.column.cellTemplate;
             }
             else {
@@ -5510,7 +5517,7 @@
         });
         Object.defineProperty(FsRowComponent.prototype, "isGroupFooterRow", {
             get: function () {
-                return this.row.isFooter;
+                return this.row.isGroupFooter;
             },
             enumerable: false,
             configurable: true
@@ -5533,7 +5540,7 @@
                         options.groupIndex = this.row.index;
                     }
                     else if (this.row.isChild) {
-                        options.groupChildIndex = this.row.index;
+                        options.groupIndex = this.row.index;
                     }
                     var resultClass = this.rowClass(this.row.data, options);
                     if (typeof resultClass === 'string') {
@@ -5706,7 +5713,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    <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 });
+    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.isGroupFooter\">\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: [{