@firestitch/list 12.2.0 → 12.3.1

package/fesm2015/firestitch-list.js

@@ -29,26 +29,24 @@ import * as i1$1 from '@firestitch/prompt';
 import { FsPromptModule } from '@firestitch/prompt';
 import * as i4$1 from '@firestitch/file';
 import { FsFileModule } from '@firestitch/file';
+import * as i5$1 from '@firestitch/common';
+import { getNormalizedPath, FsCommonModule } from '@firestitch/common';
 import { isString, isObject, isBoolean, isNumber, isFunction, get, cloneDeep, random, mergeWith, merge as merge$1 } from 'lodash-es';
 import { BehaviorSubject, Subject, merge, Observable, from, combineLatest, of } from 'rxjs';
 import { takeUntil, tap, skip, distinctUntilChanged, take, map, debounceTime, switchMap, mapTo, catchError, shareReplay, filter } from 'rxjs/operators';
 import * as i3$3 from '@firestitch/selection';
-import { getNormalizedPath } from '@firestitch/common';
 import * as i9 from '@firestitch/drawer';
-import { __decorate, __metadata } from 'tslib';
-import { Model, Alias } from 'tsmodels';
 import * as i1 from '@firestitch/store';
 import { FsPersistanceStore } from '@firestitch/store';
 import * as i5 from '@angular/flex-layout/extended';
 import * as i3$2 from '@angular/flex-layout/flex';
 
-class StyleConfig extends Model {
+class StyleConfig {
     constructor(config = {}) {
-        super();
         this.className = []; // Can't be used in tempaltes!
         this.classesArray = []; // Can be used in tempaltes
         this.classesString = '';
-        this._fromJSON(config);
+        this._init(config);
     }
     /**
      * Create static array of styles for using in templates
@@ -98,6 +96,11 @@ class StyleConfig extends Model {
         }
         this.className = targetValue;
     }
+    _init(config) {
+        this.colspan = config.colspan;
+        this.align = config.align;
+        this.className = config.className;
+    }
     /**
      * Merge params into array
      * @param to
@@ -112,18 +115,6 @@ class StyleConfig extends Model {
         }
     }
 }
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], StyleConfig.prototype, "colspan", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], StyleConfig.prototype, "align", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], StyleConfig.prototype, "className", void 0);
 
 var SortingDirection;
 (function (SortingDirection) {
@@ -299,14 +290,13 @@ var ActionType;
     ActionType["MiniFab"] = "mini-fab";
 })(ActionType || (ActionType = {}));
 
-class RowAction extends Model {
+class RowAction {
     constructor(config = {}) {
-        super();
         this.label = '';
         this.classArray = [];
         this.isShown = true;
         this._isGroup = false;
-        this._fromJSON(config);
+        this._init(config);
         if (Array.isArray(this.rowActions)) {
             this._isGroup = true;
         }
@@ -314,14 +304,16 @@ class RowAction extends Model {
     get isGroup() {
         return this._isGroup;
     }
-    _fromJSON(value) {
-        super._fromJSON(value);
-        if (value.type === void 0) {
-            this.type = ActionType.Basic;
-        }
-        if (this.menu === void 0) {
-            this.menu = true;
-        }
+    _init(value) {
+        var _a, _b, _c;
+        this.icon = value.icon;
+        this.menu = (_a = value.menu) !== null && _a !== void 0 ? _a : true;
+        this.remove = value.remove;
+        this.className = value.className;
+        this.type = (_b = value.type) !== null && _b !== void 0 ? _b : ActionType.Basic;
+        this.show = value.show;
+        this.restore = value.restore;
+        this.rowActions = (_c = value.rowActions) === null || _c === void 0 ? void 0 : _c.map((action) => new RowAction(action));
         // Re-assign click function
         const clickFn = value.click;
         this.click = (row, event, index, rowActionsRef = null) => {
@@ -405,38 +397,6 @@ class RowAction extends Model {
         }
     }
 }
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], RowAction.prototype, "icon", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], RowAction.prototype, "menu", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], RowAction.prototype, "remove", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], RowAction.prototype, "className", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], RowAction.prototype, "type", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Function)
-], RowAction.prototype, "show", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], RowAction.prototype, "restore", void 0);
-__decorate([
-    Alias('rowActions', RowAction),
-    __metadata("design:type", Array)
-], RowAction.prototype, "rowActions", void 0);
 
 class ColumnsController {
     constructor() {
@@ -2614,9 +2574,8 @@ class ExternalParamsController {
 }
 
 const SHOW_DELETED_FILTERS_KEY = '$$_show_deleted_$$';
-class List extends Model {
+class List {
     constructor(el, config = {}, fsScroll, selectionDialog, router, route, persistance, inDialog) {
-        super();
         this.el = el;
         this.config = config;
         this.fsScroll = fsScroll;
@@ -2626,7 +2585,6 @@ class List extends Model {
         this.persistance = persistance;
         this.inDialog = inDialog;
         this.filters = [];
-        this.scrollable = false;
         // @Alias('rows') private _rows: any;
         this.initialized$ = new BehaviorSubject(false);
         this.loading$ = new BehaviorSubject(false);
@@ -2649,7 +2607,6 @@ class List extends Model {
         this.emptyStateEnabled = false;
         this.onDestroy$ = new Subject();
         this._filtersQuery = new BehaviorSubject(null);
-        this._fromJSON(config);
         this.initialize(config);
         this._headerConfig = new StyleConfig(config.header);
         this._groupCellConfig = new StyleConfig(config.cell);
@@ -2839,6 +2796,24 @@ class List extends Model {
      * @param config
      */
     initialize(config) {
+        var _a;
+        this.heading = config.heading;
+        this.trackBy = config.trackBy;
+        this.subheading = config.subheading;
+        this.rowActionsRaw = config.rowActions;
+        this.rowClass = config.rowClass;
+        this.rowEvents = config.rowEvents;
+        this.restore = config.restore;
+        this.persist = config.persist;
+        this.filters = (_a = config.filters) !== null && _a !== void 0 ? _a : [];
+        this.filterInitCb = config.filterInit;
+        this.filterChangeCb = config.filterChange;
+        this.savedFilters = config.savedFilters;
+        this.scrollable = config.scrollable;
+        this.noResults = config.noResults;
+        this.emptyState = config.emptyState;
+        this.fetchFn = config.fetch;
+        this.afterFetchFn = config.afterFetch;
         this.columns.initConfig(config.column);
         this.initDefaultOptions(config);
         this.initRestore();
@@ -3123,7 +3098,7 @@ class List extends Model {
             persist: this.persist,
             items: this.filters || [],
             savedFilters: this.savedFilters,
-            inline: this.inlineFilters,
+            // inline: this.inlineFilters,
             actions: this.actions.actions,
             queryParam: this.queryParam,
             sorts: sortValues,
@@ -3279,82 +3254,6 @@ class List extends Model {
         }
     }
 }
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], List.prototype, "heading", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], List.prototype, "trackBy", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", String)
-], List.prototype, "subheading", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "inlineFilters", void 0);
-__decorate([
-    Alias('rowActions'),
-    __metadata("design:type", Array)
-], List.prototype, "rowActionsRaw", void 0);
-__decorate([
-    Alias('rowClass'),
-    __metadata("design:type", Object)
-], List.prototype, "rowClass", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "rowEvents", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "restore", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "columnTemplates", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Boolean)
-], List.prototype, "persist", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "filters", void 0);
-__decorate([
-    Alias('filterInit'),
-    __metadata("design:type", Function)
-], List.prototype, "filterInitCb", void 0);
-__decorate([
-    Alias('filterChange'),
-    __metadata("design:type", Function)
-], List.prototype, "filterChangeCb", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "savedFilters", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "scrollable", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "noResults", void 0);
-__decorate([
-    Alias(),
-    __metadata("design:type", Object)
-], List.prototype, "emptyState", void 0);
-__decorate([
-    Alias('fetch'),
-    __metadata("design:type", Function)
-], List.prototype, "fetchFn", void 0);
-__decorate([
-    Alias('afterFetch'),
-    __metadata("design:type", Function)
-], List.prototype, "afterFetchFn", void 0);
 
 var ReorderPosition;
 (function (ReorderPosition) {
@@ -4699,7 +4598,7 @@ class FsRowComponent {
     }
 }
 FsRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowComponent, deps: [{ token: i0.ElementRef }, { token: ReorderController }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: FsListDraggableListDirective }], target: i0.ɵɵFactoryTarget.Component });
-FsRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowComponent, selector: "[fs-list-row]", inputs: { row: "row", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", hasRowActions: "hasRowActions", rowEvents: "rowEvents", rowClass: "rowClass", restoreMode: "restoreMode", rowIndex: "rowIndex", columns: "columns", selection: "selection", rowRemoved: "rowRemoved" }, host: { properties: { "attr.role": "this.role", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"reorderController.leftReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Selection -->\n<ng-container *ngIf=\"selection\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isFooter\">\n      <mat-checkbox (change)=\"selectRow($event)\"\n                    [checked]=\"selected\"\n                    [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td fs-cell\n      *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [class]=\"column.cellConfigs.classesString\"\n      [ngClass]=\"{ 'primary-col': isFirst }\"\n      [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n      [attr.width]=\"column.width\"\n  >\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<ng-container *ngIf=\"reorderController.rightReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.manualReorderActivated$ | async)\" class=\"fs-list-col row-actions\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions [row]=\"row\"\n                         [index]=\"rowIndex\"\n                         [rowActions]=\"rowActions\"\n                         [menuRowActions]=\"menuRowActions\"\n                         [inlineRowActions]=\"inlineRowActions\"\n                         [restoreAction]=\"restoreAction\"\n                         [restoreMode]=\"restoreMode\"\n                         [rowRemoved]=\"rowRemoved\"\n    ></fs-list-row-actions>\n  </ng-container>\n</td>\n\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td class=\"fs-list-col drag-col\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\"\n    >\n      <mat-icon>drag_handle</mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>\n", components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsRowComponent, selector: "[fs-list-row]", inputs: { row: "row", rowActionsRaw: "rowActionsRaw", groupActionsRaw: "groupActionsRaw", hasRowActions: "hasRowActions", rowEvents: "rowEvents", rowClass: "rowClass", restoreMode: "restoreMode", rowIndex: "rowIndex", columns: "columns", selection: "selection", rowRemoved: "rowRemoved" }, host: { properties: { "attr.role": "this.role", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"reorderController.leftReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Selection -->\n<ng-container *ngIf=\"selection\">\n  <td class=\"fs-list-col fs-list-col-selection\">\n    <ng-container *ngIf=\"!row.isFooter\">\n      <mat-checkbox (change)=\"selectRow($event)\"\n                    [checked]=\"selected\"\n                    [indeterminate]=\"indeterminateSelected\">\n      </mat-checkbox>\n    </ng-container>\n  </td>\n</ng-container>\n\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n  <td fs-cell\n      *ngIf=\"(isGroupRow && !column.groupHeaderColspanned)\n        || (isGroupFooterRow && !column.groupFooterColspanned)\n        || (!isGroupRow && !isGroupFooterRow && !column.cellColspanned)\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [class]=\"(isGroupRow && column.groupHeaderConfigs.classesString)\n        || (isGroupFooterRow && column.groupFooterConfigs.classesString)\n        || (!isGroupFooterRow && column.cellConfigs.classesString)\"\n      [ngClass]=\"{ 'primary-col': isFirst }\"\n      [attr.colspan]=\"(isGroupRow && column.groupHeaderConfigs.colspan)\n        || (isGroupFooterRow && column.groupFooterConfigs.colspan)\n        || column.cellConfigs.colspan\"\n      [attr.width]=\"column.width\"\n  >\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<ng-container *ngIf=\"reorderController.rightReorderActivated$ | async\">\n  <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.manualReorderActivated$ | async)\" class=\"fs-list-col row-actions\">\n  <ng-container *ngIf=\"!isGroupFooterRow\">\n    <fs-list-row-actions [row]=\"row\"\n                         [index]=\"rowIndex\"\n                         [rowActions]=\"rowActions\"\n                         [menuRowActions]=\"menuRowActions\"\n                         [inlineRowActions]=\"inlineRowActions\"\n                         [restoreAction]=\"restoreAction\"\n                         [restoreMode]=\"restoreMode\"\n                         [rowRemoved]=\"rowRemoved\"\n    ></fs-list-row-actions>\n  </ng-container>\n</td>\n\n<ng-template #dragCell>\n  <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\n    <td class=\"fs-list-col drag-col\"\n        (mousedown)=\"dragStart($event)\"\n        (touchstart)=\"dragStart($event)\"\n    >\n      <mat-icon>drag_handle</mat-icon>\n    </td>\n  </ng-container>\n  <ng-template #emptyCell>\n    <td class=\"fs-list-col drag-col\"></td>\n  </ng-template>\n</ng-template>\n", components: [{ type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i3$1.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsRowComponent, decorators: [{
             type: Component,
             args: [{
@@ -4987,7 +4886,7 @@ class FsPaginationComponent {
     }
 }
 FsPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPaginationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-FsPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "<ng-container *ngIf=\"!pagination.loadMoreEnabled; else loadMoreButton\">\n  <div class=\"paging\" *ngIf=\"pagination?.pages\">\n    <div class=\"records\"></div>\n    <div fxFlex>\n      <div class=\"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 }} of {{ pagination.pages }}\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\n      </div>\n    </div>\n  </div>\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:block}.paging{display:flex}.paging .pages{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none}.paging .pages a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}.paging .pages a:not(.page){padding:10px}.paging .pages a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.paging .pages .number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], components: [{ type: i2$1.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+FsPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: { pagination: "pagination", rows: "rows" }, ngImport: i0, template: "<ng-container *ngIf=\"!pagination.loadMoreEnabled; else loadMoreButton\">\n  <div class=\"paging\" *ngIf=\"pagination?.pages\">\n    <div class=\"records\"></div>\n    <div fxFlex>\n      <div class=\"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\n      </div>\n    </div>\n  </div>\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:block}.paging{display:flex}.paging .pages{display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none}.paging .pages a{text-align:center;color:#000000de;text-decoration:none;font-size:15px;cursor:pointer;display:flex}.paging .pages a:not(.page){padding:10px}.paging .pages a.disabled{pointer-events:none;cursor:default;color:#d8d8d8}.paging .pages .number{font-size:90%}.fs-list-load-more button{width:100%;margin-top:10px}\n"], components: [{ type: i2$1.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleRadius", "matRippleDisabled", "matRippleTrigger", "matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleAnimation"], exportAs: ["matRipple"] }], pipes: { "fsFormatNumber": i5$1.FsFormatNumberPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsPaginationComponent, decorators: [{
             type: Component,
             args: [{
@@ -5488,7 +5387,8 @@ FsListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FsPromptModule,
         MatDialogModule,
         MatTooltipModule,
-        FsFileModule], exports: [FsListComponent,
+        FsFileModule,
+        FsCommonModule], exports: [FsListComponent,
         FsRowComponent,
         FsCellComponent,
         FsListLoaderComponent,
@@ -5518,6 +5418,7 @@ FsListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             MatDialogModule,
             MatTooltipModule,
             FsFileModule,
+            FsCommonModule,
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FsListModule, decorators: [{
             type: NgModule,
@@ -5539,6 +5440,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                         MatDialogModule,
                         MatTooltipModule,
                         FsFileModule,
+                        FsCommonModule,
                     ],
                     declarations: [
                         // Components