@codetectonics/mantle 1.2.3 → 1.2.5

package/fesm2022/codetectonics-mantle.mjs

@@ -1697,7 +1697,7 @@ class DynamicFormService {
     constructor() { }
     toFormGroup(data = {}, formGroup = new FormGroup({})) {
         Object.keys(data).forEach(attr => {
-            let formControl = new FormControl(data[attr] || undefined);
+            let formControl = new FormControl(data[attr] ?? undefined);
             formGroup.addControl(attr, formControl);
         });
         return formGroup;
@@ -4968,6 +4968,7 @@ class ListPageDataSource extends DataSource {
                     });
                 }
                 this.data = res.content;
+                this.dataService.onListContentLoaded(res.content);
                 this.selectedRecordIds = [];
                 this.selectAll = false;
                 return this.data;
@@ -5109,14 +5110,24 @@ class ListPageComponent {
     }
     onCheckAll(checked) {
         if (checked) {
-            this.dataSource.selectedRecordIds = this.dataSource.data.map((item) => { return item.id; });
+            this.dataSource.data.forEach((item) => {
+                if (this.isRecordChecked(item))
+                    return;
+                if (!this.listPageService.isRowSelectable(item))
+                    return;
+                this.dataSource.selectedRecordIds.push(item.id);
+                this.listPageService.onRecordChecked(item);
+            });
             this.dataSource.selectAll = true;
-            this.listPageService.onCheckAll(this.dataSource.data);
         }
         else {
-            this.dataSource.selectedRecordIds = [];
+            this.dataSource.data.forEach((item) => {
+                if (!this.isRecordChecked(item))
+                    return;
+                this.arrayService.removeItem(this.dataSource.selectedRecordIds, item.id);
+                this.listPageService.onRecordUnchecked(item);
+            });
             this.dataSource.selectAll = false;
-            this.listPageService.onUncheckAll();
         }
     }
     onBulkExportClicked(exportOption) {
@@ -5129,7 +5140,7 @@ class ListPageComponent {
         this.expandCollapsibleColumns = !this.expandCollapsibleColumns;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ListPageComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: ArrayService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ListPageComponent, isStandalone: false, selector: "mantle-list-page", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "searchPanel", first: true, predicate: SearchPanelComponent, descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"list-page\" [ngClass]=\"{'page': !isTabbedContent}\">\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!isTabbedContent\">\n    <mantle-page-title>{{ pageTitle | translate }}</mantle-page-title>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"listPageService.showBackToParentButton || withCollapsibleColumns\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"0 0 auto\" *ngIf=\"listPageService.showBackToParentButton\">\n        <button class=\"back-button\" mat-mini-fab color=\"primary\" type=\"button\" (click)=\"onBackToParentClicked()\">\n          <mat-icon>arrow_back</mat-icon>\n        </button>\n      </div>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"withCollapsibleColumns\">\n        <button mat-raised-button\n                color=\"primary\"\n                type=\"button\"\n                class=\"toggle-collapsible-columns-button button-with-icon\"\n                (click)=\"toggleCollapsibleColumns()\">\n          <ng-container *ngIf=\"expandCollapsibleColumns\">\n            <mat-icon class=\"left-icon\">keyboard_double_arrow_left</mat-icon>\n            <span>{{ 'mantle.buttons.collapse_table' | translate }}</span>\n          </ng-container>\n          <ng-container *ngIf=\"!expandCollapsibleColumns\">\n            <span>{{ 'mantle.buttons.expand_table' | translate }}</span>\n            <mat-icon class=\"right-icon\">keyboard_double_arrow_right</mat-icon>\n          </ng-container>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 1px\">\n    <mat-drawer-container class=\"full-height-only\" [hasBackdrop]=\"isSmallScreen\">\n      <mat-drawer #drawer\n          [mode]=\"isSmallScreen ? 'over' : 'side'\"\n          [position]=\"isSmallScreen ? 'end' : 'start'\"\n          [opened]=\"isActionPanelOpen\"\n          [disableClose]=\"!isSmallScreen\"\n          (closedStart)=\"isActionPanelOpen = false\"\n          (openedStart)=\"isActionPanelOpen = true\">\n\n        <button *ngIf=\"listPageService.showAddButton && listPageService.canWrite()\"\n            mat-raised-button\n            color=\"accent\"\n            type=\"button\"\n            class=\"add-button\"\n            (click)=\"onAddClicked()\">\n          <ng-container *ngIf=\"listPageService.customAddButtonLabel; else standardAddButtonLabel\">\n            {{ listPageService.customAddButtonLabel | translate }}\n          </ng-container>\n          <ng-template #standardAddButtonLabel>\n            + {{ 'mantle.buttons.add' | translate }} {{ listPageService.noun() | translate }}\n          </ng-template>\n        </button>\n\n        <div class=\"search-section\">\n          <mantle-search-panel #searchPanel\n              [searchFields]=\"listPageService.searchFields()\">\n          </mantle-search-panel>\n        </div>\n\n        <ng-container *ngFor=\"let exportOption of exportOptions\">\n          <button mat-button type=\"button\" class=\"export-button\" (click)=\"exportOption.export(searchPanel.searchParams).subscribe()\">\n            <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n            <mat-icon>download</mat-icon>\n          </button>\n        </ng-container>\n\n        <ng-container *ngIf=\"dataSource.selectedRecordIds.length > 0\">\n          <ng-container *ngFor=\"let exportOption of bulkExportOptions\">\n            <button mat-button type=\"button\" class=\"export-button\" (click)=\"onBulkExportClicked(exportOption)\">\n              <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n              <mat-icon>download</mat-icon>\n            </button>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let button of additionalButtons\">\n          <div *ngIf=\"button.show()\">\n            <button mat-raised-button\n                color=\"{{ button.color }}\"\n                type=\"button\"\n                class=\"additional-button\"\n                [disabled]=\"listPageService.isCommitInProgress || button.disabled || dataSource.selectedRecordIds.length <= 0\"\n                (click)=\"button.onClick(dataSource.selectedRecordIds)\">\n              {{ button.label | translate }}\n            </button>\n          </div>\n        </ng-container>\n\n      </mat-drawer>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"main-content full-height-only\">\n\n        <div fxFlex=\"1 0 1px\" class=\"vertically-scrollable\">\n          <table mat-table class=\"full-width horizontal-scroll-table\" matSort>\n\n            <ng-container matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef>\n                <mat-checkbox click-stop-propagation (change)=\"onCheckAll($event.checked)\" [checked]=\"dataSource.selectAll\"></mat-checkbox>\n              </th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox click-stop-propagation (change)=\"onRecordChecked(row, $event.checked)\" [checked]=\"isRecordChecked(row)\"></mat-checkbox>\n              </td>\n            </ng-container>\n\n            <ng-container *ngFor=\"let column of displayedColumns; let i = index\">\n              <ng-container matColumnDef=\"{{ column.attr }}\">\n                <th mat-header-cell *matHeaderCellDef\n                    mat-sort-header=\"{{column.sortAttr || column.attr}}\" [disabled]=\"column.disableSort\"\n                    [@collapse]=\"column.enableCollapse && !expandCollapsibleColumns\"\n                    [ngClass]=\"{\n                      'collapsible-column': column.enableCollapse,\n                      'collapsible-column-left': column.enableCollapse && (!displayedColumns[i - 1] || !displayedColumns[i - 1].enableCollapse),\n                      'collapsible-column-right': column.enableCollapse && (!displayedColumns[i + 1] || !displayedColumns[i + 1].enableCollapse)\n                    }\">\n                  {{ column.header | translate }}\n                </th>\n                <td mat-cell *matCellDef=\"let row\"\n                    [@collapse]=\"column.enableCollapse && !expandCollapsibleColumns\"\n                    [ngClass]=\"{\n                      'collapsible-column': column.enableCollapse,\n                      'collapsible-column-left': column.enableCollapse && (!displayedColumns[i - 1] || !displayedColumns[i - 1].enableCollapse),\n                      'collapsible-column-right': column.enableCollapse && (!displayedColumns[i + 1] || !displayedColumns[i + 1].enableCollapse)\n                    }\">\n                  <mantle-dynamic-attribute-display\n                      [fieldType]=\"column.type\"\n                      [value]=\"row[column.attr]\"\n                      [options]=\"column.options\">\n                  </mantle-dynamic-attribute-display>\n                </td>\n              </ng-container>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumnAttrs\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumnAttrs;\"\n                (click)=\"onRecordClicked(row)\"\n                [class.clickable-row]=\"withClickableRows\">\n            </tr>\n          </table>\n        </div>\n\n        <mat-paginator #paginator\n            fxFlex=\"0 0 auto\"\n            [length]=\"0\"\n            [pageIndex]=\"0\"\n            [pageSize]=\"10\"\n            [pageSizeOptions]=\"[10, 20, 50]\">\n        </mat-paginator>\n\n      </div>\n\n    </mat-drawer-container>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"isSmallScreen\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n\n      <button *ngIf=\"isActionPanelOpen\" type=\"button\" mat-button (click)=\"drawer.toggle()\">\n        <ng-container *ngIf=\"isActionPanelOpen\">\n          {{ 'mantle.buttons.close_actions' | translate }}<mat-icon>chevron_right</mat-icon>\n        </ng-container>\n      </button>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <button *ngIf=\"!isActionPanelOpen\" type=\"button\" mat-button (click)=\"drawer.toggle()\">\n        <ng-container>\n          <mat-icon>chevron_left</mat-icon> {{ 'mantle.buttons.open_actions' | translate }}\n        </ng-container>\n      </button>\n\n    </div>\n  </div>\n</div>\n", styles: [".main-content{padding-top:0;padding-bottom:0}.list-page{height:100%;max-height:100%}.mat-drawer{padding:0 16px 0 0}.mat-drawer .add-button{display:block;width:200px;height:auto;text-transform:uppercase;text-wrap-mode:wrap;border-radius:0;margin:16px 0 0;line-height:16px;padding:10px 16px}.mat-drawer-end{padding:0 16px}.search-section{margin:16px 0 0}.export-button{display:flex;align-items:center;justify-content:center;width:144px;background-color:transparent;white-space:nowrap;padding:0;margin:16px 0 16px auto}.export-button .export-button-label{display:inline-block;width:100px;white-space:normal;text-align:right;text-transform:uppercase;font-weight:400;line-height:1.25rem;margin-right:.25rem}.export-button .mdc-button__label{order:0}.export-button .mat-icon{order:1;height:auto;width:auto;font-size:2.5rem;margin:0}.toggle-collapsible-columns-button{width:220px;text-transform:uppercase}.toggle-collapsible-columns-button .mdc-button__label .mat-icon{font-size:1.2rem}.collapsible-column-left{border-left:1px solid lightgray}.collapsible-column-right{border-right:1px solid lightgray}th.collapsible-column{border-top:1px solid lightgray}th.collapsible-column-left{border-radius:2px 0 0}th.collapsible-column-right{border-radius:0 2px 0 0}.additional-button{display:block;width:200px;height:auto;text-transform:uppercase;text-wrap-mode:wrap;border-radius:0;margin:16px 0 0;line-height:16px;padding:10px 16px}@media (max-height: 600px){.list-page{height:600px;max-height:600px}}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i5$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { kind: "component", type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { kind: "component", type: PageTitleComponent, selector: "mantle-page-title" }, { kind: "component", type: SearchPanelComponent, selector: "mantle-search-panel", inputs: ["searchFields"], outputs: ["search"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], animations: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ListPageComponent, isStandalone: false, selector: "mantle-list-page", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }, { propertyName: "table", first: true, predicate: MatTable, descendants: true }, { propertyName: "searchPanel", first: true, predicate: SearchPanelComponent, descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"list-page\" [ngClass]=\"{'page': !isTabbedContent}\">\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!isTabbedContent\">\n    <mantle-page-title>{{ pageTitle | translate }}</mantle-page-title>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"listPageService.showBackToParentButton || withCollapsibleColumns\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"0 0 auto\" *ngIf=\"listPageService.showBackToParentButton\">\n        <button class=\"back-button\" mat-mini-fab color=\"primary\" type=\"button\" (click)=\"onBackToParentClicked()\">\n          <mat-icon>arrow_back</mat-icon>\n        </button>\n      </div>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"withCollapsibleColumns\">\n        <button mat-raised-button\n                color=\"primary\"\n                type=\"button\"\n                class=\"toggle-collapsible-columns-button button-with-icon\"\n                (click)=\"toggleCollapsibleColumns()\">\n          <ng-container *ngIf=\"expandCollapsibleColumns\">\n            <mat-icon class=\"left-icon\">keyboard_double_arrow_left</mat-icon>\n            <span>{{ 'mantle.buttons.collapse_table' | translate }}</span>\n          </ng-container>\n          <ng-container *ngIf=\"!expandCollapsibleColumns\">\n            <span>{{ 'mantle.buttons.expand_table' | translate }}</span>\n            <mat-icon class=\"right-icon\">keyboard_double_arrow_right</mat-icon>\n          </ng-container>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 1px\">\n    <mat-drawer-container class=\"full-height-only\" [hasBackdrop]=\"isSmallScreen\">\n      <mat-drawer #drawer\n          [mode]=\"isSmallScreen ? 'over' : 'side'\"\n          [position]=\"isSmallScreen ? 'end' : 'start'\"\n          [opened]=\"isActionPanelOpen\"\n          [disableClose]=\"!isSmallScreen\"\n          (closedStart)=\"isActionPanelOpen = false\"\n          (openedStart)=\"isActionPanelOpen = true\">\n\n        <button *ngIf=\"listPageService.showAddButton && listPageService.canWrite()\"\n            mat-raised-button\n            color=\"accent\"\n            type=\"button\"\n            class=\"add-button\"\n            (click)=\"onAddClicked()\">\n          <ng-container *ngIf=\"listPageService.customAddButtonLabel; else standardAddButtonLabel\">\n            {{ listPageService.customAddButtonLabel | translate }}\n          </ng-container>\n          <ng-template #standardAddButtonLabel>\n            + {{ 'mantle.buttons.add' | translate }} {{ listPageService.noun() | translate }}\n          </ng-template>\n        </button>\n\n        <div class=\"search-section\">\n          <mantle-search-panel #searchPanel\n              [searchFields]=\"listPageService.searchFields()\">\n          </mantle-search-panel>\n        </div>\n\n        <ng-container *ngFor=\"let exportOption of exportOptions\">\n          <button mat-button type=\"button\" class=\"export-button\" (click)=\"exportOption.export(searchPanel.searchParams).subscribe()\">\n            <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n            <mat-icon>download</mat-icon>\n          </button>\n        </ng-container>\n\n        <ng-container *ngIf=\"dataSource.selectedRecordIds.length > 0\">\n          <ng-container *ngFor=\"let exportOption of bulkExportOptions\">\n            <button mat-button type=\"button\" class=\"export-button\" (click)=\"onBulkExportClicked(exportOption)\">\n              <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n              <mat-icon>download</mat-icon>\n            </button>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let button of additionalButtons\">\n          <div *ngIf=\"button.show()\">\n            <button mat-raised-button\n                color=\"{{ button.color }}\"\n                type=\"button\"\n                class=\"additional-button\"\n                [disabled]=\"listPageService.isCommitInProgress || button.disabled || dataSource.selectedRecordIds.length <= 0\"\n                (click)=\"button.onClick(dataSource.selectedRecordIds)\">\n              {{ button.label | translate }}\n            </button>\n          </div>\n        </ng-container>\n\n      </mat-drawer>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"main-content full-height-only\">\n\n        <div fxFlex=\"1 0 1px\" class=\"vertically-scrollable\">\n          <table mat-table class=\"full-width horizontal-scroll-table\" matSort>\n\n            <ng-container matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef>\n                <mat-checkbox click-stop-propagation\n                              (change)=\"onCheckAll($event.checked)\"\n                              [checked]=\"dataSource.selectAll\"\n                              [indeterminate]=\"dataSource.selectAll && (dataSource.selectedRecordIds.length < dataSource.data.length)\">\n                </mat-checkbox>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" click-stop-propagation>\n                <mat-checkbox (change)=\"onRecordChecked(row, $event.checked)\"\n                              [checked]=\"isRecordChecked(row)\"\n                              [disabled]=\"!listPageService.isRowSelectable(row)\">\n                </mat-checkbox>\n              </td>\n            </ng-container>\n\n            <ng-container *ngFor=\"let column of displayedColumns; let i = index\">\n              <ng-container matColumnDef=\"{{ column.attr }}\">\n                <th mat-header-cell *matHeaderCellDef\n                    mat-sort-header=\"{{column.sortAttr || column.attr}}\" [disabled]=\"column.disableSort\"\n                    [@collapse]=\"column.enableCollapse && !expandCollapsibleColumns\"\n                    [ngClass]=\"{\n                      'collapsible-column': column.enableCollapse,\n                      'collapsible-column-left': column.enableCollapse && (!displayedColumns[i - 1] || !displayedColumns[i - 1].enableCollapse),\n                      'collapsible-column-right': column.enableCollapse && (!displayedColumns[i + 1] || !displayedColumns[i + 1].enableCollapse)\n                    }\">\n                  {{ column.header | translate }}\n                </th>\n                <td mat-cell *matCellDef=\"let row\"\n                    [@collapse]=\"column.enableCollapse && !expandCollapsibleColumns\"\n                    [ngClass]=\"{\n                      'collapsible-column': column.enableCollapse,\n                      'collapsible-column-left': column.enableCollapse && (!displayedColumns[i - 1] || !displayedColumns[i - 1].enableCollapse),\n                      'collapsible-column-right': column.enableCollapse && (!displayedColumns[i + 1] || !displayedColumns[i + 1].enableCollapse)\n                    }\">\n                  <mantle-dynamic-attribute-display\n                      [fieldType]=\"column.type\"\n                      [value]=\"row[column.attr]\"\n                      [options]=\"column.options\">\n                  </mantle-dynamic-attribute-display>\n                </td>\n              </ng-container>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumnAttrs\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumnAttrs;\"\n                (click)=\"onRecordClicked(row)\"\n                [class.clickable-row]=\"withClickableRows\">\n            </tr>\n          </table>\n        </div>\n\n        <mat-paginator #paginator\n            fxFlex=\"0 0 auto\"\n            [length]=\"0\"\n            [pageIndex]=\"0\"\n            [pageSize]=\"10\"\n            [pageSizeOptions]=\"[10, 20, 50]\">\n        </mat-paginator>\n\n      </div>\n\n    </mat-drawer-container>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"isSmallScreen\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n\n      <button *ngIf=\"isActionPanelOpen\" type=\"button\" mat-button (click)=\"drawer.toggle()\">\n        <ng-container *ngIf=\"isActionPanelOpen\">\n          {{ 'mantle.buttons.close_actions' | translate }}<mat-icon>chevron_right</mat-icon>\n        </ng-container>\n      </button>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <button *ngIf=\"!isActionPanelOpen\" type=\"button\" mat-button (click)=\"drawer.toggle()\">\n        <ng-container>\n          <mat-icon>chevron_left</mat-icon> {{ 'mantle.buttons.open_actions' | translate }}\n        </ng-container>\n      </button>\n\n    </div>\n  </div>\n</div>\n", styles: [".main-content{padding-top:0;padding-bottom:0}.list-page{height:100%;max-height:100%}.mat-drawer{padding:0 16px 0 0}.mat-drawer .add-button{display:block;width:200px;height:auto;text-transform:uppercase;text-wrap-mode:wrap;border-radius:0;margin:16px 0 0;line-height:16px;padding:10px 16px}.mat-drawer-end{padding:0 16px}.search-section{margin:16px 0 0}.export-button{display:flex;align-items:center;justify-content:center;width:144px;background-color:transparent;white-space:nowrap;padding:0;margin:16px 0 16px auto}.export-button .export-button-label{display:inline-block;width:100px;white-space:normal;text-align:right;text-transform:uppercase;font-weight:400;line-height:1.25rem;margin-right:.25rem}.export-button .mdc-button__label{order:0}.export-button .mat-icon{order:1;height:auto;width:auto;font-size:2.5rem;margin:0}.toggle-collapsible-columns-button{width:220px;text-transform:uppercase}.toggle-collapsible-columns-button .mdc-button__label .mat-icon{font-size:1.2rem}.collapsible-column-left{border-left:1px solid lightgray}.collapsible-column-right{border-right:1px solid lightgray}th.collapsible-column{border-top:1px solid lightgray}th.collapsible-column-left{border-radius:2px 0 0}th.collapsible-column-right{border-radius:0 2px 0 0}.additional-button{display:block;width:200px;height:auto;text-transform:uppercase;text-wrap-mode:wrap;border-radius:0;margin:16px 0 0;line-height:16px;padding:10px 16px}@media (max-height: 600px){.list-page{height:600px;max-height:600px}}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i3$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i3$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i5$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { kind: "component", type: i4.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i8$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i3$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i3$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i3$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i3$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i3$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i3$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i3$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i3$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i3$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i3$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: i13.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i13.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { kind: "component", type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { kind: "component", type: PageTitleComponent, selector: "mantle-page-title" }, { kind: "component", type: SearchPanelComponent, selector: "mantle-search-panel", inputs: ["searchFields"], outputs: ["search"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], animations: [
             trigger('collapse', [
                 state('false', style({ display: AUTO_STYLE, opacity: 1 })),
                 state('true', style({ display: 'none', opacity: 0 })),
@@ -5159,7 +5170,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                                 animate("1s", style({ opacity: 1 }))
                             ]))
                         ])
-                    ], template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"list-page\" [ngClass]=\"{'page': !isTabbedContent}\">\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!isTabbedContent\">\n    <mantle-page-title>{{ pageTitle | translate }}</mantle-page-title>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"listPageService.showBackToParentButton || withCollapsibleColumns\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"0 0 auto\" *ngIf=\"listPageService.showBackToParentButton\">\n        <button class=\"back-button\" mat-mini-fab color=\"primary\" type=\"button\" (click)=\"onBackToParentClicked()\">\n          <mat-icon>arrow_back</mat-icon>\n        </button>\n      </div>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"withCollapsibleColumns\">\n        <button mat-raised-button\n                color=\"primary\"\n                type=\"button\"\n                class=\"toggle-collapsible-columns-button button-with-icon\"\n                (click)=\"toggleCollapsibleColumns()\">\n          <ng-container *ngIf=\"expandCollapsibleColumns\">\n            <mat-icon class=\"left-icon\">keyboard_double_arrow_left</mat-icon>\n            <span>{{ 'mantle.buttons.collapse_table' | translate }}</span>\n          </ng-container>\n          <ng-container *ngIf=\"!expandCollapsibleColumns\">\n            <span>{{ 'mantle.buttons.expand_table' | translate }}</span>\n            <mat-icon class=\"right-icon\">keyboard_double_arrow_right</mat-icon>\n          </ng-container>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 1px\">\n    <mat-drawer-container class=\"full-height-only\" [hasBackdrop]=\"isSmallScreen\">\n      <mat-drawer #drawer\n          [mode]=\"isSmallScreen ? 'over' : 'side'\"\n          [position]=\"isSmallScreen ? 'end' : 'start'\"\n          [opened]=\"isActionPanelOpen\"\n          [disableClose]=\"!isSmallScreen\"\n          (closedStart)=\"isActionPanelOpen = false\"\n          (openedStart)=\"isActionPanelOpen = true\">\n\n        <button *ngIf=\"listPageService.showAddButton && listPageService.canWrite()\"\n            mat-raised-button\n            color=\"accent\"\n            type=\"button\"\n            class=\"add-button\"\n            (click)=\"onAddClicked()\">\n          <ng-container *ngIf=\"listPageService.customAddButtonLabel; else standardAddButtonLabel\">\n            {{ listPageService.customAddButtonLabel | translate }}\n          </ng-container>\n          <ng-template #standardAddButtonLabel>\n            + {{ 'mantle.buttons.add' | translate }} {{ listPageService.noun() | translate }}\n          </ng-template>\n        </button>\n\n        <div class=\"search-section\">\n          <mantle-search-panel #searchPanel\n              [searchFields]=\"listPageService.searchFields()\">\n          </mantle-search-panel>\n        </div>\n\n        <ng-container *ngFor=\"let exportOption of exportOptions\">\n          <button mat-button type=\"button\" class=\"export-button\" (click)=\"exportOption.export(searchPanel.searchParams).subscribe()\">\n            <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n            <mat-icon>download</mat-icon>\n          </button>\n        </ng-container>\n\n        <ng-container *ngIf=\"dataSource.selectedRecordIds.length > 0\">\n          <ng-container *ngFor=\"let exportOption of bulkExportOptions\">\n            <button mat-button type=\"button\" class=\"export-button\" (click)=\"onBulkExportClicked(exportOption)\">\n              <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n              <mat-icon>download</mat-icon>\n            </button>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let button of additionalButtons\">\n          <div *ngIf=\"button.show()\">\n            <button mat-raised-button\n                color=\"{{ button.color }}\"\n                type=\"button\"\n                class=\"additional-button\"\n                [disabled]=\"listPageService.isCommitInProgress || button.disabled || dataSource.selectedRecordIds.length <= 0\"\n                (click)=\"button.onClick(dataSource.selectedRecordIds)\">\n              {{ button.label | translate }}\n            </button>\n          </div>\n        </ng-container>\n\n      </mat-drawer>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"main-content full-height-only\">\n\n        <div fxFlex=\"1 0 1px\" class=\"vertically-scrollable\">\n          <table mat-table class=\"full-width horizontal-scroll-table\" matSort>\n\n            <ng-container matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef>\n                <mat-checkbox click-stop-propagation (change)=\"onCheckAll($event.checked)\" [checked]=\"dataSource.selectAll\"></mat-checkbox>\n              </th>\n              <td mat-cell *matCellDef=\"let row\">\n                <mat-checkbox click-stop-propagation (change)=\"onRecordChecked(row, $event.checked)\" [checked]=\"isRecordChecked(row)\"></mat-checkbox>\n              </td>\n            </ng-container>\n\n            <ng-container *ngFor=\"let column of displayedColumns; let i = index\">\n              <ng-container matColumnDef=\"{{ column.attr }}\">\n                <th mat-header-cell *matHeaderCellDef\n                    mat-sort-header=\"{{column.sortAttr || column.attr}}\" [disabled]=\"column.disableSort\"\n                    [@collapse]=\"column.enableCollapse && !expandCollapsibleColumns\"\n                    [ngClass]=\"{\n                      'collapsible-column': column.enableCollapse,\n                      'collapsible-column-left': column.enableCollapse && (!displayedColumns[i - 1] || !displayedColumns[i - 1].enableCollapse),\n                      'collapsible-column-right': column.enableCollapse && (!displayedColumns[i + 1] || !displayedColumns[i + 1].enableCollapse)\n                    }\">\n                  {{ column.header | translate }}\n                </th>\n                <td mat-cell *matCellDef=\"let row\"\n                    [@collapse]=\"column.enableCollapse && !expandCollapsibleColumns\"\n                    [ngClass]=\"{\n                      'collapsible-column': column.enableCollapse,\n                      'collapsible-column-left': column.enableCollapse && (!displayedColumns[i - 1] || !displayedColumns[i - 1].enableCollapse),\n                      'collapsible-column-right': column.enableCollapse && (!displayedColumns[i + 1] || !displayedColumns[i + 1].enableCollapse)\n                    }\">\n                  <mantle-dynamic-attribute-display\n                      [fieldType]=\"column.type\"\n                      [value]=\"row[column.attr]\"\n                      [options]=\"column.options\">\n                  </mantle-dynamic-attribute-display>\n                </td>\n              </ng-container>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumnAttrs\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumnAttrs;\"\n                (click)=\"onRecordClicked(row)\"\n                [class.clickable-row]=\"withClickableRows\">\n            </tr>\n          </table>\n        </div>\n\n        <mat-paginator #paginator\n            fxFlex=\"0 0 auto\"\n            [length]=\"0\"\n            [pageIndex]=\"0\"\n            [pageSize]=\"10\"\n            [pageSizeOptions]=\"[10, 20, 50]\">\n        </mat-paginator>\n\n      </div>\n\n    </mat-drawer-container>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"isSmallScreen\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n\n      <button *ngIf=\"isActionPanelOpen\" type=\"button\" mat-button (click)=\"drawer.toggle()\">\n        <ng-container *ngIf=\"isActionPanelOpen\">\n          {{ 'mantle.buttons.close_actions' | translate }}<mat-icon>chevron_right</mat-icon>\n        </ng-container>\n      </button>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <button *ngIf=\"!isActionPanelOpen\" type=\"button\" mat-button (click)=\"drawer.toggle()\">\n        <ng-container>\n          <mat-icon>chevron_left</mat-icon> {{ 'mantle.buttons.open_actions' | translate }}\n        </ng-container>\n      </button>\n\n    </div>\n  </div>\n</div>\n", styles: [".main-content{padding-top:0;padding-bottom:0}.list-page{height:100%;max-height:100%}.mat-drawer{padding:0 16px 0 0}.mat-drawer .add-button{display:block;width:200px;height:auto;text-transform:uppercase;text-wrap-mode:wrap;border-radius:0;margin:16px 0 0;line-height:16px;padding:10px 16px}.mat-drawer-end{padding:0 16px}.search-section{margin:16px 0 0}.export-button{display:flex;align-items:center;justify-content:center;width:144px;background-color:transparent;white-space:nowrap;padding:0;margin:16px 0 16px auto}.export-button .export-button-label{display:inline-block;width:100px;white-space:normal;text-align:right;text-transform:uppercase;font-weight:400;line-height:1.25rem;margin-right:.25rem}.export-button .mdc-button__label{order:0}.export-button .mat-icon{order:1;height:auto;width:auto;font-size:2.5rem;margin:0}.toggle-collapsible-columns-button{width:220px;text-transform:uppercase}.toggle-collapsible-columns-button .mdc-button__label .mat-icon{font-size:1.2rem}.collapsible-column-left{border-left:1px solid lightgray}.collapsible-column-right{border-right:1px solid lightgray}th.collapsible-column{border-top:1px solid lightgray}th.collapsible-column-left{border-radius:2px 0 0}th.collapsible-column-right{border-radius:0 2px 0 0}.additional-button{display:block;width:200px;height:auto;text-transform:uppercase;text-wrap-mode:wrap;border-radius:0;margin:16px 0 0;line-height:16px;padding:10px 16px}@media (max-height: 600px){.list-page{height:600px;max-height:600px}}\n"] }]
+                    ], template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"list-page\" [ngClass]=\"{'page': !isTabbedContent}\">\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!isTabbedContent\">\n    <mantle-page-title>{{ pageTitle | translate }}</mantle-page-title>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"listPageService.showBackToParentButton || withCollapsibleColumns\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"0 0 auto\" *ngIf=\"listPageService.showBackToParentButton\">\n        <button class=\"back-button\" mat-mini-fab color=\"primary\" type=\"button\" (click)=\"onBackToParentClicked()\">\n          <mat-icon>arrow_back</mat-icon>\n        </button>\n      </div>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"withCollapsibleColumns\">\n        <button mat-raised-button\n                color=\"primary\"\n                type=\"button\"\n                class=\"toggle-collapsible-columns-button button-with-icon\"\n                (click)=\"toggleCollapsibleColumns()\">\n          <ng-container *ngIf=\"expandCollapsibleColumns\">\n            <mat-icon class=\"left-icon\">keyboard_double_arrow_left</mat-icon>\n            <span>{{ 'mantle.buttons.collapse_table' | translate }}</span>\n          </ng-container>\n          <ng-container *ngIf=\"!expandCollapsibleColumns\">\n            <span>{{ 'mantle.buttons.expand_table' | translate }}</span>\n            <mat-icon class=\"right-icon\">keyboard_double_arrow_right</mat-icon>\n          </ng-container>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 1px\">\n    <mat-drawer-container class=\"full-height-only\" [hasBackdrop]=\"isSmallScreen\">\n      <mat-drawer #drawer\n          [mode]=\"isSmallScreen ? 'over' : 'side'\"\n          [position]=\"isSmallScreen ? 'end' : 'start'\"\n          [opened]=\"isActionPanelOpen\"\n          [disableClose]=\"!isSmallScreen\"\n          (closedStart)=\"isActionPanelOpen = false\"\n          (openedStart)=\"isActionPanelOpen = true\">\n\n        <button *ngIf=\"listPageService.showAddButton && listPageService.canWrite()\"\n            mat-raised-button\n            color=\"accent\"\n            type=\"button\"\n            class=\"add-button\"\n            (click)=\"onAddClicked()\">\n          <ng-container *ngIf=\"listPageService.customAddButtonLabel; else standardAddButtonLabel\">\n            {{ listPageService.customAddButtonLabel | translate }}\n          </ng-container>\n          <ng-template #standardAddButtonLabel>\n            + {{ 'mantle.buttons.add' | translate }} {{ listPageService.noun() | translate }}\n          </ng-template>\n        </button>\n\n        <div class=\"search-section\">\n          <mantle-search-panel #searchPanel\n              [searchFields]=\"listPageService.searchFields()\">\n          </mantle-search-panel>\n        </div>\n\n        <ng-container *ngFor=\"let exportOption of exportOptions\">\n          <button mat-button type=\"button\" class=\"export-button\" (click)=\"exportOption.export(searchPanel.searchParams).subscribe()\">\n            <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n            <mat-icon>download</mat-icon>\n          </button>\n        </ng-container>\n\n        <ng-container *ngIf=\"dataSource.selectedRecordIds.length > 0\">\n          <ng-container *ngFor=\"let exportOption of bulkExportOptions\">\n            <button mat-button type=\"button\" class=\"export-button\" (click)=\"onBulkExportClicked(exportOption)\">\n              <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n              <mat-icon>download</mat-icon>\n            </button>\n          </ng-container>\n        </ng-container>\n\n        <ng-container *ngFor=\"let button of additionalButtons\">\n          <div *ngIf=\"button.show()\">\n            <button mat-raised-button\n                color=\"{{ button.color }}\"\n                type=\"button\"\n                class=\"additional-button\"\n                [disabled]=\"listPageService.isCommitInProgress || button.disabled || dataSource.selectedRecordIds.length <= 0\"\n                (click)=\"button.onClick(dataSource.selectedRecordIds)\">\n              {{ button.label | translate }}\n            </button>\n          </div>\n        </ng-container>\n\n      </mat-drawer>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"main-content full-height-only\">\n\n        <div fxFlex=\"1 0 1px\" class=\"vertically-scrollable\">\n          <table mat-table class=\"full-width horizontal-scroll-table\" matSort>\n\n            <ng-container matColumnDef=\"select\">\n              <th mat-header-cell *matHeaderCellDef>\n                <mat-checkbox click-stop-propagation\n                              (change)=\"onCheckAll($event.checked)\"\n                              [checked]=\"dataSource.selectAll\"\n                              [indeterminate]=\"dataSource.selectAll && (dataSource.selectedRecordIds.length < dataSource.data.length)\">\n                </mat-checkbox>\n              </th>\n              <td mat-cell *matCellDef=\"let row\" click-stop-propagation>\n                <mat-checkbox (change)=\"onRecordChecked(row, $event.checked)\"\n                              [checked]=\"isRecordChecked(row)\"\n                              [disabled]=\"!listPageService.isRowSelectable(row)\">\n                </mat-checkbox>\n              </td>\n            </ng-container>\n\n            <ng-container *ngFor=\"let column of displayedColumns; let i = index\">\n              <ng-container matColumnDef=\"{{ column.attr }}\">\n                <th mat-header-cell *matHeaderCellDef\n                    mat-sort-header=\"{{column.sortAttr || column.attr}}\" [disabled]=\"column.disableSort\"\n                    [@collapse]=\"column.enableCollapse && !expandCollapsibleColumns\"\n                    [ngClass]=\"{\n                      'collapsible-column': column.enableCollapse,\n                      'collapsible-column-left': column.enableCollapse && (!displayedColumns[i - 1] || !displayedColumns[i - 1].enableCollapse),\n                      'collapsible-column-right': column.enableCollapse && (!displayedColumns[i + 1] || !displayedColumns[i + 1].enableCollapse)\n                    }\">\n                  {{ column.header | translate }}\n                </th>\n                <td mat-cell *matCellDef=\"let row\"\n                    [@collapse]=\"column.enableCollapse && !expandCollapsibleColumns\"\n                    [ngClass]=\"{\n                      'collapsible-column': column.enableCollapse,\n                      'collapsible-column-left': column.enableCollapse && (!displayedColumns[i - 1] || !displayedColumns[i - 1].enableCollapse),\n                      'collapsible-column-right': column.enableCollapse && (!displayedColumns[i + 1] || !displayedColumns[i + 1].enableCollapse)\n                    }\">\n                  <mantle-dynamic-attribute-display\n                      [fieldType]=\"column.type\"\n                      [value]=\"row[column.attr]\"\n                      [options]=\"column.options\">\n                  </mantle-dynamic-attribute-display>\n                </td>\n              </ng-container>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"displayedColumnAttrs\"></tr>\n            <tr mat-row *matRowDef=\"let row; columns: displayedColumnAttrs;\"\n                (click)=\"onRecordClicked(row)\"\n                [class.clickable-row]=\"withClickableRows\">\n            </tr>\n          </table>\n        </div>\n\n        <mat-paginator #paginator\n            fxFlex=\"0 0 auto\"\n            [length]=\"0\"\n            [pageIndex]=\"0\"\n            [pageSize]=\"10\"\n            [pageSizeOptions]=\"[10, 20, 50]\">\n        </mat-paginator>\n\n      </div>\n\n    </mat-drawer-container>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"isSmallScreen\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n\n      <button *ngIf=\"isActionPanelOpen\" type=\"button\" mat-button (click)=\"drawer.toggle()\">\n        <ng-container *ngIf=\"isActionPanelOpen\">\n          {{ 'mantle.buttons.close_actions' | translate }}<mat-icon>chevron_right</mat-icon>\n        </ng-container>\n      </button>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <button *ngIf=\"!isActionPanelOpen\" type=\"button\" mat-button (click)=\"drawer.toggle()\">\n        <ng-container>\n          <mat-icon>chevron_left</mat-icon> {{ 'mantle.buttons.open_actions' | translate }}\n        </ng-container>\n      </button>\n\n    </div>\n  </div>\n</div>\n", styles: [".main-content{padding-top:0;padding-bottom:0}.list-page{height:100%;max-height:100%}.mat-drawer{padding:0 16px 0 0}.mat-drawer .add-button{display:block;width:200px;height:auto;text-transform:uppercase;text-wrap-mode:wrap;border-radius:0;margin:16px 0 0;line-height:16px;padding:10px 16px}.mat-drawer-end{padding:0 16px}.search-section{margin:16px 0 0}.export-button{display:flex;align-items:center;justify-content:center;width:144px;background-color:transparent;white-space:nowrap;padding:0;margin:16px 0 16px auto}.export-button .export-button-label{display:inline-block;width:100px;white-space:normal;text-align:right;text-transform:uppercase;font-weight:400;line-height:1.25rem;margin-right:.25rem}.export-button .mdc-button__label{order:0}.export-button .mat-icon{order:1;height:auto;width:auto;font-size:2.5rem;margin:0}.toggle-collapsible-columns-button{width:220px;text-transform:uppercase}.toggle-collapsible-columns-button .mdc-button__label .mat-icon{font-size:1.2rem}.collapsible-column-left{border-left:1px solid lightgray}.collapsible-column-right{border-right:1px solid lightgray}th.collapsible-column{border-top:1px solid lightgray}th.collapsible-column-left{border-radius:2px 0 0}th.collapsible-column-right{border-radius:0 2px 0 0}.additional-button{display:block;width:200px;height:auto;text-transform:uppercase;text-wrap-mode:wrap;border-radius:0;margin:16px 0 0;line-height:16px;padding:10px 16px}@media (max-height: 600px){.list-page{height:600px;max-height:600px}}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ArrayService }, { type: ScreenSizeService }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
@@ -7317,6 +7328,8 @@ class FeatureConfigService {
      *  LIST PAGE CONFIG
      */
     // Override this method in your domain-service if you would like to use it.
+    onListContentLoaded(content) { }
+    // Override this method in your domain-service if you would like to use it.
     listPageExportOptions() {
         return [];
     }
@@ -7333,9 +7346,9 @@ class FeatureConfigService {
     // Override this method in your domain-service if you would like to use it.
     onRecordUnchecked(record) { }
     // Override this method in your domain-service if you would like to use it.
-    onCheckAll(records) { }
-    // Override this method in your domain-service if you would like to use it.
-    onUncheckAll() { }
+    isRowSelectable(record) {
+        return true;
+    }
 }
 
 class SessionGuard {