@firestitch/list 9.12.2 → 9.12.5

package/app/classes/pagination-controller.d.ts

@@ -1,8 +1,7 @@
 import { Observable } from 'rxjs';
-import { Model } from 'tsmodels';
 import { FsListLoadMoreConfig, FsPaging, PageChange, QueryOffsetStrategy, QueryPageStrategy } from '../interfaces';
 import { PaginationStrategy } from '../enums/pagination-strategy.enum';
-export declare class PaginationController extends Model {
+export declare class PaginationController {
     limit: number;
     records: number;
     manual: boolean;
@@ -45,6 +44,7 @@ export declare class PaginationController extends Model {
      * Get query for request
      */
     get query(): QueryPageStrategy | QueryOffsetStrategy;
+    get loadMoreQuery(): QueryPageStrategy | QueryOffsetStrategy;
     /**
      * Query for Page Strategy
      */
@@ -93,7 +93,6 @@ export declare class PaginationController extends Model {
      * Showing 0 results sorted by Name, Ascending
      */
     get statusLabel(): string;
-    _fromJSON(value: any): void;
     initWithConfig(config: FsPaging | false, loadMore: FsListLoadMoreConfig | boolean, infinityScrollEnabled?: boolean): void;
     /**
      * If pagination has prev page when Page Strategy
@@ -114,10 +113,10 @@ export declare class PaginationController extends Model {
     /**
      * Update paging config and all related fields
      * @param config
-     * @param displayed
-     * @param loadMore
+     * @param displayedRecords
+     * @param loadMoreOperation
      */
-    updatePaging(config: any, displayed?: number, loadMore?: boolean): void;
+    updatePaging(config: any, displayedRecords?: number, loadMoreOperation?: boolean): void;
     /**
      * Update pages array with new pages count
      */
@@ -174,6 +173,11 @@ export declare class PaginationController extends Model {
      * Destroy
      */
     destroy(): void;
+    /**
+     * Update paging state
+     * @param params
+     */
+    private _fromParams;
     /**
      * Calc and update offset
      */

package/app/directives/content/content.directive.d.ts

@@ -0,0 +1,2 @@
+export declare class FsListContentDirective {
+}

package/bundles/firestitch-list.umd.js

@@ -1616,27 +1616,24 @@
         PaginationStrategy["None"] = "none";
     })(exports.PaginationStrategy || (exports.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 rxjs.BehaviorSubject(0); // Total pages
-            _this._strategy = exports.PaginationStrategy.None;
-            _this._removedRows = 0;
-            _this._pageChanged$ = new rxjs.Subject();
-            _this._pageReset$ = new rxjs.Subject();
-            _this._onDestroy$ = new rxjs.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 rxjs.BehaviorSubject(0); // Total pages
+            this._strategy = exports.PaginationStrategy.None;
+            this._removedRows = 0;
+            this._pageChanged$ = new rxjs.Subject();
+            this._pageReset$ = new rxjs.Subject();
+            this._onDestroy$ = new rxjs.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 () {
@@ -1651,7 +1648,8 @@
         });
         Object.defineProperty(PaginationController.prototype, "pages$", {
             get: function () {
-                return this._pages$.asObservable();
+                return this._pages$
+                    .pipe(operators.distinctUntilChanged());
             },
             enumerable: true,
             configurable: true
@@ -1722,6 +1720,22 @@
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(PaginationController.prototype, "loadMoreQuery", {
+            get: function () {
+                switch (this.strategy) {
+                    case exports.PaginationStrategy.Page:
+                        return this.query;
+                    case exports.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
@@ -1884,12 +1898,6 @@
             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) {
@@ -1899,12 +1907,12 @@
                 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", {
             /**
@@ -1949,15 +1957,15 @@
         /**
          * 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;
@@ -2144,6 +2152,19 @@
             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
          */
@@ -2156,25 +2177,8 @@
         PaginationController.prototype.updateTotalPages = function () {
             this.pages = Math.ceil(this.records / this.limit);
         };
-        __decorate([
-            tsmodels.Alias(),
-            __metadata("design:type", Object)
-        ], PaginationController.prototype, "limit", void 0);
-        __decorate([
-            tsmodels.Alias(),
-            __metadata("design:type", Number)
-        ], PaginationController.prototype, "records", void 0);
-        __decorate([
-            tsmodels.Alias(),
-            __metadata("design:type", Object)
-        ], PaginationController.prototype, "manual", void 0);
-        __decorate([
-            tsmodels.Alias('pages'),
-            __metadata("design:type", Number),
-            __metadata("design:paramtypes", [Number])
-        ], PaginationController.prototype, "pages", null);
         return PaginationController;
-    }(tsmodels.Model));
+    }());
 
 
     (function (SelectionChangeType) {
@@ -3394,9 +3398,20 @@
                 var _a;
                 (_a = _this.selection) === null || _a === void 0 ? void 0 : _a.closeSelectionDialog();
             }), operators.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 === exports.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
@@ -3423,6 +3438,7 @@
                 return source$;
             }), operators.takeUntil(this.onDestroy$))
                 .subscribe(function (response) {
+                _this.initialFetch = false;
                 _this.completeFetch(response);
             });
         };
@@ -3638,7 +3654,7 @@
                 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, lodashEs.cloneDeep(response.data));
+                this.emptyStateEnabled = this.emptyState.validate(query, lodashEs.cloneDeep(this.dataController.visibleRowsData));
             }
             if (this.afterFetchFn) {
                 this.afterFetchFn(query, this.dataController.visibleRowsData);
@@ -4636,7 +4652,7 @@
         FsListComponent = __decorate([
             core.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: core.ChangeDetectionStrategy.OnPush,
                 providers: [
                     GroupExpandNotifierService,
@@ -6138,6 +6154,17 @@
         return FsListDraggableRowDirective;
     }());
 
+    var FsListContentDirective = /** @class */ (function () {
+        function FsListContentDirective() {
+        }
+        FsListContentDirective = __decorate([
+            core.Directive({
+                selector: '[fs-list-content]',
+            })
+        ], FsListContentDirective);
+        return FsListContentDirective;
+    }());
+
     var FsListModule = /** @class */ (function () {
         function FsListModule() {
         }
@@ -6207,6 +6234,7 @@
                     FsListDraggableListDirective,
                     FsListDraggableRowDirective,
                     FsListEmptyStateDirective,
+                    FsListContentDirective,
                     // Dialog
                     CustomizeColsDialogComponent,
                 ],
@@ -6227,6 +6255,7 @@
                     FsListGroupCellDirective,
                     FsListGroupExpandTriggerDirective,
                     FsListEmptyStateDirective,
+                    FsListContentDirective,
                 ],
             })
         ], FsListModule);
@@ -6249,6 +6278,7 @@
     exports.FsListCellDirective = FsListCellDirective;
     exports.FsListColumnDirective = FsListColumnDirective;
     exports.FsListComponent = FsListComponent;
+    exports.FsListContentDirective = FsListContentDirective;
     exports.FsListEmptyStateDirective = FsListEmptyStateDirective;
     exports.FsListFooterDirective = FsListFooterDirective;
     exports.FsListHeaderDirective = FsListHeaderDirective;