@firestitch/list 9.12.4 → 9.12.5

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

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

package/bundles/firestitch-list.umd.js

@@ -3403,7 +3403,9 @@
                     query = Object.assign(query, _this.paging.loadDeletedOffsetQuery);
                 }
                 else {
-                    if (_this.initialFetch && _this.paging.loadMoreEnabled) {
+                    var allRecordsRangeNeeded = (_this.initialFetch
+                        || _this.dataController.operation === exports.FsListState.Reload) && _this.paging.loadMoreEnabled;
+                    if (allRecordsRangeNeeded) {
                         query = Object.assign(query, _this.paging.loadMoreQuery);
                     }
                     else {
@@ -4650,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,
@@ -6152,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() {
         }
@@ -6221,6 +6234,7 @@
                     FsListDraggableListDirective,
                     FsListDraggableRowDirective,
                     FsListEmptyStateDirective,
+                    FsListContentDirective,
                     // Dialog
                     CustomizeColsDialogComponent,
                 ],
@@ -6241,6 +6255,7 @@
                     FsListGroupCellDirective,
                     FsListGroupExpandTriggerDirective,
                     FsListEmptyStateDirective,
+                    FsListContentDirective,
                 ],
             })
         ], FsListModule);
@@ -6263,6 +6278,7 @@
     exports.FsListCellDirective = FsListCellDirective;
     exports.FsListColumnDirective = FsListColumnDirective;
     exports.FsListComponent = FsListComponent;
+    exports.FsListContentDirective = FsListContentDirective;
     exports.FsListEmptyStateDirective = FsListEmptyStateDirective;
     exports.FsListFooterDirective = FsListFooterDirective;
     exports.FsListHeaderDirective = FsListHeaderDirective;