@codetectonics/mantle 1.2.1 → 1.2.3

package/fesm2022/codetectonics-mantle.mjs

@@ -4,14 +4,14 @@ import * as i1$3 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i1 from '@angular/common/http';
 import { HttpParams, HttpClientModule } from '@angular/common/http';
-import * as i1$5 from '@angular/router';
+import * as i1$6 from '@angular/router';
 import { NavigationStart, RouterModule } from '@angular/router';
 import * as i1$2 from '@angular/cdk/layout';
 import { Breakpoints, LayoutModule } from '@angular/cdk/layout';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import * as i5$2 from '@angular/cdk/drag-drop';
 import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
-import * as i1$6 from '@angular/platform-browser';
+import * as i1$7 from '@angular/platform-browser';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import * as i2$1 from '@angular/forms';
@@ -22,7 +22,7 @@ import * as i2 from 'ngx-markdown';
 import { MarkdownModule } from 'ngx-markdown';
 import * as i3$7 from 'ng-qrcode';
 import { QrCodeModule } from 'ng-qrcode';
-import * as i2$2 from 'ngx-quill';
+import * as i1$5 from 'ngx-quill';
 import { QuillModule } from 'ngx-quill';
 import * as i6 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
@@ -41,7 +41,7 @@ import { MatChipsModule, MAT_CHIPS_DEFAULT_OPTIONS } from '@angular/material/chi
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$4 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
-import * as i2$3 from '@angular/material/expansion';
+import * as i2$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i4$2 from '@angular/material/grid-list';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -71,7 +71,7 @@ import { MatPaginatorIntl, MatPaginatorModule, MatPaginator } from '@angular/mat
 import * as i13 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
 import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS, MomentDateAdapter } from '@angular/material-moment-adapter';
-import * as i1$7 from '@angular/material/snack-bar';
+import * as i1$8 from '@angular/material/snack-bar';
 import { MatSnackBarModule, MAT_SNACK_BAR_DEFAULT_OPTIONS, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
 import { MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
 import * as i8$2 from '@angular/material/tree';
@@ -93,11 +93,12 @@ import { map, takeUntil, startWith, switchMap, filter, retryWhen, delay, tap, fi
 import * as i1$1 from '@citizenobserver/angular-token';
 import * as i5$1 from '@angular/flex-layout/extended';
 import * as i3$1 from '@angular/flex-layout/flex';
-import { DataSource } from '@angular/cdk/collections';
 import Quill, { Delta } from 'quill';
 import Link from 'quill/formats/link';
-import { MentionBlot, Mention } from 'quill-mention';
 import Clipboard from 'quill/modules/clipboard';
+import { MentionBlot, Mention } from 'quill-mention';
+import QuillTableBetter from 'quill-table-better';
+import { DataSource } from '@angular/cdk/collections';
 import Highcharts from 'highcharts';
 import HighchartsItemSeries from 'highcharts/modules/item-series';
 import HighchartsGantt from 'highcharts/modules/gantt';
@@ -1098,17 +1099,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 type: Input
             }] } });
 
-class RichTextDisplayComponent {
+class RichTextLink extends Link {
+    static sanitize(url) {
+        if (!url)
+            return this.SANITIZED_URL;
+        const protocol = url.slice(0, url.indexOf(':'));
+        return this.PROTOCOL_WHITELIST.includes(protocol)
+            ? url
+            : 'http://' + url;
+    }
+}
+class RichTextMentionBlot extends MentionBlot {
+    static render(data) {
+        const element = document.createElement('span');
+        element.innerText = `{{${data.value}}}`;
+        return element;
+    }
+}
+class RichTextClipboard extends Clipboard {
+    onPaste(range, { text }) {
+        const formats = this.quill.getFormat(range.index);
+        const pastedDelta = this.convert({ text }, formats);
+        const delta = new Delta()
+            .retain(range.index)
+            .delete(range.length)
+            .concat(pastedDelta);
+        this.quill.updateContents(delta, Quill.sources.USER);
+        this.quill.setSelection(delta.length() - range.length, Quill.sources.SILENT);
+        this.quill.scrollSelectionIntoView();
+    }
+}
+Quill.register({
+    'blots/mention': RichTextMentionBlot,
+    'modules/mention': Mention,
+    'formats/link': RichTextLink,
+    'modules/clipboard': RichTextClipboard,
+    'modules/table-better': QuillTableBetter,
+}, true);
+
+class RichTextBaseComponent {
+    buildModules(options) {
+        return {
+            clipboard: { matchVisual: false },
+            table: false,
+            toolbar: [
+                [{ header: ['1', '2', '3', false] }],
+                ['bold', 'italic', 'underline', 'strike'],
+                ['link', 'code', 'blockquote'],
+                [{ list: 'ordered' }, { list: 'bullet' }],
+                [{ 'indent': '-1' }, { 'indent': '+1' }],
+                ['table-better'],
+                [{ align: [] }],
+                ['clean'],
+            ],
+            'table-better': {
+                language: 'en_US',
+                menus: ['column', 'row', 'merge', 'table', 'cell', 'wrap', 'copy', 'delete'],
+                toolbarTable: true,
+            },
+            keyboard: {
+                bindings: QuillTableBetter.keyboardBindings,
+            },
+            mention: {
+                allowedChars: /^[A-Za-z_]*$/,
+                mentionDenotationChars: ['#'],
+                positioningStrategy: 'fixed',
+                source: options?.mentionSource ?? (() => { }),
+            },
+        };
+    }
+    ;
+    loadHtmlIntoEditor(quill, html) {
+        const delta = quill.clipboard.convert({ html });
+        const [range] = quill.selection.getRange();
+        quill.updateContents(delta, Quill.sources.USER);
+        quill.setSelection(delta.length() - (range?.length || 0), Quill.sources.SILENT);
+        quill.scrollSelectionIntoView();
+    }
+}
+
+class RichTextDisplayComponent extends RichTextBaseComponent {
     constructor() {
-        this.quillModules = { toolbar: false };
+        super(...arguments);
         this.value = '';
+        this.quillModules = this.buildModules();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RichTextDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: RichTextDisplayComponent, isStandalone: false, selector: "mantle-rich-text-display", inputs: { value: "value" }, ngImport: i0, template: "<div class=\"rich-text-editor-wrapper\">\n  <quill-editor class=\"quill-editor\"\n                theme=\"snow\"\n                placeholder=\"\"\n                [ngModel]=\"value\"\n                [modules]=\"quillModules\"\n                [readOnly]=\"true\">\n  </quill-editor>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.QuillEditorComponent, selector: "quill-editor" }] }); }
+    onEditorCreated(quill) {
+        this.loadHtmlIntoEditor(quill, this.value);
+        quill.enable(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RichTextDisplayComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: RichTextDisplayComponent, isStandalone: false, selector: "mantle-rich-text-display", inputs: { value: "value" }, usesInheritance: true, ngImport: i0, template: "<div class=\"rich-text-display-wrapper\">\n  <quill-editor class=\"quill-editor\"\n                theme=\"snow\"\n                placeholder=\"\"\n                [modules]=\"quillModules\"\n                [bounds]=\"'self'\"\n                (onEditorCreated)=\"onEditorCreated($event)\">\n  </quill-editor>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$5.QuillEditorComponent, selector: "quill-editor" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RichTextDisplayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mantle-rich-text-display', standalone: false, template: "<div class=\"rich-text-editor-wrapper\">\n  <quill-editor class=\"quill-editor\"\n                theme=\"snow\"\n                placeholder=\"\"\n                [ngModel]=\"value\"\n                [modules]=\"quillModules\"\n                [readOnly]=\"true\">\n  </quill-editor>\n</div>\n" }]
+            args: [{ selector: 'mantle-rich-text-display', standalone: false, template: "<div class=\"rich-text-display-wrapper\">\n  <quill-editor class=\"quill-editor\"\n                theme=\"snow\"\n                placeholder=\"\"\n                [modules]=\"quillModules\"\n                [bounds]=\"'self'\"\n                (onEditorCreated)=\"onEditorCreated($event)\">\n  </quill-editor>\n</div>\n" }]
         }], propDecorators: { value: [{
                 type: Input
             }] } });
@@ -1121,13 +1206,13 @@ class LinkAttributeDisplayComponent {
     openLink() {
         this.router.navigateByUrl(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LinkAttributeDisplayComponent, deps: [{ token: i1$5.Router }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LinkAttributeDisplayComponent, deps: [{ token: i1$6.Router }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LinkAttributeDisplayComponent, isStandalone: false, selector: "mantle-link-attribute-display", inputs: { value: "value" }, ngImport: i0, template: "<a *ngIf=\"value\"\n    [href]=\"value\"\n    mat-mini-fab\n    color=\"primary\"\n    class=\"link-button\"\n    click-stop-propagation>\n  <mat-icon>link</mat-icon>\n</a>\n", styles: [".link-button{width:32px;height:32px;line-height:20px;font-size:20px}.link-button .mat-icon{box-sizing:border-box;padding-top:6px;padding-bottom:6px;text-align:center;line-height:20px;font-size:20px;width:32px;height:32px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LinkAttributeDisplayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-link-attribute-display', standalone: false, template: "<a *ngIf=\"value\"\n    [href]=\"value\"\n    mat-mini-fab\n    color=\"primary\"\n    class=\"link-button\"\n    click-stop-propagation>\n  <mat-icon>link</mat-icon>\n</a>\n", styles: [".link-button{width:32px;height:32px;line-height:20px;font-size:20px}.link-button .mat-icon{box-sizing:border-box;padding-top:6px;padding-bottom:6px;text-align:center;line-height:20px;font-size:20px;width:32px;height:32px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.Router }], propDecorators: { value: [{
+        }], ctorParameters: () => [{ type: i1$6.Router }], propDecorators: { value: [{
                 type: Input
             }] } });
 
@@ -2107,13 +2192,13 @@ class ImageCropperComponent {
     onCancel() {
         this.dialogRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ImageCropperComponent, deps: [{ token: i1$6.DomSanitizer }, { token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ImageCropperComponent, deps: [{ token: i1$7.DomSanitizer }, { token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ImageCropperComponent, isStandalone: false, selector: "mantle-image-cropper", ngImport: i0, template: "<div mat-dialog-title fxLayout=\"row\" fxLayoutAlign=\"start\" fxLayoutGap=\"8px\" class=\"dialog-title-section\">\n  <h2 fxFlex=\"1 1 auto\" class=\"section-title\">{{ 'mantle.image_cropper.crop_image' | translate }}</h2>\n  <button fxFlex=\"0 0 auto\" mat-icon-button tabindex=\"-1\" (click)=\"onCancel()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n<mat-dialog-content>\n  <div class=\"cropper-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"start\" fxLayoutGap=\"32px\">\n    <div fxFlex=\"1 0 1px\">\n      <h5>{{ 'mantle.image_cropper.original' | translate }}</h5>\n    </div>\n    <div fxFlex=\"0 0 100px\">\n      <h5>{{ 'mantle.image_cropper.preview' | translate }}</h5>\n    </div>\n  </div>\n\n  <div class=\"cropper-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"start\" fxLayoutGap=\"32px\">\n\n    <image-cropper\n        [imageChangedEvent]=\"imageChangedEvent\"\n        [maintainAspectRatio]=\"maintainAspectRatio\"\n        [aspectRatio]=\"aspectRatio\"\n        [resizeToWidth]=\"resizeToWidth\"\n        format=\"png\"\n        (imageCropped)=\"imageCropped($event)\"\n        (loadImageFailed)=\"loadImageFailed()\">\n    </image-cropper>\n\n    <div fxFlex=\"0 0 100px\" class=\"preview-section\">\n      <img [src]=\"croppedImage\" />\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end\" class=\"actions-section\">\n  <button fxFlex=\"0 0 auto\" mat-button (click)=\"onCropComplete()\">{{ 'mantle.buttons.save' | translate }}</button>\n</mat-dialog-actions>\n", styles: [".cropper-wrapper{max-width:532px}.preview-section img{width:100%;border:1px solid lightgrey}.actions-section button{text-transform:uppercase}\n"], dependencies: [{ 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: "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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "options", "cropperFrameAriaLabel", "output", "format", "autoCrop", "cropper", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "checkImageType", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange", "cropperChange"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ImageCropperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-image-cropper', standalone: false, template: "<div mat-dialog-title fxLayout=\"row\" fxLayoutAlign=\"start\" fxLayoutGap=\"8px\" class=\"dialog-title-section\">\n  <h2 fxFlex=\"1 1 auto\" class=\"section-title\">{{ 'mantle.image_cropper.crop_image' | translate }}</h2>\n  <button fxFlex=\"0 0 auto\" mat-icon-button tabindex=\"-1\" (click)=\"onCancel()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n<mat-dialog-content>\n  <div class=\"cropper-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"start\" fxLayoutGap=\"32px\">\n    <div fxFlex=\"1 0 1px\">\n      <h5>{{ 'mantle.image_cropper.original' | translate }}</h5>\n    </div>\n    <div fxFlex=\"0 0 100px\">\n      <h5>{{ 'mantle.image_cropper.preview' | translate }}</h5>\n    </div>\n  </div>\n\n  <div class=\"cropper-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"start\" fxLayoutGap=\"32px\">\n\n    <image-cropper\n        [imageChangedEvent]=\"imageChangedEvent\"\n        [maintainAspectRatio]=\"maintainAspectRatio\"\n        [aspectRatio]=\"aspectRatio\"\n        [resizeToWidth]=\"resizeToWidth\"\n        format=\"png\"\n        (imageCropped)=\"imageCropped($event)\"\n        (loadImageFailed)=\"loadImageFailed()\">\n    </image-cropper>\n\n    <div fxFlex=\"0 0 100px\" class=\"preview-section\">\n      <img [src]=\"croppedImage\" />\n    </div>\n  </div>\n</mat-dialog-content>\n<mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"end\" class=\"actions-section\">\n  <button fxFlex=\"0 0 auto\" mat-button (click)=\"onCropComplete()\">{{ 'mantle.buttons.save' | translate }}</button>\n</mat-dialog-actions>\n", styles: [".cropper-wrapper{max-width:532px}.preview-section img{width:100%;border:1px solid lightgrey}.actions-section button{text-transform:uppercase}\n"] }]
-        }], ctorParameters: () => [{ type: i1$6.DomSanitizer }, { type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$7.DomSanitizer }, { type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }] });
@@ -2688,87 +2773,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                 type: Input
             }] } });
 
-class RichTextLink extends Link {
-    static sanitize(url) {
-        if (!url)
-            return this.SANITIZED_URL;
-        const protocol = url.slice(0, url.indexOf(':'));
-        if (this.PROTOCOL_WHITELIST.indexOf(protocol) > -1)
-            return url;
-        return 'http://' + url;
-    }
-}
-class RichTextMentionBlot extends MentionBlot {
-    static render(data) {
-        const element = document.createElement('span');
-        element.innerText = '{{' + data.value + '}}';
-        return element;
-    }
-}
-class RichTextClipboard extends Clipboard {
-    onPaste(range, { text, html }) {
-        const formats = this.quill.getFormat(range.index);
-        const pastedDelta = this.convert({ text }, formats);
-        const delta = new Delta()
-            .retain(range?.index)
-            .delete(range?.length)
-            .concat(pastedDelta);
-        this.quill.updateContents(delta, Quill.sources.USER);
-        this.quill.setSelection(delta.length() - range.length, Quill.sources.SILENT);
-        this.quill.scrollSelectionIntoView();
-    }
-}
-Quill.register({ "blots/mention": RichTextMentionBlot, "modules/mention": Mention, 'formats/link': RichTextLink, 'modules/clipboard': RichTextClipboard });
-class RichTextInputComponent {
+class RichTextInputComponent extends RichTextBaseComponent {
     constructor() {
+        super(...arguments);
         this.value = '';
-        this.quillModules = {
-            clipboard: {
-                matchVisual: false,
-            },
-            toolbar: {
-                container: [
-                    [{ header: ['1', '2', '3', false] }],
-                    ["bold", "italic", "underline", "strike"],
-                    ["link", "code", "blockquote"],
-                    [{ list: "ordered" }, { list: "bullet" }],
-                    [{ align: [] }],
-                    ["clean"],
-                ]
+        this.quillModules = this.buildModules({
+            mentionSource: (searchTerm, renderList) => {
+                const values = this.options?.placeholder_attrs || [];
+                renderList(searchTerm.length === 0
+                    ? values
+                    : values.filter(v => v.value.toLowerCase().includes(searchTerm.toLowerCase())), searchTerm);
             },
-            mention: {
-                allowedChars: /^[A-Za-z_]*$/,
-                mentionDenotationChars: ['#'],
-                positioningStrategy: 'fixed',
-                source: (searchTerm, renderList) => {
-                    const values = this.options?.placeholder_attrs || [];
-                    renderList(searchTerm.length === 0
-                        ? values
-                        : values.filter(v => v.value.toLowerCase().includes(searchTerm.toLowerCase())), searchTerm);
-                }
-            }
-        };
+        });
         this.onChange = (newValue) => { };
         this.onTouched = () => { };
     }
     registerOnChange(fn) { this.onChange = fn; }
     registerOnTouched(fn) { this.onTouched = fn; }
     writeValue(newValue) {
-        this.value = newValue;
-        this.onChange(newValue);
+        this.value = newValue || '';
+    }
+    onEditorCreated(quill) {
+        this.loadHtmlIntoEditor(quill, this.value);
     }
     onContentChanged(event) {
         this.value = event.html || '';
         this.onChange(this.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RichTextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RichTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: RichTextInputComponent, isStandalone: false, selector: "mantle-rich-text-input", inputs: { label: "label", tooltip: "tooltip", options: "options", disable: "disable", required: "required", error: "error" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => RichTextInputComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"rich-text-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <label>\n    {{ label | translate }}\n    <mantle-tooltip *ngIf=\"tooltip\" [message]=\"tooltip\"></mantle-tooltip>\n  </label>\n\n  <quill-editor class=\"quill-editor\"\n                theme=\"snow\"\n                placeholder=\"\"\n                [ngModel]=\"value\"\n                [modules]=\"quillModules\"\n                [bounds]=\"'self'\"\n                (onContentChanged)=\"onContentChanged($event)\"\n                [readOnly]=\"disable\"\n                [required]=\"required\">\n  </quill-editor>\n\n  <mat-hint *ngIf=\"error\" fxFlex=\"0 0 auto\" class=\"error-message\">{{ error }}</mat-hint>\n</div>\n", styles: ["label{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$2.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i3$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: TooltipComponent, selector: "mantle-tooltip", inputs: ["message"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"rich-text-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <label>\n    {{ label | translate }}\n    <mantle-tooltip *ngIf=\"tooltip\" [message]=\"tooltip\"></mantle-tooltip>\n  </label>\n\n  <quill-editor class=\"quill-editor\"\n                theme=\"snow\"\n                placeholder=\"\"\n                [modules]=\"quillModules\"\n                [bounds]=\"'self'\"\n                (onEditorCreated)=\"onEditorCreated($event)\"\n                (onContentChanged)=\"onContentChanged($event)\"\n                [readOnly]=\"disable\"\n                [required]=\"required\">\n  </quill-editor>\n\n  <mat-hint *ngIf=\"error\" fxFlex=\"0 0 auto\" class=\"error-message\">{{ error }}</mat-hint>\n</div>\n", styles: ["label{text-transform:uppercase}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i1$5.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i3$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: TooltipComponent, selector: "mantle-tooltip", inputs: ["message"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RichTextInputComponent, decorators: [{
             type: Component,
@@ -2778,8 +2817,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             useExisting: forwardRef(() => RichTextInputComponent),
                             multi: true
                         }
-                    ], template: "<div class=\"rich-text-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <label>\n    {{ label | translate }}\n    <mantle-tooltip *ngIf=\"tooltip\" [message]=\"tooltip\"></mantle-tooltip>\n  </label>\n\n  <quill-editor class=\"quill-editor\"\n                theme=\"snow\"\n                placeholder=\"\"\n                [ngModel]=\"value\"\n                [modules]=\"quillModules\"\n                [bounds]=\"'self'\"\n                (onContentChanged)=\"onContentChanged($event)\"\n                [readOnly]=\"disable\"\n                [required]=\"required\">\n  </quill-editor>\n\n  <mat-hint *ngIf=\"error\" fxFlex=\"0 0 auto\" class=\"error-message\">{{ error }}</mat-hint>\n</div>\n", styles: ["label{text-transform:uppercase}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{
+                    ], template: "<div class=\"rich-text-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <label>\n    {{ label | translate }}\n    <mantle-tooltip *ngIf=\"tooltip\" [message]=\"tooltip\"></mantle-tooltip>\n  </label>\n\n  <quill-editor class=\"quill-editor\"\n                theme=\"snow\"\n                placeholder=\"\"\n                [modules]=\"quillModules\"\n                [bounds]=\"'self'\"\n                (onEditorCreated)=\"onEditorCreated($event)\"\n                (onContentChanged)=\"onContentChanged($event)\"\n                [readOnly]=\"disable\"\n                [required]=\"required\">\n  </quill-editor>\n\n  <mat-hint *ngIf=\"error\" fxFlex=\"0 0 auto\" class=\"error-message\">{{ error }}</mat-hint>\n</div>\n", styles: ["label{text-transform:uppercase}\n"] }]
+        }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
                 type: Input
@@ -3085,7 +3124,7 @@ class ReportConfigInputComponent {
                 useExisting: forwardRef(() => ReportConfigInputComponent),
                 multi: true,
             }
-        ], viewQueries: [{ propertyName: "filterContainer", first: true, predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"rich-text-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <mat-form-field fxFlex=\"0 0 auto\" [class.mat-mdc-form-field-invalid]=\"error\">\n    <label>\n      {{ 'mantle.report_config.dataset' | translate }}\n    </label>\n    <mtx-select\n        [(ngModel)]=\"value.dataset\"\n        (change)=\"setDataset($event)\"\n        appendTo=\"body\">\n      <mtx-option value=\"\"></mtx-option>\n      <mtx-option *ngFor=\"let option of datasets\" [value]=\"option\">\n        {{option}}\n      </mtx-option>\n    </mtx-select>\n  </mat-form-field>\n\n  <div fxFlex=\"0 0 auto\">\n    <mat-checkbox [checked]=\"value.aggregated\" (change)=\"setAggregated($event.checked)\">\n      {{ 'mantle.report_config.use_aggregation' | translate }}\n    </mat-checkbox>\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.columns' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"items-container\">\n    \n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"0 0 24px\" class=\"header-row-label\"></div>\n      <div fxFlex=\"0 0 80px\" class=\"header-row-label selection-check-header\">{{ 'mantle.report_config.select' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.column' | translate }}</div>\n      <ng-container *ngIf=\"value.aggregated\">\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.group_by' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count_distinct' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.average' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.max' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.min' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.sum' | translate }}</div>\n      </ng-container>\n    </div>\n\n    <div fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"field-rows\"\n         cdkDropList [cdkDropListData]=\"value.columns\" (cdkDropListDropped)=\"drop($event)\">\n\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\" class=\"field-row\"\n           *ngFor=\"let item of datasetColumns; let i = index\" cdkDrag>\n\n        <!-- Drag handle -->\n        <div fxFlex=\"0 0 24px\" class=\"drag-handle\" cdkDragHandle>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n\n        <!-- Left checkbox -->\n        <mat-checkbox fxFlex=\"0 0 80px\" class=\"selection-check\" [checked]=\"item.selected\" (change)=\"setSelected(item, $event.checked)\"></mat-checkbox>\n\n        <!-- Label -->\n        <div fxFlex=\"1 1 0\">{{ item.name }}</div>\n\n        <!-- Right checkboxes -->\n        <ng-container *ngIf=\"value.aggregated\">\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [checked]=\"item.group_by\" (change)=\"setGroupBy(item, $event.checked)\" [disabled]=\"!item.selected\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count_distinct\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.average\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.max\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.min\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.sum\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean', 'date', 'datetime'].includes(item.type)\"></mat-checkbox>\n        </ng-container>\n      </div>\n\n    </div>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterName' + i\"\n                [formControlName]=\"'name'\"\n                [options]=\"filterPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.name\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.report_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: ["label{text-transform:uppercase}.report-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.items-container .header-row .selection-check-header,.items-container .header-row .aggregation-check-header,.filters-container .header-row .selection-check-header,.filters-container .header-row .aggregation-check-header{text-align:center}.field-rows,.filter-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.field-row .drag-handle{cursor:grab;display:flex;align-items:center}.field-row .selection-check,.field-row .aggregation-check{text-align:center}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"], dependencies: [{ 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: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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: i3$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$3.MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "component", type: i5$3.MtxOption, selector: "mtx-option", inputs: ["value", "disabled"], exportAs: ["mtxOption"] }, { kind: "component", type: DatepickerComponent, selector: "mantle-datepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DatetimepickerComponent, selector: "mantle-datetimepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DropdownComponent, selector: "mantle-dropdown", inputs: ["label", "tooltip", "options", "disable", "required", "error"], outputs: ["change"] }, { kind: "component", type: NumberInputComponent, selector: "mantle-number-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "component", type: TextInputComponent, selector: "mantle-text-input", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: MultiselectInputComponent, selector: "mantle-multiselect-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "filterContainer", first: true, predicate: ["filterContainer"], descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"report-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <mat-form-field fxFlex=\"0 0 auto\" [class.mat-mdc-form-field-invalid]=\"error\">\n    <label>\n      {{ 'mantle.report_config.dataset' | translate }}\n    </label>\n    <mtx-select\n        [(ngModel)]=\"value.dataset\"\n        (change)=\"setDataset($event)\"\n        appendTo=\"body\">\n      <mtx-option value=\"\"></mtx-option>\n      <mtx-option *ngFor=\"let option of datasets\" [value]=\"option\">\n        {{option}}\n      </mtx-option>\n    </mtx-select>\n  </mat-form-field>\n\n  <div fxFlex=\"0 0 auto\">\n    <mat-checkbox [checked]=\"value.aggregated\" (change)=\"setAggregated($event.checked)\">\n      {{ 'mantle.report_config.use_aggregation' | translate }}\n    </mat-checkbox>\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.columns' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"items-container\">\n    \n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"0 0 24px\" class=\"header-row-label\"></div>\n      <div fxFlex=\"0 0 80px\" class=\"header-row-label selection-check-header\">{{ 'mantle.report_config.select' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.column' | translate }}</div>\n      <ng-container *ngIf=\"value.aggregated\">\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.group_by' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count_distinct' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.average' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.max' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.min' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.sum' | translate }}</div>\n      </ng-container>\n    </div>\n\n    <div fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"field-rows\"\n         cdkDropList [cdkDropListData]=\"value.columns\" (cdkDropListDropped)=\"drop($event)\">\n\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\" class=\"field-row\"\n           *ngFor=\"let item of datasetColumns; let i = index\" cdkDrag>\n\n        <!-- Drag handle -->\n        <div fxFlex=\"0 0 24px\" class=\"drag-handle\" cdkDragHandle>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n\n        <!-- Left checkbox -->\n        <mat-checkbox fxFlex=\"0 0 80px\" class=\"selection-check\" [checked]=\"item.selected\" (change)=\"setSelected(item, $event.checked)\"></mat-checkbox>\n\n        <!-- Label -->\n        <div fxFlex=\"1 1 0\">{{ item.name }}</div>\n\n        <!-- Right checkboxes -->\n        <ng-container *ngIf=\"value.aggregated\">\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [checked]=\"item.group_by\" (change)=\"setGroupBy(item, $event.checked)\" [disabled]=\"!item.selected\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count_distinct\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.average\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.max\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.min\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.sum\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean', 'date', 'datetime'].includes(item.type)\"></mat-checkbox>\n        </ng-container>\n      </div>\n\n    </div>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterName' + i\"\n                [formControlName]=\"'name'\"\n                [options]=\"filterPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.name\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.report_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".report-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.report-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.items-container .header-row .selection-check-header,.items-container .header-row .aggregation-check-header,.filters-container .header-row .selection-check-header,.filters-container .header-row .aggregation-check-header{text-align:center}.field-rows,.filter-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.field-row .drag-handle{cursor:grab;display:flex;align-items:center}.field-row .selection-check,.field-row .aggregation-check{text-align:center}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"], dependencies: [{ 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: i1$3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i5$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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: i3$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5$3.MtxSelect, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "appendTo", "bindLabel", "bindValue", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "compareWith", "dropdownPosition", "groupBy", "groupValue", "bufferAmount", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "maxSelectedItems", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "tabIndex", "openOnEnter", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "typeahead", "isOpen", "fixedPlaceholder", "deselectOnClick", "clearSearchOnAdd", "items", "value", "id", "placeholder", "disabled", "required", "errorStateMatcher", "aria-label", "aria-labelledby"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { kind: "component", type: i5$3.MtxOption, selector: "mtx-option", inputs: ["value", "disabled"], exportAs: ["mtxOption"] }, { kind: "component", type: DatepickerComponent, selector: "mantle-datepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DatetimepickerComponent, selector: "mantle-datetimepicker", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: DropdownComponent, selector: "mantle-dropdown", inputs: ["label", "tooltip", "options", "disable", "required", "error"], outputs: ["change"] }, { kind: "component", type: NumberInputComponent, selector: "mantle-number-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "component", type: TextInputComponent, selector: "mantle-text-input", inputs: ["label", "tooltip", "disable", "required", "error"] }, { kind: "component", type: MultiselectInputComponent, selector: "mantle-multiselect-input", inputs: ["label", "tooltip", "options", "disable", "required", "error"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ReportConfigInputComponent, decorators: [{
             type: Component,
@@ -3100,7 +3139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             useExisting: forwardRef(() => ReportConfigInputComponent),
                             multi: true,
                         }
-                    ], template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"rich-text-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <mat-form-field fxFlex=\"0 0 auto\" [class.mat-mdc-form-field-invalid]=\"error\">\n    <label>\n      {{ 'mantle.report_config.dataset' | translate }}\n    </label>\n    <mtx-select\n        [(ngModel)]=\"value.dataset\"\n        (change)=\"setDataset($event)\"\n        appendTo=\"body\">\n      <mtx-option value=\"\"></mtx-option>\n      <mtx-option *ngFor=\"let option of datasets\" [value]=\"option\">\n        {{option}}\n      </mtx-option>\n    </mtx-select>\n  </mat-form-field>\n\n  <div fxFlex=\"0 0 auto\">\n    <mat-checkbox [checked]=\"value.aggregated\" (change)=\"setAggregated($event.checked)\">\n      {{ 'mantle.report_config.use_aggregation' | translate }}\n    </mat-checkbox>\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.columns' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"items-container\">\n    \n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"0 0 24px\" class=\"header-row-label\"></div>\n      <div fxFlex=\"0 0 80px\" class=\"header-row-label selection-check-header\">{{ 'mantle.report_config.select' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.column' | translate }}</div>\n      <ng-container *ngIf=\"value.aggregated\">\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.group_by' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count_distinct' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.average' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.max' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.min' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.sum' | translate }}</div>\n      </ng-container>\n    </div>\n\n    <div fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"field-rows\"\n         cdkDropList [cdkDropListData]=\"value.columns\" (cdkDropListDropped)=\"drop($event)\">\n\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\" class=\"field-row\"\n           *ngFor=\"let item of datasetColumns; let i = index\" cdkDrag>\n\n        <!-- Drag handle -->\n        <div fxFlex=\"0 0 24px\" class=\"drag-handle\" cdkDragHandle>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n\n        <!-- Left checkbox -->\n        <mat-checkbox fxFlex=\"0 0 80px\" class=\"selection-check\" [checked]=\"item.selected\" (change)=\"setSelected(item, $event.checked)\"></mat-checkbox>\n\n        <!-- Label -->\n        <div fxFlex=\"1 1 0\">{{ item.name }}</div>\n\n        <!-- Right checkboxes -->\n        <ng-container *ngIf=\"value.aggregated\">\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [checked]=\"item.group_by\" (change)=\"setGroupBy(item, $event.checked)\" [disabled]=\"!item.selected\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count_distinct\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.average\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.max\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.min\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.sum\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean', 'date', 'datetime'].includes(item.type)\"></mat-checkbox>\n        </ng-container>\n      </div>\n\n    </div>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterName' + i\"\n                [formControlName]=\"'name'\"\n                [options]=\"filterPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.name\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.report_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: ["label{text-transform:uppercase}.report-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.items-container .header-row .selection-check-header,.items-container .header-row .aggregation-check-header,.filters-container .header-row .selection-check-header,.filters-container .header-row .aggregation-check-header{text-align:center}.field-rows,.filter-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.field-row .drag-handle{cursor:grab;display:flex;align-items:center}.field-row .selection-check,.field-row .aggregation-check{text-align:center}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"] }]
+                    ], template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"report-config-editor-wrapper mat-mdc-form-field\" [class.mat-mdc-form-field-invalid]=\"error\">\n  <mat-form-field fxFlex=\"0 0 auto\" [class.mat-mdc-form-field-invalid]=\"error\">\n    <label>\n      {{ 'mantle.report_config.dataset' | translate }}\n    </label>\n    <mtx-select\n        [(ngModel)]=\"value.dataset\"\n        (change)=\"setDataset($event)\"\n        appendTo=\"body\">\n      <mtx-option value=\"\"></mtx-option>\n      <mtx-option *ngFor=\"let option of datasets\" [value]=\"option\">\n        {{option}}\n      </mtx-option>\n    </mtx-select>\n  </mat-form-field>\n\n  <div fxFlex=\"0 0 auto\">\n    <mat-checkbox [checked]=\"value.aggregated\" (change)=\"setAggregated($event.checked)\">\n      {{ 'mantle.report_config.use_aggregation' | translate }}\n    </mat-checkbox>\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.columns' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"items-container\">\n    \n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"0 0 24px\" class=\"header-row-label\"></div>\n      <div fxFlex=\"0 0 80px\" class=\"header-row-label selection-check-header\">{{ 'mantle.report_config.select' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.column' | translate }}</div>\n      <ng-container *ngIf=\"value.aggregated\">\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.group_by' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.count_distinct' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.average' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.max' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.min' | translate }}</div>\n        <div fxFlex=\"0 0 80px\" class=\"header-row-label aggregation-check-header\">{{ 'mantle.report_config.sum' | translate }}</div>\n      </ng-container>\n    </div>\n\n    <div fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"field-rows\"\n         cdkDropList [cdkDropListData]=\"value.columns\" (cdkDropListDropped)=\"drop($event)\">\n\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\" class=\"field-row\"\n           *ngFor=\"let item of datasetColumns; let i = index\" cdkDrag>\n\n        <!-- Drag handle -->\n        <div fxFlex=\"0 0 24px\" class=\"drag-handle\" cdkDragHandle>\n          <mat-icon>drag_indicator</mat-icon>\n        </div>\n\n        <!-- Left checkbox -->\n        <mat-checkbox fxFlex=\"0 0 80px\" class=\"selection-check\" [checked]=\"item.selected\" (change)=\"setSelected(item, $event.checked)\"></mat-checkbox>\n\n        <!-- Label -->\n        <div fxFlex=\"1 1 0\">{{ item.name }}</div>\n\n        <!-- Right checkboxes -->\n        <ng-container *ngIf=\"value.aggregated\">\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [checked]=\"item.group_by\" (change)=\"setGroupBy(item, $event.checked)\" [disabled]=\"!item.selected\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.count_distinct\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.average\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.max\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.min\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean'].includes(item.type)\"></mat-checkbox>\n          <mat-checkbox fxFlex=\"0 0 80px\" class=\"aggregation-check\" [(ngModel)]=\"item.sum\" (change)=\"onAggregationChange()\" [disabled]=\"!item.selected || item.group_by || ['string', 'boolean', 'date', 'datetime'].includes(item.type)\"></mat-checkbox>\n        </ng-container>\n      </div>\n\n    </div>\n\n  </div>\n\n  <h3 fxFlex=\"0 0 auto\" class=\"report-config-subsection-header\">{{ 'mantle.report_config.filters' | translate }}</h3>\n\n  <div fxFlex=\"1 0 1px\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"filters-container\">\n\n    <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"8px\" class=\"header-row\">\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.operator' | translate }}</div>\n      <div fxFlex=\"1 1 0\" class=\"header-row-label\">{{ 'mantle.report_config.filter_value' | translate }}</div>\n      <div fxFlex=\"0 0 48px\" class=\"header-row-label\"></div>\n    </div>\n\n    <div #filterContainer fxFlex=\"1 0 0\" fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0\" class=\"filter-rows\">\n      <div fxFlex=\"0 0 auto\" fxLayout=\"row\" fxLayoutAlign=\"stretch center\" fxLayoutGap=\"8px\"\n           *ngFor=\"let filter of value.filters; let i = index\">\n\n        <ng-container [formGroup]=\"filterFormArray.at(i)\">\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterName' + i\"\n                [formControlName]=\"'name'\"\n                [options]=\"filterPickerOptions\"\n                [required]=\"true\"\n                (change)=\"setFilterColumn(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <mantle-dropdown\n                [id]=\"'filterOperator' + i\"\n                [formControlName]=\"'operator'\"\n                [options]=\"filter.options.operators\"\n                [required]=\"true\"\n                [disable]=\"!filter.name\"\n                (change)=\"setFilterOperator(filter, $event)\">\n            </mantle-dropdown>\n          </div>\n          <div fxFlex=\"1 1 0\">\n            <ng-container [ngSwitch]=\"filter.type\">\n\n              <mantle-number-input *ngSwitchCase=\"'number'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-number-input>\n\n              <mantle-datepicker *ngSwitchCase=\"'date'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datepicker>\n\n              <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-datetimepicker>\n\n              <mantle-text-input *ngSwitchCase=\"'string'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [required]=\"true\"\n                  [disable]=\"!filter.name\">\n              </mantle-text-input>\n\n              <mantle-multiselect-input *ngSwitchCase=\"'dropdown'\"\n                  [id]=\"'filterValue' + i\"\n                  [formControlName]=\"'value'\"\n                  [options]=\"filter.options.preSelectedValues\"\n                  [required]=\"true\">\n              </mantle-multiselect-input>\n\n            </ng-container>\n          </div>\n        </ng-container>\n\n        <div fxFlex=\"0 0 48px\">\n          <button matIconButton color=\"warn\" type=\"button\" (click)=\"removeFilter(i)\">\n            <mat-icon>cancel</mat-icon>\n          </button>\n        </div>\n\n      </div>\n    </div>\n\n    <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addFilter()\">{{ 'mantle.report_config.add_filter' | translate }}</button>\n\n  </div>\n\n  <mat-hint *ngIf=\"value.dataset && errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</div>\n", styles: [".report-config-editor-wrapper{height:100%;width:100%}label{text-transform:uppercase}.report-config-subsection-header{margin-top:16px;font-size:16px;font-weight:600}.items-container,.filters-container{width:100%;margin:0;border:1px solid #ccc;border-radius:8px;padding:8px}.items-container .header-row,.filters-container .header-row{align-items:center;padding:8px 12px;border-bottom:2px solid #ccc}.items-container .header-row .header-row-label,.filters-container .header-row .header-row-label{font-weight:700;font-size:14px;text-align:left}.items-container .header-row .selection-check-header,.items-container .header-row .aggregation-check-header,.filters-container .header-row .selection-check-header,.filters-container .header-row .aggregation-check-header{text-align:center}.field-rows,.filter-rows{overflow-y:auto}.field-row{padding:8px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-size:14px}.field-row .drag-handle{cursor:grab;display:flex;align-items:center}.field-row .selection-check,.field-row .aggregation-check{text-align:center}.error-message{color:#f44336;font-size:12px;margin-top:4px;width:100%;text-align:center}\n"] }]
         }], ctorParameters: () => [{ type: ArrayService }, { type: LocaleService }], propDecorators: { label: [{
                 type: Input
             }], tooltip: [{
@@ -3733,7 +3772,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 class AccordionDetailsContainerComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionDetailsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AccordionDetailsContainerComponent, isStandalone: false, selector: "mantle-accordion-details-container", inputs: { detailPageService: "detailPageService", content: "content", container: "container" }, ngImport: i0, template: "<mat-accordion multi class=\"dynamic-details accordion\">\n  <ng-container *ngFor=\"let section of container.sections\">\n    <mat-expansion-panel *ngIf=\"!section.hidden\" [expanded]=\"!section.collapsed\" class=\"dynamic-details-section\">\n      <mat-expansion-panel-header>\n        <mat-panel-title *ngIf=\"section.title\">\n          <div class=\"title-wrapper\">\n            <h4>{{ section.title }}</h4>\n            <mat-divider></mat-divider>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      <mantle-dynamic-details-section [detailPageService]=\"detailPageService\" [section]=\"section\" [content]=\"content\">\n      </mantle-dynamic-details-section>\n    </mat-expansion-panel>\n  </ng-container>\n</mat-accordion>\n", styles: [""], dependencies: [{ 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: i2$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DynamicDetailsSectionComponent, selector: "mantle-dynamic-details-section", inputs: ["detailPageService", "content", "section"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AccordionDetailsContainerComponent, isStandalone: false, selector: "mantle-accordion-details-container", inputs: { detailPageService: "detailPageService", content: "content", container: "container" }, ngImport: i0, template: "<mat-accordion multi class=\"dynamic-details accordion\">\n  <ng-container *ngFor=\"let section of container.sections\">\n    <mat-expansion-panel *ngIf=\"!section.hidden\" [expanded]=\"!section.collapsed\" class=\"dynamic-details-section\">\n      <mat-expansion-panel-header>\n        <mat-panel-title *ngIf=\"section.title\">\n          <div class=\"title-wrapper\">\n            <h4>{{ section.title }}</h4>\n            <mat-divider></mat-divider>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      <mantle-dynamic-details-section [detailPageService]=\"detailPageService\" [section]=\"section\" [content]=\"content\">\n      </mantle-dynamic-details-section>\n    </mat-expansion-panel>\n  </ng-container>\n</mat-accordion>\n", styles: [""], dependencies: [{ 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: i2$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DynamicDetailsSectionComponent, selector: "mantle-dynamic-details-section", inputs: ["detailPageService", "content", "section"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionDetailsContainerComponent, decorators: [{
             type: Component,
@@ -3820,7 +3859,7 @@ class DialogNestedFormComponent {
         this.changeDetectorRef.detectChanges();
     }
     onSave() {
-        let formData = this.form.getRawValue();
+        let formData = this.dynamicFormService.transformFormValue(this.form.getRawValue());
         this.dialogRef.close(formData);
     }
     onDelete() {
@@ -4058,7 +4097,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 class AccordionFormContainerComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionFormContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AccordionFormContainerComponent, isStandalone: false, selector: "mantle-accordion-form-container", inputs: { formPageService: "formPageService", content: "content", container: "container", form: "form" }, ngImport: i0, template: "<mat-accordion multi class=\"dynamic-form accordion\">\n  <ng-container *ngFor=\"let section of container.sections\">\n    <mat-expansion-panel *ngIf=\"!section.hidden\" [expanded]=\"!section.collapsed\" class=\"dynamic-form-section\">\n      <mat-expansion-panel-header>\n        <mat-panel-title *ngIf=\"section.title\">\n          <div class=\"title-wrapper\">\n            <h4>{{ section.title }}</h4>\n            <mat-divider></mat-divider>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      <mantle-dynamic-form-section [formPageService]=\"formPageService\" [section]=\"section\" [content]=\"content\" [form]=\"form\">\n      </mantle-dynamic-form-section>\n    </mat-expansion-panel>\n  </ng-container>\n</mat-accordion>\n", styles: [""], dependencies: [{ 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: i2$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DynamicFormSectionComponent, selector: "mantle-dynamic-form-section", inputs: ["formPageService", "section", "content", "form"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AccordionFormContainerComponent, isStandalone: false, selector: "mantle-accordion-form-container", inputs: { formPageService: "formPageService", content: "content", container: "container", form: "form" }, ngImport: i0, template: "<mat-accordion multi class=\"dynamic-form accordion\">\n  <ng-container *ngFor=\"let section of container.sections\">\n    <mat-expansion-panel *ngIf=\"!section.hidden\" [expanded]=\"!section.collapsed\" class=\"dynamic-form-section\">\n      <mat-expansion-panel-header>\n        <mat-panel-title *ngIf=\"section.title\">\n          <div class=\"title-wrapper\">\n            <h4>{{ section.title }}</h4>\n            <mat-divider></mat-divider>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      <mantle-dynamic-form-section [formPageService]=\"formPageService\" [section]=\"section\" [content]=\"content\" [form]=\"form\">\n      </mantle-dynamic-form-section>\n    </mat-expansion-panel>\n  </ng-container>\n</mat-accordion>\n", styles: [""], dependencies: [{ 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: i2$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DynamicFormSectionComponent, selector: "mantle-dynamic-form-section", inputs: ["formPageService", "section", "content", "form"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionFormContainerComponent, decorators: [{
             type: Component,
@@ -4154,7 +4193,7 @@ class SnackbarComponent {
     close() {
         this.snackbarRef.dismiss();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$7.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$8.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: SnackbarComponent, isStandalone: false, selector: "mantle-snackbar", ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"8px\" class=\"snack-container\">\n  <div fxFlex=\"0 0 auto\">\n    <mat-icon class=\"large-icon\">{{ icon }}</mat-icon>\n  </div>\n  <div fxFlex=\"1 0 1px\">\n    <span>{{ data.message | translate }}</span>\n  </div>\n  <div fxFlex=\"0 0 auto\">\n    <button mat-icon-button (click)=\"close()\"><mat-icon>done</mat-icon></button>\n  </div>\n</div>\n", styles: [".large-icon{width:32px;height:32px;font-size:32px}\n"], dependencies: [{ 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: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: SnackbarComponent, decorators: [{
@@ -4163,7 +4202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_SNACK_BAR_DATA]
-                }] }, { type: i1$7.MatSnackBarRef }] });
+                }] }, { type: i1$8.MatSnackBarRef }] });
 
 class AnnouncementService {
     constructor(snackbar) {
@@ -4193,7 +4232,7 @@ class AnnouncementService {
             horizontalPosition: 'center'
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AnnouncementService, deps: [{ token: i1$7.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AnnouncementService, deps: [{ token: i1$8.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AnnouncementService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AnnouncementService, decorators: [{
@@ -4201,7 +4240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$7.MatSnackBar }] });
+        }], ctorParameters: () => [{ type: i1$8.MatSnackBar }] });
 
 class DialogFormComponent {
     constructor(dialogRef, dialogFormParams, changeDetectorRef, announcementService, objectService) {
@@ -4624,7 +4663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
 class AccordionLayoutEditorContainerComponent {
     constructor() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionLayoutEditorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AccordionLayoutEditorContainerComponent, isStandalone: false, selector: "mantle-accordion-layout-editor-container", inputs: { layoutEditorPageService: "layoutEditorPageService", container: "container" }, ngImport: i0, template: "<mat-accordion multi class=\"dynamic-details accordion\">\n  <ng-container *ngFor=\"let section of container.dynamic_layout_sections_attributes\">\n    <mat-expansion-panel [expanded]=\"!section.collapsed\" class=\"dynamic-details-section\">\n      <mat-expansion-panel-header>\n        <mat-panel-title *ngIf=\"section.title\">\n          <div class=\"title-wrapper\">\n            <h4>{{ section.title }}</h4>\n            <mat-divider></mat-divider>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      <mantle-dynamic-layout-editor-section [layoutEditorPageService]=\"layoutEditorPageService\" [section]=\"section\">\n      </mantle-dynamic-layout-editor-section>\n    </mat-expansion-panel>\n  </ng-container>\n</mat-accordion>\n", styles: [""], dependencies: [{ 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: i2$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DynamicLayoutEditorSectionComponent, selector: "mantle-dynamic-layout-editor-section", inputs: ["layoutEditorPageService", "section"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: AccordionLayoutEditorContainerComponent, isStandalone: false, selector: "mantle-accordion-layout-editor-container", inputs: { layoutEditorPageService: "layoutEditorPageService", container: "container" }, ngImport: i0, template: "<mat-accordion multi class=\"dynamic-details accordion\">\n  <ng-container *ngFor=\"let section of container.dynamic_layout_sections_attributes\">\n    <mat-expansion-panel [expanded]=\"!section.collapsed\" class=\"dynamic-details-section\">\n      <mat-expansion-panel-header>\n        <mat-panel-title *ngIf=\"section.title\">\n          <div class=\"title-wrapper\">\n            <h4>{{ section.title }}</h4>\n            <mat-divider></mat-divider>\n          </div>\n        </mat-panel-title>\n      </mat-expansion-panel-header>\n      <mantle-dynamic-layout-editor-section [layoutEditorPageService]=\"layoutEditorPageService\" [section]=\"section\">\n      </mantle-dynamic-layout-editor-section>\n    </mat-expansion-panel>\n  </ng-container>\n</mat-accordion>\n", styles: [""], dependencies: [{ 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: i2$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i2$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i2$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i2$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: i3$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DynamicLayoutEditorSectionComponent, selector: "mantle-dynamic-layout-editor-section", inputs: ["layoutEditorPageService", "section"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AccordionLayoutEditorContainerComponent, decorators: [{
             type: Component,
@@ -4777,13 +4816,13 @@ class DashboardPageComponent {
             return res.content;
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DashboardPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DashboardPageComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DashboardPageComponent, isStandalone: false, selector: "mantle-dashboard-page", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"page dashboard-page full-height-only vertically-scrollable\">\n\n  <div fxFlex=\"0 0 auto\">\n    <mantle-page-title>{{ pageTitle | translate }}</mantle-page-title>\n  </div>\n\n  <div fxFlex=\"1 0 auto\">\n    <mantle-dynamic-dashboard [content]=\"content$ | async\" [searchValues]=\"searchValues\" [dashboardPageService]=\"dashboardPageService\"></mantle-dynamic-dashboard>\n  </div>\n\n</div>\n", styles: [""], dependencies: [{ 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: "component", type: PageTitleComponent, selector: "mantle-page-title" }, { kind: "component", type: DynamicDashboardComponent, selector: "mantle-dynamic-dashboard", inputs: ["dashboardPageService", "content", "searchValues"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DashboardPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-dashboard-page', standalone: false, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"page dashboard-page full-height-only vertically-scrollable\">\n\n  <div fxFlex=\"0 0 auto\">\n    <mantle-page-title>{{ pageTitle | translate }}</mantle-page-title>\n  </div>\n\n  <div fxFlex=\"1 0 auto\">\n    <mantle-dynamic-dashboard [content]=\"content$ | async\" [searchValues]=\"searchValues\" [dashboardPageService]=\"dashboardPageService\"></mantle-dynamic-dashboard>\n  </div>\n\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }] });
 
 class ContentTitleComponent {
     constructor() { }
@@ -4848,13 +4887,13 @@ class LayoutEditorPageComponent {
     back() {
         this.layoutEditorPageService.openList();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LayoutEditorPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i0.Injector }, { token: AnnouncementService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LayoutEditorPageComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i0.Injector }, { token: AnnouncementService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LayoutEditorPageComponent, isStandalone: false, selector: "mantle-layout-editor-page", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"full-height-min\" [ngClass]=\"{'page full-height-only vertically-scrollable': !isTabbedContent}\">\n  <div fxFlex=\"0 0 auto\" class=\"page-header headline-5\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center start\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"1 1 auto\">\n        <mantle-content-title *ngIf=\"header\" [title]=\"header.title\"></mantle-content-title>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 auto\" class=\"main-content\">\n    <mantle-dynamic-layout-editor [content]=\"content\" [layoutEditorPageService]=\"layoutEditorPageService\"></mantle-dynamic-layout-editor>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" class=\"page-footer\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"layoutEditorPageService.showSaveButton\">\n        <button mat-raised-button\n            color=\"primary\"\n            type=\"button\"\n            class=\"button-with-spinner save-button\"\n            [disabled]=\"layoutEditorPageService.isCommitInProgress\"\n            (click)=\"onSaveClicked()\"> <!-- TODO || !dynamicForm?.valid -->\n          {{ 'mantle.buttons.save' | translate }}\n          <mat-spinner *ngIf=\"isSaveInProgress\" [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".save-button{width:140px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DynamicLayoutEditorComponent, selector: "mantle-dynamic-layout-editor", inputs: ["layoutEditorPageService", "content"] }, { kind: "component", type: ContentTitleComponent, selector: "mantle-content-title", inputs: ["thumbnail", "title"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LayoutEditorPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-layout-editor-page', standalone: false, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"full-height-min\" [ngClass]=\"{'page full-height-only vertically-scrollable': !isTabbedContent}\">\n  <div fxFlex=\"0 0 auto\" class=\"page-header headline-5\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center start\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"1 1 auto\">\n        <mantle-content-title *ngIf=\"header\" [title]=\"header.title\"></mantle-content-title>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 auto\" class=\"main-content\">\n    <mantle-dynamic-layout-editor [content]=\"content\" [layoutEditorPageService]=\"layoutEditorPageService\"></mantle-dynamic-layout-editor>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" class=\"page-footer\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"layoutEditorPageService.showSaveButton\">\n        <button mat-raised-button\n            color=\"primary\"\n            type=\"button\"\n            class=\"button-with-spinner save-button\"\n            [disabled]=\"layoutEditorPageService.isCommitInProgress\"\n            (click)=\"onSaveClicked()\"> <!-- TODO || !dynamicForm?.valid -->\n          {{ 'mantle.buttons.save' | translate }}\n          <mat-spinner *ngIf=\"isSaveInProgress\" [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".save-button{width:140px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i0.Injector }, { type: AnnouncementService }] });
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }, { type: AnnouncementService }] });
 
 class WebApiListRequest {
     constructor(params = {}) {
@@ -5089,7 +5128,7 @@ class ListPageComponent {
     toggleCollapsibleColumns() {
         this.expandCollapsibleColumns = !this.expandCollapsibleColumns;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ListPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: ArrayService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    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: [
             trigger('collapse', [
                 state('false', style({ display: AUTO_STYLE, opacity: 1 })),
@@ -5121,7 +5160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                             ]))
                         ])
                     ], 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"] }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ArrayService }, { type: ScreenSizeService }], propDecorators: { paginator: [{
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: ArrayService }, { type: ScreenSizeService }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
             }], sort: [{
@@ -5326,13 +5365,13 @@ class FormPageComponent {
         else
             this.formPageService.openList();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: AnnouncementService }, { token: ConfirmationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormPageComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: AnnouncementService }, { token: ConfirmationService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: FormPageComponent, isStandalone: false, selector: "mantle-form-page", viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: DynamicFormComponent, descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"full-height-min\" [ngClass]=\"{'page full-height-only vertically-scrollable': !isTabbedContent}\">\n  <div fxFlex=\"0 0 auto\" class=\"page-header headline-5\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\">\n      <mantle-content-title *ngIf=\"header\" fxFlex=\"0 0 auto\" [thumbnail]=\"header.thumbnail\" [title]=\"header.title\"></mantle-content-title>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"!formPageService.hideCancelButton\">\n        <button mat-icon-button\n            type=\"button\"\n            (click)=\"onCancelClicked()\"\n            [disabled]=\"formPageService.isCommitInProgress\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 auto\" class=\"main-content\">\n    <mantle-dynamic-form #dynamicForm [content]=\"content$ | async\" [formPageService]=\"formPageService\"></mantle-dynamic-form>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" class=\"page-footer\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <ng-container *ngFor=\"let button of bottomLeftButtons\">\n        <div fxFlex=\"0 0 auto\" *ngIf=\"button.show\">\n          <button mat-raised-button\n              color=\"{{ button.color }}\"\n              type=\"button\"\n              class=\"button-with-spinner additional-button\"\n              [disabled]=\"formPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(dynamicForm?.value)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" [diameter]=\"16\"></mat-spinner>\n          </button>\n        </div>\n      </ng-container>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <ng-container *ngFor=\"let button of bottomRightButtons\">\n        <div fxFlex=\"0 0 auto\" *ngIf=\"button.show\">\n          <button mat-raised-button\n              color=\"{{ button.color }}\"\n              type=\"button\"\n              class=\"button-with-spinner additional-button\"\n              [disabled]=\"formPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(dynamicForm?.value)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" [diameter]=\"16\"></mat-spinner>\n          </button>\n        </div>\n      </ng-container>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"formPageService.showSaveButton\">\n        <button mat-raised-button\n            color=\"primary\"\n            type=\"button\"\n            class=\"button-with-spinner save-button\"\n            [disabled]=\"formPageService.isCommitInProgress || !dynamicForm?.valid\"\n            (click)=\"onSaveClicked()\">\n          {{ 'mantle.buttons.save' | translate }}\n          <mat-spinner *ngIf=\"isSaveInProgress\" [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".save-button,.additional-button{width:140px}\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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { kind: "component", type: ContentTitleComponent, selector: "mantle-content-title", inputs: ["thumbnail", "title"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FormPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-form-page', standalone: false, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"full-height-min\" [ngClass]=\"{'page full-height-only vertically-scrollable': !isTabbedContent}\">\n  <div fxFlex=\"0 0 auto\" class=\"page-header headline-5\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\">\n      <mantle-content-title *ngIf=\"header\" fxFlex=\"0 0 auto\" [thumbnail]=\"header.thumbnail\" [title]=\"header.title\"></mantle-content-title>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"!formPageService.hideCancelButton\">\n        <button mat-icon-button\n            type=\"button\"\n            (click)=\"onCancelClicked()\"\n            [disabled]=\"formPageService.isCommitInProgress\">\n          <mat-icon>close</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 auto\" class=\"main-content\">\n    <mantle-dynamic-form #dynamicForm [content]=\"content$ | async\" [formPageService]=\"formPageService\"></mantle-dynamic-form>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" class=\"page-footer\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <ng-container *ngFor=\"let button of bottomLeftButtons\">\n        <div fxFlex=\"0 0 auto\" *ngIf=\"button.show\">\n          <button mat-raised-button\n              color=\"{{ button.color }}\"\n              type=\"button\"\n              class=\"button-with-spinner additional-button\"\n              [disabled]=\"formPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(dynamicForm?.value)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" [diameter]=\"16\"></mat-spinner>\n          </button>\n        </div>\n      </ng-container>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <ng-container *ngFor=\"let button of bottomRightButtons\">\n        <div fxFlex=\"0 0 auto\" *ngIf=\"button.show\">\n          <button mat-raised-button\n              color=\"{{ button.color }}\"\n              type=\"button\"\n              class=\"button-with-spinner additional-button\"\n              [disabled]=\"formPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(dynamicForm?.value)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" [diameter]=\"16\"></mat-spinner>\n          </button>\n        </div>\n      </ng-container>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"formPageService.showSaveButton\">\n        <button mat-raised-button\n            color=\"primary\"\n            type=\"button\"\n            class=\"button-with-spinner save-button\"\n            [disabled]=\"formPageService.isCommitInProgress || !dynamicForm?.valid\"\n            (click)=\"onSaveClicked()\">\n          {{ 'mantle.buttons.save' | translate }}\n          <mat-spinner *ngIf=\"isSaveInProgress\" [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".save-button,.additional-button{width:140px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: AnnouncementService }, { type: ConfirmationService }], propDecorators: { dynamicForm: [{
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: AnnouncementService }, { type: ConfirmationService }], propDecorators: { dynamicForm: [{
                 type: ViewChild,
                 args: [DynamicFormComponent]
             }] } });
@@ -5416,13 +5455,13 @@ class DetailPageComponent {
     back() {
         this.detailPageService.openList();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DetailPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i0.Injector }, { token: AnnouncementService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DetailPageComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i0.Injector }, { token: AnnouncementService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DetailPageComponent, isStandalone: false, selector: "mantle-detail-page", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"full-height-min\" [ngClass]=\"{'page full-height-only vertically-scrollable': !isTabbedContent}\">\n  <div fxFlex=\"0 0 auto\" class=\"page-header headline-5\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center start\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"0 0 auto\" *ngIf=\"!detailPageService.hideBackButton\">\n        <button class=\"back-button\" mat-mini-fab color=\"primary\" type=\"button\" (click)=\"onBackClicked()\">\n          <mat-icon>arrow_back</mat-icon>\n        </button>\n      </div>\n\n      <div fxFlex=\"1 1 auto\">\n        <mantle-content-title *ngIf=\"header\" [thumbnail]=\"header.thumbnail\" [title]=\"header.title\"></mantle-content-title>\n      </div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"!!content && detailPageService.showEditButton && detailPageService.canWrite()\">\n        <button mat-mini-fab\n            color=\"primary\"\n            type=\"button\"\n            class=\"edit-button\"\n            (click)=\"onEditClicked()\"\n            [disabled]=\"detailPageService.isCommitInProgress\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 auto\" class=\"main-content\">\n    <mantle-dynamic-details [content]=\"content\" [detailPageService]=\"detailPageService\"></mantle-dynamic-details>\n  </div>\n\n  <div fxFlex=\"0 0 36px\" class=\"page-footer\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\" *ngIf=\"!!content\">\n      <ng-container *ngFor=\"let button of bottomLeftButtons\">\n        <div fxFlex=\"0 0 auto\" *ngIf=\"button.show\">\n          <button mat-raised-button\n              color=\"{{ button.color }}\"\n              type=\"button\"\n              class=\"button-with-spinner additional-button\"\n              [disabled]=\"detailPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(id)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" [diameter]=\"16\"></mat-spinner>\n          </button>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"content\">\n        <div fxFlex=\"0 0 auto\" *ngFor=\"let exportOption of exportOptions\">\n          <div *ngIf=\"(exportOption.show == null) || (exportOption.show)\">\n            <button mat-button\n              type=\"button\"\n              class=\"export-button\"\n              (click)=\"exportOption.export(content.data).subscribe()\"\n              [disabled]=\"detailPageService.isCommitInProgress\">\n              <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n              <mat-icon>download</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showCloneButton && detailPageService.canWrite()\">\n        <button mat-raised-button\n            color=\"accent\"\n            type=\"button\"\n            class=\"clone-button\"\n            (click)=\"onCloneClicked()\">\n          {{ 'mantle.buttons.clone' | translate }}\n        </button>\n      </div>\n\n      <ng-container *ngFor=\"let button of bottomRightButtons\">\n        <div fxFlex=\"0 0 auto\" *ngIf=\"button.show\">\n          <button mat-raised-button\n              color=\"{{ button.color }}\"\n              type=\"button\"\n              class=\"button-with-spinner additional-button\"\n              [disabled]=\"detailPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(id)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" [diameter]=\"16\"></mat-spinner>\n          </button>\n        </div>\n      </ng-container>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showDeleteButton && detailPageService.canWrite()\">\n        <button mat-button\n            color=\"warn\"\n            type=\"button\"\n            class=\"button-with-spinner delete-button\"\n            [disabled]=\"detailPageService.isCommitInProgress\"\n            (click)=\"onDeleteClicked()\">\n          {{ 'mantle.buttons.delete' | translate }} {{ detailPageService.noun() | translate }}\n          <mat-spinner *ngIf=\"isDeleteInProgress\" [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".edit-button,.back-button{margin-bottom:8px}.export-button{display:block;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 .mat-icon{height:auto;width:auto;font-size:2.5rem}.additional-button,.clone-button{min-width:140px}\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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DynamicDetailsComponent, selector: "mantle-dynamic-details", inputs: ["detailPageService", "content"] }, { kind: "component", type: ContentTitleComponent, selector: "mantle-content-title", inputs: ["thumbnail", "title"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DetailPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-detail-page', standalone: false, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"full-height-min\" [ngClass]=\"{'page full-height-only vertically-scrollable': !isTabbedContent}\">\n  <div fxFlex=\"0 0 auto\" class=\"page-header headline-5\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center start\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"0 0 auto\" *ngIf=\"!detailPageService.hideBackButton\">\n        <button class=\"back-button\" mat-mini-fab color=\"primary\" type=\"button\" (click)=\"onBackClicked()\">\n          <mat-icon>arrow_back</mat-icon>\n        </button>\n      </div>\n\n      <div fxFlex=\"1 1 auto\">\n        <mantle-content-title *ngIf=\"header\" [thumbnail]=\"header.thumbnail\" [title]=\"header.title\"></mantle-content-title>\n      </div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"!!content && detailPageService.showEditButton && detailPageService.canWrite()\">\n        <button mat-mini-fab\n            color=\"primary\"\n            type=\"button\"\n            class=\"edit-button\"\n            (click)=\"onEditClicked()\"\n            [disabled]=\"detailPageService.isCommitInProgress\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </div>\n  </div>\n\n  <div fxFlex=\"1 0 auto\" class=\"main-content\">\n    <mantle-dynamic-details [content]=\"content\" [detailPageService]=\"detailPageService\"></mantle-dynamic-details>\n  </div>\n\n  <div fxFlex=\"0 0 36px\" class=\"page-footer\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\" *ngIf=\"!!content\">\n      <ng-container *ngFor=\"let button of bottomLeftButtons\">\n        <div fxFlex=\"0 0 auto\" *ngIf=\"button.show\">\n          <button mat-raised-button\n              color=\"{{ button.color }}\"\n              type=\"button\"\n              class=\"button-with-spinner additional-button\"\n              [disabled]=\"detailPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(id)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" [diameter]=\"16\"></mat-spinner>\n          </button>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"content\">\n        <div fxFlex=\"0 0 auto\" *ngFor=\"let exportOption of exportOptions\">\n          <div *ngIf=\"(exportOption.show == null) || (exportOption.show)\">\n            <button mat-button\n              type=\"button\"\n              class=\"export-button\"\n              (click)=\"exportOption.export(content.data).subscribe()\"\n              [disabled]=\"detailPageService.isCommitInProgress\">\n              <span class=\"export-button-label\">{{ exportOption.label | translate }}</span>\n              <mat-icon>download</mat-icon>\n            </button>\n          </div>\n        </div>\n      </ng-container>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showCloneButton && detailPageService.canWrite()\">\n        <button mat-raised-button\n            color=\"accent\"\n            type=\"button\"\n            class=\"clone-button\"\n            (click)=\"onCloneClicked()\">\n          {{ 'mantle.buttons.clone' | translate }}\n        </button>\n      </div>\n\n      <ng-container *ngFor=\"let button of bottomRightButtons\">\n        <div fxFlex=\"0 0 auto\" *ngIf=\"button.show\">\n          <button mat-raised-button\n              color=\"{{ button.color }}\"\n              type=\"button\"\n              class=\"button-with-spinner additional-button\"\n              [disabled]=\"detailPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(id)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" [diameter]=\"16\"></mat-spinner>\n          </button>\n        </div>\n      </ng-container>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showDeleteButton && detailPageService.canWrite()\">\n        <button mat-button\n            color=\"warn\"\n            type=\"button\"\n            class=\"button-with-spinner delete-button\"\n            [disabled]=\"detailPageService.isCommitInProgress\"\n            (click)=\"onDeleteClicked()\">\n          {{ 'mantle.buttons.delete' | translate }} {{ detailPageService.noun() | translate }}\n          <mat-spinner *ngIf=\"isDeleteInProgress\" [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".edit-button,.back-button{margin-bottom:8px}.export-button{display:block;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 .mat-icon{height:auto;width:auto;font-size:2.5rem}.additional-button,.clone-button{min-width:140px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i0.Injector }, { type: AnnouncementService }] });
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }, { type: AnnouncementService }] });
 
 class DocumentsPageComponent {
     constructor(route, injector, announcementService, webApiService, screenSizeService) {
@@ -5480,13 +5519,13 @@ class DocumentsPageComponent {
             this.uploadInProgress = false;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DocumentsPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i0.Injector }, { token: AnnouncementService }, { token: WebApiService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DocumentsPageComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i0.Injector }, { token: AnnouncementService }, { token: WebApiService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DocumentsPageComponent, isStandalone: false, selector: "mantle-documents-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=\"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          + {{ 'mantle.buttons.add' | translate }} {{ listPageService.noun() | translate }}\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      </mat-drawer>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"main-content full-height-only\"\n          file-dropzone (fileDropped)=\"onFileDropped($event[0])\" [class.uploading]=\"uploadInProgress\">\n\n        <div *ngIf=\"uploadInProgress\" class=\"uploading-indicator-overlay\">\n          <div class=\"uploading-indicator\">Uploading...</div>\n          <mantle-loader></mantle-loader>\n        </div>\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 *ngFor=\"let column of displayedColumns\">\n              <ng-container matColumnDef=\"{{ column.attr }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header | translate }}</th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <mantle-dynamic-attribute-display\n                      [fieldType]=\"column.type\"\n                      [value]=\"row[column.attr]\">\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: 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: FileDropzoneDirective, selector: "[file-dropzone]", outputs: ["fileDropped"] }, { 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: "component", type: LoaderComponent, selector: "mantle-loader", inputs: ["delay"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DocumentsPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-documents-page', standalone: false, 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=\"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          + {{ 'mantle.buttons.add' | translate }} {{ listPageService.noun() | translate }}\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      </mat-drawer>\n\n      <div fxLayout=\"column\" fxLayoutAlign=\"stretch\" class=\"main-content full-height-only\"\n          file-dropzone (fileDropped)=\"onFileDropped($event[0])\" [class.uploading]=\"uploadInProgress\">\n\n        <div *ngIf=\"uploadInProgress\" class=\"uploading-indicator-overlay\">\n          <div class=\"uploading-indicator\">Uploading...</div>\n          <mantle-loader></mantle-loader>\n        </div>\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 *ngFor=\"let column of displayedColumns\">\n              <ng-container matColumnDef=\"{{ column.attr }}\">\n                <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header | translate }}</th>\n                <td mat-cell *matCellDef=\"let row\">\n                  <mantle-dynamic-attribute-display\n                      [fieldType]=\"column.type\"\n                      [value]=\"row[column.attr]\">\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$5.ActivatedRoute }, { type: i0.Injector }, { type: AnnouncementService }, { type: WebApiService }, { type: ScreenSizeService }], propDecorators: { paginator: [{
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }, { type: AnnouncementService }, { type: WebApiService }, { type: ScreenSizeService }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
             }], sort: [{
@@ -5516,13 +5555,13 @@ class TabbedPageComponent {
             this.activeLink = this.router.url;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabbedPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i1$5.Router }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: TabbedPageComponent, isStandalone: false, selector: "mantle-tabbed-page", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"4px\" class=\"tabbed-page full-height-only\">\n\n  <div fxFlex=\"0 0 auto\" class=\"tab-bar\">\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n      <a mat-tab-link *ngFor=\"let link of links\"\n         (click)=\"activeLink = link.route\"\n         [active]=\"activeLink == link.route\"\n         [routerLink]=\"link.route\"> {{ link.label | translate }} </a>\n    </nav>\n  </div>\n\n  <mat-tab-nav-panel #tabPanel fxFlex=\"1 0 1px\" class=\"tab-content vertically-scrollable\">\n    <router-outlet></router-outlet>\n  </mat-tab-nav-panel>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: "component", type: i4$6.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$6.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$6.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabbedPageComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i1$6.Router }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: TabbedPageComponent, isStandalone: false, selector: "mantle-tabbed-page", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"4px\" class=\"tabbed-page full-height-only\">\n\n  <div fxFlex=\"0 0 auto\" class=\"tab-bar\">\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n      <a mat-tab-link *ngFor=\"let link of links\"\n         (click)=\"activeLink = link.route\"\n         [active]=\"activeLink == link.route\"\n         [routerLink]=\"link.route\"> {{ link.label | translate }} </a>\n    </nav>\n  </div>\n\n  <mat-tab-nav-panel #tabPanel fxFlex=\"1 0 1px\" class=\"tab-content vertically-scrollable\">\n    <router-outlet></router-outlet>\n  </mat-tab-nav-panel>\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: "component", type: i4$6.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i4$6.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i4$6.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: TabbedPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-tabbed-page', standalone: false, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"4px\" class=\"tabbed-page full-height-only\">\n\n  <div fxFlex=\"0 0 auto\" class=\"tab-bar\">\n    <nav mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n      <a mat-tab-link *ngFor=\"let link of links\"\n         (click)=\"activeLink = link.route\"\n         [active]=\"activeLink == link.route\"\n         [routerLink]=\"link.route\"> {{ link.label | translate }} </a>\n    </nav>\n  </div>\n\n  <mat-tab-nav-panel #tabPanel fxFlex=\"1 0 1px\" class=\"tab-content vertically-scrollable\">\n    <router-outlet></router-outlet>\n  </mat-tab-nav-panel>\n\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i1$5.Router }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i1$6.Router }, { type: i0.Injector }] });
 
 const ROSTER_GANTT_CHART = {
     chart: {
@@ -5680,13 +5719,13 @@ class RosterPageComponent {
     openScheduleForm(scheduleId) {
         this.rosterScheduleService.openForm({ id: scheduleId }, { roster_id: this.id });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RosterPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i0.Injector }, { token: LocaleService }, { token: i1$4.MatDialog }, { token: ObjectService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RosterPageComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i0.Injector }, { token: LocaleService }, { token: i1$4.MatDialog }, { token: ObjectService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: RosterPageComponent, isStandalone: false, selector: "mantle-roster-page", ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"page full-height-min full-height-only vertically-scrollable\">\n  <mantle-page-title>{{ pageTitle | translate }}</mantle-page-title>\n\n  <div fxFlex=\"0 0 auto\" fxLayout=\"column\" fxLayoutGap=\"16px\" class=\"page-header headline-5\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"0 0 auto\" *ngIf=\"!rosterPageService.hideBackButton\">\n        <button class=\"back-button\" mat-mini-fab color=\"primary\" type=\"button\" (click)=\"onBackClicked()\">\n          <mat-icon>arrow_back</mat-icon>\n        </button>\n      </div>\n\n      <button *ngIf=\"rosterScheduleService.showAddButton && rosterPageService.canWrite()\"\n              mat-raised-button\n              color=\"accent\"\n              type=\"button\"\n              class=\"add-button\"\n              (click)=\"openScheduleForm()\">\n        + {{ 'mantle.buttons.add' | translate }} {{ rosterScheduleService.noun() | translate }}\n      </button>\n\n      <ng-container *ngIf=\"!isSmallScreen; then monthControls\">\n      </ng-container>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"rosterPageService.showEditButton && rosterPageService.canWrite()\">\n        <button mat-mini-fab\n            color=\"primary\"\n            type=\"button\"\n            class=\"edit-button\"\n            (click)=\"onEditClicked()\"\n            [disabled]=\"rosterPageService.isCommitInProgress\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isSmallScreen; then monthControls\">\n    </ng-container>\n  </div>\n\n  <mantle-dynamic-chart [data]=\"rosterData\"></mantle-dynamic-chart>\n</div>\n\n<ng-template #monthControls>\n  <div class=\"month-controls\">\n    <button type=\"button\" mat-button (click)=\"showPrevMonth()\">\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n  \n    <div class=\"month-text\">{{ month }}</div>\n  \n    <button type=\"button\" mat-button (click)=\"showNextMonth()\">\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n  </div>\n</ng-template>\n", styles: [".add-button{display:block;text-transform:uppercase;border-radius:0}.month-controls{display:inline-flex}.month-text{margin:auto;font-size:14px;line-height:20px;font-weight:500}\n"], dependencies: [{ 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: "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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: PageTitleComponent, selector: "mantle-page-title" }, { kind: "component", type: DynamicChartComponent, selector: "mantle-dynamic-chart", inputs: ["label", "data"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RosterPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-roster-page', standalone: false, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"page full-height-min full-height-only vertically-scrollable\">\n  <mantle-page-title>{{ pageTitle | translate }}</mantle-page-title>\n\n  <div fxFlex=\"0 0 auto\" fxLayout=\"column\" fxLayoutGap=\"16px\" class=\"page-header headline-5\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"0 0 auto\" *ngIf=\"!rosterPageService.hideBackButton\">\n        <button class=\"back-button\" mat-mini-fab color=\"primary\" type=\"button\" (click)=\"onBackClicked()\">\n          <mat-icon>arrow_back</mat-icon>\n        </button>\n      </div>\n\n      <button *ngIf=\"rosterScheduleService.showAddButton && rosterPageService.canWrite()\"\n              mat-raised-button\n              color=\"accent\"\n              type=\"button\"\n              class=\"add-button\"\n              (click)=\"openScheduleForm()\">\n        + {{ 'mantle.buttons.add' | translate }} {{ rosterScheduleService.noun() | translate }}\n      </button>\n\n      <ng-container *ngIf=\"!isSmallScreen; then monthControls\">\n      </ng-container>\n\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\" *ngIf=\"rosterPageService.showEditButton && rosterPageService.canWrite()\">\n        <button mat-mini-fab\n            color=\"primary\"\n            type=\"button\"\n            class=\"edit-button\"\n            (click)=\"onEditClicked()\"\n            [disabled]=\"rosterPageService.isCommitInProgress\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"isSmallScreen; then monthControls\">\n    </ng-container>\n  </div>\n\n  <mantle-dynamic-chart [data]=\"rosterData\"></mantle-dynamic-chart>\n</div>\n\n<ng-template #monthControls>\n  <div class=\"month-controls\">\n    <button type=\"button\" mat-button (click)=\"showPrevMonth()\">\n      <mat-icon>chevron_left</mat-icon>\n    </button>\n  \n    <div class=\"month-text\">{{ month }}</div>\n  \n    <button type=\"button\" mat-button (click)=\"showNextMonth()\">\n      <mat-icon>chevron_right</mat-icon>\n    </button>\n  </div>\n</ng-template>\n", styles: [".add-button{display:block;text-transform:uppercase;border-radius:0}.month-controls{display:inline-flex}.month-text{margin:auto;font-size:14px;line-height:20px;font-weight:500}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i0.Injector }, { type: LocaleService }, { type: i1$4.MatDialog }, { type: ObjectService }, { type: ScreenSizeService }] });
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }, { type: LocaleService }, { type: i1$4.MatDialog }, { type: ObjectService }, { type: ScreenSizeService }] });
 
 class ExportPageComponent {
     constructor(route, injector, changeDetectorRef, announcementService, objectService) {
@@ -5721,13 +5760,13 @@ class ExportPageComponent {
         this.announcementService.error('mantle.messages.export_failed');
         this.isExportInProgress = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ExportPageComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: AnnouncementService }, { token: ObjectService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ExportPageComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: AnnouncementService }, { token: ObjectService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: ExportPageComponent, isStandalone: false, selector: "mantle-export-page", viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: DynamicFormComponent, descendants: true }], ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"full-height-min\" [ngClass]=\"{'page full-height-only vertically-scrollable': !isTabbedContent}\">\n  <div fxFlex=\"1 0 auto\" class=\"main-content\">\n    <mantle-dynamic-form #dynamicForm [content]=\"content$ | async\"></mantle-dynamic-form>\n  </div>\n\n  <div fxFlex=\"0 0 auto\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\">\n        <button mat-raised-button\n            *ngIf=\"!isExportInProgress\"\n            color=\"primary\"\n            type=\"button\"\n            class=\"export-button\"\n            [disabled]=\"!dynamicForm?.valid\"\n            (click)=\"onExportClicked()\">\n          {{ 'mantle.buttons.export' | translate }}\n        </button>\n\n\n        <button mat-raised-button\n            *ngIf=\"isExportInProgress\"\n            color=\"primary\"\n            type=\"button\"\n            class=\"button-with-spinner exporting-button\"\n            [disabled]=\"true\">\n          {{ 'mantle.buttons.exporting' | translate }}\n          <mat-spinner [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".export-button,.exporting-button{width:140px}\n"], dependencies: [{ kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: ExportPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-export-page', standalone: false, template: "<div fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"16px\" class=\"full-height-min\" [ngClass]=\"{'page full-height-only vertically-scrollable': !isTabbedContent}\">\n  <div fxFlex=\"1 0 auto\" class=\"main-content\">\n    <mantle-dynamic-form #dynamicForm [content]=\"content$ | async\"></mantle-dynamic-form>\n  </div>\n\n  <div fxFlex=\"0 0 auto\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <div fxFlex=\"1 1 auto\"></div>\n\n      <div fxFlex=\"0 0 auto\">\n        <button mat-raised-button\n            *ngIf=\"!isExportInProgress\"\n            color=\"primary\"\n            type=\"button\"\n            class=\"export-button\"\n            [disabled]=\"!dynamicForm?.valid\"\n            (click)=\"onExportClicked()\">\n          {{ 'mantle.buttons.export' | translate }}\n        </button>\n\n\n        <button mat-raised-button\n            *ngIf=\"isExportInProgress\"\n            color=\"primary\"\n            type=\"button\"\n            class=\"button-with-spinner exporting-button\"\n            [disabled]=\"true\">\n          {{ 'mantle.buttons.exporting' | translate }}\n          <mat-spinner [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".export-button,.exporting-button{width:140px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: AnnouncementService }, { type: ObjectService }], propDecorators: { dynamicForm: [{
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: AnnouncementService }, { type: ObjectService }], propDecorators: { dynamicForm: [{
                 type: ViewChild,
                 args: [DynamicFormComponent]
             }] } });
@@ -5770,7 +5809,7 @@ class NavTreeComponent {
         return node.children;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: NavTreeComponent, isStandalone: false, selector: "mantle-nav-tree", inputs: { notificationCount: "notificationCount", navTreeFeatures: "navTreeFeatures" }, usesOnChanges: true, ngImport: i0, template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n  <!-- This is the tree node template for leaf nodes -->\n  <mat-tree-node *matTreeNodeDef=\"let node\" [class.leaf-node]=\"node.level > 0\">\n    <div fxLayout=\"row\" class=\"tree-node-content\">\n      <div fxFlex=\"0 0 28px\" *ngIf=\"node.level > 0\" class=\"tree-node-indent\">\n        <mat-divider [vertical]=\"true\" color=\"primary\"></mat-divider>\n      </div>\n      <div fxFlex=\"1 0 1px\">\n        <button mat-button [routerLink]=\"node.link\" routerLinkActive=\"active\" class=\"tree-node-button\">\n          <mat-icon *ngIf=\"node.icon\"\n              [matBadge]=\"(node.name == 'Notifications' && notificationCount > 0) ? notificationCount : undefined\"\n              matBadgeColor=\"warn\"\n              matBadgeSize=\"small\">\n            {{ node.icon }}\n          </mat-icon>\n          <div class=\"node-label\">{{ node.name | translate }}</div>\n        </button>\n      </div>\n    </div>\n  </mat-tree-node>\n\n  <!-- This is the tree node template for expandable nodes -->\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" fxLayout=\"row\" [class.leaf-node]=\"node.level > 0\">\n    <div fxLayout=\"row\" class=\"tree-node-content\">\n      <div fxFlex=\"0 0 28px\" *ngIf=\"node.level > 0\" class=\"tree-node-indent\">\n        <mat-divider [vertical]=\"true\" color=\"primary\"></mat-divider>\n      </div>\n      <div fxFlex=\"1 0 1px\">\n        <button fxFlex=\"1 0 1px\" mat-button matTreeNodeToggle class=\"tree-node-button\">\n          <mat-icon *ngIf=\"node.icon\">{{ node.icon }}</mat-icon>\n          <div class=\"node-label\">{{ node.name | translate }}</div>\n        </button>\n      </div>\n    </div>\n  </mat-tree-node>\n\n</mat-tree>\n", styles: [".mat-tree-node .tree-node-content{min-height:48px}.mat-tree-node .tree-node-content .tree-node-button{text-align:left;border-radius:0;width:239px;height:auto;padding:8px;margin:6px 0}.mat-tree-node .tree-node-content .tree-node-button .mat-icon{margin-right:8px}.mat-tree-node .tree-node-content .tree-node-button .node-label{display:inline-block;text-align:left;white-space:normal;line-height:1.25rem}.mat-tree-node.leaf-node .tree-node-indent{position:relative}.mat-tree-node.leaf-node .tree-node-indent .mat-divider{position:absolute;top:0;bottom:0;right:0;border-width:2px}.mat-tree-node.leaf-node .tree-node-button{width:191px!important;margin:4px 0 4px 16px!important}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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.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: i4$7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { 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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i8$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i8$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: NavTreeComponent, isStandalone: false, selector: "mantle-nav-tree", inputs: { notificationCount: "notificationCount", navTreeFeatures: "navTreeFeatures" }, usesOnChanges: true, ngImport: i0, template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n\n  <!-- This is the tree node template for leaf nodes -->\n  <mat-tree-node *matTreeNodeDef=\"let node\" [class.leaf-node]=\"node.level > 0\">\n    <div fxLayout=\"row\" class=\"tree-node-content\">\n      <div fxFlex=\"0 0 28px\" *ngIf=\"node.level > 0\" class=\"tree-node-indent\">\n        <mat-divider [vertical]=\"true\" color=\"primary\"></mat-divider>\n      </div>\n      <div fxFlex=\"1 0 1px\">\n        <button mat-button [routerLink]=\"node.link\" routerLinkActive=\"active\" class=\"tree-node-button\">\n          <mat-icon *ngIf=\"node.icon\"\n              [matBadge]=\"(node.name == 'Notifications' && notificationCount > 0) ? notificationCount : undefined\"\n              matBadgeColor=\"warn\"\n              matBadgeSize=\"small\">\n            {{ node.icon }}\n          </mat-icon>\n          <div class=\"node-label\">{{ node.name | translate }}</div>\n        </button>\n      </div>\n    </div>\n  </mat-tree-node>\n\n  <!-- This is the tree node template for expandable nodes -->\n  <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" fxLayout=\"row\" [class.leaf-node]=\"node.level > 0\">\n    <div fxLayout=\"row\" class=\"tree-node-content\">\n      <div fxFlex=\"0 0 28px\" *ngIf=\"node.level > 0\" class=\"tree-node-indent\">\n        <mat-divider [vertical]=\"true\" color=\"primary\"></mat-divider>\n      </div>\n      <div fxFlex=\"1 0 1px\">\n        <button fxFlex=\"1 0 1px\" mat-button matTreeNodeToggle class=\"tree-node-button\">\n          <mat-icon *ngIf=\"node.icon\">{{ node.icon }}</mat-icon>\n          <div class=\"node-label\">{{ node.name | translate }}</div>\n        </button>\n      </div>\n    </div>\n  </mat-tree-node>\n\n</mat-tree>\n", styles: [".mat-tree-node .tree-node-content{min-height:48px}.mat-tree-node .tree-node-content .tree-node-button{text-align:left;border-radius:0;width:239px;height:auto;padding:8px;margin:6px 0}.mat-tree-node .tree-node-content .tree-node-button .mat-icon{margin-right:8px}.mat-tree-node .tree-node-content .tree-node-button .node-label{display:inline-block;text-align:left;white-space:normal;line-height:1.25rem}.mat-tree-node.leaf-node .tree-node-indent{position:relative}.mat-tree-node.leaf-node .tree-node-indent .mat-divider{position:absolute;top:0;bottom:0;right:0;border-width:2px}.mat-tree-node.leaf-node .tree-node-button{width:191px!important;margin:4px 0 4px 16px!important}\n"], dependencies: [{ kind: "directive", type: i1$3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { 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.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: i4$7.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { 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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i3$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i8$2.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i8$2.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i8$2.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i8$2.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: NavTreeComponent, decorators: [{
             type: Component,
@@ -5832,13 +5871,13 @@ class DialogDetailsComponent {
     ngOnDestroy() {
         this.routerSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DialogDetailsComponent, deps: [{ token: i1$5.Router }, { token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: AnnouncementService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DialogDetailsComponent, deps: [{ token: i1$6.Router }, { token: i1$4.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: AnnouncementService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: DialogDetailsComponent, isStandalone: false, selector: "mantle-dialog-details", ngImport: i0, template: "<div mat-dialog-title fxLayout=\"row\" fxLayoutAlign=\"start\" fxLayoutGap=\"8px\" class=\"dialog-title-section\">\n  <mantle-section-title fxFlex=\"1 0 1px\" [title]=\"title\"></mantle-section-title>\n  <button fxFlex=\"0 0 auto\" mat-icon-button tabindex=\"-1\" (click)=\"onCancelClicked()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content>\n  <mantle-dynamic-details [content]=\"content$ | async\"></mantle-dynamic-details>\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\" class=\"actions-section\">\n  <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showDeleteButton && detailPageService.canWrite()\">\n    <button mat-button\n        *ngIf=\"!isDeleteInProgress\"\n        color=\"warn\"\n        type=\"button\"\n        class=\"delete-button\"\n        (click)=\"onDeleteClicked()\">\n      {{ 'mantle.buttons.delete' | translate }}\n    </button>\n\n    <button mat-raised-button\n        *ngIf=\"isDeleteInProgress\"\n        color=\"warn\"\n        type=\"button\"\n        class=\"button-with-spinner deleting-button\"\n        [disabled]=\"true\">\n      {{ 'mantle.buttons.deleting' | translate }}\n      <mat-spinner [diameter]=\"16\"></mat-spinner>\n    </button>\n  </div>\n\n  <div fxFlex=\"1 1 auto\"></div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showCloneButton && detailPageService.canWrite()\">\n    <button mat-raised-button\n        color=\"accent\"\n        type=\"button\"\n        class=\"edit-button\"\n        (click)=\"onCloneClicked()\">\n      {{ 'mantle.buttons.clone' | translate }}\n    </button>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showEditButton && detailPageService.canWrite()\">\n    <button mat-raised-button\n        color=\"primary\"\n        type=\"button\"\n        class=\"edit-button\"\n        (click)=\"onEditClicked()\">\n      {{ 'mantle.buttons.edit' | translate }}\n    </button>\n  </div>\n</mat-dialog-actions>\n", styles: [".delete-button,.deleting-button{text-transform:uppercase}.edit-button{width:140px}\n"], dependencies: [{ 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: "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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: DynamicDetailsComponent, selector: "mantle-dynamic-details", inputs: ["detailPageService", "content"] }, { kind: "component", type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { kind: "pipe", type: i1$3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DialogDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mantle-dialog-details', standalone: false, template: "<div mat-dialog-title fxLayout=\"row\" fxLayoutAlign=\"start\" fxLayoutGap=\"8px\" class=\"dialog-title-section\">\n  <mantle-section-title fxFlex=\"1 0 1px\" [title]=\"title\"></mantle-section-title>\n  <button fxFlex=\"0 0 auto\" mat-icon-button tabindex=\"-1\" (click)=\"onCancelClicked()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content>\n  <mantle-dynamic-details [content]=\"content$ | async\"></mantle-dynamic-details>\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\" class=\"actions-section\">\n  <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showDeleteButton && detailPageService.canWrite()\">\n    <button mat-button\n        *ngIf=\"!isDeleteInProgress\"\n        color=\"warn\"\n        type=\"button\"\n        class=\"delete-button\"\n        (click)=\"onDeleteClicked()\">\n      {{ 'mantle.buttons.delete' | translate }}\n    </button>\n\n    <button mat-raised-button\n        *ngIf=\"isDeleteInProgress\"\n        color=\"warn\"\n        type=\"button\"\n        class=\"button-with-spinner deleting-button\"\n        [disabled]=\"true\">\n      {{ 'mantle.buttons.deleting' | translate }}\n      <mat-spinner [diameter]=\"16\"></mat-spinner>\n    </button>\n  </div>\n\n  <div fxFlex=\"1 1 auto\"></div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showCloneButton && detailPageService.canWrite()\">\n    <button mat-raised-button\n        color=\"accent\"\n        type=\"button\"\n        class=\"edit-button\"\n        (click)=\"onCloneClicked()\">\n      {{ 'mantle.buttons.clone' | translate }}\n    </button>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"detailPageService.showEditButton && detailPageService.canWrite()\">\n    <button mat-raised-button\n        color=\"primary\"\n        type=\"button\"\n        class=\"edit-button\"\n        (click)=\"onEditClicked()\">\n      {{ 'mantle.buttons.edit' | translate }}\n    </button>\n  </div>\n</mat-dialog-actions>\n", styles: [".delete-button,.deleting-button{text-transform:uppercase}.edit-button{width:140px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$5.Router }, { type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$6.Router }, { type: i1$4.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: AnnouncementService }] });
@@ -5856,7 +5895,7 @@ class RerouteComponent {
     reroute() {
         this.rerouteService.reroute();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RerouteComponent, deps: [{ token: i1$5.ActivatedRoute }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RerouteComponent, deps: [{ token: i1$6.ActivatedRoute }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: RerouteComponent, isStandalone: false, selector: "mantle-reroute", ngImport: i0, template: '', isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RerouteComponent, decorators: [{
@@ -5866,7 +5905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
                     template: '',
                     standalone: false
                 }]
-        }], ctorParameters: () => [{ type: i1$5.ActivatedRoute }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$6.ActivatedRoute }, { type: i0.Injector }] });
 
 class QrCodeDialogComponent {
     constructor(dialogRef, params) {
@@ -6006,7 +6045,7 @@ class MantleModule {
             BrowserAnimationsModule,
             FormsModule,
             ReactiveFormsModule,
-            HighchartsChartModule, i2.MarkdownModule, QrCodeModule, i2$2.QuillModule, TranslateModule,
+            HighchartsChartModule, i2.MarkdownModule, QrCodeModule, i1$5.QuillModule, TranslateModule,
             MaterialModule,
             ImageCropperComponent$1], exports: [MaterialModule,
             DynamicPipe,
@@ -6850,7 +6889,7 @@ class CurrentUserService {
             this.dataBroadcastService.locale.next(locale);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CurrentUserService, deps: [{ token: i1$1.AngularTokenService }, { token: i1$5.Router }, { token: AnnouncementService }, { token: ArrayService }, { token: DataBroadcastService }, { token: LocaleService }, { token: WebApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CurrentUserService, deps: [{ token: i1$1.AngularTokenService }, { token: i1$6.Router }, { token: AnnouncementService }, { token: ArrayService }, { token: DataBroadcastService }, { token: LocaleService }, { token: WebApiService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CurrentUserService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: CurrentUserService, decorators: [{
@@ -6858,7 +6897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$1.AngularTokenService }, { type: i1$5.Router }, { type: AnnouncementService }, { type: ArrayService }, { type: DataBroadcastService }, { type: LocaleService }, { type: WebApiService }] });
+        }], ctorParameters: () => [{ type: i1$1.AngularTokenService }, { type: i1$6.Router }, { type: AnnouncementService }, { type: ArrayService }, { type: DataBroadcastService }, { type: LocaleService }, { type: WebApiService }] });
 
 class ChartService {
     constructor(objectService) {
@@ -7340,7 +7379,7 @@ class FeatureGuard {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FeatureGuard, deps: [{ token: AnnouncementService }, { token: CurrentUserService }, { token: i1$5.Router }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FeatureGuard, deps: [{ token: AnnouncementService }, { token: CurrentUserService }, { token: i1$6.Router }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FeatureGuard, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: FeatureGuard, decorators: [{
@@ -7348,7 +7387,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: AnnouncementService }, { type: CurrentUserService }, { type: i1$5.Router }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: AnnouncementService }, { type: CurrentUserService }, { type: i1$6.Router }, { type: i0.Injector }] });
 
 class PasswordCheckGuard {
     constructor(passwordCheckService) {