@firestitch/list 9.10.0 → 9.11.1

package/fesm5/firestitch-list.js

@@ -323,6 +323,7 @@ var RowAction = /** @class */ (function (_super) {
     function RowAction(config) {
         if (config === void 0) { config = {}; }
         var _this = _super.call(this) || this;
+        _this.label = '';
         _this.classArray = [];
         _this.isShown = true;
         _this._isGroup = false;
@@ -355,6 +356,13 @@ var RowAction = /** @class */ (function (_super) {
             return _this.clickEvent(row, event, index, rowActionsRef, clickFn);
         };
         this._linkFn = value.link;
+        if (typeof value.label === 'function') {
+            this._labelFn = value.label;
+            this.label = '';
+        }
+        else {
+            this.label = value.label;
+        }
         if (this.className) {
             this.classArray = this.className.split(' ').reduce(function (acc, elem) {
                 acc.push(elem);
@@ -389,6 +397,19 @@ var RowAction = /** @class */ (function (_super) {
             }
         }
     };
+    RowAction.prototype.updateLabel = function (row) {
+        if (!this.isShown) {
+            return;
+        }
+        if (this.isGroup) {
+            this.rowActions.forEach(function (action) {
+                action.updateLabel(row);
+            });
+        }
+        else if (this._labelFn) {
+            this.label = this._labelFn(row);
+        }
+    };
     RowAction.prototype.clickEvent = function (row, event, index, rowActionsRef, clickFn) {
         // Stop event propagation for parent
         event.stopPropagation();
@@ -405,10 +426,6 @@ var RowAction = /** @class */ (function (_super) {
         Alias(),
         __metadata("design:type", String)
     ], RowAction.prototype, "icon", void 0);
-    __decorate([
-        Alias(),
-        __metadata("design:type", String)
-    ], RowAction.prototype, "label", void 0);
     __decorate([
         Alias(),
         __metadata("design:type", Boolean)
@@ -3144,7 +3161,7 @@ var List = /** @class */ (function (_super) {
         var _this = this;
         var fetch$ = this.fetch$.asObservable();
         // Should wait until saved filters not loaded
-        if (!!this.filters && !!this.savedFilters) {
+        if (!!this.filters) {
             fetch$ = combineLatest([fetch$, this.filtersReady$])
                 .pipe(map(function (_a) {
                 var _b = __read(_a, 1), params = _b[0];
@@ -3404,6 +3421,9 @@ var List = /** @class */ (function (_super) {
         if (((_c = this.emptyState) === null || _c === void 0 ? void 0 : _c.validate) && this.emptyStateTemplate) {
             this.emptyStateEnabled = this.emptyState.validate(query, cloneDeep(response.data));
         }
+        if (this.afterFetchFn) {
+            this.afterFetchFn(query, this.dataController.visibleRowsData);
+        }
         this.fetchComplete$.next();
         this.loading$.next(false);
     };
@@ -3523,6 +3543,10 @@ var List = /** @class */ (function (_super) {
         Alias('fetch'),
         __metadata("design:type", Function)
     ], List.prototype, "fetchFn", void 0);
+    __decorate([
+        Alias('afterFetch'),
+        __metadata("design:type", Function)
+    ], List.prototype, "afterFetchFn", void 0);
     return List;
 }(Model));
 
@@ -4372,7 +4396,7 @@ var FsListComponent = /** @class */ (function () {
     FsListComponent = __decorate([
         Component({
             selector: 'fs-list',
-            template: "<div class=\"fs-list-container\"\n     [ngClass]=\"{ 'has-filter-input': list.filterInput,\n                  'has-filters': list.filterConfig?.items.length,\n                  'has-heading': list.heading,\n                  'has-status': list.status,\n                  'has-chips': list.chips,\n                  'has-actions': list.actions.hasActions,\n                  'first-load': firstLoad,\n                  'loading': list.loading$ | async }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <!-- Header -->\n    <div class=\"fs-list-header-container\">\n\n      <div class=\"fs-list-header\"\n        [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated$ || !list.filterConfig?.items.length }\">\n        <div class=\"heading-container\">\n          <h2 class=\"heading\" *ngIf=\"list.heading\">{{list.heading}}</h2>\n          <span class=\"subheading\" *ngIf=\"list.subheading\">{{list.subheading}}</span>\n        </div>\n        <fs-filter\n          class=\"fs-list-filter\"\n          *ngIf=\"list.filterConfig\"\n          [filter]=\"list.filterConfig\"\n          [showSortBy]=\"!list.status\"\n          [showFilterInput]=\"list.filterInput\"\n          (ready)=\"filterReady()\">\n\n          <ng-template fsFilterStatusBar>\n            <ng-container *ngIf=\"\n              list.paging &&\n              !(reorderController.manualReorderActivated$ | async) &&\n              (!reorderController.enabled || reorderController.status) &&\n              ((list.scrollable && list.scrollable.status) || !list.scrollable)\">\n              <!-- Status -->\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\"\n                [scrollable]=\"list.scrollable\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <table class=\"fs-list-table\" role=\"grid\" *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <thead fs-list-head\n               class=\"fs-list-head\"\n               role=\"rowgroup\"\n               *ngIf=\"list.columns.hasHeader\"\n               [ngClass]=\"list.columns.theadClass\"\n               [columns]=\"list.columns.visibleColumns\"\n               [sorting]=\"list.sorting\"\n               [selection]=\"list.selection\"\n               [hasRowActions]=\"list.hasRowActions\"\n        >\n        </thead>\n\n        <tbody fs-list-body\n               fsListDraggableList\n               class=\"fs-list-body\"\n               role=\"rowgroup\"\n               [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n               [rows]=\"listData\"\n               [rowActionsRaw]=\"list.rowActionsRaw\"\n               [groupActionsRaw]=\"list.groupActionsRaw\"\n               [hasRowActions]=\"list.hasRowActions\"\n               [rowEvents]=\"list.rowEvents\"\n               [rowClass]=\"list.rowClass\"\n               [columns]=\"list.columns.visibleColumns\"\n               [restoreMode]=\"list.restoreMode\"\n               [selection]=\"list.selection\"\n               [rowRemoved]=\"rowRemoved\"\n        >\n        </tbody>\n\n        <tfoot fs-list-footer\n               class=\"fs-list-footer\"\n               *ngIf=\"list.columns.hasFooter\"\n               [columns]=\"list.columns.visibleColumns\"\n               [selection]=\"list.selection\"\n               [hasRowActions]=\"list.hasRowActions\"\n               [rows]=\"list.dataController.visibleRows\">\n        </tfoot>\n      </table>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n",
+            template: "<div class=\"fs-list-container\"\r\n     [ngClass]=\"{ 'has-filter-input': list.filterInput,\r\n                  'has-filters': list.filterConfig?.items.length,\r\n                  'has-heading': list.heading,\r\n                  'has-status': list.status,\r\n                  'has-chips': list.chips,\r\n                  'has-actions': list.actions.hasActions,\r\n                  'first-load': firstLoad,\r\n                  'loading': list.loading$ | async }\">\r\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\r\n</div>\r\n\r\n<ng-template #listContainerContent>\r\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\r\n    <!-- Header -->\r\n    <div class=\"fs-list-header-container\">\r\n\r\n      <div class=\"fs-list-header\"\r\n        [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated$ || !list.filterConfig?.items.length }\">\r\n        <div class=\"heading-container\">\r\n          <h2 class=\"heading\" *ngIf=\"list.heading\">{{list.heading}}</h2>\r\n          <span class=\"subheading\" *ngIf=\"list.subheading\">{{list.subheading}}</span>\r\n        </div>\r\n        <fs-filter\r\n          class=\"fs-list-filter\"\r\n          *ngIf=\"list.filterConfig\"\r\n          [filter]=\"list.filterConfig\"\r\n          [showSortBy]=\"!list.status\"\r\n          [showFilterInput]=\"list.filterInput\"\r\n          (ready)=\"filterReady()\">\r\n\r\n          <ng-template fsFilterStatusBar>\r\n            <ng-container *ngIf=\"\r\n              list.paging &&\r\n              !(reorderController.manualReorderActivated$ | async) &&\r\n              (!reorderController.enabled || reorderController.status) &&\r\n              ((list.scrollable && list.scrollable.status) || !list.scrollable)\">\r\n              <!-- Status -->\r\n              <fs-list-status\r\n                class=\"fs-list-status\"\r\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\r\n                [rows]=\"listData\"\r\n                [sorting]=\"list.sorting\"\r\n                [paging]=\"list.paging\"\r\n                [firstLoad]=\"firstLoad\"\r\n                [scrollable]=\"list.scrollable\">\r\n              </fs-list-status>\r\n            </ng-container>\r\n          </ng-template>\r\n        </fs-filter>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Table implementation -->\r\n    <div class=\"fs-list-table-container\">\r\n      <table class=\"fs-list-table\" role=\"grid\" *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\r\n        <thead fs-list-head\r\n               class=\"fs-list-head\"\r\n               role=\"rowgroup\"\r\n               *ngIf=\"list.columns.hasHeader\"\r\n               [ngClass]=\"list.columns.theadClass\"\r\n               [columns]=\"list.columns.visibleColumns\"\r\n               [sorting]=\"list.sorting\"\r\n               [selection]=\"list.selection\"\r\n               [hasRowActions]=\"list.hasRowActions\"\r\n        >\r\n        </thead>\r\n\r\n        <tbody fs-list-body\r\n               fsListDraggableList\r\n               class=\"fs-list-body\"\r\n               role=\"rowgroup\"\r\n               [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\r\n               [rows]=\"listData\"\r\n               [rowActionsRaw]=\"list.rowActionsRaw\"\r\n               [groupActionsRaw]=\"list.groupActionsRaw\"\r\n               [hasRowActions]=\"list.hasRowActions\"\r\n               [rowEvents]=\"list.rowEvents\"\r\n               [rowClass]=\"list.rowClass\"\r\n               [columns]=\"list.columns.visibleColumns\"\r\n               [restoreMode]=\"list.restoreMode\"\r\n               [selection]=\"list.selection\"\r\n               [rowRemoved]=\"rowRemoved\"\r\n        >\r\n        </tbody>\r\n\r\n        <tfoot fs-list-footer\r\n               class=\"fs-list-footer\"\r\n               *ngIf=\"list.columns.hasFooter\"\r\n               [columns]=\"list.columns.visibleColumns\"\r\n               [selection]=\"list.selection\"\r\n               [hasRowActions]=\"list.hasRowActions\">\r\n        </tfoot>\r\n      </table>\r\n      <fs-list-loader\r\n        *ngIf=\"firstLoad\"\r\n        [columns]=\"list.columns.columns\"\r\n        [loaderLines]=\"loaderLines\">\r\n      </fs-list-loader>\r\n    </div>\r\n\r\n    <fs-list-pagination\r\n      *ngIf=\"paginatorVisible\"\r\n      class=\"fs-list-pagination\"\r\n      [rows]=\"listData\"\r\n      [pagination]=\"list.paging\">\r\n    </fs-list-pagination>\r\n\r\n\r\n    <ng-container *ngIf=\"!firstLoad\">\r\n      <div \r\n          *ngIf=\"listData.length === 0\" \r\n          class=\"fs-list-no-results-container\">\r\n        <div \r\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\r\n            class=\"fs-list-no-results\">\r\n          {{ list.noResults?.message }}\r\n        </div>\r\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\r\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\r\n        </ng-container>        \r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n",
             changeDetection: ChangeDetectionStrategy.OnPush,
             providers: [
                 GroupExpandNotifierService,
@@ -5294,14 +5318,10 @@ var FsFooterComponent = /** @class */ (function () {
         Input(),
         __metadata("design:type", SelectionController)
     ], FsFooterComponent.prototype, "selection", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], FsFooterComponent.prototype, "rows", void 0);
     FsFooterComponent = __decorate([
         Component({
             selector: '[fs-list-footer]',
-            template: "<tr fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n    [rows]=\"rows\"\n></tr>\n",
+            template: "<tr fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n></tr>\n",
             changeDetection: ChangeDetectionStrategy.OnPush
         }),
         __metadata("design:paramtypes", [])
@@ -5327,14 +5347,10 @@ var FsFooterRowComponent = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", Boolean)
     ], FsFooterRowComponent.prototype, "hasRowActions", void 0);
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], FsFooterRowComponent.prototype, "rows", void 0);
     FsFooterRowComponent = __decorate([
         Component({
             selector: '[fs-list-footer-row]',
-            template: "<td *ngIf=\"reorderController.leftReorderActivated$ | async\" class=\"fs-list-col drag-col\"></td>\n\n<td *ngIf=\"selection\" class=\"fs-list-col fs-list-col-selection\"></td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td fs-list-footer-cell\n      *ngIf=\"!column.footerColspanned\"\n      [column]=\"column\"\n      [rows]=\"rows\"\n      [ngClass]=\"column.footerConfigs.classesArray\"\n      [attr.colspan]=\"column.footerConfigs.colspan\"\n      [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<td *ngIf=\"reorderController.rightReorderActivated$ | async\" class=\"fs-list-col row-actions\"></td>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.enabled && reorderController.strategy === ReorderStrategy.Manual)\" class=\"fs-list-col drag-col\"></td>\n",
+            template: "<td *ngIf=\"reorderController.leftReorderActivated$ | async\" class=\"fs-list-col drag-col\"></td>\n\n<td *ngIf=\"selection\" class=\"fs-list-col fs-list-col-selection\"></td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td fs-list-footer-cell\n      *ngIf=\"!column.footerColspanned\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [ngClass]=\"column.footerConfigs.classesArray\"\n      [attr.colspan]=\"column.footerConfigs.colspan\"\n      [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<td *ngIf=\"reorderController.rightReorderActivated$ | async\" class=\"fs-list-col row-actions\"></td>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.enabled && reorderController.strategy === ReorderStrategy.Manual)\" class=\"fs-list-col drag-col\"></td>\n",
             changeDetection: ChangeDetectionStrategy.OnPush
         }),
         __metadata("design:paramtypes", [ElementRef,
@@ -5351,15 +5367,6 @@ var FsFooterCellComponent = /** @class */ (function (_super) {
     function FsFooterCellComponent() {
         return _super.call(this) || this;
     }
-    FsFooterCellComponent.prototype._initCellContext = function () {
-        this.cellContext.column = this.column;
-        this.cellContext.$implicit = this.rows
-            .map(function (row) { return row.data; });
-    };
-    __decorate([
-        Input(),
-        __metadata("design:type", Array)
-    ], FsFooterCellComponent.prototype, "rows", void 0);
     FsFooterCellComponent = __decorate([
         Component({
             selector: '[fs-list-footer-cell]',
@@ -5564,7 +5571,10 @@ var FsRowActionsComponent = /** @class */ (function () {
         return index;
     };
     FsRowActionsComponent.prototype.clickOnTrigger = function (event) {
+        var _this = this;
         event.stopPropagation();
+        this.rowActions
+            .forEach(function (action) { return action.updateLabel(_this.row.data); });
     };
     /**
      * Emit that some row must be removed