@firestitch/list 18.0.63 → 18.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/components/body/row/menu-action/menu-action.component.d.ts +1 -1
- package/app/components/body/row/row.component.d.ts +3 -10
- package/app/components/head/head-cell/head-cell.component.d.ts +1 -7
- package/app/models/column.model.d.ts +2 -1
- package/app/models/row/_base-row.d.ts +1 -0
- package/app/models/row-action.model.d.ts +7 -3
- package/esm2022/app/components/body/row/actions/actions.component.mjs +5 -4
- package/esm2022/app/components/body/row/inline-action/inline-action.component.mjs +8 -7
- package/esm2022/app/components/body/row/menu-action/menu-action.component.mjs +7 -7
- package/esm2022/app/components/body/row/row.component.mjs +28 -46
- package/esm2022/app/components/head/head-cell/head-cell.component.mjs +9 -21
- package/esm2022/app/models/column.model.mjs +9 -5
- package/esm2022/app/models/row/_base-row.mjs +1 -1
- package/esm2022/app/models/row-action.model.mjs +16 -5
- package/esm2022/app/pipes/action-label.mjs +2 -2
- package/fesm2022/firestitch-list.mjs +66 -81
- package/fesm2022/firestitch-list.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, inject, ChangeDetectorRef, NgZone, ElementRef, Renderer2, Directive, Input, Pipe, EventEmitter, Component, ChangeDetectionStrategy, Output, input, effect, HostBinding, computed,
|
|
3
|
-
import { BehaviorSubject, Subject, Observable,
|
|
2
|
+
import { Injectable, inject, ChangeDetectorRef, NgZone, ElementRef, Renderer2, Directive, Input, Pipe, EventEmitter, Component, ChangeDetectionStrategy, Output, input, effect, HostBinding, computed, TemplateRef, ViewContainerRef, ViewChild, ContentChild, HostListener, ContentChildren, InjectionToken, Injector, NgModule } from '@angular/core';
|
|
3
|
+
import { BehaviorSubject, Subject, Observable, map as map$1, merge, of, from, combineLatest, EMPTY } from 'rxjs';
|
|
4
4
|
import { takeUntil, map, take, skip, filter, tap, distinctUntilChanged, shareReplay, delay, switchMap, debounceTime, mapTo, catchError } from 'rxjs/operators';
|
|
5
5
|
import { get, isString, isObject, isBoolean, isNumber, isFunction, cloneDeep, random, mergeWith } from 'lodash-es';
|
|
6
6
|
import { NgIf, NgSwitch, NgSwitchCase, NgClass, NgTemplateOutlet, AsyncPipe, Location, NgFor, DecimalPipe } from '@angular/common';
|
|
@@ -9,10 +9,10 @@ import { MatIcon } from '@angular/material/icon';
|
|
|
9
9
|
import * as i1$1 from '@firestitch/menu';
|
|
10
10
|
import { FsMenuComponent, FsMenuModule } from '@firestitch/menu';
|
|
11
11
|
import { FsPrompt } from '@firestitch/prompt';
|
|
12
|
+
import { RouterLink, ActivatedRoute } from '@angular/router';
|
|
13
|
+
import { MatButton, MatAnchor, MatIconButton, MatIconAnchor, MatFabButton, MatFabAnchor, MatMiniFabButton, MatMiniFabAnchor } from '@angular/material/button';
|
|
12
14
|
import * as i1 from '@firestitch/file';
|
|
13
15
|
import { FsFileModule } from '@firestitch/file';
|
|
14
|
-
import { MatButton, MatAnchor, MatIconButton, MatIconAnchor, MatFabButton, MatFabAnchor, MatMiniFabButton, MatMiniFabAnchor } from '@angular/material/button';
|
|
15
|
-
import { RouterLink, ActivatedRoute } from '@angular/router';
|
|
16
16
|
import { CdkScrollable } from '@angular/cdk/scrolling';
|
|
17
17
|
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialog } from '@angular/material/dialog';
|
|
18
18
|
import * as i1$2 from '@firestitch/common';
|
|
@@ -1302,11 +1302,11 @@ class RowAction {
|
|
|
1302
1302
|
label = '';
|
|
1303
1303
|
routerLink;
|
|
1304
1304
|
classArray = [];
|
|
1305
|
-
isShown = true;
|
|
1306
1305
|
click;
|
|
1307
1306
|
fileConfig;
|
|
1308
1307
|
_linkFn;
|
|
1309
1308
|
_isGroup = false;
|
|
1309
|
+
_visible = new BehaviorSubject(true);
|
|
1310
1310
|
constructor(config = {}) {
|
|
1311
1311
|
this._init(config);
|
|
1312
1312
|
if (Array.isArray(this.rowActions)) {
|
|
@@ -1319,6 +1319,16 @@ class RowAction {
|
|
|
1319
1319
|
getRowIcon(row) {
|
|
1320
1320
|
return typeof this.icon === 'function' ? this.icon(row) : this.icon;
|
|
1321
1321
|
}
|
|
1322
|
+
get visible$() {
|
|
1323
|
+
return this._visible.asObservable();
|
|
1324
|
+
}
|
|
1325
|
+
get hidden$() {
|
|
1326
|
+
return this._visible
|
|
1327
|
+
.pipe(map$1((visible) => !visible));
|
|
1328
|
+
}
|
|
1329
|
+
get visible() {
|
|
1330
|
+
return this._visible.getValue();
|
|
1331
|
+
}
|
|
1322
1332
|
_init(value) {
|
|
1323
1333
|
this.icon = value.icon;
|
|
1324
1334
|
this.menu = value.menu ?? true;
|
|
@@ -1358,14 +1368,14 @@ class RowAction {
|
|
|
1358
1368
|
action.checkShowStatus(row, index);
|
|
1359
1369
|
});
|
|
1360
1370
|
const groupVisible = !this.show || this.show(row, index);
|
|
1361
|
-
this.
|
|
1371
|
+
this._visible.next(groupVisible && this.rowActions.some((action) => action.visible));
|
|
1362
1372
|
}
|
|
1363
1373
|
else if (this.show) {
|
|
1364
|
-
this.
|
|
1374
|
+
this._visible.next(this.show(row, index));
|
|
1365
1375
|
}
|
|
1366
1376
|
}
|
|
1367
1377
|
updateLink(row) {
|
|
1368
|
-
if (!this.
|
|
1378
|
+
if (!this.visible) {
|
|
1369
1379
|
return;
|
|
1370
1380
|
}
|
|
1371
1381
|
if (this.isGroup) {
|
|
@@ -1408,7 +1418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1408
1418
|
type: Pipe,
|
|
1409
1419
|
args: [{
|
|
1410
1420
|
name: 'actionLabel',
|
|
1411
|
-
standalone: true
|
|
1421
|
+
standalone: true,
|
|
1412
1422
|
}]
|
|
1413
1423
|
}] });
|
|
1414
1424
|
|
|
@@ -1437,7 +1447,7 @@ class FsRowInlineActionComponent {
|
|
|
1437
1447
|
this.fileSelect.emit(event);
|
|
1438
1448
|
}
|
|
1439
1449
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowInlineActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1440
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowInlineActionComponent, isStandalone: true, selector: "fs-list-row-inline-action", inputs: { rowAction: "rowAction", row: "row" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n *ngIf=\"rowAction.
|
|
1450
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsRowInlineActionComponent, isStandalone: true, selector: "fs-list-row-inline-action", inputs: { rowAction: "rowAction", row: "row" }, outputs: { clicked: "clicked", fileSelect: "fileSelect" }, usesOnChanges: true, ngImport: i0, template: "<ng-container\n *ngIf=\"rowAction.visible$ | async\"\n [ngSwitch]=\"actionType\">\n <!-- Basic button -->\n <ng-container *ngSwitchCase=\"'basic'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-button\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <!-- Raised button -->\n <ng-container *ngSwitchCase=\"'raised'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-raised-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-raised-button\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <!-- Icon button -->\n <ng-container *ngSwitchCase=\"'icon'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-icon-button\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <!-- Fab button -->\n <ng-container *ngSwitchCase=\"'fab'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-fab\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-fab\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <!-- Mini Fab button -->\n <ng-container *ngSwitchCase=\"'mini-fab'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-mini-fab\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-mini-fab\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <ng-template #buttonContent>\n <ng-container *ngIf=\"!rowAction.fileConfig else uploadFileBtn\">\n <mat-icon *ngIf=\"icon\">\n {{ icon }}\n </mat-icon>\n {{ rowAction.label }}\n </ng-container>\n <ng-template #uploadFileBtn>\n <fs-file\n class=\"action-button\"\n [accept]=\"rowAction.fileConfig.accept || '*'\"\n [multiple]=\"rowAction.fileConfig.multiple\"\n [minWidth]=\"rowAction.fileConfig.minWidth\"\n [minHeight]=\"rowAction.fileConfig.minHeight\"\n [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n (select)=\"fileSelected($event)\"\n (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n <mat-icon *ngIf=\"icon\">\n {{ icon }}\n </mat-icon>\n {{ rowAction.label }}\n </fs-file>\n </ng-template>\n </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIconAnchor, selector: "a[mat-icon-button]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab]", inputs: ["extended"], exportAs: ["matButton"] }, { kind: "component", type: MatFabAnchor, selector: "a[mat-fab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "component", type: MatMiniFabAnchor, selector: "a[mat-mini-fab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FsFileModule }, { kind: "component", type: i1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1441
1451
|
}
|
|
1442
1452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowInlineActionComponent, decorators: [{
|
|
1443
1453
|
type: Component,
|
|
@@ -1458,7 +1468,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1458
1468
|
MatMiniFabAnchor,
|
|
1459
1469
|
MatIcon,
|
|
1460
1470
|
FsFileModule,
|
|
1461
|
-
|
|
1471
|
+
AsyncPipe,
|
|
1472
|
+
], template: "<ng-container\n *ngIf=\"rowAction.visible$ | async\"\n [ngSwitch]=\"actionType\">\n <!-- Basic button -->\n <ng-container *ngSwitchCase=\"'basic'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-button\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <!-- Raised button -->\n <ng-container *ngSwitchCase=\"'raised'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-raised-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-raised-button\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <!-- Icon button -->\n <ng-container *ngSwitchCase=\"'icon'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-icon-button\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <!-- Fab button -->\n <ng-container *ngSwitchCase=\"'fab'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-fab\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-fab\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <!-- Mini Fab button -->\n <ng-container *ngSwitchCase=\"'mini-fab'\">\n <ng-container *ngIf=\"!rowAction.routerLink; else link\">\n <button\n type=\"button\"\n mat-mini-fab\n (click)=\"actionClick($event)\"\n [ngClass]=\"rowAction.classArray\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </button>\n </ng-container>\n <ng-template #link>\n <a\n mat-mini-fab\n [routerLink]=\"rowAction.routerLink.link\"\n [queryParams]=\"rowAction.routerLink.queryParams\">\n <ng-template [ngTemplateOutlet]=\"buttonContent\"></ng-template>\n </a>\n </ng-template>\n </ng-container>\n <ng-template #buttonContent>\n <ng-container *ngIf=\"!rowAction.fileConfig else uploadFileBtn\">\n <mat-icon *ngIf=\"icon\">\n {{ icon }}\n </mat-icon>\n {{ rowAction.label }}\n </ng-container>\n <ng-template #uploadFileBtn>\n <fs-file\n class=\"action-button\"\n [accept]=\"rowAction.fileConfig.accept || '*'\"\n [multiple]=\"rowAction.fileConfig.multiple\"\n [minWidth]=\"rowAction.fileConfig.minWidth\"\n [minHeight]=\"rowAction.fileConfig.minHeight\"\n [imageWidth]=\"rowAction.fileConfig.maxWidth\"\n [imageHeight]=\"rowAction.fileConfig.maxHeight\"\n (select)=\"fileSelected($event)\"\n (error)=\"rowAction.fileConfig.error && rowAction.fileConfig.error($event)\">\n <mat-icon *ngIf=\"icon\">\n {{ icon }}\n </mat-icon>\n {{ rowAction.label }}\n </fs-file>\n </ng-template>\n </ng-template>\n</ng-container>", styles: ["mat-icon{display:flex}\n"] }]
|
|
1462
1473
|
}], propDecorators: { rowAction: [{
|
|
1463
1474
|
type: Input
|
|
1464
1475
|
}], row: [{
|
|
@@ -1470,7 +1481,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1470
1481
|
}] } });
|
|
1471
1482
|
|
|
1472
1483
|
class FsRowMenuActionComponent {
|
|
1473
|
-
_menu = inject(FsMenuComponent);
|
|
1474
1484
|
row;
|
|
1475
1485
|
rowAction;
|
|
1476
1486
|
file;
|
|
@@ -1478,6 +1488,7 @@ class FsRowMenuActionComponent {
|
|
|
1478
1488
|
fileError = new EventEmitter();
|
|
1479
1489
|
icon;
|
|
1480
1490
|
label;
|
|
1491
|
+
_menu = inject(FsMenuComponent);
|
|
1481
1492
|
ngOnChanges(changes) {
|
|
1482
1493
|
if (changes.row) {
|
|
1483
1494
|
this.icon = this.rowAction.getRowIcon(this.row.data);
|
|
@@ -1498,15 +1509,15 @@ class FsRowMenuActionComponent {
|
|
|
1498
1509
|
this.label = this.rowAction.label;
|
|
1499
1510
|
}
|
|
1500
1511
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowMenuActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1501
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsRowMenuActionComponent, isStandalone: true, selector: "fs-list-row-menu-action", inputs: { row: "row", rowAction: "rowAction", file: "file" }, outputs: { fileSelect: "fileSelect", fileError: "fileError" }, usesOnChanges: true, ngImport: i0, template: "@if (!file) {\n @if (icon) {\n <mat-icon>\n {{ icon }}\n </mat-icon>\n }\n {{ label| actionLabel:row }}\n} @else {\n <fs-file\n
|
|
1512
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsRowMenuActionComponent, isStandalone: true, selector: "fs-list-row-menu-action", inputs: { row: "row", rowAction: "rowAction", file: "file" }, outputs: { fileSelect: "fileSelect", fileError: "fileError" }, usesOnChanges: true, ngImport: i0, template: "@if (!file) {\n @if (icon) {\n <mat-icon>\n {{ icon }}\n </mat-icon>\n }\n {{ label| actionLabel:row }}\n} @else {\n <fs-file\n class=\"action-button\"\n [accept]=\"file.accept || '*'\"\n [multiple]=\"file.multiple\"\n [minWidth]=\"file.minWidth\"\n [minHeight]=\"file.minHeight\"\n [imageWidth]=\"file.maxWidth\"\n [imageHeight]=\"file.maxHeight\"\n (click)=\"$event.stopPropagation();\"\n (select)=\"selectFile($event)\"\n (error)=\"errorFile($event)\"\n (cancel)=\"closeMenu()\">\n @if (icon) {\n <mat-icon>\n {{ icon }}\n </mat-icon>\n }\n {{ label| actionLabel:row }}\n </fs-file>\n}", styles: [":host{display:flex;align-items:center}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FsFileModule }, { kind: "component", type: i1.FsFileComponent, selector: "fs-file", inputs: ["minHeight", "minWidth", "orientate", "multiple", "capture", "allowClick", "allowDrop", "accept", "disabled", "imageWidth", "imageHeight", "imageQuality"], outputs: ["select", "error", "beforeProcessing", "clicked", "declined"] }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1502
1513
|
}
|
|
1503
1514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowMenuActionComponent, decorators: [{
|
|
1504
1515
|
type: Component,
|
|
1505
1516
|
args: [{ selector: 'fs-list-row-menu-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
1506
1517
|
MatIcon,
|
|
1507
1518
|
FsFileModule,
|
|
1508
|
-
ActionLabelPipe
|
|
1509
|
-
], template: "@if (!file) {\n @if (icon) {\n <mat-icon>\n {{ icon }}\n </mat-icon>\n }\n {{ label| actionLabel:row }}\n} @else {\n <fs-file\n
|
|
1519
|
+
ActionLabelPipe,
|
|
1520
|
+
], template: "@if (!file) {\n @if (icon) {\n <mat-icon>\n {{ icon }}\n </mat-icon>\n }\n {{ label| actionLabel:row }}\n} @else {\n <fs-file\n class=\"action-button\"\n [accept]=\"file.accept || '*'\"\n [multiple]=\"file.multiple\"\n [minWidth]=\"file.minWidth\"\n [minHeight]=\"file.minHeight\"\n [imageWidth]=\"file.maxWidth\"\n [imageHeight]=\"file.maxHeight\"\n (click)=\"$event.stopPropagation();\"\n (select)=\"selectFile($event)\"\n (error)=\"errorFile($event)\"\n (cancel)=\"closeMenu()\">\n @if (icon) {\n <mat-icon>\n {{ icon }}\n </mat-icon>\n }\n {{ label| actionLabel:row }}\n </fs-file>\n}", styles: [":host{display:flex;align-items:center}\n"] }]
|
|
1510
1521
|
}], propDecorators: { row: [{
|
|
1511
1522
|
type: Input
|
|
1512
1523
|
}], rowAction: [{
|
|
@@ -1581,7 +1592,7 @@ class FsRowActionsComponent {
|
|
|
1581
1592
|
}
|
|
1582
1593
|
}
|
|
1583
1594
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1584
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsRowActionsComponent, isStandalone: true, selector: "fs-list-row-actions", inputs: { row: "row", index: "index", restoreMode: "restoreMode", rowActions: "rowActions", rowRemoved: "rowRemoved", menuRowActions: "menuRowActions", inlineRowActions: "inlineRowActions", restoreAction: "restoreAction" }, ngImport: i0, template: "@if (!restoreMode || (restoreMode && !restoreAction)) {\n @for (action of inlineRowActions; track trackByFn($index)) {\n <fs-list-row-inline-action\n class=\"row-inline-action row-inline-action-{{action.type}}\"\n [rowAction]=\"action\"\n [row]=\"row\"\n [ngClass]=\"{ 'mobile-hide': action.menu === undefined }\"\n (clicked)=\"actionClick(action, row, $event)\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n </fs-list-row-inline-action>\n }\n}\n<!-- Menu -->\n@if (menuRowActions.length || (restoreMode && restoreAction)) {\n <fs-menu\n class=\"row-menu-action\"\n #menuRef>\n <!-- Case when we have usual menu actions -->\n @if (!restoreMode || (restoreMode && !restoreAction)) {\n @for (action of inlineRowActions; track trackByFn($index)) {\n <ng-template\n class=\"hidden-mobile-menu-action\"\n fs-menu-item\n [link]=\"action.routerLink?.link\"\n [queryParams]=\"action.routerLink?.queryParams\"\n [target]=\"action.routerLink?.target\"\n [hidden]=\"action.menu !== undefined &&
|
|
1595
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsRowActionsComponent, isStandalone: true, selector: "fs-list-row-actions", inputs: { row: "row", index: "index", restoreMode: "restoreMode", rowActions: "rowActions", rowRemoved: "rowRemoved", menuRowActions: "menuRowActions", inlineRowActions: "inlineRowActions", restoreAction: "restoreAction" }, ngImport: i0, template: "@if (!restoreMode || (restoreMode && !restoreAction)) {\n @for (action of inlineRowActions; track trackByFn($index)) {\n <fs-list-row-inline-action\n class=\"row-inline-action row-inline-action-{{action.type}}\"\n [rowAction]=\"action\"\n [row]=\"row\"\n [ngClass]=\"{ 'mobile-hide': action.menu === undefined }\"\n (clicked)=\"actionClick(action, row, $event)\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n </fs-list-row-inline-action>\n }\n}\n<!-- Menu -->\n@if (menuRowActions.length || (restoreMode && restoreAction)) {\n <fs-menu\n class=\"row-menu-action\"\n #menuRef>\n <!-- Case when we have usual menu actions -->\n @if (!restoreMode || (restoreMode && !restoreAction)) {\n @for (action of inlineRowActions; track trackByFn($index)) {\n <ng-template\n class=\"hidden-mobile-menu-action\"\n fs-menu-item\n [link]=\"action.routerLink?.link\"\n [queryParams]=\"action.routerLink?.queryParams\"\n [target]=\"action.routerLink?.target\"\n [hidden]=\"action.menu !== undefined && (action.hidden$ | async)\">\n <fs-list-row-menu-action\n [rowAction]=\"action\"\n [row]=\"row\"\n [file]=\"action.fileConfig\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n }\n @for (action of menuRowActions; track trackByFn($index)) {\n @if (action.isGroup) {\n <fs-menu-group [label]=\"action.label | actionLabel:row\">\n @for (subAction of action.rowActions; track subAction) {\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [target]=\"subAction.routerLink?.target\"\n [hidden]=\"subAction.hidden$ | async\"\n [class]=\"subAction.className\"\n (click)=\"actionClick(subAction, row, $event, menuRef);\">\n <fs-list-row-menu-action\n [rowAction]=\"subAction\"\n [row]=\"row\"\n [file]=\"subAction.fileConfig\"\n (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n }\n </fs-menu-group>\n } @else {\n <ng-template\n fs-menu-item\n [link]=\"action.routerLink?.link\"\n [queryParams]=\"action.routerLink?.queryParams\"\n [target]=\"action.routerLink?.target\"\n [hidden]=\"action.hidden$ | async\"\n [class]=\"action.className\"\n (click)=\"actionClick(action, row, $event, menuRef);\">\n <fs-list-row-menu-action\n [rowAction]=\"action\"\n [row]=\"row\"\n [file]=\"action.fileConfig\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n }\n }\n }\n <!-- Case when we have restore mode enabled and must hide menu actions -->\n @if (restoreMode && restoreAction) {\n <ng-template\n fs-menu-item\n (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n @if (restoreAction.icon) {\n <mat-icon>\n {{ restoreAction.icon }}\n </mat-icon>\n }\n {{ restoreAction.label | actionLabel:row }}\n </ng-template>\n }\n </fs-menu>\n}", styles: [":host{display:flex;align-items:center;justify-content:flex-end}:host ::ng-deep fs-list-row-inline-action{margin-left:5px}:host ::ng-deep fs-list-row-inline-action:first-child{margin-left:0}::ng-deep .hidden-mobile-menu-action{display:none!important}\n"], dependencies: [{ kind: "component", type: FsRowInlineActionComponent, selector: "fs-list-row-inline-action", inputs: ["rowAction", "row"], outputs: ["clicked", "fileSelect"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FsMenuModule }, { kind: "component", type: i1$1.FsMenuComponent, selector: "fs-menu", inputs: ["class", "buttonClass", "buttonType", "buttonColor"], outputs: ["opened", "closed"] }, { kind: "directive", type: i1$1.FsMenuItemDirective, selector: "fs-menu-group,[fs-menu-item]" }, { kind: "component", type: FsRowMenuActionComponent, selector: "fs-list-row-menu-action", inputs: ["row", "rowAction", "file"], outputs: ["fileSelect", "fileError"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: ActionLabelPipe, name: "actionLabel" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1585
1596
|
}
|
|
1586
1597
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowActionsComponent, decorators: [{
|
|
1587
1598
|
type: Component,
|
|
@@ -1592,7 +1603,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
1592
1603
|
FsRowMenuActionComponent,
|
|
1593
1604
|
MatIcon,
|
|
1594
1605
|
ActionLabelPipe,
|
|
1595
|
-
|
|
1606
|
+
AsyncPipe,
|
|
1607
|
+
], template: "@if (!restoreMode || (restoreMode && !restoreAction)) {\n @for (action of inlineRowActions; track trackByFn($index)) {\n <fs-list-row-inline-action\n class=\"row-inline-action row-inline-action-{{action.type}}\"\n [rowAction]=\"action\"\n [row]=\"row\"\n [ngClass]=\"{ 'mobile-hide': action.menu === undefined }\"\n (clicked)=\"actionClick(action, row, $event)\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\">\n </fs-list-row-inline-action>\n }\n}\n<!-- Menu -->\n@if (menuRowActions.length || (restoreMode && restoreAction)) {\n <fs-menu\n class=\"row-menu-action\"\n #menuRef>\n <!-- Case when we have usual menu actions -->\n @if (!restoreMode || (restoreMode && !restoreAction)) {\n @for (action of inlineRowActions; track trackByFn($index)) {\n <ng-template\n class=\"hidden-mobile-menu-action\"\n fs-menu-item\n [link]=\"action.routerLink?.link\"\n [queryParams]=\"action.routerLink?.queryParams\"\n [target]=\"action.routerLink?.target\"\n [hidden]=\"action.menu !== undefined && (action.hidden$ | async)\">\n <fs-list-row-menu-action\n [rowAction]=\"action\"\n [row]=\"row\"\n [file]=\"action.fileConfig\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n }\n @for (action of menuRowActions; track trackByFn($index)) {\n @if (action.isGroup) {\n <fs-menu-group [label]=\"action.label | actionLabel:row\">\n @for (subAction of action.rowActions; track subAction) {\n <ng-template\n fs-menu-item\n [link]=\"subAction.routerLink?.link\"\n [queryParams]=\"subAction.routerLink?.queryParams\"\n [target]=\"subAction.routerLink?.target\"\n [hidden]=\"subAction.hidden$ | async\"\n [class]=\"subAction.className\"\n (click)=\"actionClick(subAction, row, $event, menuRef);\">\n <fs-list-row-menu-action\n [rowAction]=\"subAction\"\n [row]=\"row\"\n [file]=\"subAction.fileConfig\"\n (fileSelect)=\"subAction.fileConfig.select($event, row, index)\"\n (fileError)=\"subAction.fileConfig.error && subAction.fileConfig.error($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n }\n </fs-menu-group>\n } @else {\n <ng-template\n fs-menu-item\n [link]=\"action.routerLink?.link\"\n [queryParams]=\"action.routerLink?.queryParams\"\n [target]=\"action.routerLink?.target\"\n [hidden]=\"action.hidden$ | async\"\n [class]=\"action.className\"\n (click)=\"actionClick(action, row, $event, menuRef);\">\n <fs-list-row-menu-action\n [rowAction]=\"action\"\n [row]=\"row\"\n [file]=\"action.fileConfig\"\n (fileSelect)=\"action.fileConfig.select($event, row, index)\"\n (fileError)=\"action.fileConfig.error && action.fileConfig.error($event)\">\n </fs-list-row-menu-action>\n </ng-template>\n }\n }\n }\n <!-- Case when we have restore mode enabled and must hide menu actions -->\n @if (restoreMode && restoreAction) {\n <ng-template\n fs-menu-item\n (click)=\"actionClick(restoreAction, row, $event, menuRef)\">\n @if (restoreAction.icon) {\n <mat-icon>\n {{ restoreAction.icon }}\n </mat-icon>\n }\n {{ restoreAction.label | actionLabel:row }}\n </ng-template>\n }\n </fs-menu>\n}", styles: [":host{display:flex;align-items:center;justify-content:flex-end}:host ::ng-deep fs-list-row-inline-action{margin-left:5px}:host ::ng-deep fs-list-row-inline-action:first-child{margin-left:0}::ng-deep .hidden-mobile-menu-action{display:none!important}\n"] }]
|
|
1596
1608
|
}], propDecorators: { row: [{
|
|
1597
1609
|
type: Input
|
|
1598
1610
|
}], index: [{
|
|
@@ -1870,7 +1882,7 @@ class Column {
|
|
|
1870
1882
|
footerColspanned = false;
|
|
1871
1883
|
_attributes;
|
|
1872
1884
|
_defaultDirection;
|
|
1873
|
-
_ordered = false;
|
|
1885
|
+
_ordered$ = new BehaviorSubject(false);
|
|
1874
1886
|
constructor(colConfig, colDefaults = false) {
|
|
1875
1887
|
this._parseConfig(colConfig);
|
|
1876
1888
|
this.colStyles = new StyleConfig({
|
|
@@ -1924,14 +1936,17 @@ class Column {
|
|
|
1924
1936
|
get fullNameDirection() {
|
|
1925
1937
|
return (this.sortingDirection === SortingDirection.asc) ? 'Ascending' : 'Descending';
|
|
1926
1938
|
}
|
|
1939
|
+
get ordered$() {
|
|
1940
|
+
return this._ordered$.asObservable();
|
|
1941
|
+
}
|
|
1927
1942
|
get ordered() {
|
|
1928
|
-
return this._ordered;
|
|
1943
|
+
return this._ordered$.getValue();
|
|
1929
1944
|
}
|
|
1930
1945
|
set ordered(value) {
|
|
1931
|
-
if (value && this._ordered !== value) {
|
|
1946
|
+
if (value && this._ordered$.getValue() !== value) {
|
|
1932
1947
|
this.sortingDirection = this._defaultDirection ?? SortingDirection.asc;
|
|
1933
1948
|
}
|
|
1934
|
-
this._ordered
|
|
1949
|
+
this._ordered$.next(value);
|
|
1935
1950
|
}
|
|
1936
1951
|
/**
|
|
1937
1952
|
* Merge with defaults with existing config
|
|
@@ -2210,18 +2225,12 @@ class FsRowComponent {
|
|
|
2210
2225
|
}
|
|
2211
2226
|
return classes.join(' ');
|
|
2212
2227
|
});
|
|
2213
|
-
_rowDiffer;
|
|
2214
2228
|
_eventListeners = [];
|
|
2215
2229
|
_destroy$ = new Subject();
|
|
2216
2230
|
_el = inject(ElementRef);
|
|
2217
2231
|
_cdRef = inject(ChangeDetectorRef);
|
|
2218
|
-
_differs = inject(KeyValueDiffers);
|
|
2219
2232
|
_renderer = inject(Renderer2);
|
|
2220
2233
|
_draggableList = inject(FsListDraggableListDirective, { optional: true });
|
|
2221
|
-
constructor() {
|
|
2222
|
-
const _differs = this._differs;
|
|
2223
|
-
this._rowDiffer = _differs.find({}).create();
|
|
2224
|
-
}
|
|
2225
2234
|
get isDragDisabled() {
|
|
2226
2235
|
return !this.selected && this.reorderMultiple && !!this.selection.selectedRows.size;
|
|
2227
2236
|
}
|
|
@@ -2240,38 +2249,21 @@ class FsRowComponent {
|
|
|
2240
2249
|
&& this.activeFiltersCount === 0;
|
|
2241
2250
|
}
|
|
2242
2251
|
ngOnInit() {
|
|
2243
|
-
this._initRowEvents();
|
|
2244
2252
|
if (this.row()) {
|
|
2245
|
-
this.
|
|
2246
|
-
|
|
2247
|
-
if (this.row() && this.groupActionsRaw) {
|
|
2248
|
-
this.rowActions = this.groupActionsRaw.map((action) => new RowAction(action));
|
|
2249
|
-
this._filterActionsByCategories();
|
|
2250
|
-
}
|
|
2251
|
-
}
|
|
2252
|
-
else if (this.rowActionsRaw) {
|
|
2253
|
-
this.rowActions = this.rowActionsRaw.map((action) => new RowAction(action));
|
|
2254
|
-
this._filterActionsByCategories();
|
|
2255
|
-
}
|
|
2256
|
-
}
|
|
2257
|
-
}
|
|
2258
|
-
ngDoCheck() {
|
|
2259
|
-
if (this._rowDiffer.diff(this.row)) {
|
|
2260
|
-
this.updateRowActions();
|
|
2253
|
+
this._initRowActions();
|
|
2254
|
+
this._initRowEvents();
|
|
2261
2255
|
}
|
|
2262
2256
|
}
|
|
2263
2257
|
ngAfterViewInit() {
|
|
2264
2258
|
this._initSelection();
|
|
2265
2259
|
}
|
|
2266
2260
|
updateRowActions() {
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
}
|
|
2274
|
-
this._cdRef.markForCheck();
|
|
2261
|
+
this.rowActions
|
|
2262
|
+
.forEach((action) => {
|
|
2263
|
+
action.checkShowStatus(this.row().data, this.rowIndex);
|
|
2264
|
+
action.updateLink(this.row().data);
|
|
2265
|
+
});
|
|
2266
|
+
this._filterActionsByCategories();
|
|
2275
2267
|
}
|
|
2276
2268
|
ngOnDestroy() {
|
|
2277
2269
|
this._eventListeners.forEach((listener) => {
|
|
@@ -2304,9 +2296,6 @@ class FsRowComponent {
|
|
|
2304
2296
|
this._draggableList.dragStart(this._el.nativeElement);
|
|
2305
2297
|
}
|
|
2306
2298
|
}
|
|
2307
|
-
/**
|
|
2308
|
-
* Set event listeners for row
|
|
2309
|
-
*/
|
|
2310
2299
|
_initRowEvents() {
|
|
2311
2300
|
Object.keys(this.rowEvents || {})
|
|
2312
2301
|
.forEach((event) => {
|
|
@@ -2321,14 +2310,22 @@ class FsRowComponent {
|
|
|
2321
2310
|
this._eventListeners.push(listener);
|
|
2322
2311
|
});
|
|
2323
2312
|
}
|
|
2324
|
-
|
|
2325
|
-
if (this.row()
|
|
2326
|
-
this.row().
|
|
2327
|
-
.
|
|
2328
|
-
.
|
|
2329
|
-
|
|
2330
|
-
});
|
|
2313
|
+
_initRowActions() {
|
|
2314
|
+
if (isGroupRow(this.row())) {
|
|
2315
|
+
if (this.row() && this.groupActionsRaw) {
|
|
2316
|
+
this.rowActions = this.groupActionsRaw.map((action) => new RowAction(action));
|
|
2317
|
+
this._filterActionsByCategories();
|
|
2318
|
+
}
|
|
2331
2319
|
}
|
|
2320
|
+
else if (this.rowActionsRaw) {
|
|
2321
|
+
this.rowActions = this.rowActionsRaw.map((action) => new RowAction(action));
|
|
2322
|
+
this._filterActionsByCategories();
|
|
2323
|
+
}
|
|
2324
|
+
merge(this.row().data$, this.row().actionsUpdated$)
|
|
2325
|
+
.pipe(takeUntil(this._destroy$))
|
|
2326
|
+
.subscribe(() => {
|
|
2327
|
+
this.updateRowActions();
|
|
2328
|
+
});
|
|
2332
2329
|
}
|
|
2333
2330
|
_getRowClasses(rowClass) {
|
|
2334
2331
|
const classes = [];
|
|
@@ -2397,7 +2394,7 @@ class FsRowComponent {
|
|
|
2397
2394
|
this.inlineRowActions = [];
|
|
2398
2395
|
this.restoreAction = null;
|
|
2399
2396
|
this.rowActions.forEach((action) => {
|
|
2400
|
-
if (!action.
|
|
2397
|
+
if (!action.visible) {
|
|
2401
2398
|
return;
|
|
2402
2399
|
}
|
|
2403
2400
|
if (action.menu && !action.restore) {
|
|
@@ -2427,7 +2424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
2427
2424
|
MatIcon,
|
|
2428
2425
|
AsyncPipe,
|
|
2429
2426
|
], template: "<!-- Drag -->\n@if (leftDragDropEnabled) {\n <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Selection -->\n@if (selection && (selection.enabled$ | async)) {\n <td class=\"fs-list-col fs-list-col-selection\">\n @if (!isGroupFooterRow()) {\n <mat-checkbox\n (change)=\"selectRow($event)\"\n [disabled]=\"!selection.selectable(row(), rowIndex)\"\n [checked]=\"selected\"\n [indeterminate]=\"indeterminateSelected\">\n </mat-checkbox>\n }\n </td>\n}\n<!-- Content -->\n@for (column of columns; track trackByFn($index); let isFirst = $first) {\n @if ((isGroupRow() && !column.groupHeaderColspanned) || (isGroupFooterRow() && !column.groupFooterColspanned) || (!isGroupRow() && !isGroupFooterRow() && !column.cellColspanned)) {\n <td\n fs-cell\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 </td>\n }\n}\n<!-- Drag -->\n@if (rightDragDropEnabled) {\n <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n}\n<!-- Row Actions -->\n@if (hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)) {\n <td class=\"fs-list-col actions-col\">\n @if (!isGroupFooterRow()) {\n <fs-list-row-actions\n [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 }\n </td>\n}\n<ng-template #dragCell>\n @if (dragCellVisible() && !isGroupFooterRow()) {\n <td\n class=\"fs-list-col drag-col\"\n [class.drag-disabled]=\"isDragDisabled\"\n (mousedown)=\"dragStart($event)\"\n (touchstart)=\"dragStart($event)\">\n <mat-icon>\n drag_handle\n </mat-icon>\n </td>\n } @else {\n <td class=\"fs-list-col drag-col\"></td>\n }\n</ng-template>", styles: [":host.drag-hidden{display:none}:host.draggable{opacity:.8;position:fixed;z-index:9999;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:5px}:host.draggable td{border:none;background-color:#fff}:host.draggable-elem td{background-color:#c3c3c3}:host.fs-list-row-clickable{cursor:pointer}td.drag-col{width:1%!important;white-space:nowrap;text-align:center;cursor:grab}td.drag-col.drag-disabled{opacity:.4;cursor:no-drop}td.drag-col mat-icon{display:flex}td.fs-list-col-selection{padding:10px;width:1%!important}td.actions-col{width:1%;white-space:nowrap;overflow:hidden}td.actions-col .row-inline-action{margin-left:12px;display:inline-block}td.actions-col .row-inline-action:first-child{margin-left:0}td.actions-col .row-inline-action-icon,td.actions-col .row-inline-action-fab,td.actions-col .row-inline-action-mini-fab,td.actions-col .row-menu-action{width:35px;justify-content:center;align-items:center}td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"] }]
|
|
2430
|
-
}],
|
|
2427
|
+
}], propDecorators: { role: [{
|
|
2431
2428
|
type: HostBinding,
|
|
2432
2429
|
args: ['attr.role']
|
|
2433
2430
|
}], rowActionsRaw: [{
|
|
@@ -2745,33 +2742,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
2745
2742
|
}] } });
|
|
2746
2743
|
|
|
2747
2744
|
class FsHeadCellComponent extends FsCellComponent {
|
|
2748
|
-
_cdRef = inject(ChangeDetectorRef);
|
|
2749
|
-
_differs = inject(KeyValueDiffers);
|
|
2750
2745
|
cellContext = {};
|
|
2751
|
-
_columnDiffer;
|
|
2752
|
-
constructor() {
|
|
2753
|
-
super();
|
|
2754
|
-
this._columnDiffer = this._differs.find({}).create();
|
|
2755
|
-
}
|
|
2756
|
-
ngDoCheck() {
|
|
2757
|
-
if (this._columnDiffer.diff(this.column)) {
|
|
2758
|
-
this._cdRef.markForCheck();
|
|
2759
|
-
}
|
|
2760
|
-
}
|
|
2761
2746
|
initCellContext() {
|
|
2762
2747
|
this.cellContext.value = this.column.title;
|
|
2763
2748
|
}
|
|
2764
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHeadCellComponent, deps:
|
|
2765
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsHeadCellComponent, isStandalone: true, selector: "[fs-head-cell]", usesInheritance: true, ngImport: i0, template: "<div class=\"wrap\">\n <span class=\"title\">\n @if (!column.headerTemplate) {\n {{ column.title }}\n }\n @if (column.headerTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"cellContext\">\n </ng-template>\n }\n </span>\n @if (column.ordered) {\n @switch (column.sortingDirection$ | async) {\n @case ('asc') {\n <mat-icon>\n arrow_downward\n </mat-icon>\n }\n @case ('desc') {\n <mat-icon>\n arrow_upward\n </mat-icon>\n }\n }\n } @else if (column.sortable) {\n <mat-icon>\n unfold_more\n </mat-icon>\n }\n</div>", styles: [".wrap{display:inline-flex;align-items:center}.wrap mat-icon{font-size:13px;display:block;height:13px;width:13px;margin-left:4px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2749
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHeadCellComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2750
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsHeadCellComponent, isStandalone: true, selector: "[fs-head-cell]", usesInheritance: true, ngImport: i0, template: "<div class=\"wrap\">\n <span class=\"title\">\n @if (!column.headerTemplate) {\n {{ column.title }}\n }\n @if (column.headerTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"cellContext\">\n </ng-template>\n }\n </span>\n @if (column.ordered$ | async) {\n @switch (column.sortingDirection$ | async) {\n @case ('asc') {\n <mat-icon>\n arrow_downward\n </mat-icon>\n }\n @case ('desc') {\n <mat-icon>\n arrow_upward\n </mat-icon>\n }\n }\n } @else if (column.sortable) {\n <mat-icon>\n unfold_more\n </mat-icon>\n }\n</div>", styles: [".wrap{display:inline-flex;align-items:center}.wrap mat-icon{font-size:13px;display:block;height:13px;width:13px;margin-left:4px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2766
2751
|
}
|
|
2767
2752
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHeadCellComponent, decorators: [{
|
|
2768
2753
|
type: Component,
|
|
2769
2754
|
args: [{ selector: '[fs-head-cell]', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
|
|
2770
2755
|
NgTemplateOutlet,
|
|
2771
2756
|
MatIcon,
|
|
2772
|
-
AsyncPipe
|
|
2773
|
-
], template: "<div class=\"wrap\">\n <span class=\"title\">\n @if (!column.headerTemplate) {\n {{ column.title }}\n }\n @if (column.headerTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"cellContext\">\n </ng-template>\n }\n </span>\n @if (column.ordered) {\n @switch (column.sortingDirection$ | async) {\n @case ('asc') {\n <mat-icon>\n arrow_downward\n </mat-icon>\n }\n @case ('desc') {\n <mat-icon>\n arrow_upward\n </mat-icon>\n }\n }\n } @else if (column.sortable) {\n <mat-icon>\n unfold_more\n </mat-icon>\n }\n</div>", styles: [".wrap{display:inline-flex;align-items:center}.wrap mat-icon{font-size:13px;display:block;height:13px;width:13px;margin-left:4px}\n"] }]
|
|
2774
|
-
}]
|
|
2757
|
+
AsyncPipe,
|
|
2758
|
+
], template: "<div class=\"wrap\">\n <span class=\"title\">\n @if (!column.headerTemplate) {\n {{ column.title }}\n }\n @if (column.headerTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"column.headerTemplate\"\n [ngTemplateOutletContext]=\"cellContext\">\n </ng-template>\n }\n </span>\n @if (column.ordered$ | async) {\n @switch (column.sortingDirection$ | async) {\n @case ('asc') {\n <mat-icon>\n arrow_downward\n </mat-icon>\n }\n @case ('desc') {\n <mat-icon>\n arrow_upward\n </mat-icon>\n }\n }\n } @else if (column.sortable) {\n <mat-icon>\n unfold_more\n </mat-icon>\n }\n</div>", styles: [".wrap{display:inline-flex;align-items:center}.wrap mat-icon{font-size:13px;display:block;height:13px;width:13px;margin-left:4px}\n"] }]
|
|
2759
|
+
}] });
|
|
2775
2760
|
|
|
2776
2761
|
class SortingController {
|
|
2777
2762
|
config;
|