@firestitch/list 18.0.61 → 18.0.63
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/selection-controller.d.ts +2 -0
- package/app/interfaces/listconfig.interface.d.ts +1 -0
- package/esm2022/app/classes/selection-controller.mjs +9 -1
- package/esm2022/app/components/body/row/row.component.mjs +3 -3
- package/esm2022/app/components/list/list.component.mjs +3 -3
- package/esm2022/app/interfaces/listconfig.interface.mjs +1 -1
- package/esm2022/app/models/row/_base-row.mjs +1 -1
- package/fesm2022/firestitch-list.mjs +12 -4
- package/fesm2022/firestitch-list.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -413,6 +413,7 @@ class SelectionController {
|
|
|
413
413
|
selectionChangedFn;
|
|
414
414
|
actionSelectedFn;
|
|
415
415
|
allSelectedFn;
|
|
416
|
+
selectableFn;
|
|
416
417
|
cancelledFn;
|
|
417
418
|
// Store for selected visible rows
|
|
418
419
|
selectedRows = new Map();
|
|
@@ -434,6 +435,7 @@ class SelectionController {
|
|
|
434
435
|
constructor(config = {}, _trackBy, _selectionDialog) {
|
|
435
436
|
this._trackBy = _trackBy;
|
|
436
437
|
this._selectionDialog = _selectionDialog;
|
|
438
|
+
this.selectableFn = config.selectable;
|
|
437
439
|
this.actions = config.actions ? [...config.actions] : [];
|
|
438
440
|
this.actionSelectedFn = config.actionSelected;
|
|
439
441
|
this.allSelectedFn = config.allSelected;
|
|
@@ -448,6 +450,12 @@ class SelectionController {
|
|
|
448
450
|
get disabled$() {
|
|
449
451
|
return this._disabled$.asObservable();
|
|
450
452
|
}
|
|
453
|
+
selectable(row, index) {
|
|
454
|
+
if (this.selectableFn) {
|
|
455
|
+
return this.selectableFn(row.data, index);
|
|
456
|
+
}
|
|
457
|
+
return true;
|
|
458
|
+
}
|
|
451
459
|
get enabled$() {
|
|
452
460
|
return this._disabled$.asObservable()
|
|
453
461
|
.pipe(map((disabled) => !disabled));
|
|
@@ -2404,7 +2412,7 @@ class FsRowComponent {
|
|
|
2404
2412
|
});
|
|
2405
2413
|
}
|
|
2406
2414
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2407
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsRowComponent, isStandalone: true, selector: "[fs-list-row]", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rowActionsRaw: { classPropertyName: "rowActionsRaw", publicName: "rowActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, groupActionsRaw: { classPropertyName: "groupActionsRaw", publicName: "groupActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, hasRowActions: { classPropertyName: "hasRowActions", publicName: "hasRowActions", isSignal: false, isRequired: false, transformFunction: null }, rowEvents: { classPropertyName: "rowEvents", publicName: "rowEvents", isSignal: false, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: false, isRequired: false, transformFunction: null }, restoreMode: { classPropertyName: "restoreMode", publicName: "restoreMode", isSignal: false, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, rowRemoved: { classPropertyName: "rowRemoved", publicName: "rowRemoved", isSignal: false, isRequired: false, transformFunction: null }, activeFiltersCount: { classPropertyName: "activeFiltersCount", publicName: "activeFiltersCount", isSignal: false, isRequired: false, transformFunction: null }, reorderEnabled: { classPropertyName: "reorderEnabled", publicName: "reorderEnabled", isSignal: false, isRequired: false, transformFunction: null }, reorderPosition: { classPropertyName: "reorderPosition", publicName: "reorderPosition", isSignal: false, isRequired: false, transformFunction: null }, reorderStrategy: { classPropertyName: "reorderStrategy", publicName: "reorderStrategy", isSignal: false, isRequired: false, transformFunction: null }, reorderMultiple: { classPropertyName: "reorderMultiple", publicName: "reorderMultiple", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.rowCustomClass()", "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection" } }, ngImport: i0, 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 [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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "rowIndex", "row"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { 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 });
|
|
2415
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.7", type: FsRowComponent, isStandalone: true, selector: "[fs-list-row]", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: false, transformFunction: null }, rowActionsRaw: { classPropertyName: "rowActionsRaw", publicName: "rowActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, groupActionsRaw: { classPropertyName: "groupActionsRaw", publicName: "groupActionsRaw", isSignal: false, isRequired: false, transformFunction: null }, hasRowActions: { classPropertyName: "hasRowActions", publicName: "hasRowActions", isSignal: false, isRequired: false, transformFunction: null }, rowEvents: { classPropertyName: "rowEvents", publicName: "rowEvents", isSignal: false, isRequired: false, transformFunction: null }, rowClass: { classPropertyName: "rowClass", publicName: "rowClass", isSignal: false, isRequired: false, transformFunction: null }, restoreMode: { classPropertyName: "restoreMode", publicName: "restoreMode", isSignal: false, isRequired: false, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: false, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: false, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: false, isRequired: false, transformFunction: null }, rowRemoved: { classPropertyName: "rowRemoved", publicName: "rowRemoved", isSignal: false, isRequired: false, transformFunction: null }, activeFiltersCount: { classPropertyName: "activeFiltersCount", publicName: "activeFiltersCount", isSignal: false, isRequired: false, transformFunction: null }, reorderEnabled: { classPropertyName: "reorderEnabled", publicName: "reorderEnabled", isSignal: false, isRequired: false, transformFunction: null }, reorderPosition: { classPropertyName: "reorderPosition", publicName: "reorderPosition", isSignal: false, isRequired: false, transformFunction: null }, reorderStrategy: { classPropertyName: "reorderStrategy", publicName: "reorderStrategy", isSignal: false, isRequired: false, transformFunction: null }, reorderMultiple: { classPropertyName: "reorderMultiple", publicName: "reorderMultiple", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.rowCustomClass()", "attr.role": "this.role", "class.drag-row": "this.reorderEnabled", "class.multiple-selection": "this.isMultipleSelection" } }, ngImport: i0, 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"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: 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: FsCellComponent, selector: "[fs-cell]", inputs: ["column", "rowIndex", "row"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FsRowActionsComponent, selector: "fs-list-row-actions", inputs: ["row", "index", "restoreMode", "rowActions", "rowRemoved", "menuRowActions", "inlineRowActions", "restoreAction"] }, { 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 });
|
|
2408
2416
|
}
|
|
2409
2417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsRowComponent, decorators: [{
|
|
2410
2418
|
type: Component,
|
|
@@ -2418,7 +2426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
2418
2426
|
FsRowActionsComponent,
|
|
2419
2427
|
MatIcon,
|
|
2420
2428
|
AsyncPipe,
|
|
2421
|
-
], 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 [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"] }]
|
|
2429
|
+
], 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"] }]
|
|
2422
2430
|
}], ctorParameters: () => [], propDecorators: { role: [{
|
|
2423
2431
|
type: HostBinding,
|
|
2424
2432
|
args: ['attr.role']
|
|
@@ -5854,7 +5862,7 @@ class FsListComponent {
|
|
|
5854
5862
|
GroupExpandNotifierService,
|
|
5855
5863
|
PersistanceController,
|
|
5856
5864
|
ReorderController,
|
|
5857
|
-
], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, 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-filters': list.filterConfig?.items.length,\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 @if (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 @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [config]=\"list.filterConfig\">\n @if (hasStatus) {\n <ng-template fsFilterStatusBar>\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-template>\n }\n @if (headingTemplate) {\n <ng-template fsFilterHeading>\n <ng-template [ngTemplateOutlet]=\"headingTemplate\"></ng-template>\n </ng-template>\n }\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n @if (!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 @if (list.columns.hasHeader) {\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\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 @if (list.columns.hasFooter) {\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\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 }\n </table>\n }\n @if (firstLoad) {\n <fs-list-loader\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n }\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n @if (!firstLoad) {\n @if (listData.length === 0) {\n <div\n class=\"fs-list-no-results-container\">\n @if (list.noResults?.message && !list.emptyStateEnabled) {\n <div\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n }\n @if (list.emptyStateEnabled) {\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n }\n </div>\n }\n }\n }\n</ng-template>", styles: ["::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.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-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{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}: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.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;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.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-x:auto;overflow-y:hidden}::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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "directive", type: FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["list", "rows", "firstLoad"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { 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: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5865
|
+
], queries: [{ propertyName: "headingTemplate", first: true, predicate: FsListHeadingDirective, 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-filters': list.filterConfig?.items.length,\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 @if (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 @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [config]=\"list.filterConfig\">\n @if (hasStatus) {\n <ng-template fsFilterStatusBar>\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-template>\n }\n @if (headingTemplate) {\n <ng-template fsFilterHeading>\n <ng-template [ngTemplateOutlet]=\"headingTemplate\"></ng-template>\n </ng-template>\n }\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n @if (!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 @if (list.columns.hasHeader) {\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\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 @if (list.columns.hasFooter) {\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\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 }\n </table>\n }\n @if (firstLoad) {\n <fs-list-loader\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n }\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n @if (!firstLoad) {\n @if (listData.length === 0) {\n <div\n class=\"fs-list-no-results-container\">\n @if (list.noResults?.message && !list.emptyStateEnabled) {\n <div\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n }\n @if (list.emptyStateEnabled) {\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n }\n </div>\n }\n }\n }\n</ng-template>", styles: ["::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.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-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{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}: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.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;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.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-x:auto;overflow-y:hidden;margin-top:7px}::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: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FilterComponent, selector: "fs-filter", inputs: ["config"], outputs: ["closed", "opened", "ready"] }, { kind: "directive", type: FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { kind: "directive", type: FilterHeadingDirective, selector: "[fsFilterHeading]" }, { kind: "component", type: FsStatusComponent, selector: "fs-list-status", inputs: ["list", "rows", "firstLoad"] }, { kind: "directive", type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { 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: "directive", type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { kind: "component", type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { kind: "directive", type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }, { kind: "component", type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { kind: "component", type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5858
5866
|
}
|
|
5859
5867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsListComponent, decorators: [{
|
|
5860
5868
|
type: Component,
|
|
@@ -5878,7 +5886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
|
|
|
5878
5886
|
FsListLoaderComponent,
|
|
5879
5887
|
FsPaginationComponent,
|
|
5880
5888
|
AsyncPipe,
|
|
5881
|
-
], template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\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 @if (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 @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [config]=\"list.filterConfig\">\n @if (hasStatus) {\n <ng-template fsFilterStatusBar>\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-template>\n }\n @if (headingTemplate) {\n <ng-template fsFilterHeading>\n <ng-template [ngTemplateOutlet]=\"headingTemplate\"></ng-template>\n </ng-template>\n }\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n @if (!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 @if (list.columns.hasHeader) {\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\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 @if (list.columns.hasFooter) {\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\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 }\n </table>\n }\n @if (firstLoad) {\n <fs-list-loader\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n }\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n @if (!firstLoad) {\n @if (listData.length === 0) {\n <div\n class=\"fs-list-no-results-container\">\n @if (list.noResults?.message && !list.emptyStateEnabled) {\n <div\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n }\n @if (list.emptyStateEnabled) {\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n }\n </div>\n }\n }\n }\n</ng-template>", styles: ["::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.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-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{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}: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.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;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.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-x:auto;overflow-y:hidden}::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"] }]
|
|
5889
|
+
], template: "<div\n class=\"fs-list-container\"\n [ngClass]=\"{\n 'has-filters': list.filterConfig?.items.length,\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 @if (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 @if (list.filterConfig) {\n <fs-filter\n class=\"fs-list-filter\"\n [config]=\"list.filterConfig\">\n @if (hasStatus) {\n <ng-template fsFilterStatusBar>\n <fs-list-status\n class=\"fs-list-status\"\n [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n [rows]=\"listData\"\n [list]=\"list\"\n [firstLoad]=\"firstLoad\">\n </fs-list-status>\n </ng-template>\n }\n @if (headingTemplate) {\n <ng-template fsFilterHeading>\n <ng-template [ngTemplateOutlet]=\"headingTemplate\"></ng-template>\n </ng-template>\n }\n </fs-filter>\n }\n </div>\n </div>\n <ng-content select=\"[fs-list-content]\"></ng-content>\n <!-- Table implementation -->\n <div class=\"fs-list-table-container\">\n @if (!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 @if (list.columns.hasHeader) {\n <thead\n fs-list-head\n class=\"fs-list-head\"\n role=\"rowgroup\"\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 @if (list.columns.hasFooter) {\n <tfoot\n fs-list-footer\n class=\"fs-list-footer\"\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 }\n </table>\n }\n @if (firstLoad) {\n <fs-list-loader\n [columns]=\"list.columns.columns\"\n [loaderLines]=\"loaderLines\">\n </fs-list-loader>\n }\n </div>\n <fs-list-pagination\n class=\"fs-list-pagination\"\n [rows]=\"listData\"\n [pagination]=\"list.paging\">\n </fs-list-pagination>\n @if (!firstLoad) {\n @if (listData.length === 0) {\n <div\n class=\"fs-list-no-results-container\">\n @if (list.noResults?.message && !list.emptyStateEnabled) {\n <div\n class=\"fs-list-no-results\">\n {{ list.noResults?.message }}\n </div>\n }\n @if (list.emptyStateEnabled) {\n <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n }\n </div>\n }\n }\n }\n</ng-template>", styles: ["::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.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-table.style-line tbody td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody td{box-sizing:border-box;border-top:1px solid #e7e7e7}::ng-deep .fs-list-table.style-line tbody tr:first-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:first-child td{border-color:#c4c4c4}::ng-deep .fs-list-table.style-line tbody tr:last-child td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) tbody tr:last-child td{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}: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.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;border-radius:5px;top:50%;right:5px;transform:translateY(-50%)}.fs-list-container.has-row-actions-hover ::ng-deep .actions-col fs-list-row-actions .mat-mdc-button-base{background:#fefefe;box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}.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-x:auto;overflow-y:hidden;margin-top:7px}::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"] }]
|
|
5882
5890
|
}], propDecorators: { classFsList: [{
|
|
5883
5891
|
type: HostBinding,
|
|
5884
5892
|
args: ['class.fs-list']
|