@firestitch/list 13.0.0 → 13.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/components/body/row/row.component.d.ts +2 -0
- package/app/components/list/list.component.d.ts +2 -0
- package/app/models/row.d.ts +7 -3
- package/esm2020/app/components/body/body.component.mjs +2 -2
- package/esm2020/app/components/body/row/actions/actions.component.mjs +4 -1
- package/esm2020/app/components/body/row/row.component.mjs +22 -9
- package/esm2020/app/components/list/list.component.mjs +8 -2
- package/esm2020/app/models/row.mjs +10 -2
- package/fesm2015/firestitch-list.mjs +45 -17
- package/fesm2015/firestitch-list.mjs.map +1 -1
- package/fesm2020/firestitch-list.mjs +56 -28
- package/fesm2020/firestitch-list.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1059,6 +1059,25 @@ class ChildRow extends BaseRow {
|
|
|
1059
1059
|
destroy() { }
|
|
1060
1060
|
}
|
|
1061
1061
|
|
|
1062
|
+
class GroupFooterRow extends BaseRow {
|
|
1063
|
+
constructor(data = {}, parent = null) {
|
|
1064
|
+
super(data, RowType.GroupFooter);
|
|
1065
|
+
this.visible = true;
|
|
1066
|
+
this._parent = parent;
|
|
1067
|
+
if (this.parent) {
|
|
1068
|
+
this.visible = this._parent.expanded;
|
|
1069
|
+
this.index = this.parent.children.length;
|
|
1070
|
+
}
|
|
1071
|
+
}
|
|
1072
|
+
get parent() {
|
|
1073
|
+
return this._parent;
|
|
1074
|
+
}
|
|
1075
|
+
get isGroupFooter() {
|
|
1076
|
+
return true;
|
|
1077
|
+
}
|
|
1078
|
+
destroy() { }
|
|
1079
|
+
}
|
|
1080
|
+
|
|
1062
1081
|
class GroupRow extends BaseRow {
|
|
1063
1082
|
constructor(data = {}, initialExpand = false) {
|
|
1064
1083
|
super(data, RowType.Group);
|
|
@@ -1109,27 +1128,9 @@ class SimpleRow extends BaseRow {
|
|
|
1109
1128
|
}
|
|
1110
1129
|
}
|
|
1111
1130
|
|
|
1112
|
-
class GroupFooterRow extends BaseRow {
|
|
1113
|
-
constructor(data = {}, parent = null) {
|
|
1114
|
-
super(data, RowType.GroupFooter);
|
|
1115
|
-
this.visible = true;
|
|
1116
|
-
this._parent = parent;
|
|
1117
|
-
if (this.parent) {
|
|
1118
|
-
this.visible = this._parent.expanded;
|
|
1119
|
-
this.index = this.parent.children.length;
|
|
1120
|
-
}
|
|
1121
|
-
}
|
|
1122
|
-
get parent() {
|
|
1123
|
-
return this._parent;
|
|
1124
|
-
}
|
|
1125
|
-
get isGroupFooter() {
|
|
1126
|
-
return true;
|
|
1127
|
-
}
|
|
1128
|
-
destroy() { }
|
|
1129
|
-
}
|
|
1130
|
-
|
|
1131
1131
|
class Row {
|
|
1132
1132
|
constructor(data = {}, rowType = RowType.Simple, { parent, initialExpand } = {}) {
|
|
1133
|
+
this._actionsUpdate$ = new Subject();
|
|
1133
1134
|
switch (rowType) {
|
|
1134
1135
|
case RowType.Simple:
|
|
1135
1136
|
{
|
|
@@ -1151,6 +1152,12 @@ class Row {
|
|
|
1151
1152
|
get index() {
|
|
1152
1153
|
return this._row.index;
|
|
1153
1154
|
}
|
|
1155
|
+
get actionsUpdate$() {
|
|
1156
|
+
return this._actionsUpdate$.asObservable();
|
|
1157
|
+
}
|
|
1158
|
+
actionsUpdate() {
|
|
1159
|
+
return this._actionsUpdate$.next();
|
|
1160
|
+
}
|
|
1154
1161
|
set index(value) {
|
|
1155
1162
|
this._row.index = value;
|
|
1156
1163
|
}
|
|
@@ -1771,6 +1778,9 @@ class FsRowActionsComponent {
|
|
|
1771
1778
|
this.rowRemoved.emit(row);
|
|
1772
1779
|
});
|
|
1773
1780
|
}
|
|
1781
|
+
else {
|
|
1782
|
+
this.rowRemoved.emit(row);
|
|
1783
|
+
}
|
|
1774
1784
|
}
|
|
1775
1785
|
}
|
|
1776
1786
|
FsRowActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsRowActionsComponent, deps: [{ token: i1$1.FsPrompt }], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -1880,6 +1890,9 @@ class FsRowComponent {
|
|
|
1880
1890
|
ngOnInit() {
|
|
1881
1891
|
this._initRowEvents();
|
|
1882
1892
|
this._initSelection();
|
|
1893
|
+
if (this.row) {
|
|
1894
|
+
this._initRowActionsUpdate();
|
|
1895
|
+
}
|
|
1883
1896
|
if (this.row && this.row.isGroup) {
|
|
1884
1897
|
if (this.row && this.row.isGroup && this.groupActionsRaw) {
|
|
1885
1898
|
this.rowActions = this.groupActionsRaw.map((action) => new RowAction(action));
|
|
@@ -1893,15 +1906,18 @@ class FsRowComponent {
|
|
|
1893
1906
|
}
|
|
1894
1907
|
ngDoCheck() {
|
|
1895
1908
|
if (this._rowDiffer.diff(this.row)) {
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1909
|
+
this.updateRowActions();
|
|
1910
|
+
}
|
|
1911
|
+
}
|
|
1912
|
+
updateRowActions() {
|
|
1913
|
+
if (this.rowActions) {
|
|
1914
|
+
this.rowActions.forEach((action) => {
|
|
1915
|
+
action.checkShowStatus(this.row.data, this.rowIndex);
|
|
1916
|
+
action.updateLink(this.row.data);
|
|
1917
|
+
});
|
|
1918
|
+
this._filterActionsByCategories();
|
|
1904
1919
|
}
|
|
1920
|
+
this._cdRef.markForCheck();
|
|
1905
1921
|
}
|
|
1906
1922
|
ngOnDestroy() {
|
|
1907
1923
|
this._eventListeners.forEach((listener) => {
|
|
@@ -1955,6 +1971,13 @@ class FsRowComponent {
|
|
|
1955
1971
|
}
|
|
1956
1972
|
});
|
|
1957
1973
|
}
|
|
1974
|
+
_initRowActionsUpdate() {
|
|
1975
|
+
this.row.actionsUpdate$
|
|
1976
|
+
.pipe(takeUntil(this._destroy$))
|
|
1977
|
+
.subscribe(() => {
|
|
1978
|
+
this.updateRowActions();
|
|
1979
|
+
});
|
|
1980
|
+
}
|
|
1958
1981
|
_getRowClasses(rowClass) {
|
|
1959
1982
|
const classes = [];
|
|
1960
1983
|
const options = {
|
|
@@ -5448,6 +5471,8 @@ class FsListComponent {
|
|
|
5448
5471
|
.pipe(takeUntil(this._destroy))
|
|
5449
5472
|
.subscribe((row) => {
|
|
5450
5473
|
this.list.dataController.removeData(row);
|
|
5474
|
+
this.body.rows
|
|
5475
|
+
.forEach((row) => row.actionsUpdate());
|
|
5451
5476
|
});
|
|
5452
5477
|
}
|
|
5453
5478
|
_subscribeToGroupExpandStatusChange() {
|
|
@@ -5482,7 +5507,7 @@ FsListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
|
|
|
5482
5507
|
GroupExpandNotifierService,
|
|
5483
5508
|
PersistanceController,
|
|
5484
5509
|
ReorderController,
|
|
5485
|
-
], 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: "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 [scrollable]=\"list.scrollable || list.paging.loadMoreEnabled\">\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 #ddd}::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-top:2px solid #ddd}::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:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-row:hover .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}::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-bottom:2px solid #ddd}::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-line.style-card,::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card{border-spacing:0 8px;border-collapse:separate}::ng-deep .fs-list-table.style-line.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group),::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){background-color:#fafafa;border-radius:10px}::ng-deep .fs-list-table.style-line.style-card tbody tr td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card tbody tr td{border:none!important;padding:8px 16px}::ng-deep .fs-list-table.style-line.style-card tbody tr td:first-child,::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card tbody tr td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}::ng-deep .fs-list-table.style-line.style-card tbody tr td:last-child,::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card tbody tr td:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:grey;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-no-highlight) ::ng-deep .fs-list-row:hover .fs-list-col{background-color:initial}\n"], components: [{ type: i2$3.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { type: FsStatusComponent, selector: "fs-list-status", inputs: ["paging", "sorting", "rows", "scrollable", "firstLoad"] }, { type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5510
|
+
], 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 [scrollable]=\"list.scrollable || list.paging.loadMoreEnabled\">\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 #ddd}::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-top:2px solid #ddd}::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:2px solid #ddd}::ng-deep .fs-list-table.style-line .fs-list-row:hover .fs-list-col,::ng-deep .fs-list-table:not(.style-card):not(.style-basic) .fs-list-row:hover .fs-list-col{background-color:#f6f6f6}::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-bottom:2px solid #ddd}::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-line.style-card,::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card{border-spacing:0 8px;border-collapse:separate}::ng-deep .fs-list-table.style-line.style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group),::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card tbody tr:not(.fs-list-row-group-footer):not(.fs-list-row-group){background-color:#fafafa;border-radius:10px}::ng-deep .fs-list-table.style-line.style-card tbody tr td,::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card tbody tr td{border:none!important;padding:8px 16px}::ng-deep .fs-list-table.style-line.style-card tbody tr td:first-child,::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card tbody tr td:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}::ng-deep .fs-list-table.style-line.style-card tbody tr td:last-child,::ng-deep .fs-list-table:not(.style-card):not(.style-basic).style-card tbody tr td:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}::ng-deep .fs-list-preview-block{position:fixed;height:30px;width:200px;background:grey;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-no-highlight) ::ng-deep .fs-list-row:hover .fs-list-col{background-color:initial}\n"], components: [{ type: i2$3.FilterComponent, selector: "fs-filter", inputs: ["config", "filter", "showSortBy", "showFilterInput"], outputs: ["closed", "opened", "ready"] }, { type: FsStatusComponent, selector: "fs-list-status", inputs: ["paging", "sorting", "rows", "scrollable", "firstLoad"] }, { type: FsHeadComponent, selector: "[fs-list-head]", inputs: ["sorting", "columns", "hasRowActions", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { type: FsBodyComponent, selector: "[fs-list-body]", inputs: ["rows", "columns", "hasFooter", "rowActionsRaw", "groupActionsRaw", "rowEvents", "rowClass", "hasRowActions", "selection", "restoreMode", "rowRemoved", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy", "reorderMultiple"] }, { type: FsFooterComponent, selector: "[fs-list-footer]", inputs: ["hasRowActions", "columns", "selection", "activeFiltersCount", "reorderEnabled", "reorderPosition", "reorderStrategy"] }, { type: FsListLoaderComponent, selector: "fs-list-loader", inputs: ["columns", "loaderLines"] }, { type: FsPaginationComponent, selector: "fs-list-pagination", inputs: ["pagination", "rows"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.FilterStatusBarDirective, selector: "[fsFilterStatusBar]" }, { type: FsListContentInitDirective, selector: "[fsListContentInit]", inputs: ["fsListContentInit"] }, { type: FsListDraggableListDirective, selector: "[fsListDraggableList]", inputs: ["rows"] }, { type: FsListFooterDirective, selector: "[fs-list-footer]", inputs: ["colspan", "align", "class"] }], pipes: { "async": i3.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5486
5511
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: FsListComponent, decorators: [{
|
|
5487
5512
|
type: Component,
|
|
5488
5513
|
args: [{ selector: 'fs-list', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -5523,6 +5548,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
|
|
|
5523
5548
|
}], subheadingTemplate: [{
|
|
5524
5549
|
type: ContentChild,
|
|
5525
5550
|
args: [FsListSubheadingDirective, { read: TemplateRef }]
|
|
5551
|
+
}], body: [{
|
|
5552
|
+
type: ViewChild,
|
|
5553
|
+
args: [FsBodyComponent]
|
|
5526
5554
|
}], filterReference: [{
|
|
5527
5555
|
type: ViewChild,
|
|
5528
5556
|
args: [FilterComponent]
|