@firestitch/list 13.1.0 → 13.2.0

package/fesm2020/firestitch-list.mjs

@@ -2660,6 +2660,24 @@ class SortingController {
         this.sortBy(column);
         this.sortDirection(column.direction || SortingDirection.asc);
     }
+    /**
+     * Merge sorting and fake sorting cols
+     * Fake sorting cols it's cols which don't represented in table cols, like abstract cols
+     */
+    makeSortingList() {
+        return [
+            ...this.sortingColumns,
+            ...this.fakeSortingColumns,
+        ].reduce((acc, column) => {
+            const sortingItem = {
+                name: column.title,
+                value: column.name,
+                default: this.sortingColumn && this.sortingColumn.name === column.name,
+            };
+            acc.push(sortingItem);
+            return acc;
+        }, []);
+    }
     getColumn(name) {
         return [...this.sortingColumns, ...this.fakeSortingColumns]
             .find((col) => col.name === name && col.sortable);
@@ -3591,7 +3609,6 @@ class PaginationController {
         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;
@@ -3599,9 +3616,7 @@ class PaginationController {
         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];
     }
     // Total pages
@@ -3664,13 +3679,15 @@ class PaginationController {
     }
     get loadMoreQuery() {
         switch (this.strategy) {
-            case PaginationStrategy.Page:
+            case PaginationStrategy.Page: {
                 return this.query;
-            case PaginationStrategy.Offset:
+            }
+            case PaginationStrategy.Offset: {
                 const query = this.queryOffsetStrategy;
                 query.limit = query.offset + query.limit;
                 query.offset = 0;
                 return query;
+            }
         }
         return {};
     }
@@ -3761,10 +3778,22 @@ class PaginationController {
         return false;
     }
     get loadMoreEnabled() {
-        return this._loadMoreEnabled;
+        return this._loadMoreConfig.enabled;
     }
-    get loadMoreText() {
-        return this._loadMoreText;
+    get loadMoreLabel() {
+        return this._loadMoreConfig.label;
+    }
+    get loadMoreButtonColor() {
+        return this._loadMoreConfig.buttonColor;
+    }
+    get loadMoreButtonClass() {
+        if (this._loadMoreConfig.buttonType === 'basic') {
+            return '';
+        }
+        return `mat-${this._loadMoreConfig.buttonType}-button`;
+    }
+    get loadMoreButtonType() {
+        return this._loadMoreConfig.buttonType;
     }
     get infinityScrollEnabled() {
         return this._infinityScrollEnabled;
@@ -3801,9 +3830,7 @@ class PaginationController {
             }
             this.strategy = config.strategy;
         }
-        if (loadMore) {
-            this.setLoadMore(loadMore);
-        }
+        this.setLoadMore(loadMore);
         this._infinityScrollEnabled = infinityScrollEnabled;
     }
     /**
@@ -3892,10 +3919,15 @@ class PaginationController {
     //   this.pagesArray = Object.assign([], pagesArr);
     // }
     setLoadMore(config) {
-        this._loadMoreEnabled = !!config;
-        if (this._loadMoreEnabled && isObject(config) && config.label) {
-            this._loadMoreText = config.label;
-        }
+        const loadMoreConfig = typeof config === 'boolean' ? {
+            enabled: !!config,
+        } : config;
+        this._loadMoreConfig = {
+            enabled: true,
+            label: 'Load More',
+            buttonType: 'basic',
+            ...loadMoreConfig,
+        };
     }
     /**
      * Update dispayed records counter
@@ -4602,20 +4634,7 @@ class List {
         if (this.filterConfig) {
             return;
         }
-        // Merge sorting and fake sorting cols
-        // Fake sorting cols it's cols which don't represented in table cols, like abstract cols
-        const sortValues = [
-            ...this.sorting.sortingColumns,
-            ...this.sorting.fakeSortingColumns,
-        ].reduce((acc, column) => {
-            const sortingItem = {
-                name: column.title,
-                value: column.name,
-                default: this.sorting.sortingColumn && this.sorting.sortingColumn.name === column.name,
-            };
-            acc.push(sortingItem);
-            return acc;
-        }, []);
+        const sortValues = this.sorting.makeSortingList();
         const sortConfig = this.sorting.sortingColumn
             ? { value: this.sorting.sortingColumn.name, direction: this.sorting.sortingColumn.direction }
             : null;
@@ -5217,10 +5236,10 @@ class FsPaginationComponent {
     }
 }
 FsPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsPaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "<ng-container *ngIf=\"!pagination.loadMoreEnabled; else loadMoreButton\">\n  <ng-container *ngIf=\"pagination?.pages\">\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"first\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goFirst()\">\n      <i class=\"material-icons\">first_page</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"previous\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goPrev()\">\n      <i class=\"material-icons\">keyboard_arrow_left</i>\n    </a>\n\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of {{ pagination.pages | fsFormatNumber }}\n    </div>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"next\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goNext()\">\n      <i class=\"material-icons\">keyboard_arrow_right</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"last\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goLast()\">\n      <i class=\"material-icons\">last_page</i>\n    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #loadMoreButton>\n  <div class=\"fs-list-load-more\" *ngIf=\"pagination.hasNextPage\">\n    <button mat-button (click)=\"pagination.goNext()\">{{ pagination.loadMoreText }}</button>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "fsFormatNumber": i4.FsFormatNumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "<ng-container *ngIf=\"!pagination.loadMoreEnabled; else loadMoreButton\">\n  <ng-container *ngIf=\"pagination?.pages\">\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"first\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goFirst()\">\n      <i class=\"material-icons\">first_page</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"previous\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goPrev()\">\n      <i class=\"material-icons\">keyboard_arrow_left</i>\n    </a>\n\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of {{ pagination.pages | fsFormatNumber }}\n    </div>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"next\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goNext()\">\n      <i class=\"material-icons\">keyboard_arrow_right</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"last\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goLast()\">\n      <i class=\"material-icons\">last_page</i>\n    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #loadMoreButton>\n  <div class=\"fs-list-load-more\" *ngIf=\"pagination.hasNextPage\">\n    <button \n        mat-button\n        type=\"button\"\n        [class]=\"pagination.loadMoreButtonClass\"\n        [color]=\"pagination.loadMoreButtonColor\"\n        (click)=\"pagination.goNext()\">\n       {{ pagination.loadMoreLabel }}\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], pipes: { "fsFormatNumber": i4.FsFormatNumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsPaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fs-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!pagination.loadMoreEnabled; else loadMoreButton\">\n  <ng-container *ngIf=\"pagination?.pages\">\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"first\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goFirst()\">\n      <i class=\"material-icons\">first_page</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"previous\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goPrev()\">\n      <i class=\"material-icons\">keyboard_arrow_left</i>\n    </a>\n\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of {{ pagination.pages | fsFormatNumber }}\n    </div>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"next\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goNext()\">\n      <i class=\"material-icons\">keyboard_arrow_right</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"last\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goLast()\">\n      <i class=\"material-icons\">last_page</i>\n    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #loadMoreButton>\n  <div class=\"fs-list-load-more\" *ngIf=\"pagination.hasNextPage\">\n    <button mat-button (click)=\"pagination.goNext()\">{{ pagination.loadMoreText }}</button>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"] }]
+            args: [{ selector: 'fs-list-pagination', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"!pagination.loadMoreEnabled; else loadMoreButton\">\n  <ng-container *ngIf=\"pagination?.pages\">\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"first\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goFirst()\">\n      <i class=\"material-icons\">first_page</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"previous\" [class.disabled]=\"!pagination.hasPrevPage\" (click)=\"pagination.goPrev()\">\n      <i class=\"material-icons\">keyboard_arrow_left</i>\n    </a>\n\n    <div class=\"number\">\n      {{ pagination.page | fsFormatNumber }} of {{ pagination.pages | fsFormatNumber }}\n    </div>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"next\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goNext()\">\n      <i class=\"material-icons\">keyboard_arrow_right</i>\n    </a>\n\n    <a matRipple [matRippleRadius]=\"15\" [matRippleCentered]=\"true\" class=\"last\" [class.disabled]=\"!pagination.hasNextPage\" (click)=\"pagination.goLast()\">\n      <i class=\"material-icons\">last_page</i>\n    </a>\n  </ng-container>\n</ng-container>\n\n<ng-template #loadMoreButton>\n  <div class=\"fs-list-load-more\" *ngIf=\"pagination.hasNextPage\">\n    <button \n        mat-button\n        type=\"button\"\n        [class]=\"pagination.loadMoreButtonClass\"\n        [color]=\"pagination.loadMoreButtonColor\"\n        (click)=\"pagination.goNext()\">\n       {{ pagination.loadMoreLabel }}\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none;width:100%}a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}a:not(.page){padding:10px}a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { pagination: [{
                 type: Input
             }], rows: [{
@@ -5419,6 +5438,7 @@ class FsListComponent {
      */
     columnVisibility(name, show) {
         this.columnsVisibility([{ name, show }]);
+        this.filterRef.updateSortings(this.list.sorting.makeSortingList());
     }
     /**
      * Update visibility for list of specific columns