@firestitch/list 9.12.2 → 9.12.5

package/fesm5/firestitch-list.js

@@ -18,7 +18,7 @@ import { FsPrompt, FsPromptModule } from '@firestitch/prompt';
 import { FsFileModule } from '@firestitch/file';
 import { isString, isObject, isBoolean, isNumber, isFunction, get, cloneDeep, mergeWith, random, merge as merge$1 } from 'lodash-es';
 import { Subject, BehaviorSubject, Observable, merge, from, combineLatest, of } from 'rxjs';
-import { takeUntil, tap, take, map, debounceTime, switchMap, mapTo, catchError, distinctUntilChanged, shareReplay, skip, filter } from 'rxjs/operators';
+import { takeUntil, tap, distinctUntilChanged, take, map, debounceTime, switchMap, mapTo, catchError, shareReplay, skip, filter } from 'rxjs/operators';
 import { SelectionDialog } from '@firestitch/selection';
 import { getNormalizedPath } from '@firestitch/common';
 import { DrawerRef } from '@firestitch/drawer';
@@ -1423,27 +1423,24 @@ var PaginationStrategy;
     PaginationStrategy["None"] = "none";
 })(PaginationStrategy || (PaginationStrategy = {}));
 
-var PaginationController = /** @class */ (function (_super) {
-    __extends(PaginationController, _super);
+var PaginationController = /** @class */ (function () {
     function PaginationController() {
-        var _this = _super.call(this) || this;
-        _this.limit = 25;
-        _this.manual = false;
-        _this.page = 1; // Active page
-        _this.offset = 0;
+        this.limit = 25;
+        this.manual = false;
+        this.page = 1; // Active page
+        this.offset = 0;
         // public pagesArray = [];
-        _this.displayed = 0;
-        _this._pages$ = new BehaviorSubject(0); // Total pages
-        _this._strategy = PaginationStrategy.None;
-        _this._removedRows = 0;
-        _this._pageChanged$ = new Subject();
-        _this._pageReset$ = new Subject();
-        _this._onDestroy$ = new Subject();
-        _this._loadMoreEnabled = false;
-        _this._infinityScrollEnabled = false;
-        _this._loadMoreText = 'Load More';
-        _this._limits = [10, 25, 50, 100, 200];
-        return _this;
+        this.displayed = 0;
+        this._pages$ = new BehaviorSubject(0); // Total pages
+        this._strategy = PaginationStrategy.None;
+        this._removedRows = 0;
+        this._pageChanged$ = new Subject();
+        this._pageReset$ = new Subject();
+        this._onDestroy$ = new Subject();
+        this._loadMoreEnabled = false;
+        this._infinityScrollEnabled = false;
+        this._loadMoreText = 'Load More';
+        this._limits = [10, 25, 50, 100, 200];
     }
     Object.defineProperty(PaginationController.prototype, "pages", {
         get: function () {
@@ -1458,7 +1455,8 @@ var PaginationController = /** @class */ (function (_super) {
     });
     Object.defineProperty(PaginationController.prototype, "pages$", {
         get: function () {
-            return this._pages$.asObservable();
+            return this._pages$
+                .pipe(distinctUntilChanged());
         },
         enumerable: true,
         configurable: true
@@ -1529,6 +1527,22 @@ var PaginationController = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(PaginationController.prototype, "loadMoreQuery", {
+        get: function () {
+            switch (this.strategy) {
+                case PaginationStrategy.Page:
+                    return this.query;
+                case PaginationStrategy.Offset:
+                    var query = this.queryOffsetStrategy;
+                    query.limit = query.offset + query.limit;
+                    query.offset = 0;
+                    return query;
+            }
+            return {};
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(PaginationController.prototype, "queryPageStrategy", {
         /**
          * Query for Page Strategy
@@ -1691,12 +1705,6 @@ var PaginationController = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    PaginationController.prototype._fromJSON = function (value) {
-        _super.prototype._fromJSON.call(this, value);
-        if (!value.limit) {
-            this.limit = 25;
-        }
-    };
     PaginationController.prototype.initWithConfig = function (config, loadMore, infinityScrollEnabled) {
         if (infinityScrollEnabled === void 0) { infinityScrollEnabled = false; }
         if (config) {
@@ -1706,12 +1714,12 @@ var PaginationController = /** @class */ (function (_super) {
             if (config.limit) {
                 this.limit = config.limit;
             }
-            if (loadMore) {
-                this.setLoadMore(loadMore);
-            }
-            this._infinityScrollEnabled = infinityScrollEnabled;
             this.strategy = config.strategy;
         }
+        if (loadMore) {
+            this.setLoadMore(loadMore);
+        }
+        this._infinityScrollEnabled = infinityScrollEnabled;
     };
     Object.defineProperty(PaginationController.prototype, "_hasPrevPagePageStrategy", {
         /**
@@ -1756,15 +1764,15 @@ var PaginationController = /** @class */ (function (_super) {
     /**
      * Update paging config and all related fields
      * @param config
-     * @param displayed
-     * @param loadMore
+     * @param displayedRecords
+     * @param loadMoreOperation
      */
-    PaginationController.prototype.updatePaging = function (config, displayed, loadMore) {
-        if (displayed === void 0) { displayed = 0; }
-        if (loadMore === void 0) { loadMore = false; }
-        if (!loadMore) {
-            this._fromJSON(config);
-            this.displayed = displayed;
+    PaginationController.prototype.updatePaging = function (config, displayedRecords, loadMoreOperation) {
+        if (displayedRecords === void 0) { displayedRecords = 0; }
+        if (loadMoreOperation === void 0) { loadMoreOperation = false; }
+        if (!loadMoreOperation) {
+            this._fromParams(config);
+            this.displayed = displayedRecords;
         }
         else {
             this.records = config.records;
@@ -1951,6 +1959,19 @@ var PaginationController = /** @class */ (function (_super) {
         this._onDestroy$.next();
         this._onDestroy$.complete();
     };
+    /**
+     * Update paging state
+     * @param params
+     */
+    PaginationController.prototype._fromParams = function (params) {
+        var _a;
+        if (!this.loadMoreEnabled) {
+            this.limit = (_a = params.limit, (_a !== null && _a !== void 0 ? _a : 25));
+        }
+        this.records = params.records;
+        this.manual = params.manual;
+        this.pages = params.pages || 0;
+    };
     /**
      * Calc and update offset
      */
@@ -1963,25 +1984,8 @@ var PaginationController = /** @class */ (function (_super) {
     PaginationController.prototype.updateTotalPages = function () {
         this.pages = Math.ceil(this.records / this.limit);
     };
-    __decorate([
-        Alias(),
-        __metadata("design:type", Object)
-    ], PaginationController.prototype, "limit", void 0);
-    __decorate([
-        Alias(),
-        __metadata("design:type", Number)
-    ], PaginationController.prototype, "records", void 0);
-    __decorate([
-        Alias(),
-        __metadata("design:type", Object)
-    ], PaginationController.prototype, "manual", void 0);
-    __decorate([
-        Alias('pages'),
-        __metadata("design:type", Number),
-        __metadata("design:paramtypes", [Number])
-    ], PaginationController.prototype, "pages", null);
     return PaginationController;
-}(Model));
+}());
 
 var SelectionChangeType;
 (function (SelectionChangeType) {
@@ -3201,9 +3205,20 @@ var List = /** @class */ (function (_super) {
             var _a;
             (_a = _this.selection) === null || _a === void 0 ? void 0 : _a.closeSelectionDialog();
         }), map(function (params) {
-            var query = _this.paging.hasOffsetStrategy && params && params.loadOffset
-                ? Object.assign({}, _this.filtersQuery, _this.paging.loadDeletedOffsetQuery)
-                : Object.assign({}, _this.filtersQuery, _this.paging.query);
+            var query = Object.assign({}, _this.filtersQuery);
+            if (_this.paging.hasOffsetStrategy && params && params.loadOffset) {
+                query = Object.assign(query, _this.paging.loadDeletedOffsetQuery);
+            }
+            else {
+                var allRecordsRangeNeeded = (_this.initialFetch
+                    || _this.dataController.operation === FsListState.Reload) && _this.paging.loadMoreEnabled;
+                if (allRecordsRangeNeeded) {
+                    query = Object.assign(query, _this.paging.loadMoreQuery);
+                }
+                else {
+                    query = Object.assign(query, _this.paging.query);
+                }
+            }
             if (_this.sorting.sortingColumn) {
                 Object.assign(query, {
                     order: _this.sorting.sortingColumn.name + "," + _this.sorting.sortingColumn.direction
@@ -3230,6 +3245,7 @@ var List = /** @class */ (function (_super) {
             return source$;
         }), takeUntil(this.onDestroy$))
             .subscribe(function (response) {
+            _this.initialFetch = false;
             _this.completeFetch(response);
         });
     };
@@ -3445,7 +3461,7 @@ var List = /** @class */ (function (_super) {
             this.selection.selectedRowsIntersection(this.dataController.visibleRowsData);
         }
         if (((_c = this.emptyState) === null || _c === void 0 ? void 0 : _c.validate) && this.emptyStateTemplate) {
-            this.emptyStateEnabled = this.emptyState.validate(query, cloneDeep(response.data));
+            this.emptyStateEnabled = this.emptyState.validate(query, cloneDeep(this.dataController.visibleRowsData));
         }
         if (this.afterFetchFn) {
             this.afterFetchFn(query, this.dataController.visibleRowsData);
@@ -4443,7 +4459,7 @@ var FsListComponent = /** @class */ (function () {
     FsListComponent = __decorate([
         Component({
             selector: 'fs-list',
-            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",
+            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    <ng-content select=\"[fs-list-content]\"></ng-content>\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        </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",
             changeDetection: ChangeDetectionStrategy.OnPush,
             providers: [
                 GroupExpandNotifierService,
@@ -5945,6 +5961,17 @@ var FsListDraggableRowDirective = /** @class */ (function () {
     return FsListDraggableRowDirective;
 }());
 
+var FsListContentDirective = /** @class */ (function () {
+    function FsListContentDirective() {
+    }
+    FsListContentDirective = __decorate([
+        Directive({
+            selector: '[fs-list-content]',
+        })
+    ], FsListContentDirective);
+    return FsListContentDirective;
+}());
+
 var FsListModule = /** @class */ (function () {
     function FsListModule() {
     }
@@ -6014,6 +6041,7 @@ var FsListModule = /** @class */ (function () {
                 FsListDraggableListDirective,
                 FsListDraggableRowDirective,
                 FsListEmptyStateDirective,
+                FsListContentDirective,
                 // Dialog
                 CustomizeColsDialogComponent,
             ],
@@ -6034,6 +6062,7 @@ var FsListModule = /** @class */ (function () {
                 FsListGroupCellDirective,
                 FsListGroupExpandTriggerDirective,
                 FsListEmptyStateDirective,
+                FsListContentDirective,
             ],
         })
     ], FsListModule);
@@ -6051,5 +6080,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, FsListEmptyStateDirective, FsListFooterDirective, FsListHeaderDirective, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig, FsListConfigFactory as ɵa, GroupExpandNotifierService as ɵb, PersistanceController as ɵc, FsListGroupCellDirective as ɵd, FsListGroupExpandTriggerDirective as ɵe, FsListDraggableListDirective as ɵf, FsRowActionsComponent as ɵg, FsRowInlineActionComponent as ɵh, FsRowMenuActionComponent as ɵi, FsListLoaderComponent as ɵj, FsListSavedFiltersComponent as ɵk, FsListManageSavedFiltersComponent as ɵl, FsListDraggableRowDirective as ɵm, CustomizeColsDialogComponent as ɵn };
+export { ActionType, Column, FS_LIST_CONFIG, FS_LIST_DEFAULT_CONFIG, FsBodyComponent, FsCellComponent, FsFooterCellComponent, FsFooterComponent, FsFooterRowComponent, FsHeadCellComponent, FsHeadComponent, FsListCellDirective, FsListColumnDirective, FsListComponent, FsListContentDirective, FsListEmptyStateDirective, FsListFooterDirective, FsListHeaderDirective, FsListModule, FsListState, FsPaginationComponent, FsRowComponent, FsStatusComponent, List, PaginationController, PaginationStrategy, ReorderController, ReorderPosition, ReorderStrategy, RowAction, RowType, SelectionChangeType, SelectionController, SortingController, SortingDirection, StyleConfig, FsListConfigFactory as ɵa, GroupExpandNotifierService as ɵb, PersistanceController as ɵc, FsListGroupCellDirective as ɵd, FsListGroupExpandTriggerDirective as ɵe, FsListDraggableListDirective as ɵf, FsRowActionsComponent as ɵg, FsRowInlineActionComponent as ɵh, FsRowMenuActionComponent as ɵi, FsListLoaderComponent as ɵj, FsListSavedFiltersComponent as ɵk, FsListManageSavedFiltersComponent as ɵl, FsListDraggableRowDirective as ɵm, CustomizeColsDialogComponent as ɵn };
 //# sourceMappingURL=firestitch-list.js.map