@firestitch/list 18.0.3 → 18.0.5
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/classes/list-controller.d.ts +1 -0
- package/app/interfaces/listconfig.interface.d.ts +1 -0
- package/esm2022/app/classes/list-controller.mjs +7 -5
- package/esm2022/app/components/body/row/row.component.mjs +3 -3
- package/esm2022/app/components/footer/footer-row/footer-row.component.mjs +3 -3
- package/esm2022/app/components/head/head.component.mjs +3 -3
- package/esm2022/app/components/list/list.component.mjs +3 -3
- package/esm2022/app/interfaces/listconfig.interface.mjs +1 -1
- package/fesm2022/firestitch-list.mjs +14 -12
- package/fesm2022/firestitch-list.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -2147,11 +2147,11 @@ class FsRowComponent {
|
|
|
2147
2147
|
});
|
|
2148
2148
|
}
|
|
2149
2149
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }, { token: FsListDraggableListDirective }], target: i0.ɵɵFactoryTarget.Component });
|
|
2150
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, host: { properties: { "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n
|
|
2150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", 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", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy", reorderMultiple: "reorderMultiple" }, host: { properties: { "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection", "class": "this.rowCssClass" } }, viewQueries: [{ propertyName: "cellRefs", predicate: ["td"], descendants: true }], ngImport: i0, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n <td class=\"fs-list-col fs-list-col-selection\">\n <ng-container *ngIf=\"!row.isGroupFooter\">\n <mat-checkbox\n (change)=\"selectRow($event)\"\n [checked]=\"selected\"\n [indeterminate]=\"indeterminateSelected\">\n </mat-checkbox>\n </ng-container>\n </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n <td\n 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 </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n class=\"fs-list-col actions-col\">\n <ng-container *ngIf=\"!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 </ng-container>\n</td>\n<ng-template #dragCell>\n <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\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 </ng-container>\n <ng-template #emptyCell>\n <td class=\"fs-list-col drag-col\"></td>\n </ng-template>\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"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { kind: "component", type: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "row", "rowIndex"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2151
2151
|
}
|
|
2152
2152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowComponent, decorators: [{
|
|
2153
2153
|
type: Component,
|
|
2154
|
-
args: [{ selector: '[fs-list-row]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n
|
|
2154
|
+
args: [{ selector: '[fs-list-row]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Drag -->\n<ng-container *ngIf=\"leftDragDropEnabled\">\n <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Selection -->\n<ng-container *ngIf=\"selection && !(selection.disabled$ | async)\">\n <td class=\"fs-list-col fs-list-col-selection\">\n <ng-container *ngIf=\"!row.isGroupFooter\">\n <mat-checkbox\n (change)=\"selectRow($event)\"\n [checked]=\"selected\"\n [indeterminate]=\"indeterminateSelected\">\n </mat-checkbox>\n </ng-container>\n </td>\n</ng-container>\n<!-- Content -->\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn; let isFirst = first\">\n <td\n 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 </td>\n</ng-container>\n<!-- Drag -->\n<ng-container *ngIf=\"rightDragDropEnabled\">\n <ng-container *ngTemplateOutlet=\"dragCell\"></ng-container>\n</ng-container>\n<!-- Row Actions -->\n<td\n *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategy.Manual)\"\n class=\"fs-list-col actions-col\">\n <ng-container *ngIf=\"!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 </ng-container>\n</td>\n<ng-template #dragCell>\n <ng-container *ngIf=\"dragCellVisible && !isGroupFooterRow; else emptyCell\">\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 </ng-container>\n <ng-template #emptyCell>\n <td class=\"fs-list-col drag-col\"></td>\n </ng-template>\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"] }]
|
|
2155
2155
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }, { type: FsListDraggableListDirective }], propDecorators: { role: [{
|
|
2156
2156
|
type: HostBinding,
|
|
2157
2157
|
args: ['attr.role']
|
|
@@ -2416,11 +2416,11 @@ class FsFooterRowComponent extends FsRowComponent {
|
|
|
2416
2416
|
super(el, cdRef, differs, renderer, null);
|
|
2417
2417
|
}
|
|
2418
2418
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterRowComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.KeyValueDiffers }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
2419
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterRowComponent, selector: "[fs-list-footer-row]", usesInheritance: true, ngImport: i0, template: "<td
|
|
2419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsFooterRowComponent, selector: "[fs-list-footer-row]", usesInheritance: true, ngImport: i0, template: "<td\n *ngIf=\"leftDragDropEnabled\"\n class=\"fs-list-col drag-col\">\n</td>\n<td\n *ngIf=\"selection\"\n class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n <td\n *ngIf=\"!column.footerColspanned\"\n fs-list-footer-cell\n [column]=\"column\"\n [row]=\"row\"\n [rowIndex]=\"rowIndex\"\n [ngClass]=\"column.footerConfigs.classesArray\"\n [attr.colspan]=\"column.footerConfigs.colspan\"\n [attr.width]=\"column.width\">\n </td>\n</ng-container>\n<!-- Drag -->\n<td\n *ngIf=\"rightDragDropEnabled\"\n class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsFooterCellComponent, selector: "[fs-list-footer-cell]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2420
2420
|
}
|
|
2421
2421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFooterRowComponent, decorators: [{
|
|
2422
2422
|
type: Component,
|
|
2423
|
-
args: [{ selector: '[fs-list-footer-row]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<td
|
|
2423
|
+
args: [{ selector: '[fs-list-footer-row]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<td\n *ngIf=\"leftDragDropEnabled\"\n class=\"fs-list-col drag-col\">\n</td>\n<td\n *ngIf=\"selection\"\n class=\"fs-list-col fs-list-col-selection\">\n</td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n <td\n *ngIf=\"!column.footerColspanned\"\n fs-list-footer-cell\n [column]=\"column\"\n [row]=\"row\"\n [rowIndex]=\"rowIndex\"\n [ngClass]=\"column.footerConfigs.classesArray\"\n [attr.colspan]=\"column.footerConfigs.colspan\"\n [attr.width]=\"column.width\">\n </td>\n</ng-container>\n<!-- Drag -->\n<td\n *ngIf=\"rightDragDropEnabled\"\n class=\"fs-list-col actions-col\">\n</td>\n<!-- Row Actions -->", styles: ["td.left{text-align:left}td.center{text-align:center}td.right{text-align:right}\n"] }]
|
|
2424
2424
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.KeyValueDiffers }, { type: i0.Renderer2 }] });
|
|
2425
2425
|
|
|
2426
2426
|
class FsFooterComponent {
|
|
@@ -2911,11 +2911,11 @@ class FsHeadComponent {
|
|
|
2911
2911
|
}
|
|
2912
2912
|
}
|
|
2913
2913
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHeadComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2914
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsHeadComponent, selector: "[fs-list-head]", inputs: { sorting: "sorting", columns: "columns", hasRowActions: "hasRowActions", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<tr class=\"fs-list-row\">\n <!-- Drag -->\n <th
|
|
2914
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: FsHeadComponent, selector: "[fs-list-head]", inputs: { sorting: "sorting", columns: "columns", hasRowActions: "hasRowActions", selection: "selection", activeFiltersCount: "activeFiltersCount", reorderEnabled: "reorderEnabled", reorderPosition: "reorderPosition", reorderStrategy: "reorderStrategy" }, viewQueries: [{ propertyName: "rowsContainer", first: true, predicate: ["rowsContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<tr class=\"fs-list-row\">\n <!-- Drag -->\n <th\n *ngIf=\"leftDragDropEnabled\"\n class=\"fs-list-col drag-col\">\n </th>\n <!-- Selection -->\n <th\n *ngIf=\"selection && !(selection.disabled$ | async)\"\n class=\"fs-list-col fs-list-col-selection\">\n <mat-checkbox\n (change)=\"selectAll($event)\"\n [checked]=\"selectedAll\">\n </mat-checkbox>\n </th>\n <!-- Content -->\n <th\n fs-head-cell\n *ngFor=\"let column of columns; trackBy: trackByFn\"\n (click)=\"$event.stopPropagation(); sorting.sortBy(column)\"\n [column]=\"column\"\n [class.sorting]=\"column.sortable\"\n [ngClass]=\"column.headerConfigs.classesArray\"\n [attr.colspan]=\"column.headerConfigs.colspan\"\n [attr.width]=\"column.width\">\n </th>\n <!-- Drag -->\n <th\n *ngIf=\"rightDragDropEnabled\"\n class=\"fs-list-col drag-col\">\n </th>\n <!-- Row Actions -->\n <th\n *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategyEnum.Manual)\"\n class=\"fs-list-col actions-col\">\n </th>\n</tr>", styles: ["th.fs-list-col-selection{width:1%!important;text-align:left}th.sorting{cursor:pointer}th.sorting:hover{background-color:#f6f6f6}th.sorting{background-image:none}th.left{text-align:left}th.center{text-align:center}th.right{text-align:right}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FsHeadCellComponent, selector: "[fs-head-cell]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2915
2915
|
}
|
|
2916
2916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsHeadComponent, decorators: [{
|
|
2917
2917
|
type: Component,
|
|
2918
|
-
args: [{ selector: '[fs-list-head]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tr class=\"fs-list-row\">\n <!-- Drag -->\n <th
|
|
2918
|
+
args: [{ selector: '[fs-list-head]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<tr class=\"fs-list-row\">\n <!-- Drag -->\n <th\n *ngIf=\"leftDragDropEnabled\"\n class=\"fs-list-col drag-col\">\n </th>\n <!-- Selection -->\n <th\n *ngIf=\"selection && !(selection.disabled$ | async)\"\n class=\"fs-list-col fs-list-col-selection\">\n <mat-checkbox\n (change)=\"selectAll($event)\"\n [checked]=\"selectedAll\">\n </mat-checkbox>\n </th>\n <!-- Content -->\n <th\n fs-head-cell\n *ngFor=\"let column of columns; trackBy: trackByFn\"\n (click)=\"$event.stopPropagation(); sorting.sortBy(column)\"\n [column]=\"column\"\n [class.sorting]=\"column.sortable\"\n [ngClass]=\"column.headerConfigs.classesArray\"\n [attr.colspan]=\"column.headerConfigs.colspan\"\n [attr.width]=\"column.width\">\n </th>\n <!-- Drag -->\n <th\n *ngIf=\"rightDragDropEnabled\"\n class=\"fs-list-col drag-col\">\n </th>\n <!-- Row Actions -->\n <th\n *ngIf=\"hasRowActions && !(reorderEnabled && reorderStrategy === ReorderStrategyEnum.Manual)\"\n class=\"fs-list-col actions-col\">\n </th>\n</tr>", styles: ["th.fs-list-col-selection{width:1%!important;text-align:left}th.sorting{cursor:pointer}th.sorting:hover{background-color:#f6f6f6}th.sorting{background-image:none}th.left{text-align:left}th.center{text-align:center}th.right{text-align:right}\n"] }]
|
|
2919
2919
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { sorting: [{
|
|
2920
2920
|
type: Input
|
|
2921
2921
|
}], columns: [{
|
|
@@ -4234,6 +4234,7 @@ class List {
|
|
|
4234
4234
|
afterInit;
|
|
4235
4235
|
style;
|
|
4236
4236
|
hasRowActions;
|
|
4237
|
+
rowActionsHover = false;
|
|
4237
4238
|
paging = new PaginationController();
|
|
4238
4239
|
columns = new ColumnsController();
|
|
4239
4240
|
actions = new ActionsController();
|
|
@@ -4463,7 +4464,7 @@ class List {
|
|
|
4463
4464
|
this._initVariables(config);
|
|
4464
4465
|
this._initDefaultOptions(config);
|
|
4465
4466
|
this._initRestore();
|
|
4466
|
-
this._initActions(config
|
|
4467
|
+
this._initActions(config);
|
|
4467
4468
|
this._initPaging(config.paging, config.loadMore);
|
|
4468
4469
|
this._initSelection(config.selection, this._selectionDialog);
|
|
4469
4470
|
this._initGroups(config.group);
|
|
@@ -4575,10 +4576,11 @@ class List {
|
|
|
4575
4576
|
/**
|
|
4576
4577
|
* Split actions by categories
|
|
4577
4578
|
*/
|
|
4578
|
-
_initActions(
|
|
4579
|
-
if (actions) {
|
|
4580
|
-
this.actions.setActions(actions);
|
|
4579
|
+
_initActions(config) {
|
|
4580
|
+
if (config.actions) {
|
|
4581
|
+
this.actions.setActions(config.actions);
|
|
4581
4582
|
}
|
|
4583
|
+
this.rowActionsHover = config.rowActionsHover ?? false;
|
|
4582
4584
|
this.hasRowActions =
|
|
4583
4585
|
(this.rowActionsRaw && this.rowActionsRaw.length > 0)
|
|
4584
4586
|
|| (this.groupActionsRaw && this.groupActionsRaw.length > 0);
|
|
@@ -5692,7 +5694,7 @@ class FsListComponent {
|
|
|
5692
5694
|
GroupExpandNotifierService,
|
|
5693
5695
|
PersistanceController,
|
|
5694
5696
|
ReorderController,
|
|
5695
|
-
], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filter-keyword': hasFilterKeyword,\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n <ng-container\n *ngIf=\"hasFilterKeyword\"\n [ngTemplateOutlet]=\"heading\">\n </ng-container>\n <fs-filter\n class=\"fs-list-filter\"\n *ngIf=\"list.filterConfig\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n [showFilterInput]=\"list.filterInput\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container\n *ngIf=\"!hasFilterKeyword\"\n [ngTemplateOutlet]=\"heading\">\n </ng-container>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [sorting]=\"list.sorting\"\n [paging]=\"list.paging\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n </div>\n </div>\n\n <ng-content select=\"[fs-list-content]\"></ng-content>\n\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table \n class=\"fs-list-table\" \n role=\"grid\" \n [fsListContentInit]=\"list.afterContentInit\" \n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n\n <fs-list-pagination\n *ngIf=\"paginatorVisible\"\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #heading>\n <div class=\"heading-container\" *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n <ng-container\n [ngTemplateOutlet]=\"headingContainerTemplate\"\n [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n </ng-container>\n </ng-container>\n <ng-template #headingContainer>\n <h2 class=\"heading\" *ngIf=\"list.heading || headingTemplate\">\n {{list.heading}}\n <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n </h2>\n <div class=\"small subheading\" *ngIf=\"list.subheading || subheadingTemplate\">\n {{list.subheading}}\n <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n </div>\n </ng-template>\n </div>\n</ng-template>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2$1.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["paging", "sorting", "rows", "firstLoad"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5697
|
+
], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, descendants: true, read: TemplateRef }, { propertyName: "headingContainerTemplate", first: true, predicate: FsListHeadingContainerDirective, descendants: true, read: TemplateRef }, { propertyName: "subheadingTemplate", first: true, predicate: FsListSubheadingDirective, descendants: true, read: TemplateRef }, { propertyName: "_emptyStateTemplate", first: true, predicate: FsListEmptyStateDirective, descendants: true, read: TemplateRef }, { propertyName: "columnTemplates", predicate: FsListColumnDirective }], viewQueries: [{ propertyName: "body", first: true, predicate: FsBodyComponent, descendants: true }, { propertyName: "filterReference", first: true, predicate: FilterComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filter-keyword': hasFilterKeyword,\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n <ng-container\n *ngIf=\"hasFilterKeyword\"\n [ngTemplateOutlet]=\"heading\">\n </ng-container>\n <fs-filter\n class=\"fs-list-filter\"\n *ngIf=\"list.filterConfig\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n [showFilterInput]=\"list.filterInput\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container\n *ngIf=\"!hasFilterKeyword\"\n [ngTemplateOutlet]=\"heading\">\n </ng-container>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [sorting]=\"list.sorting\"\n [paging]=\"list.paging\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n *ngIf=\"paginatorVisible\"\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #heading>\n <div\n class=\"heading-container\"\n *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n <ng-container\n [ngTemplateOutlet]=\"headingContainerTemplate\"\n [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n </ng-container>\n </ng-container>\n <ng-template #headingContainer>\n <h2\n class=\"heading\"\n *ngIf=\"list.heading || headingTemplate\">\n {{ list.heading }}\n <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n </h2>\n <div\n class=\"small subheading\"\n *ngIf=\"list.subheading || subheadingTemplate\">\n {{ list.subheading }}\n <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n </div>\n </ng-template>\n </div>\n</ng-template>", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;padding:4px;background:#d7d7d7;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: i2$1.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["paging", "sorting", "rows", "firstLoad"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5696
5698
|
}
|
|
5697
5699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, decorators: [{
|
|
5698
5700
|
type: Component,
|
|
@@ -5700,7 +5702,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
5700
5702
|
GroupExpandNotifierService,
|
|
5701
5703
|
PersistanceController,
|
|
5702
5704
|
ReorderController,
|
|
5703
|
-
], template: "<div class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filter-keyword': hasFilterKeyword,\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n <ng-container\n *ngIf=\"hasFilterKeyword\"\n [ngTemplateOutlet]=\"heading\">\n </ng-container>\n <fs-filter\n class=\"fs-list-filter\"\n *ngIf=\"list.filterConfig\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n [showFilterInput]=\"list.filterInput\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container\n *ngIf=\"!hasFilterKeyword\"\n [ngTemplateOutlet]=\"heading\">\n </ng-container>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [sorting]=\"list.sorting\"\n [paging]=\"list.paging\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n </div>\n </div>\n\n <ng-content select=\"[fs-list-content]\"></ng-content>\n\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table \n class=\"fs-list-table\" \n role=\"grid\" \n [fsListContentInit]=\"list.afterContentInit\" \n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n\n <fs-list-pagination\n *ngIf=\"paginatorVisible\"\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #heading>\n <div class=\"heading-container\" *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n <ng-container\n [ngTemplateOutlet]=\"headingContainerTemplate\"\n [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n </ng-container>\n </ng-container>\n <ng-template #headingContainer>\n <h2 class=\"heading\" *ngIf=\"list.heading || headingTemplate\">\n {{list.heading}}\n <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n </h2>\n <div class=\"small subheading\" *ngIf=\"list.subheading || subheadingTemplate\">\n {{list.subheading}}\n <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n </div>\n </ng-template>\n </div>\n</ng-template>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
|
|
5705
|
+
], template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filter-keyword': hasFilterKeyword,\n 'has-filters': list.filterConfig?.items.length,\n 'has-heading': list.heading || headingTemplate,\n 'has-status': hasStatus,\n 'has-chips': list.chips,\n 'has-actions': list.actions.hasActions,\n 'has-row-actions-hover': list.rowActionsHover,\n 'first-load': firstLoad,\n 'loading': list.loading$ | async\n }\">\n <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n<ng-template #listContainerContent>\n <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n <div class=\"fs-list-header-container\">\n <div\n class=\"fs-list-header\"\n [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated || !list.filterConfig?.items.length }\">\n <ng-container\n *ngIf=\"hasFilterKeyword\"\n [ngTemplateOutlet]=\"heading\">\n </ng-container>\n <fs-filter\n class=\"fs-list-filter\"\n *ngIf=\"list.filterConfig\"\n [filter]=\"list.filterConfig\"\n [showSortBy]=\"!list.status\"\n [showFilterInput]=\"list.filterInput\"\n (ready)=\"filterReady()\">\n <ng-template fsFilterStatusBar>\n <ng-container\n *ngIf=\"!hasFilterKeyword\"\n [ngTemplateOutlet]=\"heading\">\n </ng-container>\n <ng-container *ngIf=\"hasStatus\">\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [sorting]=\"list.sorting\"\n [paging]=\"list.paging\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-container>\n </ng-template>\n </fs-filter>\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n <ng-container *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n <table\n class=\"fs-list-table\"\n role=\"grid\"\n [fsListContentInit]=\"list.afterContentInit\"\n [ngClass]=\"{\n 'style-card': list.style === 'card',\n 'style-basic': list.style === 'basic',\n 'style-line': (list.style || 'line') === 'line'\n }\">\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\n *ngIf=\"list.columns.hasHeader\"\n [ngClass]=\"list.columns.theadClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [sorting]=\"list.sorting\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </thead>\n <tbody\n fs-list-body\n fsListDraggableList\n class=\"fs-list-body\"\n role=\"rowgroup\"\n [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n [rows]=\"listData\"\n [rowActionsRaw]=\"list.rowActionsRaw\"\n [groupActionsRaw]=\"list.groupActionsRaw\"\n [hasRowActions]=\"list.hasRowActions\"\n [rowEvents]=\"list.rowEvents\"\n [rowClass]=\"list.rowClass\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [restoreMode]=\"list.restoreMode\"\n [selection]=\"list.selection\"\n [rowRemoved]=\"rowRemoved\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\"\n [reorderMultiple]=\"reorderController.multiple\">\n </tbody>\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\n *ngIf=\"list.columns.hasFooter\"\n [columns]=\"list.columns.visibleColumns$ | async\"\n [selection]=\"list.selection\"\n [hasRowActions]=\"list.hasRowActions\"\n [activeFiltersCount]=\"list.activeFiltersCount$ | async\"\n [reorderEnabled]=\"reorderController.enabled$ | async\"\n [reorderPosition]=\"reorderController.position$ | async\"\n [reorderStrategy]=\"reorderController.strategy$ | async\">\n </tfoot>\n </table>\n </ng-container>\n <fs-list-loader\n *ngIf=\"firstLoad\"\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n </div>\n <fs-list-pagination\n *ngIf=\"paginatorVisible\"\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n <ng-container *ngIf=\"!firstLoad\">\n <div\n *ngIf=\"listData.length === 0\"\n class=\"fs-list-no-results-container\">\n <div\n *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n <ng-container *ngIf=\"list.emptyStateEnabled\">\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</ng-template>\n<ng-template #heading>\n <div\n class=\"heading-container\"\n *ngIf=\"headingContainerTemplate || list.heading || list.subheading || headingTemplate\">\n <ng-container *ngIf=\"headingContainerTemplate; else headingContainer\">\n <ng-container\n [ngTemplateOutlet]=\"headingContainerTemplate\"\n [ngTemplateOutletContext]=\"{ template: headingContainer }\">\n </ng-container>\n </ng-container>\n <ng-template #headingContainer>\n <h2\n class=\"heading\"\n *ngIf=\"list.heading || headingTemplate\">\n {{ list.heading }}\n <ng-container [ngTemplateOutlet]=\"headingTemplate\"></ng-container>\n </h2>\n <div\n class=\"small subheading\"\n *ngIf=\"list.subheading || subheadingTemplate\">\n {{ list.subheading }}\n <ng-container [ngTemplateOutlet]=\"subheadingTemplate\"></ng-container>\n </div>\n </ng-template>\n </div>\n</ng-template>", styles: [":host{display:block;width:100%}:host ::ng-deep .fs-list-swap-restricted{opacity:.5}:host ::ng-deep .fs-list-no-drop{cursor:no-drop}:host ::ng-deep .hidden{display:none}:host ::ng-deep .multiple-selection{background-color:#2196f380}:host ::ng-deep .multiple-selection ::ng-deep .fs-list-col{background-color:#2196f380}@media print{:host ::ng-deep .fs-list-row-group{page-break-after:avoid}:host ::ng-deep .fs-list-row-group-child{page-break-before:avoid}:host ::ng-deep .fs-list-row-group-footer{page-break-before:avoid}}.fs-list-container{width:100%}.fs-list-container:not(.has-filters):not(.has-actions):not(.has-heading) .fs-list-header-container{display:none}.fs-list-container:not(.has-filter-keyword) .fs-list-header{display:flex;margin-bottom:4px}.fs-list-container:not(.has-filter-keyword) .fs-list-header .heading-container{flex:1}.fs-list-container:not(.has-filter-keyword) .fs-list-header fs-filter{display:flex}.fs-list-container.has-filters .heading-container{margin-bottom:4px}.fs-list-container.loading .fs-list-status,.fs-list-container.loading .fs-list-body,.fs-list-container.loading .fs-list-head,.fs-list-container.loading .fs-list-footer,.fs-list-container.loading fs-list-pagination,.fs-list-container.loading ::ng-deep fs-filter-chips,.fs-list-container.loading .fs-list-no-results-container,.fs-list-container.first-load .fs-list-status,.fs-list-container.first-load .fs-list-body,.fs-list-container.first-load .fs-list-head,.fs-list-container.first-load .fs-list-footer,.fs-list-container.first-load fs-list-pagination,.fs-list-container.first-load ::ng-deep fs-filter-chips,.fs-list-container.first-load .fs-list-no-results-container{opacity:.4;pointer-events:none}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip{color:transparent}.fs-list-container.first-load ::ng-deep fs-filter-chips .fs-chip .remove{visibility:hidden}.fs-list-container.has-actions .fs-list-actions{margin-left:5px}@media screen and (min-width: 800px){.fs-list-container.has-row-actions-hover ::ng-deep .actions-col{width:0px;position:relative;overflow:visible;padding:0}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions{display:none;position:absolute;padding:4px;background:#d7d7d7;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep tr:hover fs-list-row-actions{display:flex}}.fs-list-container .fs-list-header .heading-container{display:flex;flex-direction:column;justify-content:center}.fs-list-container .fs-list-header .heading{margin:0}.fs-list-container .fs-list-header h2+.subheading{margin:2px 0 0}.fs-list-container .fs-list-filter{margin-bottom:0;position:initial!important;display:block;width:100%}.fs-list-container .fs-list-no-results-container .fs-list-no-results{text-align:center;color:#999;padding:10px 0}.fs-list-container .fs-list-table-container{width:100%;overflow:auto}::ng-deep .fs-list-table{border-spacing:0;display:table;width:100%;border-collapse:collapse}::ng-deep .fs-list-table thead{display:table-header-group}::ng-deep .fs-list-table thead th{color:#999;padding:8px;font-weight:400;color:#8f8f8f;font-size:85%;text-align:left}::ng-deep .fs-list-table tbody{display:table-row-group;position:relative}::ng-deep .fs-list-table tbody tr,::ng-deep .fs-list-table thead tr,::ng-deep .fs-list-table tfoot tr{display:table-row}::ng-deep .fs-list-table tbody tr td,::ng-deep .fs-list-table thead tr td,::ng-deep .fs-list-table tfoot tr td{display:table-cell;padding:8px;vertical-align:middle;outline:none;text-align:left}::ng-deep .fs-list-table tfoot td{padding:8px}::ng-deep .fs-list-table.style-line tbody .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-col{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody .fs-list-row:first-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:first-child .fs-list-col{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody .fs-list-row:last-child .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody .fs-list-row:last-child .fs-list-col{border-bottom:1px solid #c4c4c4}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging thead th,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging thead th{border-color:#e7e7e7}::ng-deep .fs-list-table.style-line .fs-list-container.has-dragging tbody tr:nth-child(2) td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-container.has-dragging tbody tr:nth-child(2) td{border-top:none}::ng-deep .fs-list-table.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){clip-path:xywh(0 3px 100% calc(100% - 6px) round 10px)}::ng-deep .fs-list-table.style-card tbody tr td{border:none!important;background-color:#fafafa;padding:8px 16px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:gray;display:flex;justify-content:center;align-items:center;z-index:1000;box-shadow:2px 2px 2px #9e9e9ea6;border-radius:6px}::ng-deep .reorder-in-progress{-webkit-user-select:none;user-select:none}@media only screen and (max-width: 600px){::ng-deep .fs-list-filter .inline-actions{top:initial!important;position:initial!important}::ng-deep .fs-list-filter .inline-actions .action-filter{margin-bottom:0!important}::ng-deep .fs-list-header .filter-input-field .mat-form-field-wrapper{padding:0!important}::ng-deep .fs-list-header.has-filters{flex-flow:row wrap}}@media only screen and (max-width: 768px){::ng-deep .show-mobile{display:inline-block!important}::ng-deep .fs-list-actions .action-button{display:none}::ng-deep .row-inline-action.mobile-hide{display:none}::ng-deep .hidden-mobile-menu-action{display:block!important}}:host(.fs-list-row-highlight) ::ng-deep tbody .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}\n"] }]
|
|
5704
5706
|
}], ctorParameters: () => [{ type: ReorderController }, { type: undefined, decorators: [{
|
|
5705
5707
|
type: Optional
|
|
5706
5708
|
}, {
|