@firestitch/list 12.1.1 → 12.1.4

package/app/interfaces/listconfig.interface.d.ts

@@ -31,7 +31,7 @@ export interface FsListConfig {
     savedFilters?: IFilterSavedFiltersConfig;
     persist?: FsListPersitance;
     rowActions?: (FsListRowActionGroup | FsListRowAction)[];
-    rowClass?: (row: any) => string;
+    rowClass?: (row: any, options?: FsListRowClassOptions) => string;
     actions?: FsListAction[];
     fetch?: FsListFetchFn;
     afterFetch?: FsListAfterFetchFn;
@@ -241,3 +241,8 @@ export declare type FsListFetchFn = (query: Record<string, any>, options: FsList
 }>;
 export declare type FsListAfterFetchFn = (query: Record<string, any>, data: unknown[]) => void;
 export declare type FsListAfterContentInitFn = (query: Record<string, any>, data: unknown[]) => void;
+export interface FsListRowClassOptions {
+    index: number;
+    groupIndex?: number;
+    groupChildIndex?: number;
+}

package/app/models/column-attributes.d.ts

@@ -5,7 +5,7 @@ export declare class ColumnAttributes {
     private _customize;
     private _sortable;
     private _sortableDefault;
-    private _direction;
+    private _direction$;
     private _align;
     private _width;
     private _className;
@@ -25,6 +25,7 @@ export declare class ColumnAttributes {
     get sortableDefault(): boolean;
     set direction(value: 'asc' | 'desc');
     get direction(): 'asc' | 'desc';
+    get direction$(): Observable<'asc' | 'desc'>;
     set align(value: string);
     get align(): string;
     set width(value: string);

package/app/models/column.model.d.ts

@@ -35,6 +35,7 @@ export declare class Column {
     get sortableDefault(): boolean;
     set sortingDirection(value: 'asc' | 'desc');
     get sortingDirection(): 'asc' | 'desc';
+    get sortingDirection$(): Observable<'asc' | 'desc'>;
     get visible(): boolean;
     get visible$(): Observable<boolean>;
     get direction(): "desc" | "asc";

package/bundles/firestitch-list.umd.js

@@ -535,6 +535,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(Column.prototype, "sortingDirection$", {
+            get: function () {
+                return this._attributes.direction$;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(Column.prototype, "visible", {
             get: function () {
                 return this._attributes.visible;
@@ -2838,6 +2845,7 @@
         function ColumnAttributes(attrs) {
             if (attrs === void 0) { attrs = {}; }
             this._customize = true;
+            this._direction$ = new ColumnAsyncAttribute(null);
             this._visible$ = new ColumnAsyncAttribute(true);
             this._init(attrs);
         }
@@ -2901,11 +2909,18 @@
         });
         Object.defineProperty(ColumnAttributes.prototype, "direction", {
             get: function () {
-                return this._direction;
+                return this._direction$.value;
             },
             // direction
             set: function (value) {
-                this._direction = value;
+                this._direction$.next(value);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ColumnAttributes.prototype, "direction$", {
+            get: function () {
+                return this._direction$.asObservable();
             },
             enumerable: false,
             configurable: true
@@ -2986,6 +3001,21 @@
                             _this.direction = attrs[key];
                         }
                         break;
+                    case 'sortable':
+                        {
+                            _this.sortable = attrs[key];
+                        }
+                        break;
+                    case 'show':
+                        {
+                            _this.visible = attrs[key];
+                        }
+                        break;
+                    case 'visible':
+                        {
+                            _this.visible = attrs[key];
+                        }
+                        break;
                 }
             });
         };
@@ -3146,8 +3176,7 @@
             this.sortDirection(exports.SortingDirection.asc);
         };
         SortingController.prototype.getColumn = function (name) {
-            return this.sortingColumns.find(function (col) { return col.name === name && col.sortable; }) ||
-                this.fakeSortingColumns.find(function (col) { return col.name === name && col.sortable; });
+            return __spreadArray(__spreadArray([], __read(this.sortingColumns)), __read(this.fakeSortingColumns)).find(function (col) { return col.name === name && col.sortable; });
         };
         /**
          * Destroy
@@ -4906,7 +4935,7 @@
         return FsHeadCellComponent;
     }(FsCellComponent));
     FsHeadCellComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHeadCellComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.KeyValueDiffers }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FsHeadCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHeadCellComponent, selector: "[fs-head-cell]", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"wrap\">\n    <span class=\"title\">\n      <ng-template [ngIf]=\"!column.headerTemplate\">{{column.title}}</ng-template>\n      <ng-template\n        [ngIf]=\"column.headerTemplate\"\n        [ngTemplateOutlet]=\"column.headerTemplate\"\n        [ngTemplateOutletContext]=\"cellContext\">\n      </ng-template>\n    </span>\n  <div class=\"direction\" *ngIf=\"column.ordered\" [ngSwitch]=\"column.sortingDirection\">\n    <mat-icon class=\"material-icons\" role=\"img\" aria-label=\"arrow_downward\" *ngSwitchCase=\"'asc'\">arrow_downward</mat-icon>\n    <mat-icon class=\"material-icons\" role=\"img\" aria-label=\"arrow_upward\" *ngSwitchCase=\"'desc'\">arrow_upward</mat-icon>\n  </div>\n</div>\n", components: [{ type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    FsHeadCellComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FsHeadCellComponent, selector: "[fs-head-cell]", usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"wrap\">\n    <span class=\"title\">\n      <ng-template [ngIf]=\"!column.headerTemplate\">{{column.title}}</ng-template>\n      <ng-template\n        [ngIf]=\"column.headerTemplate\"\n        [ngTemplateOutlet]=\"column.headerTemplate\"\n        [ngTemplateOutletContext]=\"cellContext\">\n      </ng-template>\n    </span>\n  <div class=\"direction\" *ngIf=\"column.ordered\" [ngSwitch]=\"column.sortingDirection$ | async\">\n    <mat-icon class=\"material-icons\" role=\"img\" aria-label=\"arrow_downward\" *ngSwitchCase=\"'asc'\">arrow_downward</mat-icon>\n    <mat-icon class=\"material-icons\" role=\"img\" aria-label=\"arrow_upward\" *ngSwitchCase=\"'desc'\">arrow_upward</mat-icon>\n  </div>\n</div>\n", components: [{ type: i3__namespace.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3__namespace$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3__namespace$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3__namespace$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], pipes: { "async": i3__namespace$1.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0__namespace, type: FsHeadCellComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5455,7 +5484,16 @@
                 if (this.row && this.row.isGroup)
                     cls += ' fs-list-row-group';
                 if (this.rowClass) {
-                    var resultClass = this.rowClass(this.row.data);
+                    var options = {
+                        index: this.rowIndex,
+                    };
+                    if (this.row.isGroup) {
+                        options.groupIndex = this.row.index;
+                    }
+                    else if (this.row.isChild) {
+                        options.groupChildIndex = this.row.index;
+                    }
+                    var resultClass = this.rowClass(this.row.data, options);
                     if (typeof resultClass === 'string') {
                         cls += " " + resultClass;
                     }