@codetectonics/mantle 0.0.7 → 1.0.0

package/fesm2015/codetectonics-mantle.js

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { NgModule, Pipe, InjectionToken, Injectable, Inject, Directive, HostListener, EventEmitter, HostBinding, Output, Component, Input, ViewChild, forwardRef } from '@angular/core';
+import { Injectable, NgModule, Pipe, InjectionToken, Inject, Directive, HostListener, EventEmitter, HostBinding, Output, Component, Input, ViewChild, forwardRef } from '@angular/core';
 import * as i4 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i1 from '@angular/common/http';
@@ -9,27 +9,33 @@ 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 i6$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import * as i5$2 from '@angular/forms';
+import * as i3$3 from '@angular/forms';
 import { FormControl, FormGroup, NG_VALUE_ACCESSOR, NG_VALIDATORS, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i4$3 from 'ngx-image-cropper';
 import { base64ToFile, ImageCropperModule } from 'ngx-image-cropper';
-import * as i2$5 from 'highcharts-angular';
+import * as i2$6 from 'highcharts-angular';
 import { HighchartsChartModule } from 'highcharts-angular';
 import * as i1$5 from 'ngx-markdown';
 import { MarkdownModule } from 'ngx-markdown';
+import * as i5$1 from 'ng-qrcode';
+import { QrCodeModule } from 'ng-qrcode';
+import * as i5 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
 import * as i8 from '@angular/material/badge';
 import { MatBadgeModule } from '@angular/material/badge';
-import * as i5 from '@angular/material/button';
+import * as i3$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i3$6 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i10 from '@angular/material/checkbox';
+import * as i11 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i2 from '@angular/material/chips';
 import { MatChipsModule, MAT_CHIPS_DEFAULT_OPTIONS } from '@angular/material/chips';
-import * as i2$3 from '@angular/material/datepicker';
+import * as i2$4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$3 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material/dialog';
@@ -37,27 +43,29 @@ import * as i1$7 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i3$2 from '@angular/material/grid-list';
 import { MatGridListModule } from '@angular/material/grid-list';
-import * as i3$1 from '@angular/material/icon';
+import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i4$2 from '@angular/material/input';
+import * as i2$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
-import * as i6$1 from '@angular/material/menu';
+import * as i4$4 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import * as i2$2 from '@angular/material/select';
+import * as i2$3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import * as i7 from '@angular/material/sidenav';
+import * as i7$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i2$7 from '@angular/material/tabs';
+import * as i2$8 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i7 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i6 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i2$1 from '@angular/material/table';
 import { MatTableModule, MatTable } from '@angular/material/table';
-import * as i5$1 from '@angular/material/paginator';
-import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i3$3 from '@angular/material/sort';
+import * as i14 from '@angular/material/paginator';
+import { MatPaginatorIntl, MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
+import * as i12 from '@angular/material/sort';
 import { MatSortModule, MatSort } from '@angular/material/sort';
 import { MatMomentDateModule, MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';
 import * as i1$8 from '@angular/material/snack-bar';
@@ -70,23 +78,211 @@ import { NgxMatMomentModule } from '@angular-material-components/moment-adapter'
 import * as i1$9 from '@angular/material/tree';
 import { MatTreeModule, MatTreeFlattener, MatTreeFlatDataSource } from '@angular/material/tree';
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
-import * as i2$4 from '@angular/material/autocomplete';
+import * as i2$5 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { BehaviorSubject, Observable, Subject, merge, of } from 'rxjs';
 import * as moment from 'moment';
-import { Observable, BehaviorSubject, Subject, merge, of } from 'rxjs';
 import { DirectUpload } from '@rails/activestorage';
 import { map, takeUntil, startWith, switchMap, filter, retryWhen, delay, tap, finalize } from 'rxjs/operators';
 import * as i1$1 from 'angular-token';
 import * as i3 from '@angular/flex-layout/extended';
-import * as i4$1 from '@angular/flex-layout/flex';
+import * as i4$2 from '@angular/flex-layout/flex';
 import { DataSource } from '@angular/cdk/collections';
 import * as i1$6 from '@angular/material/form-field';
 import * as Highcharts from 'highcharts';
-import * as i2$6 from '@angular/material/divider';
+import * as i2$7 from '@angular/material/divider';
 import { trigger, state, style, AUTO_STYLE, transition, sequence, animate } from '@angular/animations';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import * as ActionCable from '@rails/actioncable';
 
+class DataBroadcastService {
+    constructor() {
+        this.sessionData = new BehaviorSubject({});
+        this.locale = new BehaviorSubject({});
+    }
+}
+DataBroadcastService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DataBroadcastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DataBroadcastService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DataBroadcastService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DataBroadcastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ObjectService {
+    constructor() { }
+    removeEmptyAttributes(object = {}) {
+        for (var attr in object) {
+            if (object[attr] === null || object[attr] === undefined || object[attr] === '') {
+                delete object[attr];
+            }
+        }
+    }
+    removeAllAttributes(object = {}) {
+        for (var attr in object) {
+            delete object[attr];
+        }
+    }
+    deepMerge(...objects) {
+        let result = {};
+        objects.forEach((object) => {
+            if (!this.isObject(result) || !this.isObject(object)) {
+                result = object;
+            }
+            else {
+                Object.entries(object).forEach(([key, value]) => {
+                    if (this.isObject(value)) {
+                        result[key] = this.deepMerge(result[key] || {}, value);
+                    }
+                    else {
+                        result[key] = value;
+                    }
+                });
+            }
+        });
+        return result;
+    }
+    deepClone(object) {
+        let objectService = this;
+        let copyFunction = function (value) {
+            if (objectService.isObject(value)) {
+                return objectService.deepClone(value);
+            }
+            else if (value instanceof Array) {
+                return value.map((item) => {
+                    return copyFunction(item);
+                });
+            }
+            else {
+                return value;
+            }
+        };
+        let result = {};
+        Object.entries(object).forEach(([key, value]) => {
+            result[key] = copyFunction(value);
+        });
+        return result;
+    }
+    findKeyByValue(object, value) {
+        return Object.keys(object).find((currentValue) => {
+            return value == object[currentValue];
+        });
+    }
+    isObject(objValue) {
+        return objValue && typeof objValue === 'object' && objValue.constructor === Object;
+    }
+    isEmpty(object) {
+        return Object.keys(object).length == 0;
+    }
+}
+ObjectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ObjectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ObjectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ObjectService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ObjectService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return []; } });
+
+class LocaleService {
+    constructor(translate, dataBroadcastService, objectService) {
+        this.translate = translate;
+        this.dataBroadcastService = dataBroadcastService;
+        this.objectService = objectService;
+        this.AVAILABLE_LOCALES = {
+            'English': 'en',
+            'Melayu': 'ms'
+        };
+        this.DEFAULT_LOCALE = 'ms';
+        this.translate.addLangs(this.availableLocaleCodes);
+        this.translate.setDefaultLang(this.DEFAULT_LOCALE);
+        const storedLocale = localStorage.getItem('locale');
+        if (storedLocale) {
+            this.translate.use(storedLocale);
+        }
+        else {
+            this.setDefaultLocale();
+        }
+        this.dataBroadcastService.locale.next(this.currentLocale);
+        this.dataBroadcastService.locale.subscribe((locale) => {
+            if (locale == this.currentLocale)
+                return;
+            if (locale) {
+                if (!this.availableLocales.includes(locale))
+                    return;
+                localStorage.setItem('locale', this.AVAILABLE_LOCALES[locale]);
+                this.translate.use(this.AVAILABLE_LOCALES[locale]);
+            }
+            else {
+                const locale = this.setDefaultLocale();
+                localStorage.setItem('locale', locale);
+                this.translate.use(locale);
+            }
+        });
+    }
+    setDefaultLocale() {
+        const browserLocale = this.translate.getBrowserLang();
+        const locale = this.availableLocaleCodes.includes(browserLocale) ? browserLocale : this.DEFAULT_LOCALE;
+        this.translate.use(locale);
+        return locale;
+    }
+    clearLocale() {
+        this.dataBroadcastService.locale.next(undefined);
+    }
+    get availableLocales() {
+        return Object.keys(this.AVAILABLE_LOCALES);
+    }
+    get availableLocaleCodes() {
+        return Object.values(this.AVAILABLE_LOCALES);
+    }
+    get currentLocale() {
+        return this.objectService.findKeyByValue(this.AVAILABLE_LOCALES, this.translate.currentLang) || '';
+    }
+    get currentLocaleCode() {
+        return this.translate.currentLang;
+    }
+    getTranslation(key) {
+        return this.translate.instant(key);
+    }
+}
+LocaleService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LocaleService, deps: [{ token: i5.TranslateService }, { token: DataBroadcastService }, { token: ObjectService }], target: i0.ɵɵFactoryTarget.Injectable });
+LocaleService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LocaleService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LocaleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i5.TranslateService }, { type: DataBroadcastService }, { type: ObjectService }]; } });
+
+class CustomPaginatorIntl extends MatPaginatorIntl {
+    constructor(dataBroadcastService, localeService) {
+        super();
+        this.dataBroadcastService = dataBroadcastService;
+        this.localeService = localeService;
+        this.getRangeLabel = (page, pageSize, length) => {
+            length = Math.max(length, 0);
+            const startIndex = (page * pageSize) + 1;
+            const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
+            const ofLabel = this.localeService.getTranslation('mantle.paginator.of');
+            return `${startIndex} - ${endIndex} ${ofLabel} ${length}`;
+        };
+        this.dataBroadcastService.locale.subscribe((locale) => {
+            this.itemsPerPageLabel = this.localeService.getTranslation('mantle.paginator.items_per_page');
+            this.firstPageLabel = this.localeService.getTranslation('mantle.paginator.first_page');
+            this.previousPageLabel = this.localeService.getTranslation('mantle.paginator.previous_page');
+            this.nextPageLabel = this.localeService.getTranslation('mantle.paginator.next_page');
+            this.lastPageLabel = this.localeService.getTranslation('mantle.paginator.last_page');
+            this.changes.next();
+        });
+    }
+}
+CustomPaginatorIntl.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: CustomPaginatorIntl, deps: [{ token: DataBroadcastService }, { token: LocaleService }], target: i0.ɵɵFactoryTarget.Injectable });
+CustomPaginatorIntl.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: CustomPaginatorIntl });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: CustomPaginatorIntl, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: DataBroadcastService }, { type: LocaleService }]; } });
+
 class MaterialModule {
 }
 MaterialModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MaterialModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -108,6 +304,7 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         MatSidenavModule,
         MatTabsModule,
         MatToolbarModule,
+        MatTooltipModule,
         MatProgressSpinnerModule,
         MatTableModule,
         MatPaginatorModule,
@@ -135,6 +332,7 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         MatSidenavModule,
         MatTabsModule,
         MatToolbarModule,
+        MatTooltipModule,
         MatProgressSpinnerModule,
         MatTableModule,
         MatPaginatorModule,
@@ -182,6 +380,7 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
                 }
             }
         },
+        { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl },
     ], imports: [[
             CommonModule,
             MatBadgeModule,
@@ -201,6 +400,7 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             MatSidenavModule,
             MatTabsModule,
             MatToolbarModule,
+            MatTooltipModule,
             MatProgressSpinnerModule,
             MatTableModule,
             MatPaginatorModule,
@@ -229,6 +429,7 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         MatSidenavModule,
         MatTabsModule,
         MatToolbarModule,
+        MatTooltipModule,
         MatProgressSpinnerModule,
         MatTableModule,
         MatPaginatorModule,
@@ -263,6 +464,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         MatSidenavModule,
                         MatTabsModule,
                         MatToolbarModule,
+                        MatTooltipModule,
                         MatProgressSpinnerModule,
                         MatTableModule,
                         MatPaginatorModule,
@@ -293,6 +495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         MatSidenavModule,
                         MatTabsModule,
                         MatToolbarModule,
+                        MatTooltipModule,
                         MatProgressSpinnerModule,
                         MatTableModule,
                         MatPaginatorModule,
@@ -341,6 +544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                                 }
                             }
                         },
+                        { provide: MatPaginatorIntl, useClass: CustomPaginatorIntl },
                     ]
                 }]
         }] });
@@ -581,7 +785,7 @@ class SectionTitleComponent {
     constructor() { }
 }
 SectionTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SectionTitleComponent, selector: "mantle-section-title", inputs: { title: "title" }, ngImport: i0, template: "<h3 class=\"section-title\">\n  {{ title }}\n</h3>\n", styles: [".section-title{text-transform:uppercase;line-height:1rem;padding:.75rem 1.25rem}\n"] });
+SectionTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SectionTitleComponent, selector: "mantle-section-title", inputs: { title: "title" }, ngImport: i0, template: "<h3 class=\"section-title\">\n  {{ title | translate }}\n</h3>\n", styles: [".section-title{text-transform:uppercase;line-height:1rem;padding:.75rem 1.25rem}\n"], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SectionTitleComponent, decorators: [{
             type: Component,
             args: [{
@@ -628,73 +832,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$2.BreakpointObserver }]; } });
 
-class ObjectService {
-    constructor() { }
-    removeEmptyAttributes(object = {}) {
-        for (var attr in object) {
-            if (object[attr] === null || object[attr] === undefined || object[attr] === '') {
-                delete object[attr];
-            }
-        }
-    }
-    removeAllAttributes(object = {}) {
-        for (var attr in object) {
-            delete object[attr];
-        }
-    }
-    deepMerge(...objects) {
-        let result = {};
-        objects.forEach((object) => {
-            if (!this.isObject(result) || !this.isObject(object)) {
-                result = object;
-            }
-            else {
-                Object.entries(object).forEach(([key, value]) => {
-                    if (this.isObject(value)) {
-                        result[key] = this.deepMerge(result[key] || {}, value);
-                    }
-                    else {
-                        result[key] = value;
-                    }
-                });
-            }
-        });
-        return result;
-    }
-    deepClone(object) {
-        let objectService = this;
-        let copyFunction = function (value) {
-            if (objectService.isObject(value)) {
-                return objectService.deepClone(value);
-            }
-            else if (value instanceof Array) {
-                return value.map((item) => {
-                    return copyFunction(item);
-                });
-            }
-            else {
-                return value;
-            }
-        };
-        let result = {};
-        Object.entries(object).forEach(([key, value]) => {
-            result[key] = copyFunction(value);
-        });
-        return result;
-    }
-    isObject(objValue) {
-        return objValue && typeof objValue === 'object' && objValue.constructor === Object;
-    }
-}
-ObjectService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ObjectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ObjectService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ObjectService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ObjectService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return []; } });
-
 class ArrayService {
     constructor(objectService) {
         this.objectService = objectService;
@@ -825,7 +962,7 @@ class FilePreviewDialogComponent {
     }
 }
 FilePreviewDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: FilePreviewDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: WebApiService }], target: i0.ɵɵFactoryTarget.Component });
-FilePreviewDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: FilePreviewDialogComponent, selector: "mantle-file-preview-dialog", 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=\"Preview\"></mantle-section-title>\n  <button fxFlex=\"0 0 auto\" mat-icon-button tabindex=\"-1\" (click)=\"onCancel()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content class=\"content-section\">\n\n  <img *ngIf=\"previewUrl\" class=\"preview-image\" [attr.src]=\"previewUrl | secureImage | async\" />\n\n  <h2 Adding *ngIf=\"!previewUrl\">Unable to preview file.</h2>\n\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" class=\"actions-section\">\n  <div fxFlex=\"1 1 auto\"></div>\n  <button fxFlex=\"0 0 auto\" mat-button (click)=\"onDownload()\">Download</button>\n</mat-dialog-actions>\n", styles: [".content-section{text-align:center}.preview-image{width:400px;max-width:100%}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], pipes: { "async": i4.AsyncPipe, "secureImage": SecureImagePipe } });
+FilePreviewDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: FilePreviewDialogComponent, selector: "mantle-file-preview-dialog", 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=\"Preview\"></mantle-section-title>\n  <button fxFlex=\"0 0 auto\" mat-icon-button tabindex=\"-1\" (click)=\"onCancel()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content class=\"content-section\">\n\n  <img *ngIf=\"previewUrl\" class=\"preview-image\" [attr.src]=\"previewUrl | secureImage | async\" />\n\n  <h2 Adding *ngIf=\"!previewUrl\">{{ 'mantle.file_preview.unable_to_preview_file' | translate }}</h2>\n\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" class=\"actions-section\">\n  <div fxFlex=\"1 1 auto\"></div>\n  <button fxFlex=\"0 0 auto\" mat-button (click)=\"onDownload()\">{{ 'mantle.buttons.download' | translate }}</button>\n</mat-dialog-actions>\n", styles: [".content-section{text-align:center}.preview-image{width:400px;max-width:100%}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], pipes: { "async": i4.AsyncPipe, "secureImage": SecureImagePipe, "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: FilePreviewDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -853,7 +990,7 @@ class FileAttributeDisplayComponent {
     isString(val) { return (typeof val === 'string') && (val.length > 0); }
 }
 FileAttributeDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: FileAttributeDisplayComponent, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-FileAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: FileAttributeDisplayComponent, selector: "mantle-file-attribute-display", inputs: { value: "value" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n  <div fxFlex=\"0 1 auto\">{{ value?.filename }}</div>\n  <div fxFlex=\"1 1 auto\">\n    <button *ngIf=\"value?.source_url\"\n        mat-mini-fab\n        color=\"primary\"\n        class=\"preview-button\"\n        click-stop-propagation\n        (click)=\"openPreviewDialog()\">\n      <mat-icon>attach_file</mat-icon>\n    </button>\n    <mat-icon class=\"unsaved-upload-indicator\" *ngIf=\"isString(value)\">attach_file</mat-icon>\n  </div>\n</div>\n", styles: [".preview-button{width:32px;height:32px;line-height:20px;font-size:20px}.preview-button::ng-deep .mat-button-wrapper{line-height:20px;padding:0}.preview-button::ng-deep .mat-button-wrapper .mat-icon{font-size:20px;padding-top:4px}.unsaved-upload-indicator{font-size:20px;padding-top:4px}\n"], components: [{ type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }] });
+FileAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: FileAttributeDisplayComponent, selector: "mantle-file-attribute-display", inputs: { value: "value" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n  <div fxFlex=\"0 1 auto\">{{ value?.filename }}</div>\n  <div fxFlex=\"1 1 auto\">\n    <button *ngIf=\"value?.source_url\"\n        mat-mini-fab\n        color=\"primary\"\n        class=\"preview-button\"\n        click-stop-propagation\n        (click)=\"openPreviewDialog()\">\n      <mat-icon>attach_file</mat-icon>\n    </button>\n    <mat-icon class=\"unsaved-upload-indicator\" *ngIf=\"isString(value)\">attach_file</mat-icon>\n  </div>\n</div>\n", styles: [".preview-button{width:32px;height:32px;line-height:20px;font-size:20px}.preview-button::ng-deep .mat-button-wrapper{line-height:20px;padding:0}.preview-button::ng-deep .mat-button-wrapper .mat-icon{font-size:20px;padding-top:4px}.unsaved-upload-indicator{font-size:20px;padding-top:4px}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: FileAttributeDisplayComponent, decorators: [{
             type: Component,
             args: [{
@@ -879,7 +1016,7 @@ class ImageAttributeDisplayComponent {
     isString(val) { return (typeof val === 'string') && (val.length > 0); }
 }
 ImageAttributeDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ImageAttributeDisplayComponent, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-ImageAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ImageAttributeDisplayComponent, selector: "mantle-image-attribute-display", inputs: { value: "value" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n  <div fxFlex=\"0 1 auto\">{{ value?.filename }}</div>\n  <div fxFlex=\"1 1 auto\">\n    <button *ngIf=\"value?.source_url\"\n        mat-mini-fab\n        color=\"primary\"\n        class=\"preview-button\"\n        click-stop-propagation\n        (click)=\"openPreviewDialog()\">\n      <mat-icon>image</mat-icon>\n    </button>\n  </div>\n  <mat-icon class=\"unsaved-upload-indicator\" *ngIf=\"isString(value)\">image</mat-icon>\n</div>\n", styles: [".preview-button{width:32px;height:32px;line-height:20px;font-size:20px}.preview-button::ng-deep .mat-button-wrapper{line-height:20px;padding:0}.preview-button::ng-deep .mat-button-wrapper .mat-icon{font-size:20px;padding-top:4px}.unsaved-upload-indicator{font-size:20px;padding-top:4px}\n"], components: [{ type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }] });
+ImageAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ImageAttributeDisplayComponent, selector: "mantle-image-attribute-display", inputs: { value: "value" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n  <div fxFlex=\"0 1 auto\">{{ value?.filename }}</div>\n  <div fxFlex=\"1 1 auto\">\n    <button *ngIf=\"value?.source_url\"\n        mat-mini-fab\n        color=\"primary\"\n        class=\"preview-button\"\n        click-stop-propagation\n        (click)=\"openPreviewDialog()\">\n      <mat-icon>image</mat-icon>\n    </button>\n  </div>\n  <mat-icon class=\"unsaved-upload-indicator\" *ngIf=\"isString(value)\">image</mat-icon>\n</div>\n", styles: [".preview-button{width:32px;height:32px;line-height:20px;font-size:20px}.preview-button::ng-deep .mat-button-wrapper{line-height:20px;padding:0}.preview-button::ng-deep .mat-button-wrapper .mat-icon{font-size:20px;padding-top:4px}.unsaved-upload-indicator{font-size:20px;padding-top:4px}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ImageAttributeDisplayComponent, decorators: [{
             type: Component,
             args: [{
@@ -901,7 +1038,7 @@ class LinkAttributeDisplayComponent {
     }
 }
 LinkAttributeDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LinkAttributeDisplayComponent, deps: [{ token: i1$4.Router }], target: i0.ɵɵFactoryTarget.Component });
-LinkAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LinkAttributeDisplayComponent, 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::ng-deep .mat-button-wrapper{line-height:20px;padding:0}.link-button::ng-deep .mat-button-wrapper .mat-icon{font-size:20px;padding-top:6px}\n"], components: [{ type: i5.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }] });
+LinkAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LinkAttributeDisplayComponent, 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::ng-deep .mat-button-wrapper{line-height:20px;padding:0}.link-button::ng-deep .mat-button-wrapper .mat-icon{font-size:20px;padding-top:6px}\n"], components: [{ type: i3$1.MatAnchor, selector: "a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab],             a[mat-mini-fab], a[mat-stroked-button], a[mat-flat-button]", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matButton", "matAnchor"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LinkAttributeDisplayComponent, decorators: [{
             type: Component,
             args: [{
@@ -922,7 +1059,7 @@ class ThumbnailDisplayComponent {
     }
 }
 ThumbnailDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ThumbnailDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ThumbnailDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ThumbnailDisplayComponent, selector: "mantle-thumbnail-display", inputs: { value: "value", size: "size", placeholder: "placeholder", circular: "circular" }, ngImport: i0, template: "<div class=\"thumbnail-wrapper\" [ngStyle]=\"{ width: size, height: size }\">\n  <img *ngIf=\"value\" [attr.src]=\"value | secureImage | async\" [class.circular]=\"circular\" />\n  <mat-icon *ngIf=\"!value && placeholder\" [style.font-size]=\"size\">{{ placeholder }}</mat-icon>\n</div>\n", styles: [".thumbnail-wrapper{vertical-align:middle}img{box-sizing:border-box;width:100%;height:100%;padding:2px}img.circular{border-radius:50%}.mat-icon{width:100%;height:100%}\n"], components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe, "secureImage": SecureImagePipe } });
+ThumbnailDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ThumbnailDisplayComponent, selector: "mantle-thumbnail-display", inputs: { value: "value", size: "size", placeholder: "placeholder", circular: "circular" }, ngImport: i0, template: "<div class=\"thumbnail-wrapper\" [ngStyle]=\"{ width: size, height: size }\">\n  <img *ngIf=\"value\" [attr.src]=\"value | secureImage | async\" [class.circular]=\"circular\" />\n  <mat-icon *ngIf=\"!value && placeholder\" [style.font-size]=\"size\">{{ placeholder }}</mat-icon>\n</div>\n", styles: [".thumbnail-wrapper{vertical-align:middle}img{box-sizing:border-box;width:100%;height:100%;padding:2px}img.circular{border-radius:50%}.mat-icon{width:100%;height:100%}\n"], components: [{ type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4.AsyncPipe, "secureImage": SecureImagePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ThumbnailDisplayComponent, decorators: [{
             type: Component,
             args: [{
@@ -965,7 +1102,7 @@ class ActionsAttributeDisplayComponent {
     }
 }
 ActionsAttributeDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ActionsAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ActionsAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ActionsAttributeDisplayComponent, selector: "mantle-actions-attribute-display", inputs: { value: "value", actions: "actions" }, ngImport: i0, template: "<ng-container *ngFor=\"let action of actions\">\n  <button mat-icon-button\n          *ngIf=\"action.show\"\n          click-stop-propagation\n          [color]=\"action.colour\"\n          type=\"button\"\n          (click)=\"action.onClick(value)\">\n    <mat-icon>{{ action.icon }}</mat-icon>\n  </button>\n</ng-container>\n", styles: [""], components: [{ type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }] });
+ActionsAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ActionsAttributeDisplayComponent, selector: "mantle-actions-attribute-display", inputs: { value: "value", actions: "actions" }, ngImport: i0, template: "<ng-container *ngFor=\"let action of actions\">\n  <button mat-icon-button\n          *ngIf=\"action.show\"\n          click-stop-propagation\n          [color]=\"action.colour\"\n          type=\"button\"\n          (click)=\"action.onClick(value)\">\n    <mat-icon>{{ action.icon }}</mat-icon>\n  </button>\n</ng-container>\n", styles: [""], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ActionsAttributeDisplayComponent, decorators: [{
             type: Component,
             args: [{
@@ -979,6 +1116,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }] } });
 
+class IconAttributeDisplayComponent {
+    constructor() {
+        this.value = {};
+    }
+}
+IconAttributeDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: IconAttributeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: IconAttributeDisplayComponent, selector: "mantle-icon-attribute-display", inputs: { value: "value" }, ngImport: i0, template: "<mat-icon *ngIf=\"value\">{{ value }}</mat-icon>\n", styles: [""], components: [{ type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: IconAttributeDisplayComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mantle-icon-attribute-display',
+                    templateUrl: './icon-attribute-display.component.html',
+                    styleUrls: ['./icon-attribute-display.component.scss']
+                }]
+        }], propDecorators: { value: [{
+                type: Input
+            }] } });
+
 class DynamicAttributeDisplayComponent {
     constructor(arrayService) {
         this.arrayService = arrayService;
@@ -994,7 +1149,7 @@ class DynamicAttributeDisplayComponent {
     }
 }
 DynamicAttributeDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicAttributeDisplayComponent, deps: [{ token: ArrayService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: { value: "value", field: "field", fieldType: "fieldType", options: "options" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"field?.type || fieldType\">\n\n  <ng-container *ngSwitchCase=\"'chips'\">\n    <mantle-chip-attribute-display [value]=\"value\" [options]=\"options\">\n    </mantle-chip-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'file'\">\n    <mantle-file-attribute-display [value]=\"value\">\n    </mantle-file-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'image'\">\n    <mantle-image-attribute-display [value]=\"value\">\n    </mantle-image-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'link'\">\n    <mantle-link-attribute-display [value]=\"value\">\n    </mantle-link-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'thumbnail'\">\n    <mantle-thumbnail-display [value]=\"value\"\n        [size]=\"options.size\" [placeholder]=\"options.placeholder\" [circular]=\"options.circular\">\n    </mantle-thumbnail-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'dropdown'\">\n    {{ dropdownValueLabel(value) | dynamicPipe: fieldType }}\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'markdown'\">\n    <mantle-markdown-attribute-display [value]=\"value\">\n    </mantle-markdown-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'actions'\">\n    <mantle-actions-attribute-display [actions]=\"field?.options?.actions!\" [value]=\"value\">\n    </mantle-actions-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    {{ value | dynamicPipe: fieldType }}\n  </ng-container>\n\n</ng-container>\n", styles: [""], components: [{ type: ChipAttributeDisplayComponent, selector: "mantle-chip-attribute-display", inputs: ["value", "options"] }, { type: FileAttributeDisplayComponent, selector: "mantle-file-attribute-display", inputs: ["value"] }, { type: ImageAttributeDisplayComponent, selector: "mantle-image-attribute-display", inputs: ["value"] }, { type: LinkAttributeDisplayComponent, selector: "mantle-link-attribute-display", inputs: ["value"] }, { type: ThumbnailDisplayComponent, selector: "mantle-thumbnail-display", inputs: ["value", "size", "placeholder", "circular"] }, { type: MarkdownAttributeDisplayComponent, selector: "mantle-markdown-attribute-display", inputs: ["value"] }, { type: ActionsAttributeDisplayComponent, selector: "mantle-actions-attribute-display", inputs: ["value", "actions"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dynamicPipe": DynamicPipe } });
+DynamicAttributeDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: { value: "value", field: "field", fieldType: "fieldType", options: "options" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"field?.type || fieldType\">\n\n  <ng-container *ngSwitchCase=\"'chips'\">\n    <mantle-chip-attribute-display [value]=\"value\" [options]=\"options\">\n    </mantle-chip-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'chips-lg'\">\n    <mantle-chip-attribute-display [value]=\"value\" [options]=\"options\">\n    </mantle-chip-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'file'\">\n    <mantle-file-attribute-display [value]=\"value\">\n    </mantle-file-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'image'\">\n    <mantle-image-attribute-display [value]=\"value\">\n    </mantle-image-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'link'\">\n    <mantle-link-attribute-display [value]=\"value\">\n    </mantle-link-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'thumbnail'\">\n    <mantle-thumbnail-display [value]=\"value\"\n        [size]=\"options.size\" [placeholder]=\"options.placeholder\" [circular]=\"options.circular\">\n    </mantle-thumbnail-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'dropdown'\">\n    {{ dropdownValueLabel(value) | dynamicPipe: fieldType }}\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'markdown'\">\n    <mantle-markdown-attribute-display [value]=\"value\">\n    </mantle-markdown-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'actions'\">\n    <mantle-actions-attribute-display [actions]=\"field?.options?.actions!\" [value]=\"value\">\n    </mantle-actions-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'icon'\">\n    <mantle-icon-attribute-display [value]=\"value\">\n    </mantle-icon-attribute-display>\n  </ng-container>\n\n  <ng-container *ngSwitchDefault>\n    {{ value | dynamicPipe: fieldType }}\n  </ng-container>\n\n</ng-container>\n", styles: [""], components: [{ type: ChipAttributeDisplayComponent, selector: "mantle-chip-attribute-display", inputs: ["value", "options"] }, { type: FileAttributeDisplayComponent, selector: "mantle-file-attribute-display", inputs: ["value"] }, { type: ImageAttributeDisplayComponent, selector: "mantle-image-attribute-display", inputs: ["value"] }, { type: LinkAttributeDisplayComponent, selector: "mantle-link-attribute-display", inputs: ["value"] }, { type: ThumbnailDisplayComponent, selector: "mantle-thumbnail-display", inputs: ["value", "size", "placeholder", "circular"] }, { type: MarkdownAttributeDisplayComponent, selector: "mantle-markdown-attribute-display", inputs: ["value"] }, { type: ActionsAttributeDisplayComponent, selector: "mantle-actions-attribute-display", inputs: ["value", "actions"] }, { type: IconAttributeDisplayComponent, selector: "mantle-icon-attribute-display", inputs: ["value"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "dynamicPipe": DynamicPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicAttributeDisplayComponent, decorators: [{
             type: Component,
             args: [{
@@ -1035,14 +1190,23 @@ class GridDetailsSectionComponent {
         });
     }
     getColSpanForField(attribute) {
-        return (attribute.type == 'text' || attribute.type == 'string-lg' || attribute.type == 'markdown') ? this.numColumns : 1;
+        if (this.numColumns == 1)
+            return 1;
+        else if (['text', 'markdown'].includes(attribute.type))
+            return this.numColumns;
+        else if (attribute.type.endsWith('-lg'))
+            return this.numColumns;
+        else if (attribute.type.endsWith('-md'))
+            return 2;
+        else
+            return 1;
     }
     getRowSpanForField(attribute) {
         return (attribute.type == 'text' || attribute.type == 'markdown') ? 2 : 1;
     }
 }
 GridDetailsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GridDetailsSectionComponent, deps: [{ token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
-GridDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: { data: "data", section: "section", defaultRowHeight: "defaultRowHeight" }, ngImport: i0, template: "<div class=\"grid-details-layout\">\n  <mat-grid-list\n      [rowHeight]=\"section.rowHeight || defaultRowHeight\"\n      [cols]=\"section.singleColumn ? 1 : numColumns\"\n      [class.multi-column]=\"section.singleColumn ? false : numColumns > 1\">\n\n    <ng-container *ngFor=\"let field of section.elements\">\n      <mat-grid-tile *ngIf=\"!field.hidden\" [colspan]=\"section.singleColumn ? 1 : getColSpanForField(field)\" [rowspan]=\"getRowSpanForField(field)\">\n        <div class=\"value-area\">\n          <div class=\"attribute-label\">\n            {{ field.label }}\n          </div>\n          <div class=\"attribute-value\">\n            <mantle-dynamic-attribute-display [fieldType]=\"field.type\" [value]=\"data[field.attr]\" [field]=\"field\"></mantle-dynamic-attribute-display>\n          </div>\n        </div>\n      </mat-grid-tile>\n    </ng-container>\n\n  </mat-grid-list>\n</div>\n", styles: [".value-area{height:100%;box-sizing:border-box;padding-top:10px;padding-bottom:10px}.value-area .attribute-label{text-transform:uppercase;font-size:11px;line-height:1rem;height:1rem;font-weight:400;color:#0000008a;margin-bottom:4px}\n"], components: [{ type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+GridDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: { data: "data", section: "section", defaultRowHeight: "defaultRowHeight" }, ngImport: i0, template: "<div class=\"grid-details-layout\">\n  <mat-grid-list\n      [rowHeight]=\"section.rowHeight || defaultRowHeight\"\n      [cols]=\"section.singleColumn ? 1 : numColumns\"\n      [class.multi-column]=\"section.singleColumn ? false : numColumns > 1\">\n\n    <ng-container *ngFor=\"let field of section.elements\">\n      <mat-grid-tile *ngIf=\"!field.hidden\" [colspan]=\"section.singleColumn ? 1 : getColSpanForField(field)\" [rowspan]=\"getRowSpanForField(field)\">\n        <div class=\"value-area\">\n          <div class=\"attribute-label\" [class.with-tooltip]=\"field.tooltip\">\n            {{ field.label }}\n            <button *ngIf=\"field.tooltip\"\n                    mat-icon-button\n                    disabled\n                    disabledInteractive\n                    disableRipple\n                    [matTooltip]=\"field.tooltip\"\n                    matTooltipPosition=\"right\">\n              <mat-icon>help</mat-icon>\n            </button>\n          </div>\n          <div class=\"attribute-value\">\n            <mantle-dynamic-attribute-display [fieldType]=\"field.type\" [value]=\"data[field.attr]\" [field]=\"field\"></mantle-dynamic-attribute-display>\n          </div>\n        </div>\n      </mat-grid-tile>\n    </ng-container>\n\n  </mat-grid-list>\n</div>\n", styles: [".value-area{height:100%;box-sizing:border-box;padding-top:10px;padding-bottom:10px}.value-area .attribute-label{text-transform:uppercase;font-size:11px;line-height:1rem;height:1rem;font-weight:400;color:#0000008a;margin-bottom:4px}.value-area .with-tooltip .mat-icon-button{line-height:1rem;width:1rem;height:1rem}.value-area .with-tooltip .mat-icon-button .mat-icon{font-size:16px}\n"], components: [{ type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GridDetailsSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -1075,7 +1239,7 @@ class DialogNestedDetailsComponent {
     }
 }
 DialogNestedDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DialogNestedDetailsComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-DialogNestedDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DialogNestedDetailsComponent, selector: "mantle-dialog-nested-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)=\"onClose()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content>\n\n  <mantle-grid-details-section\n      [section]=\"section\"\n      [data]=\"data\">>\n  </mantle-grid-details-section>\n\n</mat-dialog-content>\n\n<mat-dialog-actions *ngIf=\"showEditButton\" fxLayout=\"row\" class=\"actions-section\">\n  <div fxFlex=\"1 1 auto\"></div>\n  <button fxFlex=\"0 0 auto\" mat-button color=\"primary\" (click)=\"onEdit()\">Edit</button>\n</mat-dialog-actions>\n", styles: [""], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: ["data", "section", "defaultRowHeight"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+DialogNestedDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DialogNestedDetailsComponent, selector: "mantle-dialog-nested-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)=\"onClose()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content>\n\n  <mantle-grid-details-section\n      [section]=\"section\"\n      [data]=\"data\">>\n  </mantle-grid-details-section>\n\n</mat-dialog-content>\n\n<mat-dialog-actions *ngIf=\"showEditButton\" fxLayout=\"row\" class=\"actions-section\">\n  <div fxFlex=\"1 1 auto\"></div>\n  <button fxFlex=\"0 0 auto\" mat-button color=\"primary\" (click)=\"onEdit()\">{{ 'mantle.buttons.edit' | translate }}</button>\n</mat-dialog-actions>\n", styles: [""], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: ["data", "section", "defaultRowHeight"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DialogNestedDetailsComponent, decorators: [{
             type: Component,
             args: [{
@@ -1190,9 +1354,8 @@ class DynamicTableComponent {
         this.dataSource.listSubject.next(this.items);
     }
     listColumnAttrs() {
-        return this.columns.map(column => {
-            return column.attr;
-        });
+        return this.columns.filter(column => { return !column.hidden; })
+            .map(column => { return column.attr; });
     }
     onRowClicked(row) {
         if (!this.withClickableRows)
@@ -1201,7 +1364,7 @@ class DynamicTableComponent {
     }
 }
 DynamicTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicTableComponent, deps: [{ token: ArrayService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicTableComponent, selector: "mantle-dynamic-table", inputs: { columns: "columns", items: "items", withClickableRows: "withClickableRows" }, outputs: { rowClicked: "rowClicked" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"horizontal-scroll-table\">\n  <table mat-table class=\"full-width\" matSort>\n\n    <ng-container *ngFor=\"let column of columns\">\n      <ng-container matColumnDef=\"{{ column.attr }}\" *ngIf=\"column.type != 'actions'\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header }}</th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mantle-dynamic-attribute-display [fieldType]=\"column.type\" [value]=\"row[column.attr]\" [field]=\"column\"></mantle-dynamic-attribute-display>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"{{ column.attr }}\" *ngIf=\"column.type == 'actions'\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"true\">{{ column.header }}</th>\n        <td mat-cell *matCellDef=\"let row\" class=\"actions-column\">\n          <mantle-dynamic-attribute-display [fieldType]=\"column.type\" [value]=\"row\" [field]=\"column\"></mantle-dynamic-attribute-display>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"listColumnAttrs()\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: listColumnAttrs();\"\n        (click)=\"onRowClicked(row)\"\n        [class.clickable-row]=\"withClickableRows\">\n    </tr>\n\n  </table>\n</div>\n\n<mat-paginator #paginator\n    [length]=\"items.length\"\n    [pageIndex]=\"0\"\n    [pageSize]=\"10\"\n    [pageSizeOptions]=\"[5, 10, 20]\">\n</mat-paginator>\n", styles: [".actions-column{width:1px;text-align:right}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "arrowPosition", "sortActionDescription", "disableClear", "mat-sort-header", "start"], exportAs: ["matSortHeader"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i5$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortActive"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+DynamicTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicTableComponent, selector: "mantle-dynamic-table", inputs: { columns: "columns", items: "items", withClickableRows: "withClickableRows" }, outputs: { rowClicked: "rowClicked" }, 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 }], usesOnChanges: true, ngImport: i0, template: "<div class=\"horizontal-scroll-table\">\n  <table mat-table class=\"full-width\" matSort>\n\n    <ng-container *ngFor=\"let column of columns\">\n      <ng-container *ngIf=\"!column.hidden\">\n        <ng-container matColumnDef=\"{{ column.attr }}\" *ngIf=\"column.type != 'actions'\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ column.header }}</th>\n          <td mat-cell *matCellDef=\"let row\">\n            <mantle-dynamic-attribute-display [fieldType]=\"column.type\" [value]=\"row[column.attr]\" [field]=\"column\"></mantle-dynamic-attribute-display>\n          </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"{{ column.attr }}\" *ngIf=\"column.type == 'actions'\">\n          <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"true\">{{ column.header }}</th>\n          <td mat-cell *matCellDef=\"let row\" class=\"actions-column\">\n            <mantle-dynamic-attribute-display [fieldType]=\"column.type\" [value]=\"row\" [field]=\"column\"></mantle-dynamic-attribute-display>\n          </td>\n        </ng-container>\n      </ng-container>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"listColumnAttrs()\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: listColumnAttrs();\"\n        (click)=\"onRowClicked(row)\"\n        [class.clickable-row]=\"withClickableRows\">\n    </tr>\n\n  </table>\n</div>\n\n<mat-paginator #paginator\n    [length]=\"items.length\"\n    [pageIndex]=\"0\"\n    [pageSize]=\"10\"\n    [pageSizeOptions]=\"[5, 10, 20]\">\n</mat-paginator>\n", styles: [".actions-column{width:1px;text-align:right}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "arrowPosition", "sortActionDescription", "disableClear", "mat-sort-header", "start"], exportAs: ["matSortHeader"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortActive"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -1241,11 +1404,14 @@ class TableDetailsSectionComponent {
             showEditButton: false
         };
         dialogConfig.width = '80%';
+        if (this.section.config.modal_section) {
+            dialogConfig.data.section = this.detailPageService.detailDialogLayoutChanges(this.section.config.modal_section, record);
+        }
         this.dialog.open(DialogNestedDetailsComponent, dialogConfig);
     }
 }
 TableDetailsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TableDetailsSectionComponent, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-TableDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TableDetailsSectionComponent, selector: "mantle-table-details-section", inputs: { data: "data", section: "section" }, ngImport: i0, template: "<div class=\"table-section-content\">\n  <mantle-dynamic-table\n      [columns]=\"section.elements\"\n      [items]=\"data[section.config.attr]\"\n      [withClickableRows]=\"true\"\n      (rowClicked)=\"openDetailsDialog($event)\">\n  </mantle-dynamic-table>\n</div>\n", styles: [""], components: [{ type: DynamicTableComponent, selector: "mantle-dynamic-table", inputs: ["columns", "items", "withClickableRows"], outputs: ["rowClicked"] }] });
+TableDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TableDetailsSectionComponent, selector: "mantle-table-details-section", inputs: { data: "data", section: "section", detailPageService: "detailPageService" }, ngImport: i0, template: "<div class=\"table-section-content\">\n  <mantle-dynamic-table\n      [columns]=\"section.elements\"\n      [items]=\"data[section.config.attr]\"\n      [withClickableRows]=\"true\"\n      (rowClicked)=\"openDetailsDialog($event)\">\n  </mantle-dynamic-table>\n</div>\n", styles: [""], components: [{ type: DynamicTableComponent, selector: "mantle-dynamic-table", inputs: ["columns", "items", "withClickableRows"], outputs: ["rowClicked"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TableDetailsSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -1257,11 +1423,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }], section: [{
                 type: Input
+            }], detailPageService: [{
+                type: Input
             }] } });
 
 class DynamicFormField {
     constructor(options) {
         this.label = options.label;
+        this.tooltip = options.tooltip || '';
         this.attr = options.attr;
         this.type = options.type;
         this.options = options.options || {};
@@ -1338,7 +1507,7 @@ TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => TextInputComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput\n      type=\"text\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      type=\"text\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -1387,7 +1556,7 @@ TextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             useExisting: forwardRef(() => TextareaComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <textarea matInput\n      [rows]=\"rows\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n  </textarea>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: ["textarea{resize:none}\n"], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <textarea matInput\n      [rows]=\"rows\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n  </textarea>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: ["textarea{resize:none}\n"], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TextareaComponent, decorators: [{
             type: Component,
             args: [{
@@ -1452,7 +1621,7 @@ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             useExisting: forwardRef(() => DropdownComponent),
             multi: true
         }
-    ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-select\n      [(ngModel)]=\"value\"\n      (selectionChange)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\">\n    <mat-option value=\"\"></mat-option>\n    <mat-option *ngFor=\"let option of dropdownValues\" [value]=\"option.value\">\n      {{option.label}}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$2.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <mat-select\n      [(ngModel)]=\"value\"\n      (selectionChange)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\">\n    <mat-option value=\"\"></mat-option>\n    <mat-option *ngFor=\"let option of dropdownValues\" [value]=\"option.value\">\n      {{option.label}}\n    </mat-option>\n  </mat-select>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
             args: [{
@@ -1536,7 +1705,7 @@ DatepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useExisting: forwardRef(() => DatepickerComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput\n      [matDatepicker]=\"picker\"\n      [(ngModel)]=\"selectedDate\"\n      (change)=\"onDateEntered($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      (dateChange)=\"onDateSelected($event.value)\"\n      autocomplete=\"off\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i2$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      [matDatepicker]=\"picker\"\n      [(ngModel)]=\"selectedDate\"\n      (change)=\"onDateEntered($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      (dateChange)=\"onDateSelected($event.value)\"\n      autocomplete=\"off\">\n  <mat-datepicker-toggle matSuffix [for]=\"picker\" tabindex=\"-1\"></mat-datepicker-toggle>\n  <mat-datepicker #picker></mat-datepicker>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i2$4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1618,7 +1787,7 @@ DatetimepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: forwardRef(() => DatetimepickerComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput\n      [ngxMatDatetimePicker]=\"picker\"\n      [(ngModel)]=\"selectedDateTime\"\n      (change)=\"onDateTimeEntered($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      (dateChange)=\"onDateTimeSelected($event.value)\"\n      autocomplete=\"off\">\n  <mat-datepicker-toggle matSuffix [for]=\"$any(picker)\"></mat-datepicker-toggle>\n  <ngx-mat-datetime-picker #picker [defaultTime]=\"[8,0,0]\"></ngx-mat-datetime-picker>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$5.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["startView", "startAt", "defaultColor", "color", "touchUi", "hideTime", "disabled", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime", "calendarHeaderComponent", "panelClass", "dateClass"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$5.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["value", "ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      [ngxMatDatetimePicker]=\"picker\"\n      [(ngModel)]=\"selectedDateTime\"\n      (change)=\"onDateTimeEntered($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      (dateChange)=\"onDateTimeSelected($event.value)\"\n      autocomplete=\"off\">\n  <mat-datepicker-toggle matSuffix [for]=\"$any(picker)\" tabindex=\"-1\"></mat-datepicker-toggle>\n  <ngx-mat-datetime-picker #picker [defaultTime]=\"[8,0,0]\"></ngx-mat-datetime-picker>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i3$5.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["startView", "startAt", "defaultColor", "color", "touchUi", "hideTime", "disabled", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime", "calendarHeaderComponent", "panelClass", "dateClass"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$5.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["value", "ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DatetimepickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1643,6 +1812,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }] } });
 
+class TimeInputComponent {
+    constructor() {
+        this.value = null;
+        this.onChange = (newValue) => { };
+        this.onTouched = () => { };
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    ngOnChanges() { }
+    writeValue(newValue) {
+        this.value = newValue;
+        this.onChange(newValue);
+    }
+    onValueChanged(event) {
+        this.onChange(this.value);
+    }
+    validate(control) {
+        if (!control.value) {
+            this.errorMessage = this.error;
+            return null;
+        }
+        this.errorMessage = '';
+        if (control.value === null || control.value === '')
+            return null;
+        if (/^([0-1][0-9]|2[0-3]):[0-5][0-9]$/.test(control.value))
+            return null;
+        this.errorMessage = 'must have format HH:mm';
+        return [this.errorMessage];
+    }
+}
+TimeInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimeInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TimeInputComponent, selector: "mantle-time-input", inputs: { label: "label", disable: "disable", required: "required", error: "error" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TimeInputComponent),
+            multi: true
+        },
+        {
+            provide: NG_VALIDATORS,
+            useExisting: forwardRef(() => TimeInputComponent),
+            multi: true,
+        },
+    ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"errorMessage\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      type=\"text\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <mat-hint *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</mat-form-field>\n", styles: ["input{text-align:right}\n"], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TimeInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mantle-time-input',
+                    templateUrl: './time-input.component.html',
+                    styleUrls: ['./time-input.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TimeInputComponent),
+                            multi: true
+                        },
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: forwardRef(() => TimeInputComponent),
+                            multi: true,
+                        },
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], disable: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }] } });
+
 class NumberInputComponent {
     constructor() {
         this.value = null;
@@ -1695,7 +1936,7 @@ NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => NumberInputComponent),
             multi: true,
         },
-    ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"errorMessage\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput\n      type=\"number\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <mat-hint *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</mat-form-field>\n", styles: ["input{text-align:right}\n"], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"errorMessage\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      type=\"number\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <mat-hint *ngIf=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</mat-hint>\n</mat-form-field>\n", styles: ["input{text-align:right}\n"], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -1784,7 +2025,7 @@ FilepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             useExisting: forwardRef(() => FilepickerComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput\n      type=\"text\"\n      [attr.value]=\"currentAttachment?.filename\"\n      (click)=\"fileInput.click()\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <button *ngIf=\"currentAttachment?.filename\" mat-icon-button matSuffix (click)=\"clearAttachment()\" [disabled]=\"disable\" click-stop-propagation>\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <button *ngIf=\"!uploadInProgress\" mat-icon-button matSuffix (click)=\"fileInput.click()\" [disabled]=\"disable\">\n    <mat-icon>attach_file</mat-icon>\n  </button>\n\n  <mat-spinner *ngIf=\"uploadInProgress\" matSuffix [diameter]=\"18\"></mat-spinner>\n\n  <input #fileInput\n      type=\"file\"\n      hidden\n      (change)=\"onFileSelected($event)\">\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      type=\"text\"\n      [attr.value]=\"currentAttachment?.filename\"\n      (click)=\"fileInput.click()\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <button *ngIf=\"currentAttachment?.filename\" mat-icon-button matSuffix tabindex=\"-1\" (click)=\"clearAttachment()\" [disabled]=\"disable\" click-stop-propagation>\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <button *ngIf=\"!uploadInProgress\" mat-icon-button matSuffix tabindex=\"-1\" (click)=\"fileInput.click()\" [disabled]=\"disable\">\n    <mat-icon>attach_file</mat-icon>\n  </button>\n\n  <mat-spinner *ngIf=\"uploadInProgress\" matSuffix [diameter]=\"18\"></mat-spinner>\n\n  <input #fileInput\n      type=\"file\"\n      hidden\n      (change)=\"onFileSelected($event)\">\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: FilepickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -1842,7 +2083,7 @@ class ImageCropperComponent {
     }
 }
 ImageCropperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ImageCropperComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-ImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ImageCropperComponent, selector: "mantle-image-cropper", ngImport: i0, template: "<div mat-dialog-title fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"dialog-title-section\">\n  <h2 fxFlex=\"1 1 auto\">Crop Image</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>Original</h5>\n    </div>\n    <div fxFlex=\"0 0 100px\">\n      <h5>Preview</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()\">Save</button>\n</mat-dialog-actions>\n", styles: [".dialog-title-section h2{margin:0;padding-left:16px}.cropper-wrapper{max-width:532px}.preview-section img{width:100%;border:1px solid lightgrey}.actions-section button{text-transform:uppercase}\n"], components: [{ type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$3.ImageCropperComponent, selector: "image-cropper", inputs: ["format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled", "imageChangedEvent", "imageURL", "imageBase64", "imageFile"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$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"] }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
+ImageCropperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ImageCropperComponent, selector: "mantle-image-cropper", ngImport: i0, template: "<div mat-dialog-title fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"dialog-title-section\">\n  <h2 fxFlex=\"1 1 auto\">{{ '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: [".dialog-title-section h2{margin:0;padding-left:16px}.cropper-wrapper{max-width:532px}.preview-section img{width:100%;border:1px solid lightgrey}.actions-section button{text-transform:uppercase}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$3.ImageCropperComponent, selector: "image-cropper", inputs: ["format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled", "imageChangedEvent", "imageURL", "imageBase64", "imageFile"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$2.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"] }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ImageCropperComponent, decorators: [{
             type: Component,
             args: [{
@@ -1949,7 +2190,7 @@ ImagepickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => ImagepickerComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput\n      type=\"text\"\n      [attr.value]=\"currentAttachment?.filename\"\n      (click)=\"fileInput.click()\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <button *ngIf=\"currentAttachment?.filename\" mat-icon-button matSuffix (click)=\"clearAttachment()\" [disabled]=\"disable\" click-stop-propagation>\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <button *ngIf=\"!uploadInProgress\" mat-icon-button matSuffix (click)=\"fileInput.click()\" [disabled]=\"disable\">\n    <mat-icon>image</mat-icon>\n  </button>\n\n  <mat-spinner *ngIf=\"uploadInProgress\" matSuffix [diameter]=\"18\"></mat-spinner>\n\n  <input #fileInput\n      type=\"file\"\n      accept=\"image/*\"\n      hidden\n      (change)=\"onFileSelected($event)\">\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      type=\"text\"\n      [attr.value]=\"currentAttachment?.filename\"\n      (click)=\"fileInput.click()\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <button *ngIf=\"currentAttachment?.filename\" mat-icon-button matSuffix tabindex=\"-1\" (click)=\"clearAttachment()\" [disabled]=\"disable\" click-stop-propagation>\n    <mat-icon>close</mat-icon>\n  </button>\n\n  <button *ngIf=\"!uploadInProgress\" mat-icon-button matSuffix tabindex=\"-1\" (click)=\"fileInput.click()\" [disabled]=\"disable\">\n    <mat-icon>image</mat-icon>\n  </button>\n\n  <mat-spinner *ngIf=\"uploadInProgress\" matSuffix [diameter]=\"18\"></mat-spinner>\n\n  <input #fileInput\n      type=\"file\"\n      accept=\"image/*\"\n      hidden\n      (change)=\"onFileSelected($event)\">\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ImagepickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -2031,7 +2272,7 @@ ChipInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             useExisting: forwardRef(() => ChipInputComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <mat-chip-list #chipList\n      [disabled]=\"disable\">\n    <mat-chip *ngFor=\"let chip of chips\"\n        color=\"accent\" selected\n        [removable]=\"removable\"\n        (removed)=\"remove(chip)\">\n      {{ chip.name }}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input [matChipInputFor]=\"chipList\"\n           [matChipInputAddOnBlur]=\"true\"\n           (matChipInputTokenEnd)=\"add($event)\"\n           autocomplete=\"off\">\n  </mat-chip-list>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatChipRemove, selector: "[matChipRemove]" }, { type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputSeparatorKeyCodes", "placeholder", "id", "matChipInputFor", "matChipInputAddOnBlur", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <mat-chip-list #chipList\n      [disabled]=\"disable\">\n    <mat-chip *ngFor=\"let chip of chips\"\n        color=\"accent\" selected\n        [removable]=\"removable\"\n        (removed)=\"remove(chip)\">\n      {{ chip.name }}\n      <mat-icon matChipRemove *ngIf=\"removable\">cancel</mat-icon>\n    </mat-chip>\n\n    <input [matChipInputFor]=\"chipList\"\n           [matChipInputAddOnBlur]=\"true\"\n           (matChipInputTokenEnd)=\"add($event)\"\n           autocomplete=\"off\">\n  </mat-chip-list>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2.MatChipList, selector: "mat-chip-list", inputs: ["aria-orientation", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "selectable", "tabIndex", "errorStateMatcher"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatChipRemove, selector: "[matChipRemove]" }, { type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputSeparatorKeyCodes", "placeholder", "id", "matChipInputFor", "matChipInputAddOnBlur", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ChipInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -2080,7 +2321,7 @@ PasswordInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             useExisting: forwardRef(() => PasswordInputComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput\n      [type]=\"hide ? 'password' : 'text'\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <button mat-icon-button matSuffix type=\"button\" (click)=\"hide = !hide\">\n    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\n  </button>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      [type]=\"hide ? 'password' : 'text'\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      autocomplete=\"off\">\n\n  <button mat-icon-button matSuffix type=\"button\" tabindex=\"-1\" (click)=\"hide = !hide\">\n    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\n  </button>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -2125,7 +2366,7 @@ MarkdownInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             useExisting: forwardRef(() => MarkdownInputComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<div class=\"markdown-input-disabled\" *ngIf=\"disable\">\n  <mat-form-field [class.mat-form-field-invalid]=\"error\">\n    <mat-label>{{ label }}</mat-label>\n\n    <markdown ngPreserveWhitespaces>\n      {{ value }}\n    </markdown>\n\n    <input matInput\n        type=\"text\"\n        [(ngModel)]=\"value\"\n        [required]=\"required\"\n        [disabled]=true\n        [hidden]=true\n        autocomplete=\"off\">\n\n    <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".markdown-input-disabled ::ng-deep .mat-form-field-underline{display:none}\n"], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1$5.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "emoji", "katex", "katexOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start"], outputs: ["error", "load", "ready"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
+    ], ngImport: i0, template: "<div class=\"markdown-input-disabled\" *ngIf=\"disable\">\n  <mat-form-field [class.mat-form-field-invalid]=\"error\">\n    <mat-label>{{ label | translate }}</mat-label>\n\n    <markdown ngPreserveWhitespaces>\n      {{ value }}\n    </markdown>\n\n    <input matInput\n        type=\"text\"\n        [(ngModel)]=\"value\"\n        [required]=\"required\"\n        [disabled]=true\n        [hidden]=true\n        autocomplete=\"off\">\n\n    <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n  </mat-form-field>\n</div>\n", styles: [".markdown-input-disabled ::ng-deep .mat-form-field-underline{display:none}\n"], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i1$5.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "emoji", "katex", "katexOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start"], outputs: ["error", "load", "ready"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MarkdownInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -2182,7 +2423,7 @@ AutocompleteInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             useExisting: forwardRef(() => AutocompleteInputComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label }}</mat-label>\n  <input matInput\n      type=\"text\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      [matAutocomplete]=\"auto\">\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onValueChanged($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option.value\">\n      {{option.label}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i5$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "async": i4.AsyncPipe } });
+    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      type=\"text\"\n      [(ngModel)]=\"value\"\n      (keyup)=\"onValueChanged($event)\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      [matAutocomplete]=\"auto\">\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onValueChanged($event)\">\n    <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option.value\">\n      {{option.label}}\n    </mat-option>\n  </mat-autocomplete>\n\n  <mat-hint *ngIf=\"error\" class=\"error-message\">{{ error }}</mat-hint>\n</mat-form-field>\n", styles: [""], components: [{ type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["color", "floatLabel", "appearance", "hideRequiredMarker", "hintLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$4.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i1$6.MatLabel, selector: "mat-label" }, { type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["id", "disabled", "required", "type", "value", "readonly", "placeholder", "errorStateMatcher", "aria-describedby"], exportAs: ["matInput"] }, { type: i3$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }], pipes: { "translate": i5.TranslatePipe, "async": i4.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AutocompleteInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -2212,7 +2453,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
 class DynamicFormFieldComponent {
 }
 DynamicFormFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicFormFieldComponent, selector: "mantle-dynamic-form-field", inputs: { field: "field", form: "form", error: "error" }, ngImport: i0, template: "<div [formGroup]=\"form\">\n  <ng-container [ngSwitch]=\"field.type\">\n\n    <mantle-text-input *ngSwitchCase=\"'string'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-text-input>\n\n    <mantle-text-input *ngSwitchCase=\"'string-lg'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-text-input>\n\n    <mantle-textarea *ngSwitchCase=\"'text'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [rows]=\"6\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-textarea>\n\n    <mantle-dropdown *ngSwitchCase=\"'dropdown'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [options]=\"field.options\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-dropdown>\n\n    <mantle-datepicker *ngSwitchCase=\"'date'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-datepicker>\n\n    <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-datetimepicker>\n\n    <mantle-number-input *ngSwitchCase=\"'number'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [options]=\"field.options\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-number-input>\n\n    <mantle-number-input *ngSwitchCase=\"'currency'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-number-input>\n\n    <mantle-filepicker *ngSwitchCase=\"'file'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-filepicker>\n\n    <mantle-imagepicker *ngSwitchCase=\"'image'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [options]=\"field.options\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-imagepicker>\n\n    <mantle-chip-input *ngSwitchCase=\"'chips'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-chip-input>\n\n    <mantle-password-input *ngSwitchCase=\"'password'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-password-input>\n\n    <mantle-markdown-input *ngSwitchCase=\"'markdown'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-markdown-input>\n\n    <mantle-autocomplete-input *ngSwitchCase=\"'autocomplete'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [options]=\"field.options\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-autocomplete-input>\n\n  </ng-container>\n</div>\n", styles: [""], components: [{ type: TextInputComponent, selector: "mantle-text-input", inputs: ["label", "disable", "required", "error"] }, { type: TextareaComponent, selector: "mantle-textarea", inputs: ["label", "rows", "disable", "required", "error"] }, { type: DropdownComponent, selector: "mantle-dropdown", inputs: ["label", "options", "disable", "required", "error"] }, { type: DatepickerComponent, selector: "mantle-datepicker", inputs: ["label", "disable", "required", "error"] }, { type: DatetimepickerComponent, selector: "mantle-datetimepicker", inputs: ["label", "disable", "required", "error"] }, { type: NumberInputComponent, selector: "mantle-number-input", inputs: ["label", "options", "disable", "required", "error"] }, { type: FilepickerComponent, selector: "mantle-filepicker", inputs: ["label", "disable", "required", "error"] }, { type: ImagepickerComponent, selector: "mantle-imagepicker", inputs: ["label", "options", "disable", "required", "error"] }, { type: ChipInputComponent, selector: "mantle-chip-input", inputs: ["label", "disable", "required", "error"] }, { type: PasswordInputComponent, selector: "mantle-password-input", inputs: ["label", "disable", "required", "error"] }, { type: MarkdownInputComponent, selector: "mantle-markdown-input", inputs: ["label", "disable", "required", "error"] }, { type: AutocompleteInputComponent, selector: "mantle-autocomplete-input", inputs: ["label", "options", "disable", "required", "error"] }], directives: [{ type: i5$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i5$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i5$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }] });
+DynamicFormFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicFormFieldComponent, selector: "mantle-dynamic-form-field", inputs: { field: "field", form: "form", error: "error" }, ngImport: i0, template: "<div [formGroup]=\"form\" [class.with-tooltip]=\"field.tooltip\">\n  <ng-container [ngSwitch]=\"field.type\">\n\n    <mantle-text-input *ngSwitchCase=\"'string'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-text-input>\n\n    <mantle-text-input *ngSwitchCase=\"'string-md'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-text-input>\n\n    <mantle-text-input *ngSwitchCase=\"'string-lg'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-text-input>\n\n    <mantle-textarea *ngSwitchCase=\"'text'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [rows]=\"6\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-textarea>\n\n    <mantle-dropdown *ngSwitchCase=\"'dropdown'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [options]=\"field.options\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-dropdown>\n\n    <mantle-datepicker *ngSwitchCase=\"'date'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-datepicker>\n\n    <mantle-datetimepicker *ngSwitchCase=\"'datetime'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-datetimepicker>\n\n    <mantle-time-input *ngSwitchCase=\"'time'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-time-input>\n\n    <mantle-number-input *ngSwitchCase=\"'number'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [options]=\"field.options\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-number-input>\n\n    <mantle-number-input *ngSwitchCase=\"'currency'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-number-input>\n\n    <mantle-filepicker *ngSwitchCase=\"'file'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-filepicker>\n\n    <mantle-imagepicker *ngSwitchCase=\"'image'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [options]=\"field.options\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-imagepicker>\n\n    <mantle-chip-input *ngSwitchCase=\"'chips'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-chip-input>\n\n    <mantle-chip-input *ngSwitchCase=\"'chips-lg'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-chip-input>\n\n    <mantle-password-input *ngSwitchCase=\"'password'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-password-input>\n\n    <mantle-markdown-input *ngSwitchCase=\"'markdown'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-markdown-input>\n\n    <mantle-autocomplete-input *ngSwitchCase=\"'autocomplete'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [options]=\"field.options\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-autocomplete-input>\n\n    <mantle-text-input *ngSwitchCase=\"'link'\"\n        [id]=\"field.attr\"\n        [formControlName]=\"field.attr\"\n        [label]=\"field.label\"\n        [required]=\"field.required\"\n        [disable]=\"field.disabled\"\n        [error]=\"error\">\n    </mantle-text-input>\n\n    <button *ngIf=\"field.tooltip\"\n            mat-icon-button\n            disabled\n            disabledInteractive\n            disableRipple\n            [matTooltip]=\"field.tooltip\"\n            matTooltipPosition=\"right\">\n        <mat-icon>help</mat-icon>\n    </button>\n  </ng-container>\n</div>\n", styles: [".with-tooltip mantle-text-input,.with-tooltip mantle-textarea,.with-tooltip mantle-dropdown,.with-tooltip mantle-datepicker,.with-tooltip mantle-datetimepicker,.with-tooltip mantle-time-input,.with-tooltip mantle-number-input,.with-tooltip mantle-filepicker,.with-tooltip mantle-imagepicker,.with-tooltip mantle-chip-input,.with-tooltip mantle-password-input,.with-tooltip mantle-markdown-input,.with-tooltip mantle-autocomplete-input{display:inline-block;width:90%}.with-tooltip .mat-icon-button{width:10%}.with-tooltip .mat-icon-button .mat-icon{font-size:18px}\n"], components: [{ type: TextInputComponent, selector: "mantle-text-input", inputs: ["label", "disable", "required", "error"] }, { type: TextareaComponent, selector: "mantle-textarea", inputs: ["label", "rows", "disable", "required", "error"] }, { type: DropdownComponent, selector: "mantle-dropdown", inputs: ["label", "options", "disable", "required", "error"] }, { type: DatepickerComponent, selector: "mantle-datepicker", inputs: ["label", "disable", "required", "error"] }, { type: DatetimepickerComponent, selector: "mantle-datetimepicker", inputs: ["label", "disable", "required", "error"] }, { type: TimeInputComponent, selector: "mantle-time-input", inputs: ["label", "disable", "required", "error"] }, { type: NumberInputComponent, selector: "mantle-number-input", inputs: ["label", "options", "disable", "required", "error"] }, { type: FilepickerComponent, selector: "mantle-filepicker", inputs: ["label", "disable", "required", "error"] }, { type: ImagepickerComponent, selector: "mantle-imagepicker", inputs: ["label", "options", "disable", "required", "error"] }, { type: ChipInputComponent, selector: "mantle-chip-input", inputs: ["label", "disable", "required", "error"] }, { type: PasswordInputComponent, selector: "mantle-password-input", inputs: ["label", "disable", "required", "error"] }, { type: MarkdownInputComponent, selector: "mantle-markdown-input", inputs: ["label", "disable", "required", "error"] }, { type: AutocompleteInputComponent, selector: "mantle-autocomplete-input", inputs: ["label", "options", "disable", "required", "error"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3$3.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i3$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicFormFieldComponent, decorators: [{
             type: Component,
             args: [{
@@ -2251,7 +2492,16 @@ class GridFormSectionComponent {
         });
     }
     getColSpanForField(field) {
-        return (field.type == 'text' || field.type == 'string-lg' || field.type == 'markdown') ? this.numColumns : 1;
+        if (this.numColumns == 1)
+            return 1;
+        else if (['text', 'markdown'].includes(field.type))
+            return this.numColumns;
+        else if (field.type.endsWith('-lg'))
+            return this.numColumns;
+        else if (field.type.endsWith('-md'))
+            return 2;
+        else
+            return 1;
     }
     getRowSpanForField(field) {
         return (field.type == 'text' || field.type == 'markdown') ? 2 : 1;
@@ -2267,7 +2517,7 @@ class GridFormSectionComponent {
     }
 }
 GridFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GridFormSectionComponent, deps: [{ token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
-GridFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GridFormSectionComponent, selector: "mantle-grid-form-section", inputs: { title: "title", section: "section", form: "form", errors: "errors", defaultRowHeight: "defaultRowHeight" }, ngImport: i0, template: "<mantle-section-title *ngIf=\"title\" [title]=\"title\"></mantle-section-title>\n\n<form [formGroup]=\"form\" class=\"grid-form-layout\">\n  <mat-grid-list\n      [rowHeight]=\"section.rowHeight || defaultRowHeight\"\n      [cols]=\"section.singleColumn ? 1 : numColumns\"\n      [class.multi-column]=\"section.singleColumn ? false : numColumns > 1\">\n\n    <ng-container *ngFor=\"let field of section.elements\">\n      <mat-grid-tile *ngIf=\"!field.hidden\" [colspan]=\"section.singleColumn ? 1 : getColSpanForField(field)\" [rowspan]=\"getRowSpanForField(field)\">\n        <mantle-dynamic-form-field [field]=\"field\" [form]=\"form\" [error]=\"errors[field.attr]\"></mantle-dynamic-form-field>\n      </mat-grid-tile>\n    </ng-container>\n\n  </mat-grid-list>\n</form>\n", styles: ["mantle-dynamic-form-field{height:100%}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DynamicFormFieldComponent, selector: "mantle-dynamic-form-field", inputs: ["field", "form", "error"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i5$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i5$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+GridFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GridFormSectionComponent, selector: "mantle-grid-form-section", inputs: { title: "title", section: "section", form: "form", errors: "errors", defaultRowHeight: "defaultRowHeight" }, ngImport: i0, template: "<mantle-section-title *ngIf=\"title\" [title]=\"title\"></mantle-section-title>\n\n<form [formGroup]=\"form\" class=\"grid-form-layout\">\n  <mat-grid-list\n      [rowHeight]=\"section.rowHeight || defaultRowHeight\"\n      [cols]=\"section.singleColumn ? 1 : numColumns\"\n      [class.multi-column]=\"section.singleColumn ? false : numColumns > 1\">\n\n    <ng-container *ngFor=\"let field of section.elements\">\n      <mat-grid-tile *ngIf=\"!field.hidden\" [colspan]=\"section.singleColumn ? 1 : getColSpanForField(field)\" [rowspan]=\"getRowSpanForField(field)\">\n        <mantle-dynamic-form-field [field]=\"field\" [form]=\"form\" [error]=\"errors[field.attr]\"></mantle-dynamic-form-field>\n      </mat-grid-tile>\n    </ng-container>\n\n  </mat-grid-list>\n</form>\n", styles: ["mantle-dynamic-form-field{height:100%}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DynamicFormFieldComponent, selector: "mantle-dynamic-form-field", inputs: ["field", "form", "error"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GridFormSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2355,6 +2605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
 
 require('highcharts/modules/item-series')(Highcharts);
 require('highcharts/modules/gantt')(Highcharts);
+require('highcharts/modules/exporting')(Highcharts);
 class DynamicChartComponent {
     constructor(objectService) {
         this.objectService = objectService;
@@ -2370,11 +2621,15 @@ class DynamicChartComponent {
                 plotBackgroundColor: undefined,
                 plotBorderWidth: undefined,
                 plotShadow: false,
+                styledMode: false,
                 type: ''
             },
             credits: {
                 enabled: false
             },
+            exporting: {
+                enabled: false
+            },
             plotOptions: {
                 column: {
                     pointPadding: 0.2,
@@ -2384,6 +2639,7 @@ class DynamicChartComponent {
                     minPointLength: 4
                 }
             },
+            tooltip: {},
             series: [],
             title: {
                 text: ''
@@ -2417,7 +2673,7 @@ class DynamicChartComponent {
     }
 }
 DynamicChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicChartComponent, deps: [{ token: ObjectService }], target: i0.ɵɵFactoryTarget.Component });
-DynamicChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicChartComponent, selector: "mantle-dynamic-chart", inputs: { label: "label", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"label\" class=\"header\">\n  <p class=\"header-text\">{{ label }}</p>\n</div>\n\n<highcharts-chart\n    [Highcharts]=\"Highcharts\"\n    [constructorType]=\"chartConstructor\"\n    [options]=\"chartOptions\"\n    [(update)]=\"updateFlag\"\n    [oneToOne]=\"oneToOneFlag\"\n    [callbackFunction]=\"chartCallback\">\n</highcharts-chart>\n", styles: [".header{text-align:left;width:90%;padding-top:5px}.header .header-text{font-size:15px;font-weight:500}highcharts-chart{display:block;max-width:100%;max-height:100%;width:100%;height:100%}\n"], components: [{ type: i2$5.HighchartsChartComponent, selector: "highcharts-chart", inputs: ["Highcharts", "constructorType", "callbackFunction", "oneToOne", "runOutsideAngular", "options", "update"], outputs: ["updateChange", "chartInstance"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DynamicChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicChartComponent, selector: "mantle-dynamic-chart", inputs: { label: "label", data: "data" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"label\" class=\"header\">\n  <p class=\"header-text\">{{ label | translate }}</p>\n</div>\n\n<highcharts-chart\n    [Highcharts]=\"Highcharts\"\n    [constructorType]=\"chartConstructor\"\n    [options]=\"chartOptions\"\n    [(update)]=\"updateFlag\"\n    [oneToOne]=\"oneToOneFlag\"\n    [callbackFunction]=\"chartCallback\">\n</highcharts-chart>\n", styles: [".header{text-align:left;width:90%;padding-top:5px}.header .header-text{font-size:15px;font-weight:500}highcharts-chart{display:block;max-width:100%;max-height:100%;width:100%;height:100%}\n"], components: [{ type: i2$6.HighchartsChartComponent, selector: "highcharts-chart", inputs: ["Highcharts", "constructorType", "callbackFunction", "oneToOne", "runOutsideAngular", "options", "update"], outputs: ["updateChange", "chartInstance"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicChartComponent, decorators: [{
             type: Component,
             args: [{
@@ -2438,7 +2694,7 @@ class DashboardInfoCardComponent {
     }
 }
 DashboardInfoCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardInfoCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DashboardInfoCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardInfoCardComponent, selector: "mantle-dashboard-info-card", inputs: { data: "data", options: "options" }, ngImport: i0, template: "<div class=\"info-card\">\n  <div *ngIf=\"data.key_value\">\n    <div *ngIf=\"data.key_value.label\" class=\"sub-header\">{{ data.key_value.label }}</div>\n    <span class=\"header\">\n      <h1 class=\"header-value\" [ngStyle]=\"{ 'color': data.color }\">{{ data.key_value.value }}</h1> <span class=\"header-units\">{{ data.key_value.unit }}</span>\n    </span>\n    <div *ngIf=\"data.showSubLabel\">\n      <span class=\"header-date\">{{ data.key_value.sub_label }}</span>\n    </div>\n  </div>\n\n  <small *ngIf=\"data.comparison\" class=\"comparison\">\n    <mat-icon>{{ (data.comparison.value < 0) ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</mat-icon>\n    {{ data.comparison.value }} {{ data.comparison.unit }} {{ data.comparison.label }}\n  </small>\n\n  <table *ngIf=\"data.bulletpoints && data.bulletpoints.length > 0\" class=\"bulletpoints\">\n    <tr *ngFor=\"let bulletpoint of data.bulletpoints\" class=\"bulletpoint\">\n      <td class=\"bulletpoint-icon\"><mat-icon>chevron_right</mat-icon></td><td class=\"bulletpoint-value\"><b>{{ bulletpoint.value }}</b></td><td class=\"bulletpoint-label\">{{ bulletpoint.label }}</td>\n    </tr>\n  </table>\n</div>\n", styles: [".info-card{padding:10px;margin:0 auto auto;max-width:100%;max-height:100%}.header{padding-bottom:4px;min-width:100px;margin:auto;word-wrap:normal}.header .header-value{display:inline-block;margin-bottom:10px;font-size:46px;font-weight:500}.header .header-units{display:inline-block;margin-left:4px;margin-bottom:0;font-size:16px;text-transform:uppercase}.sub-header{margin-top:4px;margin-bottom:30px;font-size:15px;font-weight:500}.header-date{margin-top:4px;margin-bottom:30px;font-size:12px;color:gray}.comparison .mat-icon{font-size:14px!important;height:14px}.bulletpoints{margin-top:16px;border-collapse:collapse}.bulletpoints .bulletpoint .bulletpoint-icon{padding-right:4px!important}.bulletpoints .bulletpoint .bulletpoint-value{font-weight:500;font-size:16px;text-align:right;padding-left:2px!important;padding-right:4px!important}.bulletpoints .bulletpoint .bulletpoint-label{text-align:left;padding-left:2px!important}\n"], components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DashboardInfoCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardInfoCardComponent, selector: "mantle-dashboard-info-card", inputs: { data: "data", options: "options" }, ngImport: i0, template: "<div class=\"info-card\">\n  <div *ngIf=\"data.key_value\">\n    <div *ngIf=\"data.key_value.label\" class=\"sub-header\">{{ data.key_value.label }}</div>\n    <span class=\"header\">\n      <h1 class=\"header-value\" [ngStyle]=\"{ 'color': data.color }\">{{ data.key_value.value }}</h1> <span class=\"header-units\">{{ data.key_value.unit }}</span>\n    </span>\n    <div *ngIf=\"data.showSubLabel\">\n      <span class=\"header-date\">{{ data.key_value.sub_label }}</span>\n    </div>\n  </div>\n\n  <small *ngIf=\"data.comparison\" class=\"comparison\">\n    <mat-icon>{{ (data.comparison.value < 0) ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</mat-icon>\n    {{ data.comparison.value }} {{ data.comparison.unit }} {{ data.comparison.label }}\n  </small>\n\n  <table *ngIf=\"data.bulletpoints && data.bulletpoints.length > 0\" class=\"bulletpoints\">\n    <tr *ngFor=\"let bulletpoint of data.bulletpoints\" class=\"bulletpoint\">\n      <td class=\"bulletpoint-icon\"><mat-icon>chevron_right</mat-icon></td><td class=\"bulletpoint-value\"><b>{{ bulletpoint.value }}</b></td><td class=\"bulletpoint-label\">{{ bulletpoint.label }}</td>\n    </tr>\n  </table>\n</div>\n", styles: [".info-card{padding:10px;margin:auto;max-width:100%;max-height:100%}.header{padding-bottom:4px;min-width:100px;margin:auto;word-wrap:normal}.header .header-value{display:inline-block;margin-bottom:10px;font-size:46px;font-weight:500}.header .header-units{display:inline-block;margin-left:4px;margin-bottom:0;font-size:16px;text-transform:uppercase}.sub-header{margin-top:4px;margin-bottom:30px;font-size:15px;font-weight:500}.header-date{margin-top:4px;margin-bottom:30px;font-size:12px;color:gray}.comparison .mat-icon{font-size:14px!important;height:14px}.bulletpoints{margin-top:16px;border-collapse:collapse}.bulletpoints .bulletpoint .bulletpoint-icon{padding-right:4px!important}.bulletpoints .bulletpoint .bulletpoint-value{font-weight:500;font-size:16px;text-align:right;padding-left:2px!important;padding-right:4px!important}.bulletpoints .bulletpoint .bulletpoint-label{text-align:left;padding-left:2px!important}\n"], components: [{ type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardInfoCardComponent, decorators: [{
             type: Component,
             args: [{
@@ -2482,6 +2738,7 @@ class DashboardTableDataSource extends DataSource {
 class DashboardTableComponent {
     constructor(dialog) {
         this.dialog = dialog;
+        this.label = '';
         this.dataSource = new DashboardTableDataSource();
     }
     ngAfterViewInit() {
@@ -2503,7 +2760,7 @@ class DashboardTableComponent {
     }
 }
 DashboardTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardTableComponent, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-DashboardTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardTableComponent, selector: "mantle-dashboard-table", inputs: { columns: "columns", items: "items", hideHeaders: "hideHeaders", withStripedRows: "withStripedRows", withClickableRows: "withClickableRows", onRecordClicked: "onRecordClicked" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"vertically-scrollable horizontal-scroll-table\">\n  <table mat-table class=\"full-width\">\n\n    <ng-container *ngFor=\"let column of columns\">\n      <ng-container matColumnDef=\"{{ column.attr }}\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.header }}</th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mantle-dynamic-attribute-display [fieldType]=\"column.type\" [value]=\"row[column.attr]\" [field]=\"column\"></mantle-dynamic-attribute-display>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideHeaders\">\n      <tr mat-header-row *matHeaderRowDef=\"listColumnAttrs()\"></tr>\n    </ng-container>\n    <tr mat-row *matRowDef=\"let row; columns: listColumnAttrs();\"\n        (click)=\"onRowClicked(row)\"\n        [class.clickable-row]=\"withClickableRows\"\n        [class.striped-row]=\"withStripedRows\">\n    </tr>\n\n  </table>\n</div>\n", styles: [".horizontal-scroll-table{width:100%}.mat-header-row,th{font-weight:bold}.mat-row{text-align:left}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+DashboardTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardTableComponent, selector: "mantle-dashboard-table", inputs: { label: "label", columns: "columns", items: "items", hideHeaders: "hideHeaders", withStripedRows: "withStripedRows", withClickableRows: "withClickableRows", onRecordClicked: "onRecordClicked" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"label\" class=\"header\">\n  <p class=\"header-text\">{{ label | translate }}</p>\n</div>\n\n<div class=\"vertically-scrollable horizontal-scroll-table\">\n  <table mat-table class=\"full-width\">\n\n    <ng-container *ngFor=\"let column of columns\">\n      <ng-container matColumnDef=\"{{ column.attr }}\">\n        <th mat-header-cell *matHeaderCellDef>{{ column.header | translate }}</th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mantle-dynamic-attribute-display [fieldType]=\"column.type\" [value]=\"row[column.attr]\" [field]=\"column\"></mantle-dynamic-attribute-display>\n        </td>\n      </ng-container>\n    </ng-container>\n\n    <ng-container *ngIf=\"!hideHeaders\">\n      <tr mat-header-row *matHeaderRowDef=\"listColumnAttrs()\"></tr>\n    </ng-container>\n    <tr mat-row *matRowDef=\"let row; columns: listColumnAttrs();\"\n        (click)=\"onRowClicked(row)\"\n        [class.clickable-row]=\"withClickableRows\"\n        [class.striped-row]=\"withStripedRows\">\n    </tr>\n\n  </table>\n</div>\n", styles: [".horizontal-scroll-table{width:100%}.mat-header-row,th{font-weight:bold}.mat-row{text-align:left}.header{text-align:left;width:95%;padding-top:5px}.header .header-text{font-size:15px;font-weight:500}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardTableComponent, decorators: [{
             type: Component,
             args: [{
@@ -2514,6 +2771,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
         }], ctorParameters: function () { return [{ type: i1$3.MatDialog }]; }, propDecorators: { table: [{
                 type: ViewChild,
                 args: [MatTable]
+            }], label: [{
+                type: Input
             }], columns: [{
                 type: Input
             }], items: [{
@@ -2535,7 +2794,7 @@ class DynamicWidgetDisplayComponent {
     }
 }
 DynamicWidgetDisplayComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicWidgetDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicWidgetDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicWidgetDisplayComponent, selector: "mantle-dynamic-widget-display", inputs: { widgetItem: "widgetItem", data: "data", options: "options" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"widgetItem.type\">\n\n  <ng-container *ngSwitchCase=\"'chart'\">\n    <mantle-dynamic-chart class=\"widget-item\" [label]=\"widgetItem.label\" [data]=\"data\">\n    </mantle-dynamic-chart>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'info'\">\n    <mantle-dashboard-info-card class=\"widget-item\" [data]=\"data\" [options]=\"options\">\n    </mantle-dashboard-info-card>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'table'\">\n    <mantle-dashboard-table class=\"widget-item\"\n                         [columns]=\"data.columns\" [items]=\"data.items\"\n                         [hideHeaders]=\"data.hideHeaders\"\n                         [withStripedRows]=\"data.withStripedRows\"\n                         [withClickableRows]=\"data.withClickableRows\"\n                         [onRecordClicked]=\"data.onRecordClicked\">\n    </mantle-dashboard-table>\n  </ng-container>\n\n</ng-container>\n", styles: [".widget-item{width:100%;height:100%;max-width:100%;max-height:100%;display:flex;align-items:center;flex-direction:column}\n"], components: [{ type: DynamicChartComponent, selector: "mantle-dynamic-chart", inputs: ["label", "data"] }, { type: DashboardInfoCardComponent, selector: "mantle-dashboard-info-card", inputs: ["data", "options"] }, { type: DashboardTableComponent, selector: "mantle-dashboard-table", inputs: ["columns", "items", "hideHeaders", "withStripedRows", "withClickableRows", "onRecordClicked"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+DynamicWidgetDisplayComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicWidgetDisplayComponent, selector: "mantle-dynamic-widget-display", inputs: { widgetItem: "widgetItem", data: "data", options: "options" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"widgetItem.type\">\n\n  <ng-container *ngSwitchCase=\"'chart'\">\n    <mantle-dynamic-chart class=\"widget-item\" [label]=\"widgetItem.label\" [data]=\"data\">\n    </mantle-dynamic-chart>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'info'\">\n    <mantle-dashboard-info-card class=\"widget-item\" [data]=\"data\" [options]=\"options\">\n    </mantle-dashboard-info-card>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'table'\">\n    <mantle-dashboard-table class=\"widget-item\"\n                         [label]=\"widgetItem.label\"\n                         [columns]=\"data.columns\" [items]=\"data.items\"\n                         [hideHeaders]=\"data.hideHeaders\"\n                         [withStripedRows]=\"data.withStripedRows\"\n                         [withClickableRows]=\"data.withClickableRows\"\n                         [onRecordClicked]=\"data.onRecordClicked\">\n    </mantle-dashboard-table>\n  </ng-container>\n\n</ng-container>\n", styles: [".widget-item{width:100%;height:100%;max-width:100%;max-height:100%;display:flex;align-items:center;flex-direction:column}\n"], components: [{ type: DynamicChartComponent, selector: "mantle-dynamic-chart", inputs: ["label", "data"] }, { type: DashboardInfoCardComponent, selector: "mantle-dashboard-info-card", inputs: ["data", "options"] }, { type: DashboardTableComponent, selector: "mantle-dashboard-table", inputs: ["label", "columns", "items", "hideHeaders", "withStripedRows", "withClickableRows", "onRecordClicked"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicWidgetDisplayComponent, decorators: [{
             type: Component,
             args: [{
@@ -2637,7 +2896,7 @@ class DashboardCardComponent {
     }
 }
 DashboardCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardCardComponent, deps: [{ token: ObjectService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardCardComponent, selector: "mantle-dashboard-card", inputs: { widget: "widget", widgetConfig: "widgetConfig", widgetItems: "widgetItems", rowHeight: "rowHeight", dashboardWidgetService: "dashboardWidgetService", dashboardPageService: "dashboardPageService" }, viewQueries: [{ propertyName: "searchForm", first: true, predicate: DashboardCardSearchMenuComponent, descendants: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<mat-card fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0px\" class=\"dashboard-card\">\n  <mat-card-header fxFlex=\"0 0 auto\">\n    <mat-card-title>\n      <span *ngIf=\"!dashboardWidgetService.icon; else iconHeader\" class=\"sub-card-title\">{{ widget.label }}</span>\n      <ng-template #iconHeader>\n        <div>\n          <mat-icon class=\"card-title-icon\">{{ dashboardWidgetService.icon }}</mat-icon>\n          <span class=\"main-card-title\">\n            {{ widget.label }}\n          </span>\n        </div>\n      </ng-template>\n\n      <ng-container *ngFor=\"let exportOption of exportOptions\">\n        <button mat-button type=\"button\" class=\"export-button\" (click)=\"exportOption.export(options).subscribe()\">\n          <span class=\"export-button-label\">{{ exportOption.label }}</span>\n          <mat-icon>download</mat-icon>\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"additionalWidgetButtons\">\n        <div class=\"widget-button-container\" [ngClass]=\"{ 'with-menu-button': dashboardWidgetService.showMenuButton }\">\n          <button *ngFor=\"let button of additionalWidgetButtons\"\n                  mat-raised-button\n                  color=\"{{ button.color }}\"\n                  type=\"button\"\n                  class=\"widget-button\"\n                  [ngStyle]=\"button.styling\"\n                  (click)=\"onAdditionalWidgetButtonClicked(button.onClick)\"\n                  [disabled]=\"button.disabled\">\n            {{ button.label }}\n          </button>\n        </div>\n      </ng-container>\n\n      <button #menuTrigger mat-icon-button class=\"more-button\" [matMenuTriggerFor]=\"menu\" *ngIf=\"dashboardWidgetService.showMenuButton\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n        <div class=\"menu-form\" click-stop-propagation>\n          <mantle-dashboard-card-search-menu #searchForm [content]=\"formContent\"></mantle-dashboard-card-search-menu>\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n            <div fxFlex=\"1 1 auto\"></div>\n            <div fxFlex=\"0 0 auto\">\n              <button mat-raised-button color=\"primary\" type=\"button\" class=\"search-button\" (click)=\"onSearchClicked(); menuTrigger.closeMenu();\">\n                Search\n              </button>\n            </div>\n          </div>\n        </div>\n      </mat-menu>\n    </mat-card-title>\n  </mat-card-header>\n\n  <mat-card-content fxFlex=\"1 0 1px\" fxAlign=\"center center\" class=\"dashboard-card-content\">\n\n    <div class=\"grid-container\">\n      <mat-grid-list\n        [rowHeight]=\"widgetRowHeight\"\n        [cols]=\"WIDGET_COLUMNS\">\n        <mat-grid-tile *ngFor=\"let context of widgetItemContexts\" [colspan]=\"getWidgetItemColspan(context.config)\" [rowspan]=\"getWidgetItemRowspan(context.config)\">\n          <mantle-dynamic-widget-display\n            class=\"card-content-wrapper\"\n            [widgetItem]=\"context.config\"\n            [data]=\"context.data\"\n            [options]=\"context.options\">\n          </mantle-dynamic-widget-display>\n        </mat-grid-tile>\n      </mat-grid-list>\n    </div>\n\n  </mat-card-content>\n</mat-card>\n", styles: [".dashboard-card{position:absolute;top:15px;left:15px;right:15px;bottom:15px;padding:10px 15px}.more-button{position:absolute;top:5px;right:10px}.dashboard-card-content{text-align:center}.mat-card-title{margin-bottom:10px;padding-top:5px;font-weight:400}.mat-card-title .main-card-title{font-size:19px;text-transform:uppercase;font-weight:500;vertical-align:middle}.mat-card-title .card-title-icon{font-size:2rem;vertical-align:middle;padding-right:7px}.mat-card-title .sub-card-title{font-size:18px;font-weight:500}.card-content-wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:stretch}.menu-form{width:140px;padding:0 8px}.export-button{display:inline-block;width:110px;background-color:transparent;white-space:nowrap;padding:0;position:absolute;top:8px;right:50px}.export-button .export-button-label{display:inline-block;width:80px;white-space:normal;text-align:right;text-transform:uppercase;font-weight:normal;font-size:12px;line-height:1.25rem;margin-right:.25rem}.widget-button-container{display:inline-block;position:absolute;top:15px;right:20px}.widget-button-container .widget-button{margin-left:7px}.with-menu-button{right:50px}.mat-icon{height:auto;width:auto;font-size:1.5rem}\n"], components: [{ type: i3$6.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$6.MatCardHeader, selector: "mat-card-header" }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: DashboardCardSearchMenuComponent, selector: "mantle-dashboard-card-search-menu", inputs: ["content"] }, { type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DynamicWidgetDisplayComponent, selector: "mantle-dynamic-widget-display", inputs: ["widgetItem", "data", "options"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i3$6.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { type: i3$6.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }] });
+DashboardCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardCardComponent, selector: "mantle-dashboard-card", inputs: { widget: "widget", widgetConfig: "widgetConfig", widgetItems: "widgetItems", rowHeight: "rowHeight", dashboardWidgetService: "dashboardWidgetService", dashboardPageService: "dashboardPageService" }, viewQueries: [{ propertyName: "searchForm", first: true, predicate: DashboardCardSearchMenuComponent, descendants: true }, { propertyName: "menuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<mat-card fxLayout=\"column\" fxLayoutAlign=\"stretch\" fxLayoutGap=\"0px\" class=\"dashboard-card\">\n  <mat-card-header fxFlex=\"0 0 auto\">\n    <mat-card-title>\n      <span *ngIf=\"!dashboardWidgetService.icon; else iconHeader\" class=\"sub-card-title\">{{ widget.label }}</span>\n      <ng-template #iconHeader>\n        <div>\n          <mat-icon class=\"card-title-icon\">{{ dashboardWidgetService.icon }}</mat-icon>\n          <span class=\"main-card-title\">\n            {{ widget.label }}\n          </span>\n        </div>\n      </ng-template>\n\n      <ng-container *ngFor=\"let exportOption of exportOptions\">\n        <button mat-button type=\"button\" class=\"export-button\" (click)=\"exportOption.export(options).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=\"additionalWidgetButtons\">\n        <div class=\"widget-button-container\" [ngClass]=\"{ 'with-menu-button': dashboardWidgetService.showMenuButton }\">\n          <button *ngFor=\"let button of additionalWidgetButtons\"\n                  mat-raised-button\n                  color=\"{{ button.color }}\"\n                  type=\"button\"\n                  class=\"widget-button\"\n                  [ngStyle]=\"button.styling\"\n                  (click)=\"onAdditionalWidgetButtonClicked(button.onClick)\"\n                  [disabled]=\"button.disabled\">\n            {{ button.label | translate }}\n          </button>\n        </div>\n      </ng-container>\n\n      <button #menuTrigger mat-icon-button class=\"more-button\" [matMenuTriggerFor]=\"menu\" *ngIf=\"dashboardWidgetService.showMenuButton\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\" xPosition=\"before\">\n        <div class=\"menu-form\" click-stop-propagation>\n          <mantle-dashboard-card-search-menu #searchForm [content]=\"formContent\"></mantle-dashboard-card-search-menu>\n\n          <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n            <div fxFlex=\"1 1 auto\"></div>\n            <div fxFlex=\"0 0 auto\">\n              <button mat-raised-button color=\"primary\" type=\"button\" class=\"search-button\" (click)=\"onSearchClicked(); menuTrigger.closeMenu();\">\n                {{ 'mantle.buttons.search' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      </mat-menu>\n    </mat-card-title>\n  </mat-card-header>\n\n  <mat-card-content fxFlex=\"1 0 1px\" fxAlign=\"center center\" class=\"dashboard-card-content\">\n\n    <div class=\"grid-container\">\n      <mat-grid-list\n        [rowHeight]=\"widgetRowHeight\"\n        [cols]=\"WIDGET_COLUMNS\">\n        <mat-grid-tile *ngFor=\"let context of widgetItemContexts\" [colspan]=\"getWidgetItemColspan(context.config)\" [rowspan]=\"getWidgetItemRowspan(context.config)\">\n          <mantle-dynamic-widget-display\n            class=\"card-content-wrapper\"\n            [widgetItem]=\"context.config\"\n            [data]=\"context.data\"\n            [options]=\"context.options\">\n          </mantle-dynamic-widget-display>\n        </mat-grid-tile>\n      </mat-grid-list>\n    </div>\n\n  </mat-card-content>\n</mat-card>\n", styles: [".dashboard-card{position:absolute;top:15px;left:15px;right:15px;bottom:15px;padding:10px 15px}.more-button{position:absolute;top:5px;right:10px}.dashboard-card-content{text-align:center}.mat-card-title{margin-bottom:10px;padding-top:5px;font-weight:400}.mat-card-title .main-card-title{font-size:19px;text-transform:uppercase;font-weight:500;vertical-align:middle}.mat-card-title .card-title-icon{font-size:2rem;vertical-align:middle;padding-right:7px}.mat-card-title .sub-card-title{font-size:18px;font-weight:500}.card-content-wrapper{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:stretch}.menu-form{width:140px;padding:0 8px}.export-button{display:inline-block;width:110px;background-color:transparent;white-space:nowrap;padding:0;position:absolute;top:8px;right:50px}.export-button .export-button-label{display:inline-block;width:80px;white-space:normal;text-align:right;text-transform:uppercase;font-weight:normal;font-size:12px;line-height:1.25rem;margin-right:.25rem}.widget-button-container{display:inline-block;position:absolute;z-index:100;top:15px;right:20px}.widget-button-container .widget-button{margin-left:7px}.with-menu-button{right:50px}.mat-icon{height:auto;width:auto;font-size:1.5rem}\n"], components: [{ type: i3$6.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$6.MatCardHeader, selector: "mat-card-header" }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: DashboardCardSearchMenuComponent, selector: "mantle-dashboard-card-search-menu", inputs: ["content"] }, { type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DynamicWidgetDisplayComponent, selector: "mantle-dynamic-widget-display", inputs: ["widgetItem", "data", "options"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i3$6.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { type: i3$6.MatCardContent, selector: "mat-card-content, [mat-card-content], [matCardContent]" }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardCardComponent, decorators: [{
             type: Component,
             args: [{
@@ -2708,37 +2967,148 @@ class DashboardSectionComponent {
         }
     }
 }
-DashboardSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardSectionComponent, deps: [{ token: ArrayService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
-DashboardSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardSectionComponent, selector: "mantle-dashboard-section", inputs: { dashboardPageService: "dashboardPageService", slug: "slug", data: "data", section: "section" }, ngImport: i0, template: "<div class=\"grid-container\">\n  <mat-grid-list\n      [rowHeight]=\"rowHeight\"\n      [cols]=\"SECTION_COLUMNS\"\n      [class.multi-column]=\"true\">\n\n    <mat-grid-tile *ngFor=\"let widget of section.elements\" [colspan]=\"getColSpanForWidget(widget.slug)\" [rowspan]=\"getRowSpanForWidget(widget.slug)\">\n      <mantle-dashboard-card\n        [widget]=\"widget\"\n        [widgetConfig]=\"data.widget_configs[widget.slug]\"\n        [widgetItems]=\"data.widget_items\"\n        [rowHeight]=\"rowHeight\"\n        [dashboardWidgetService]=\"getDashboardWidgetService(widget.slug)\"\n        [dashboardPageService]=\"dashboardPageService\">\n      </mantle-dashboard-card>\n    </mat-grid-tile>\n\n  </mat-grid-list>\n</div>\n", styles: [""], components: [{ type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DashboardCardComponent, selector: "mantle-dashboard-card", inputs: ["widget", "widgetConfig", "widgetItems", "rowHeight", "dashboardWidgetService", "dashboardPageService"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardSectionComponent, decorators: [{
+DashboardSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardSectionComponent, deps: [{ token: ArrayService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardSectionComponent, selector: "mantle-dashboard-section", inputs: { dashboardPageService: "dashboardPageService", slug: "slug", data: "data", section: "section" }, ngImport: i0, template: "<div class=\"grid-container\">\n  <mat-grid-list\n      [rowHeight]=\"rowHeight\"\n      [cols]=\"SECTION_COLUMNS\"\n      [class.multi-column]=\"true\">\n\n    <mat-grid-tile *ngFor=\"let widget of section.elements\" [colspan]=\"getColSpanForWidget(widget.slug)\" [rowspan]=\"getRowSpanForWidget(widget.slug)\">\n      <mantle-dashboard-card\n        [widget]=\"widget\"\n        [widgetConfig]=\"data.widget_configs[widget.slug]\"\n        [widgetItems]=\"data.widget_items\"\n        [rowHeight]=\"rowHeight\"\n        [dashboardWidgetService]=\"getDashboardWidgetService(widget.slug)\"\n        [dashboardPageService]=\"dashboardPageService\">\n      </mantle-dashboard-card>\n    </mat-grid-tile>\n\n  </mat-grid-list>\n</div>\n", styles: [""], components: [{ type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DashboardCardComponent, selector: "mantle-dashboard-card", inputs: ["widget", "widgetConfig", "widgetItems", "rowHeight", "dashboardWidgetService", "dashboardPageService"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mantle-dashboard-section',
+                    templateUrl: './dashboard-section.component.html',
+                    styleUrls: ['./dashboard-section.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: ArrayService }, { type: ScreenSizeService }]; }, propDecorators: { dashboardPageService: [{
+                type: Input
+            }], slug: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], section: [{
+                type: Input
+            }] } });
+
+class MarkdownDetailsSectionComponent {
+}
+MarkdownDetailsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MarkdownDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MarkdownDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: MarkdownDetailsSectionComponent, selector: "mantle-markdown-details-section", inputs: { section: "section" }, ngImport: i0, template: "<div class=\"markdown-wrapper\">\n  <markdown ngPreserveWhitespaces *ngFor=\"let element of section.elements\">\n    {{ element.text }}\n  </markdown>\n</div>\n", styles: [""], components: [{ type: i1$5.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "emoji", "katex", "katexOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start"], outputs: ["error", "load", "ready"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MarkdownDetailsSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mantle-markdown-details-section',
+                    templateUrl: './markdown-details-section.component.html',
+                    styleUrls: ['./markdown-details-section.component.scss']
+                }]
+        }], propDecorators: { section: [{
+                type: Input
+            }] } });
+
+/**
+ * Data source for the List Page view. This class should
+ * encapsulate all logic for fetching and manipulating the displayed data
+ * (including sorting, pagination, and searching).
+ */
+class DraggableTableDataSource extends DataSource {
+    constructor() {
+        super();
+        this.columns = [];
+        this.listSubject = new BehaviorSubject([]);
+    }
+    /**
+     * Connect this data source to the table. The table will only update when
+     * the returned stream emits new items.
+     * @returns A stream of the items to be rendered.
+     */
+    connect() {
+        return this.listSubject.pipe(map(() => {
+            return this.listSubject.value.filter(item => { return !item._destroy; });
+        }));
+    }
+    /**
+     *  Called when the table is being destroyed. Use this function, to clean up
+     * any open connections or free any held resources that were set up during connect.
+     */
+    disconnect() { }
+}
+
+class DraggableTableComponent {
+    constructor(arrayService) {
+        this.arrayService = arrayService;
+        this.dataSource = new DraggableTableDataSource();
+    }
+    ngOnChanges() {
+        this.dataSource.columns = this.listColumnAttrs();
+        this.dataSource.listSubject.next(this.items);
+    }
+    listColumnAttrs() {
+        let columnAttrs = this.columns.map(column => { return column.attr; });
+        if (this.writable)
+            columnAttrs.unshift('drag');
+        if (this.writable)
+            columnAttrs.push('delete');
+        return columnAttrs;
+    }
+    onDropped(event) {
+        const previousIndex = this.items.findIndex(item => item === event.item.data);
+        moveItemInArray(this.items, previousIndex, event.currentIndex);
+        this.refreshOrdinals();
+        this.dataSource.listSubject.next(this.items);
+    }
+    onDeleteClicked(row) {
+        if (row.id) {
+            row._destroy = 1;
+        }
+        else {
+            this.arrayService.removeItem(this.items, row);
+        }
+        this.refreshOrdinals();
+        this.dataSource.listSubject.next(this.items);
+    }
+    refreshOrdinals() {
+        let currentOrdinal = 1;
+        this.items.forEach((item) => {
+            if (item._destroy)
+                return;
+            item[this.sortAttr] = currentOrdinal;
+            currentOrdinal += 1;
+        });
+    }
+}
+DraggableTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DraggableTableComponent, deps: [{ token: ArrayService }], target: i0.ɵɵFactoryTarget.Component });
+DraggableTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DraggableTableComponent, selector: "mantle-draggable-table", inputs: { columns: "columns", items: "items", sortAttr: "sortAttr", writable: "writable" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<mat-table\n  #table\n  [ngClass]=\"{ 'draggable-table-details': !writable, 'draggable-table-form': writable }\"\n  [dataSource]=\"dataSource\"\n  cdkDropList\n  (cdkDropListDropped)=\"onDropped($event)\"\n  cdkDropListData=\"items\"\n  [cdkDropListDisabled]=\"!writable\"\n  [cdkDropListSortingDisabled]=\"!writable\">\n\n  <!-- Drag Column -->\n  <ng-container matColumnDef=\"drag\" *ngIf=\"writable\">\n    <th mat-header-cell *matHeaderCellDef></th>\n    <td mat-cell *matCellDef=\"let row\">\n      <mat-icon class=\"drag-cursor\" (mousedown)=\"true;\">\n        drag_indicator\n      </mat-icon>\n    </td>\n  </ng-container>\n\n  <ng-container *ngFor=\"let column of columns\">\n    <ng-container matColumnDef=\"{{ column.attr }}\">\n      <th mat-header-cell *matHeaderCellDef>{{ column.header | translate }}</th>\n      <td mat-cell *matCellDef=\"let row\">\n        <mantle-dynamic-attribute-display [fieldType]=\"column.type\" [value]=\"row[column.attr]\" [field]=\"column\"></mantle-dynamic-attribute-display>\n      </td>\n    </ng-container>\n  </ng-container>\n\n  <ng-container matColumnDef=\"delete\" *ngIf=\"writable\">\n    <th mat-header-cell *matHeaderCellDef></th>\n    <td mat-cell *matCellDef=\"let row\">\n      <button mat-icon-button (click)=\"onDeleteClicked(row)\">\n        <mat-icon>\n          delete\n        </mat-icon>\n      </button>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"dataSource.columns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: dataSource.columns;\"\n    cdkDrag\n    [cdkDragData]=\"row\">\n  </tr>\n</mat-table>\n", styles: ["mat-table{width:100%}mat-table tr{height:40px;vertical-align:middle}mat-table th,mat-table td{padding-left:10px!important;padding-right:10px!important;border-width:0px}mat-table th:first-of-type,mat-table td:first-of-type{padding-left:5px!important}mat-table th:last-of-type,mat-table td:last-of-type{padding-right:5px!important}.draggable-table-details th,.draggable-table-details td{border-width:0px}.draggable-table-form tr{border-width:1px;border-style:solid}.draggable-table-form td{border-top:1px solid gray;border-bottom:1px solid gray}.draggable-table-form td:first-of-type{border-left:1px solid gray}.draggable-table-form td:last-of-type{border-right:1px solid gray}.drag-cursor{margin-right:16px;cursor:move}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f;background-color:#fff}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.cdk-drop-list-dragging .mat-row:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i6$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "id", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListAutoScrollDisabled", "cdkDropListOrientation", "cdkDropListLockAxis", "cdkDropListData", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i6$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }], pipes: { "translate": i5.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DraggableTableComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'mantle-dashboard-section',
-                    templateUrl: './dashboard-section.component.html',
-                    styleUrls: ['./dashboard-section.component.scss']
+                    selector: 'mantle-draggable-table',
+                    templateUrl: './draggable-table.component.html',
+                    styleUrls: ['./draggable-table.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: ArrayService }, { type: ScreenSizeService }]; }, propDecorators: { dashboardPageService: [{
+        }], ctorParameters: function () { return [{ type: ArrayService }]; }, propDecorators: { table: [{
+                type: ViewChild,
+                args: [MatTable]
+            }], columns: [{
                 type: Input
-            }], slug: [{
+            }], items: [{
                 type: Input
-            }], data: [{
+            }], sortAttr: [{
                 type: Input
-            }], section: [{
+            }], writable: [{
                 type: Input
             }] } });
 
-class MarkdownDetailsSectionComponent {
+class RosterShiftListDetailsSectionComponent {
+    constructor() { }
 }
-MarkdownDetailsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MarkdownDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MarkdownDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: MarkdownDetailsSectionComponent, selector: "mantle-markdown-details-section", inputs: { section: "section" }, ngImport: i0, template: "<div class=\"markdown-wrapper\">\n  <markdown ngPreserveWhitespaces *ngFor=\"let element of section.elements\">\n    {{ element.text }}\n  </markdown>\n</div>\n", styles: [""], components: [{ type: i1$5.MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "emoji", "katex", "katexOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start"], outputs: ["error", "load", "ready"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MarkdownDetailsSectionComponent, decorators: [{
+RosterShiftListDetailsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RosterShiftListDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RosterShiftListDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: RosterShiftListDetailsSectionComponent, selector: "mantle-roster-shift-list-details-section", inputs: { data: "data", section: "section" }, ngImport: i0, template: "<div class=\"roster-shift-list-content\">\n  <mantle-draggable-table\n    [columns]=\"section.elements\"\n    [items]=\"data[section.config.attr]\"\n    [sortAttr]=\"section.options.ordinal\"\n    [writable]=\"false\">\n  </mantle-draggable-table>\n</div>\n", styles: [""], components: [{ type: DraggableTableComponent, selector: "mantle-draggable-table", inputs: ["columns", "items", "sortAttr", "writable"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RosterShiftListDetailsSectionComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'mantle-markdown-details-section',
-                    templateUrl: './markdown-details-section.component.html',
-                    styleUrls: ['./markdown-details-section.component.scss']
+                    selector: 'mantle-roster-shift-list-details-section',
+                    templateUrl: './roster-shift-list-details-section.component.html',
+                    styleUrls: ['./roster-shift-list-details-section.component.scss']
                 }]
-        }], propDecorators: { section: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { data: [{
+                type: Input
+            }], section: [{
                 type: Input
             }] } });
 
@@ -2756,12 +3126,15 @@ class DynamicDetailsSectionComponent {
     asDynamicLayoutDashboardSection(section) {
         return section;
     }
+    asDynamicLayoutRosterShiftListSection(section) {
+        return section;
+    }
     asDashboardPageService(detailPageService) {
         return detailPageService;
     }
 }
 DynamicDetailsSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicDetailsSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicDetailsSectionComponent, selector: "mantle-dynamic-details-section", inputs: { detailPageService: "detailPageService", content: "content", section: "section" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"section.layout\">\n\n  <ng-container *ngSwitchCase=\"'grid'\">\n    <mantle-grid-details-section\n        [section]=\"asDynamicLayoutGridSection(section)\"\n        [data]=\"content.data\">\n    </mantle-grid-details-section>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'table'\">\n    <mantle-table-details-section\n        [section]=\"asDynamicLayoutTableSection(section)\"\n        [data]=\"content.data\">\n    </mantle-table-details-section>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'dashboard'\">\n    <mantle-dashboard-section\n        [slug]=\"section.slug\"\n        [section]=\"asDynamicLayoutDashboardSection(section)\"\n        [data]=\"content.data\"\n        [dashboardPageService]=\"asDashboardPageService(detailPageService)\">\n    </mantle-dashboard-section>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'markdown'\">\n    <mantle-markdown-details-section\n        [section]=\"asDynamicLayoutMarkdownSection(section)\">\n    </mantle-markdown-details-section>\n  </ng-container>\n\n</ng-container>\n", styles: [""], components: [{ type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: ["data", "section", "defaultRowHeight"] }, { type: TableDetailsSectionComponent, selector: "mantle-table-details-section", inputs: ["data", "section"] }, { type: DashboardSectionComponent, selector: "mantle-dashboard-section", inputs: ["dashboardPageService", "slug", "data", "section"] }, { type: MarkdownDetailsSectionComponent, selector: "mantle-markdown-details-section", inputs: ["section"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+DynamicDetailsSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicDetailsSectionComponent, selector: "mantle-dynamic-details-section", inputs: { detailPageService: "detailPageService", content: "content", section: "section" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"section.layout\">\n\n  <ng-container *ngSwitchCase=\"'grid'\">\n    <mantle-grid-details-section\n        [section]=\"asDynamicLayoutGridSection(section)\"\n        [data]=\"content.data\">\n    </mantle-grid-details-section>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'table'\">\n    <mantle-table-details-section\n        [section]=\"asDynamicLayoutTableSection(section)\"\n        [data]=\"content.data\"\n        [detailPageService]=\"detailPageService\">\n    </mantle-table-details-section>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'dashboard'\">\n    <mantle-dashboard-section\n        [slug]=\"section.slug\"\n        [section]=\"asDynamicLayoutDashboardSection(section)\"\n        [data]=\"content.data\"\n        [dashboardPageService]=\"asDashboardPageService(detailPageService)\">\n    </mantle-dashboard-section>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'markdown'\">\n    <mantle-markdown-details-section\n        [section]=\"asDynamicLayoutMarkdownSection(section)\">\n    </mantle-markdown-details-section>\n  </ng-container>\n\n  <ng-container *ngSwitchCase=\"'roster-shift-list'\">\n    <mantle-roster-shift-list-details-section\n        [section]=\"asDynamicLayoutRosterShiftListSection(section)\"\n        [data]=\"content.data\">\n    </mantle-roster-shift-list-details-section>\n  </ng-container>\n\n</ng-container>\n", styles: [""], components: [{ type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: ["data", "section", "defaultRowHeight"] }, { type: TableDetailsSectionComponent, selector: "mantle-table-details-section", inputs: ["data", "section", "detailPageService"] }, { type: DashboardSectionComponent, selector: "mantle-dashboard-section", inputs: ["dashboardPageService", "slug", "data", "section"] }, { type: MarkdownDetailsSectionComponent, selector: "mantle-markdown-details-section", inputs: ["section"] }, { type: RosterShiftListDetailsSectionComponent, selector: "mantle-roster-shift-list-details-section", inputs: ["data", "section"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicDetailsSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2801,7 +3174,7 @@ class AccordionDetailsContainerComponent {
     constructor() { }
 }
 AccordionDetailsContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccordionDetailsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AccordionDetailsContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AccordionDetailsContainerComponent, 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: [""], components: [{ type: i1$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i1$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i2$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: DynamicDetailsSectionComponent, selector: "mantle-dynamic-details-section", inputs: ["detailPageService", "content", "section"] }], directives: [{ type: i1$7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
+AccordionDetailsContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AccordionDetailsContainerComponent, 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: [""], components: [{ type: i1$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i1$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i2$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: DynamicDetailsSectionComponent, selector: "mantle-dynamic-details-section", inputs: ["detailPageService", "content", "section"] }], directives: [{ type: i1$7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccordionDetailsContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -2864,11 +3237,20 @@ class DialogNestedFormComponent {
         this.title = this.dialogNestedFormParams.title;
         this.section = this.dialogNestedFormParams.section;
         this.showDeleteButton = this.dialogNestedFormParams.showDeleteButton;
+        this.formPageService = this.dialogNestedFormParams.formPageService;
         if (!this.dialogNestedFormParams.data) {
             this.dialogNestedFormParams.data = this.dynamicFormService.generateFormInitData(this.dialogNestedFormParams.section.elements);
         }
-        this.saveButtonText = this.dialogNestedFormParams.saveButtonText || 'Save';
+        this.saveButtonText = this.dialogNestedFormParams.saveButtonText || 'mantle.buttons.save';
         this.form = this.dynamicFormService.toFormGroup(this.dialogNestedFormParams.data);
+        if (this.formPageService) {
+            this.formPageService.onDialogFormContentLoaded(this.dialogNestedFormParams);
+            this.form.valueChanges.subscribe(val => {
+                let changes = this.formPageService.onDialogFormValueChanged(this.dialogNestedFormParams, this.form.getRawValue());
+                if (changes)
+                    this.form.patchValue(changes);
+            });
+        }
     }
     ngAfterViewChecked() {
         this.changeDetectorRef.detectChanges();
@@ -2887,7 +3269,7 @@ class DialogNestedFormComponent {
     }
 }
 DialogNestedFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DialogNestedFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: DynamicFormService }], target: i0.ɵɵFactoryTarget.Component });
-DialogNestedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DialogNestedFormComponent, selector: "mantle-dialog-nested-form", 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)=\"onCancel()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content>\n\n  <mantle-grid-form-section\n      [section]=\"section\"\n      [form]=\"form\">\n  </mantle-grid-form-section>\n\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" class=\"actions-section\">\n  <button fxFlex=\"0 0 auto\" *ngIf=\"showDeleteButton\" mat-button (click)=\"onDelete()\" color=\"warn\">Delete</button>\n  <div fxFlex=\"1 1 auto\"></div>\n  <button fxFlex=\"0 0 auto\" mat-button (click)=\"onSave()\" [disabled]=\"!form.valid\">{{ saveButtonText }}</button>\n</mat-dialog-actions>\n", styles: [""], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GridFormSectionComponent, selector: "mantle-grid-form-section", inputs: ["title", "section", "form", "errors", "defaultRowHeight"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DialogNestedFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DialogNestedFormComponent, selector: "mantle-dialog-nested-form", 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)=\"onCancel()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content>\n\n  <mantle-grid-form-section\n      [section]=\"section\"\n      [form]=\"form\">\n  </mantle-grid-form-section>\n\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" class=\"actions-section\">\n  <button fxFlex=\"0 0 auto\" *ngIf=\"showDeleteButton\" mat-button (click)=\"onDelete()\" color=\"warn\">{{ 'mantle.buttons.delete' | translate }}</button>\n  <div fxFlex=\"1 1 auto\"></div>\n  <button fxFlex=\"0 0 auto\" mat-button (click)=\"onSave()\" [disabled]=\"!form.valid\">{{ saveButtonText | translate }}</button>\n</mat-dialog-actions>\n", styles: [""], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: GridFormSectionComponent, selector: "mantle-grid-form-section", inputs: ["title", "section", "form", "errors", "defaultRowHeight"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DialogNestedFormComponent, decorators: [{
             type: Component,
             args: [{
@@ -2924,6 +3306,9 @@ class TableFormSectionComponent {
             showEditButton: this.section.config.can_edit
         };
         dialogConfig.width = '80%';
+        if (this.section.config.modal_section) {
+            dialogConfig.data.section = this.formPageService.formDialogLayoutChanges(this.section.config.modal_section, record);
+        }
         const dialogRef = this.dialog.open(DialogNestedDetailsComponent, dialogConfig);
         dialogRef.afterClosed().subscribe((dialogResponse) => {
             if (dialogResponse && dialogResponse.edit) {
@@ -2937,9 +3322,13 @@ class TableFormSectionComponent {
             title: record ? 'Edit Item' : 'Add Item',
             section: this.section.config.modal_section,
             data: record,
-            showDeleteButton: this.section.config.can_delete
+            showDeleteButton: this.section.config.can_delete,
+            formPageService: this.formPageService
         };
         dialogConfig.width = '80%';
+        if (this.section.config.modal_section) {
+            dialogConfig.data.section = this.formPageService.formDialogLayoutChanges(this.section.config.modal_section, record || null);
+        }
         const dialogRef = this.dialog.open(DialogNestedFormComponent, dialogConfig);
         dialogRef.afterClosed().subscribe((formData) => {
             if (formData) {
@@ -2978,7 +3367,7 @@ class TableFormSectionComponent {
     }
 }
 TableFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TableFormSectionComponent, deps: [{ token: i1$3.MatDialog }, { token: ArrayService }], target: i0.ɵɵFactoryTarget.Component });
-TableFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TableFormSectionComponent, selector: "mantle-table-form-section", inputs: { title: "title", section: "section", form: "form" }, ngImport: i0, template: "<mantle-section-title *ngIf=\"title\"  [title]=\"title\"></mantle-section-title>\n\n<div class=\"table-section-content\">\n  <button *ngIf=\"canAddRecord()\" mat-raised-button color=\"primary\" type=\"button\" class=\"add-button\" (click)=\"openFormDialog()\">\n    + Add Item\n  </button>\n\n  <mantle-dynamic-table\n      [columns]=\"section.elements\"\n      [items]=\"form.value[section.config.attr]\"\n      [withClickableRows]=\"true\"\n      (rowClicked)=\"openDetailsDialog($event)\">\n  </mantle-dynamic-table>\n</div>\n", styles: [".add-button{text-transform:uppercase;border-radius:0}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: DynamicTableComponent, selector: "mantle-dynamic-table", inputs: ["columns", "items", "withClickableRows"], outputs: ["rowClicked"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TableFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TableFormSectionComponent, selector: "mantle-table-form-section", inputs: { title: "title", section: "section", form: "form", formPageService: "formPageService" }, ngImport: i0, template: "<mantle-section-title *ngIf=\"title\"  [title]=\"title\"></mantle-section-title>\n\n<div class=\"table-section-content\">\n  <button *ngIf=\"canAddRecord()\" mat-raised-button color=\"primary\" type=\"button\" class=\"add-button\" (click)=\"openFormDialog()\">\n    + {{ 'mantle.buttons.add_item' | translate }}\n  </button>\n\n  <mantle-dynamic-table\n      [columns]=\"section.elements\"\n      [items]=\"form.value[section.config.attr]\"\n      [withClickableRows]=\"true\"\n      (rowClicked)=\"openDetailsDialog($event)\">\n  </mantle-dynamic-table>\n</div>\n", styles: [".add-button{text-transform:uppercase;border-radius:0}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: DynamicTableComponent, selector: "mantle-dynamic-table", inputs: ["columns", "items", "withClickableRows"], outputs: ["rowClicked"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TableFormSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -2992,6 +3381,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }], form: [{
                 type: Input
+            }], formPageService: [{
+                type: Input
+            }] } });
+
+class RosterShiftListFormSectionComponent {
+    constructor() { }
+    ngOnInit() {
+        this.setDropdownValues();
+    }
+    canAddRecord() {
+        if (!this.section.config.can_add)
+            return false;
+        if (!this.section.options.max_record_count)
+            return true;
+        let recordCount = this.form.value[this.section.config.attr].filter((item) => {
+            return !item._destroy;
+        }).length;
+        return this.section.options.max_record_count > recordCount;
+    }
+    setDropdownValues() {
+        let primaryColumnIndex = this.section.elements.findIndex((element) => element.attr == this.section.options.draggable_attr);
+        if (primaryColumnIndex == -1)
+            return;
+        this.dropdownValues = this.section.elements[primaryColumnIndex].options.values.filter((option) => { return !option.hidden; });
+        ;
+    }
+    onAddClicked(value) {
+        let sortAttr = this.section.options.ordinal;
+        let attribute = this.section.options.draggable_attr;
+        let tableContent = [...this.form.getRawValue()[this.section.config.attr]];
+        let formData = {};
+        formData[sortAttr] = tableContent.filter(item => { return !item._destroy; }).length + 1;
+        formData[attribute] = value;
+        tableContent.push(formData);
+        this.form.patchValue({
+            [this.section.config.attr]: tableContent
+        });
+    }
+    get valid() {
+        return this.form.valid;
+    }
+    get value() {
+        return this.form.getRawValue();
+    }
+    reset() {
+        this.form.reset();
+    }
+}
+RosterShiftListFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RosterShiftListFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RosterShiftListFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: RosterShiftListFormSectionComponent, selector: "mantle-roster-shift-list-form-section", inputs: { title: "title", section: "section", form: "form" }, ngImport: i0, template: "<mantle-section-title *ngIf=\"title\"  [title]=\"title\"></mantle-section-title>\n\n<div class=\"roster-shift-list-content\">\n  <mantle-draggable-table\n      [columns]=\"section.elements\"\n      [items]=\"form.value[section.config.attr]\"\n      [sortAttr]=\"section.options.ordinal\"\n      [writable]=\"true\">\n  </mantle-draggable-table>\n\n  <div class=\"dropdown-add-button-section\" *ngIf=\"canAddRecord()\">\n    <button mat-raised-button color=\"primary\"\n        type=\"button\" class=\"add-button\"\n        [matMenuTriggerFor]=\"dropdownMenu\">\n      + {{ 'mantle.buttons.add_item' | translate }} \n    </button>\n    <mat-menu #dropdownMenu=\"matMenu\">\n      <button *ngFor=\"let dropdownValue of dropdownValues\"\n        mat-menu-item\n        (click)=\"onAddClicked(dropdownValue.value)\">\n        {{ dropdownValue.label }}\n      </button>\n    </mat-menu>\n  </div>\n</div>\n", styles: [".add-button{text-transform:uppercase;border-radius:0}.dropdown-add-button-section{padding-top:20px}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: DraggableTableComponent, selector: "mantle-draggable-table", inputs: ["columns", "items", "sortAttr", "writable"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$4.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i5.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RosterShiftListFormSectionComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mantle-roster-shift-list-form-section',
+                    templateUrl: './roster-shift-list-form-section.component.html',
+                    styleUrls: ['./roster-shift-list-form-section.component.scss']
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { title: [{
+                type: Input
+            }], section: [{
+                type: Input
+            }], form: [{
+                type: Input
             }] } });
 
 class DynamicFormSectionComponent {
@@ -3008,12 +3460,18 @@ class DynamicFormSectionComponent {
     asDynamicLayoutDashboardSection(section) {
         return section;
     }
+    asDynamicLayoutRosterShiftListSection(section) {
+        return section;
+    }
     asDashboardPageService(formPageService) {
         return formPageService;
     }
+    asDetailPageService(formPageService) {
+        return formPageService;
+    }
 }
 DynamicFormSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicFormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicFormSectionComponent, selector: "mantle-dynamic-form-section", inputs: { formPageService: "formPageService", section: "section", content: "content", form: "form" }, ngImport: i0, template: "<ng-container *ngIf=\"section.writable\">\n  <ng-container *ngTemplateOutlet=\"dynamicFormContent; context: { form: form, section: section, content: content };\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!section.writable\">\n  <ng-container *ngTemplateOutlet=\"dynamicDetailsContent; context: { section: section, content: content };\"></ng-container>\n</ng-container>\n\n<ng-template #dynamicFormContent let-form=\"form\" let-content=\"content\" let-section=\"section\">\n  <ng-container [ngSwitch]=\"section.layout\">\n\n    <ng-container *ngSwitchCase=\"'grid'\">\n      <mantle-grid-form-section\n          [section]=\"asDynamicLayoutGridSection(section)\"\n          [form]=\"form\"\n          [errors]=\"content.errors || {}\">\n      </mantle-grid-form-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'table'\">\n      <mantle-table-form-section\n          [section]=\"asDynamicLayoutTableSection(section)\"\n          [form]=\"form\">\n      </mantle-table-form-section>\n    </ng-container>\n\n  </ng-container>\n</ng-template>\n\n<ng-template #dynamicDetailsContent let-content=\"content\" let-section=\"section\">\n  <ng-container [ngSwitch]=\"section.layout\">\n\n    <ng-container *ngSwitchCase=\"'grid'\">\n      <mantle-grid-details-section\n          [section]=\"asDynamicLayoutGridSection(section)\"\n          [data]=\"content.data\">\n      </mantle-grid-details-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'table'\">\n      <mantle-table-details-section\n          [section]=\"asDynamicLayoutTableSection(section)\"\n          [data]=\"content.data\">\n      </mantle-table-details-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'dashboard'\">\n      <mantle-dashboard-section\n          [slug]=\"section.slug\"\n          [section]=\"asDynamicLayoutDashboardSection(section)\"\n          [data]=\"content.data\"\n          [dashboardPageService]=\"asDashboardPageService(formPageService)\">\n      </mantle-dashboard-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'markdown'\">\n      <mantle-markdown-details-section\n          [section]=\"asDynamicLayoutMarkdownSection(section)\">\n      </mantle-markdown-details-section>\n    </ng-container>\n\n  </ng-container>\n</ng-template>\n", styles: [""], components: [{ type: GridFormSectionComponent, selector: "mantle-grid-form-section", inputs: ["title", "section", "form", "errors", "defaultRowHeight"] }, { type: TableFormSectionComponent, selector: "mantle-table-form-section", inputs: ["title", "section", "form"] }, { type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: ["data", "section", "defaultRowHeight"] }, { type: TableDetailsSectionComponent, selector: "mantle-table-details-section", inputs: ["data", "section"] }, { type: DashboardSectionComponent, selector: "mantle-dashboard-section", inputs: ["dashboardPageService", "slug", "data", "section"] }, { type: MarkdownDetailsSectionComponent, selector: "mantle-markdown-details-section", inputs: ["section"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+DynamicFormSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicFormSectionComponent, selector: "mantle-dynamic-form-section", inputs: { formPageService: "formPageService", section: "section", content: "content", form: "form" }, ngImport: i0, template: "<ng-container *ngIf=\"section.writable\">\n  <ng-container *ngTemplateOutlet=\"dynamicFormContent; context: { form: form, section: section, content: content };\"></ng-container>\n</ng-container>\n<ng-container *ngIf=\"!section.writable\">\n  <ng-container *ngTemplateOutlet=\"dynamicDetailsContent; context: { section: section, content: content };\"></ng-container>\n</ng-container>\n\n<ng-template #dynamicFormContent let-form=\"form\" let-content=\"content\" let-section=\"section\">\n  <ng-container [ngSwitch]=\"section.layout\">\n\n    <ng-container *ngSwitchCase=\"'grid'\">\n      <mantle-grid-form-section\n          [section]=\"asDynamicLayoutGridSection(section)\"\n          [form]=\"form\"\n          [errors]=\"content.errors || {}\">\n      </mantle-grid-form-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'table'\">\n      <mantle-table-form-section\n          [section]=\"asDynamicLayoutTableSection(section)\"\n          [form]=\"form\"\n          [formPageService]=\"formPageService\">\n      </mantle-table-form-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'roster-shift-list'\">\n      <mantle-roster-shift-list-form-section\n          [section]=\"asDynamicLayoutRosterShiftListSection(section)\"\n          [form]=\"form\">\n      </mantle-roster-shift-list-form-section>\n    </ng-container>\n\n  </ng-container>\n</ng-template>\n\n<ng-template #dynamicDetailsContent let-content=\"content\" let-section=\"section\">\n  <ng-container [ngSwitch]=\"section.layout\">\n\n    <ng-container *ngSwitchCase=\"'grid'\">\n      <mantle-grid-details-section\n          [section]=\"asDynamicLayoutGridSection(section)\"\n          [data]=\"content.data\">\n      </mantle-grid-details-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'table'\">\n      <mantle-table-details-section\n          [section]=\"asDynamicLayoutTableSection(section)\"\n          [data]=\"content.data\"\n          [detailPageService]=\"asDetailPageService(formPageService)\">\n      </mantle-table-details-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'dashboard'\">\n      <mantle-dashboard-section\n          [slug]=\"section.slug\"\n          [section]=\"asDynamicLayoutDashboardSection(section)\"\n          [data]=\"content.data\"\n          [dashboardPageService]=\"asDashboardPageService(formPageService)\">\n      </mantle-dashboard-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'markdown'\">\n      <mantle-markdown-details-section\n          [section]=\"asDynamicLayoutMarkdownSection(section)\">\n      </mantle-markdown-details-section>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'roster-shift-list'\">\n      <mantle-roster-shift-list-details-section\n          [section]=\"asDynamicLayoutRosterShiftListSection(section)\"\n          [data]=\"content.data\">\n      </mantle-roster-shift-list-details-section>\n    </ng-container>\n\n  </ng-container>\n</ng-template>\n", styles: [""], components: [{ type: GridFormSectionComponent, selector: "mantle-grid-form-section", inputs: ["title", "section", "form", "errors", "defaultRowHeight"] }, { type: TableFormSectionComponent, selector: "mantle-table-form-section", inputs: ["title", "section", "form", "formPageService"] }, { type: RosterShiftListFormSectionComponent, selector: "mantle-roster-shift-list-form-section", inputs: ["title", "section", "form"] }, { type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: ["data", "section", "defaultRowHeight"] }, { type: TableDetailsSectionComponent, selector: "mantle-table-details-section", inputs: ["data", "section", "detailPageService"] }, { type: DashboardSectionComponent, selector: "mantle-dashboard-section", inputs: ["dashboardPageService", "slug", "data", "section"] }, { type: MarkdownDetailsSectionComponent, selector: "mantle-markdown-details-section", inputs: ["section"] }, { type: RosterShiftListDetailsSectionComponent, selector: "mantle-roster-shift-list-details-section", inputs: ["data", "section"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicFormSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -3057,7 +3515,7 @@ class AccordionFormContainerComponent {
     constructor() { }
 }
 AccordionFormContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccordionFormContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AccordionFormContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AccordionFormContainerComponent, 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: [""], components: [{ type: i1$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i1$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i2$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: DynamicFormSectionComponent, selector: "mantle-dynamic-form-section", inputs: ["formPageService", "section", "content", "form"] }], directives: [{ type: i1$7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
+AccordionFormContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AccordionFormContainerComponent, 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: [""], components: [{ type: i1$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i1$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i2$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: DynamicFormSectionComponent, selector: "mantle-dynamic-form-section", inputs: ["formPageService", "section", "content", "form"] }], directives: [{ type: i1$7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccordionFormContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -3107,7 +3565,11 @@ class DynamicFormComponent {
             this.form = this.dynamicFormService.toFormGroup(this.content.data);
             if (this.formPageService) {
                 this.form.valueChanges.subscribe(val => {
-                    this.formPageService.onFormValueChanged(this.content, this.form.getRawValue());
+                    let changes = this.formPageService.onFormValueChanged(this.content, this.form.getRawValue());
+                    if (changes) {
+                        this.content.data = Object.assign(Object.assign({}, this.content.data), changes);
+                        this.form.patchValue(changes);
+                    }
                 });
             }
         }
@@ -3164,7 +3626,7 @@ class SnackbarComponent {
     }
 }
 SnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SnackbarComponent, deps: [{ token: MAT_SNACK_BAR_DATA }, { token: i1$8.MatSnackBarRef }], target: i0.ɵɵFactoryTarget.Component });
-SnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SnackbarComponent, 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 }}</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"], components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }] });
+SnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SnackbarComponent, 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"], components: [{ type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SnackbarComponent, decorators: [{
             type: Component,
             args: [{
@@ -3225,7 +3687,7 @@ class DialogFormComponent {
         this.formPageService = this.dialogFormParams.formPageService;
         this.id = this.dialogFormParams.id;
         this.title = this.dialogFormParams.title;
-        let responseObservable = this.id ? this.formPageService.getEdit(this.id) : this.formPageService.getNew();
+        let responseObservable = this.id ? this.formPageService.getEdit(this.id) : this.formPageService.getNew(this.dialogFormParams.initData);
         this.content$ = responseObservable.pipe(map((res) => {
             if (this.dialogFormParams.initData) {
                 res.content.data = this.objectService.deepMerge(res.content.data, this.dialogFormParams.initData);
@@ -3248,7 +3710,7 @@ class DialogFormComponent {
     onSaveSuccess(res) {
         this.id = res.id;
         this.content$ = of(res.content);
-        this.announcementService.success('Save successful!');
+        this.announcementService.success('mantle.messages.save_successful');
         this.close(res.content.data);
         this.isSaveInProgress = false;
     }
@@ -3260,18 +3722,30 @@ class DialogFormComponent {
         else {
             this.close();
         }
-        this.announcementService.error('Save failed!');
+        this.announcementService.error('mantle.messages.save_failed');
         if (!!((_a = res.error.alert) === null || _a === void 0 ? void 0 : _a.message)) {
             this.announcementService.error(res.error.alert.message);
         }
         this.isSaveInProgress = false;
     }
+    onDeleteClicked() {
+        this.formPageService.delete(this.id, () => { this.isDeleteInProgress = true; }, (res) => { this.onDeleteSuccess(res); }, (res) => { this.onDeleteFailure(res); });
+    }
+    onDeleteSuccess(res) {
+        this.announcementService.success('mantle.messages.delete_successful');
+        this.close({ id: this.id, _destroy: true });
+        this.isDeleteInProgress = false;
+    }
+    onDeleteFailure(res) {
+        this.announcementService.error('mantle.messages.delete_failed');
+        this.isDeleteInProgress = false;
+    }
     close(result = false) {
         this.dialogRef.close(result);
     }
 }
 DialogFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DialogFormComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }, { token: AnnouncementService }, { token: ObjectService }], target: i0.ɵɵFactoryTarget.Component });
-DialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DialogFormComponent, selector: "mantle-dialog-form", viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: DynamicFormComponent, descendants: true }], 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-form #dynamicForm [content]=\"content$ | async\"></mantle-dynamic-form>\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" class=\"actions-section\">\n  <div fxFlex=\"1 1 auto\"></div>\n\n  <div fxFlex=\"0 0 auto\">\n    <button mat-raised-button\n        *ngIf=\"!isSaveInProgress\"\n        color=\"primary\"\n        type=\"button\"\n        class=\"save-button\"\n        (click)=\"onSaveClicked()\"\n        [disabled]=\"!dynamicForm?.valid\">\n      Save\n    </button>\n\n    <button mat-raised-button\n        *ngIf=\"isSaveInProgress\"\n        color=\"primary\"\n        type=\"button\"\n        class=\"saving-button\"\n        (click)=\"onSaveClicked()\"\n        [disabled]=\"true\">\n      Saving\n      <mat-spinner matSuffix [diameter]=\"16\"></mat-spinner>\n    </button>\n  </div>\n</mat-dialog-actions>\n", styles: [".save-button,.saving-button{width:140px}.saving-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i4.AsyncPipe } });
+DialogFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DialogFormComponent, selector: "mantle-dialog-form", viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: DynamicFormComponent, descendants: true }], 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-form #dynamicForm [content]=\"content$ | async\"></mantle-dynamic-form>\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" class=\"actions-section\">\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!!id && formPageService.showDeleteButtonInForm\">\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=\"deleting-button\"\n        [disabled]=\"true\">\n      {{ 'mantle.buttons.deleting' | translate }}\n      <mat-spinner matSuffix [diameter]=\"16\"></mat-spinner>\n    </button>\n  </div>\n\n  <div fxFlex=\"1 1 auto\"></div>\n\n  <div fxFlex=\"0 0 auto\">\n    <button mat-raised-button\n        *ngIf=\"!isSaveInProgress\"\n        color=\"primary\"\n        type=\"button\"\n        class=\"save-button\"\n        (click)=\"onSaveClicked()\"\n        [disabled]=\"!dynamicForm?.valid\">\n      {{ 'mantle.buttons.save' | translate }}\n    </button>\n\n    <button mat-raised-button\n        *ngIf=\"isSaveInProgress\"\n        color=\"primary\"\n        type=\"button\"\n        class=\"saving-button\"\n        (click)=\"onSaveClicked()\"\n        [disabled]=\"true\">\n      {{ 'mantle.buttons.saving' | translate }}\n      <mat-spinner matSuffix [diameter]=\"16\"></mat-spinner>\n    </button>\n  </div>\n</mat-dialog-actions>\n", styles: [".save-button,.saving-button{width:140px}.saving-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i4.AsyncPipe, "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DialogFormComponent, decorators: [{
             type: Component,
             args: [{
@@ -3339,7 +3813,7 @@ class LayoutEditorFieldElementComponent {
     }
 }
 LayoutEditorFieldElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LayoutEditorFieldElementComponent, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-LayoutEditorFieldElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LayoutEditorFieldElementComponent, selector: "mantle-layout-editor-field-element", inputs: { element: "element", showControls: "showControls" }, ngImport: i0, template: "<mat-card>\n  <div class=\"element-content\" fxLayout=\"column\" fxLayoutAlign=\"stretch\">\n\n    <div fxFlex=\"0 0 40px\">\n      <div *ngIf=\"showControls\" fxLayout=\"row\" fxLayoutAlign=\"center start\" class=\"element-controls\">\n        <div fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              type=\"button\">\n            <mat-icon>drag_indicator</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"1 1 auto\"></div>\n        <div *ngIf=\"element.user_specified\" fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"onEditElementClicked()\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n        <div *ngIf=\"element.user_specified\" fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              color=\"warn\"\n              type=\"button\"\n              (click)=\"onDeleteElementClicked()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div fxFlex=\"1 0 0\"></div>\n\n    <div fxFlex=\"0 0 auto\">\n      <h4 class=\"label\">{{ element.label }}</h4>\n    </div>\n\n    <div fxFlex=\"1 0 0\"></div>\n\n    <div fxFlex=\"0 0 auto\">\n      <h5 class=\"properties\"><b>{{ '{' }}</b> {{ element.attr_type }} <b>{{ '}' }}</b></h5>\n    </div>\n\n  </div>\n</mat-card>\n", styles: [".mat-card{height:100px;padding:8px}.mat-card .element-content{height:100%}.mat-card .element-content .label{width:100%;margin-bottom:0;text-align:center;font-weight:bold}.mat-card .element-content .properties{width:100%;margin-bottom:0;text-align:right}.mat-card .element-content .element-controls .mat-icon{font-size:20px}\n"], components: [{ type: i3$6.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+LayoutEditorFieldElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LayoutEditorFieldElementComponent, selector: "mantle-layout-editor-field-element", inputs: { element: "element", showControls: "showControls" }, ngImport: i0, template: "<mat-card>\n  <div class=\"element-content\" fxLayout=\"column\" fxLayoutAlign=\"stretch\">\n\n    <div fxFlex=\"0 0 40px\">\n      <div *ngIf=\"showControls\" fxLayout=\"row\" fxLayoutAlign=\"center start\" class=\"element-controls\">\n        <div fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              type=\"button\">\n            <mat-icon>drag_indicator</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"1 1 auto\"></div>\n        <div *ngIf=\"element.user_specified\" fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"onEditElementClicked()\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n        <div *ngIf=\"element.user_specified\" fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              color=\"warn\"\n              type=\"button\"\n              (click)=\"onDeleteElementClicked()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div fxFlex=\"1 0 0\"></div>\n\n    <div fxFlex=\"0 0 auto\">\n      <h4 class=\"label\">{{ element.label }}</h4>\n    </div>\n\n    <div fxFlex=\"1 0 0\"></div>\n\n    <div fxFlex=\"0 0 auto\">\n      <h5 class=\"properties\"><b>{{ '{' }}</b> {{ element.attr_type }} <b>{{ '}' }}</b></h5>\n    </div>\n\n  </div>\n</mat-card>\n", styles: [".mat-card{height:100px;padding:8px}.mat-card .element-content{height:100%}.mat-card .element-content .label{width:100%;margin-bottom:0;text-align:center;font-weight:bold}.mat-card .element-content .properties{width:100%;margin-bottom:0;text-align:right}.mat-card .element-content .element-controls .mat-icon{font-size:20px}\n"], components: [{ type: i3$6.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LayoutEditorFieldElementComponent, decorators: [{
             type: Component,
             args: [{
@@ -3405,7 +3879,7 @@ class LayoutEditorTableColumnElementComponent {
     }
 }
 LayoutEditorTableColumnElementComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LayoutEditorTableColumnElementComponent, deps: [{ token: i1$3.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
-LayoutEditorTableColumnElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LayoutEditorTableColumnElementComponent, selector: "mantle-layout-editor-table-column-element", inputs: { element: "element", showControls: "showControls" }, ngImport: i0, template: "<mat-card>\n  <div class=\"element-content\" fxLayout=\"column\" fxLayoutAlign=\"stretch\">\n\n    <div fxFlex=\"0 0 40px\">\n      <div *ngIf=\"showControls\" fxLayout=\"row\" fxLayoutAlign=\"center start\" class=\"element-controls\">\n        <div fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              type=\"button\">\n            <mat-icon>drag_indicator</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"1 1 auto\"></div>\n        <div *ngIf=\"element.user_specified\" fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"onEditElementClicked()\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n        <div *ngIf=\"element.user_specified\" fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              color=\"warn\"\n              type=\"button\"\n              (click)=\"onDeleteElementClicked()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div fxFlex=\"1 0 0\"></div>\n\n    <div fxFlex=\"0 0 auto\">\n      <h4 class=\"label\">{{ element.label }}</h4>\n    </div>\n\n    <div fxFlex=\"1 0 0\"></div>\n\n    <div fxFlex=\"0 0 auto\">\n      <h5 class=\"properties\"><b>{{ '{' }}</b> {{ element.attr_type }} <b>{{ '}' }}</b></h5>\n    </div>\n\n  </div>\n</mat-card>\n", styles: [".mat-card{height:100px;padding:8px}.mat-card .element-content{height:100%}.mat-card .element-content .label{width:100%;margin-bottom:0;text-align:center;font-weight:bold}.mat-card .element-content .properties{width:100%;margin-bottom:0;text-align:right}.mat-card .element-content .element-controls .mat-icon{font-size:20px}\n"], components: [{ type: i3$6.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+LayoutEditorTableColumnElementComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LayoutEditorTableColumnElementComponent, selector: "mantle-layout-editor-table-column-element", inputs: { element: "element", showControls: "showControls" }, ngImport: i0, template: "<mat-card>\n  <div class=\"element-content\" fxLayout=\"column\" fxLayoutAlign=\"stretch\">\n\n    <div fxFlex=\"0 0 40px\">\n      <div *ngIf=\"showControls\" fxLayout=\"row\" fxLayoutAlign=\"center start\" class=\"element-controls\">\n        <div fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              type=\"button\">\n            <mat-icon>drag_indicator</mat-icon>\n          </button>\n        </div>\n        <div fxFlex=\"1 1 auto\"></div>\n        <div *ngIf=\"element.user_specified\" fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              color=\"primary\"\n              type=\"button\"\n              (click)=\"onEditElementClicked()\">\n            <mat-icon>edit</mat-icon>\n          </button>\n        </div>\n        <div *ngIf=\"element.user_specified\" fxFlex=\"0 0 auto\">\n          <button mat-icon-button\n              color=\"warn\"\n              type=\"button\"\n              (click)=\"onDeleteElementClicked()\">\n            <mat-icon>delete</mat-icon>\n          </button>\n        </div>\n      </div>\n    </div>\n\n    <div fxFlex=\"1 0 0\"></div>\n\n    <div fxFlex=\"0 0 auto\">\n      <h4 class=\"label\">{{ element.label }}</h4>\n    </div>\n\n    <div fxFlex=\"1 0 0\"></div>\n\n    <div fxFlex=\"0 0 auto\">\n      <h5 class=\"properties\"><b>{{ '{' }}</b> {{ element.attr_type }} <b>{{ '}' }}</b></h5>\n    </div>\n\n  </div>\n</mat-card>\n", styles: [".mat-card{height:100px;padding:8px}.mat-card .element-content{height:100%}.mat-card .element-content .label{width:100%;margin-bottom:0;text-align:center;font-weight:bold}.mat-card .element-content .properties{width:100%;margin-bottom:0;text-align:right}.mat-card .element-content .element-controls .mat-icon{font-size:20px}\n"], components: [{ type: i3$6.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LayoutEditorTableColumnElementComponent, decorators: [{
             type: Component,
             args: [{
@@ -3540,7 +4014,7 @@ class GridLayoutEditorSectionComponent {
     }
 }
 GridLayoutEditorSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GridLayoutEditorSectionComponent, deps: [{ token: ScreenSizeService }, { token: i1$3.MatDialog }, { token: ArrayService }], target: i0.ɵɵFactoryTarget.Component });
-GridLayoutEditorSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GridLayoutEditorSectionComponent, selector: "mantle-grid-layout-editor-section", inputs: { section: "section", defaultRowHeight: "defaultRowHeight" }, ngImport: i0, template: "<div class=\"grid-layout-editor-section\">\n  <mat-grid-list\n      [rowHeight]=\"section.rowHeight || defaultRowHeight\"\n      [cols]=\"section.singleColumn ? 1 : numColumns\"\n      [class.multi-column]=\"section.singleColumn ? false : numColumns > 1\">\n\n    <ng-container *ngFor=\"let element of section.dynamic_layout_grid_fields_attributes\">\n      <mat-grid-tile *ngIf=\"!element._destroy\" [colspan]=\"section.singleColumn ? 1 : getColSpanForField(element)\" [rowspan]=\"getRowSpanForField(element)\">\n        <mantle-dynamic-layout-editor-element\n            elementType=\"field\"\n            [element]=\"element\"\n            [showControls]=\"!section.elements_locked\">\n        </mantle-dynamic-layout-editor-element>\n      </mat-grid-tile>\n    </ng-container>\n\n  </mat-grid-list>\n</div>\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center start\" fxLayoutGap=\"16px\" class=\"section-controls\">\n  <div fxFlex=\"1 1 auto\"></div>\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!section.elements_locked\">\n    <button mat-raised-button\n        color=\"primary\"\n        type=\"button\"\n        (click)=\"onAddElementClicked()\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".section-controls{margin-top:16px}.section-controls button{padding:0;min-width:36px}\n"], components: [{ type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DynamicLayoutEditorElementComponent, selector: "mantle-dynamic-layout-editor-element", inputs: ["element", "elementType", "showControls"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }] });
+GridLayoutEditorSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: GridLayoutEditorSectionComponent, selector: "mantle-grid-layout-editor-section", inputs: { section: "section", defaultRowHeight: "defaultRowHeight" }, ngImport: i0, template: "<div class=\"grid-layout-editor-section\">\n  <mat-grid-list\n      [rowHeight]=\"section.rowHeight || defaultRowHeight\"\n      [cols]=\"section.singleColumn ? 1 : numColumns\"\n      [class.multi-column]=\"section.singleColumn ? false : numColumns > 1\">\n\n    <ng-container *ngFor=\"let element of section.dynamic_layout_grid_fields_attributes\">\n      <mat-grid-tile *ngIf=\"!element._destroy\" [colspan]=\"section.singleColumn ? 1 : getColSpanForField(element)\" [rowspan]=\"getRowSpanForField(element)\">\n        <mantle-dynamic-layout-editor-element\n            elementType=\"field\"\n            [element]=\"element\"\n            [showControls]=\"!section.elements_locked\">\n        </mantle-dynamic-layout-editor-element>\n      </mat-grid-tile>\n    </ng-container>\n\n  </mat-grid-list>\n</div>\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center start\" fxLayoutGap=\"16px\" class=\"section-controls\">\n  <div fxFlex=\"1 1 auto\"></div>\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!section.elements_locked\">\n    <button mat-raised-button\n        color=\"primary\"\n        type=\"button\"\n        (click)=\"onAddElementClicked()\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".section-controls{margin-top:16px}.section-controls button{padding:0;min-width:36px}\n"], components: [{ type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DynamicLayoutEditorElementComponent, selector: "mantle-dynamic-layout-editor-element", inputs: ["element", "elementType", "showControls"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: GridLayoutEditorSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -3602,7 +4076,7 @@ class TableLayoutEditorSectionComponent {
     }
 }
 TableLayoutEditorSectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TableLayoutEditorSectionComponent, deps: [{ token: i1$3.MatDialog }, { token: ArrayService }], target: i0.ɵɵFactoryTarget.Component });
-TableLayoutEditorSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TableLayoutEditorSectionComponent, selector: "mantle-table-layout-editor-section", inputs: { section: "section" }, ngImport: i0, template: "<div class=\"table-layout-editor-section\">\n  <h4 class=\"section-type-label\">Table</h4>\n  <mat-grid-list rowHeight=\"120px\" [cols]=\"section.dynamic_layout_table_columns_attributes.length\" [class.multi-column]=\"true\" [ngStyle]=\"{ 'width.px': section.dynamic_layout_table_columns_attributes.length * 300 }\">\n\n    <ng-container *ngFor=\"let element of section.dynamic_layout_table_columns_attributes\">\n      <mat-grid-tile *ngIf=\"!element._destroy\" colspan=\"1\" rowspan=\"1\">\n        <mantle-dynamic-layout-editor-element\n            elementType=\"table-column\"\n            [element]=\"element\"\n            [showControls]=\"!section.elements_locked\">\n        </mantle-dynamic-layout-editor-element>\n      </mat-grid-tile>\n    </ng-container>\n\n  </mat-grid-list>\n</div>\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center start\" fxLayoutGap=\"16px\" class=\"section-controls\">\n  <div fxFlex=\"1 1 auto\"></div>\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!section.elements_locked\">\n    <button mat-raised-button\n        color=\"primary\"\n        type=\"button\"\n        (click)=\"onAddElementClicked()\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".section-controls{margin-top:16px}.section-controls button{padding:0;min-width:36px}\n"], components: [{ type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DynamicLayoutEditorElementComponent, selector: "mantle-dynamic-layout-editor-element", inputs: ["element", "elementType", "showControls"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }] });
+TableLayoutEditorSectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TableLayoutEditorSectionComponent, selector: "mantle-table-layout-editor-section", inputs: { section: "section" }, ngImport: i0, template: "<div class=\"table-layout-editor-section\">\n  <h4 class=\"section-type-label\">Table</h4>\n  <mat-grid-list rowHeight=\"120px\" [cols]=\"section.dynamic_layout_table_columns_attributes.length\" [class.multi-column]=\"true\" [ngStyle]=\"{ 'width.px': section.dynamic_layout_table_columns_attributes.length * 300 }\">\n\n    <ng-container *ngFor=\"let element of section.dynamic_layout_table_columns_attributes\">\n      <mat-grid-tile *ngIf=\"!element._destroy\" colspan=\"1\" rowspan=\"1\">\n        <mantle-dynamic-layout-editor-element\n            elementType=\"table-column\"\n            [element]=\"element\"\n            [showControls]=\"!section.elements_locked\">\n        </mantle-dynamic-layout-editor-element>\n      </mat-grid-tile>\n    </ng-container>\n\n  </mat-grid-list>\n</div>\n\n<div fxLayout=\"row\" fxLayoutAlign=\"center start\" fxLayoutGap=\"16px\" class=\"section-controls\">\n  <div fxFlex=\"1 1 auto\"></div>\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!section.elements_locked\">\n    <button mat-raised-button\n        color=\"primary\"\n        type=\"button\"\n        (click)=\"onAddElementClicked()\">\n      <mat-icon>add</mat-icon>\n    </button>\n  </div>\n</div>\n", styles: [".section-controls{margin-top:16px}.section-controls button{padding:0;min-width:36px}\n"], components: [{ type: i3$2.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { type: i3$2.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { type: DynamicLayoutEditorElementComponent, selector: "mantle-dynamic-layout-editor-element", inputs: ["element", "elementType", "showControls"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TableLayoutEditorSectionComponent, decorators: [{
             type: Component,
             args: [{
@@ -3667,7 +4141,7 @@ class AccordionLayoutEditorContainerComponent {
     constructor() { }
 }
 AccordionLayoutEditorContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccordionLayoutEditorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AccordionLayoutEditorContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AccordionLayoutEditorContainerComponent, 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: [""], components: [{ type: i1$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i1$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i2$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: DynamicLayoutEditorSectionComponent, selector: "mantle-dynamic-layout-editor-section", inputs: ["layoutEditorPageService", "section"] }], directives: [{ type: i1$7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
+AccordionLayoutEditorContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: AccordionLayoutEditorContainerComponent, 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: [""], components: [{ type: i1$7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i1$7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i2$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: DynamicLayoutEditorSectionComponent, selector: "mantle-dynamic-layout-editor-section", inputs: ["layoutEditorPageService", "section"] }], directives: [{ type: i1$7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "displayMode", "togglePosition", "hideToggle"], exportAs: ["matAccordion"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$7.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: AccordionLayoutEditorContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -3736,17 +4210,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
             }] } });
 
 class PageTitleComponent {
-    constructor(screenSizeService) {
+    constructor(localeService, screenSizeService) {
+        this.localeService = localeService;
         this.screenSizeService = screenSizeService;
         this.isSmallScreen = false;
-        this.today = moment().format('dddd | DD MMM YYYY');
+        this.today = moment().locale(this.localeService.currentLocaleCode).format('dddd | DD MMM YYYY');
         this.screenSizeService.screenSize.subscribe((screenSize) => {
             this.isSmallScreen = screenSize == 'xs' || screenSize == 'sm';
         });
     }
 }
-PageTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PageTitleComponent, deps: [{ token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
-PageTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: PageTitleComponent, selector: "mantle-page-title", ngImport: i0, template: "<h1 fxLayout=\"row wrap\" fxLayoutGap=\"8px\">\n  <div fxFlex=\"0 0 auto\" class=\"title-text\"><ng-content></ng-content></div>\n  <div fxFlex=\"1 0 1px\"></div>\n  <div fxFlex=\"0 0 auto\" [fxHide]=\"isSmallScreen\" class=\"title-date\">{{ today }}</div>\n</h1>\n\n<hr />\n", styles: ["h1{margin-bottom:12px}.title-text{max-width:100%;text-transform:uppercase}.title-date{font-weight:lighter;text-align:right;white-space:nowrap}\n"], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i3.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
+PageTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PageTitleComponent, deps: [{ token: LocaleService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
+PageTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: PageTitleComponent, selector: "mantle-page-title", ngImport: i0, template: "<h1 fxLayout=\"row wrap\" fxLayoutGap=\"8px\">\n  <div fxFlex=\"0 0 auto\" class=\"title-text\"><ng-content></ng-content></div>\n  <div fxFlex=\"1 0 1px\"></div>\n  <div fxFlex=\"0 0 auto\" [fxHide]=\"isSmallScreen\" class=\"title-date\">{{ today }}</div>\n</h1>\n\n<hr />\n", styles: ["h1{margin-bottom:12px}.title-text{max-width:100%;text-transform:uppercase}.title-date{font-weight:lighter;text-align:right;white-space:nowrap}\n"], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i3.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PageTitleComponent, decorators: [{
             type: Component,
             args: [{
@@ -3754,7 +4229,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                     templateUrl: './page-title.component.html',
                     styleUrls: ['./page-title.component.scss']
                 }]
-        }], ctorParameters: function () { return [{ type: ScreenSizeService }]; } });
+        }], ctorParameters: function () { return [{ type: LocaleService }, { type: ScreenSizeService }]; } });
 
 class PlainDashboardContainerComponent {
     constructor() { }
@@ -3769,7 +4244,7 @@ class PlainDashboardContainerComponent {
     }
 }
 PlainDashboardContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PlainDashboardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PlainDashboardContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: PlainDashboardContainerComponent, selector: "mantle-plain-dashboard-container", inputs: { dashboardPageService: "dashboardPageService", content: "content", container: "container" }, ngImport: i0, template: "<ng-container *ngFor=\"let section of container.sections\">\n  <ng-container *ngIf=\"!section.hidden\">\n    <ng-container [ngSwitch]=\"section.layout\">\n\n      <ng-container *ngSwitchCase=\"'dashboard'\">\n        <mantle-dashboard-section\n            [slug]=\"section.slug\"\n            [section]=\"asDynamicLayoutDashboardSection(section)\"\n            [data]=\"content.data\"\n            [dashboardPageService]=\"dashboardPageService\">\n        </mantle-dashboard-section>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'grid'\">\n        <mantle-grid-details-section\n            [section]=\"asDynamicLayoutGridSection(section)\"\n            [data]=\"content.data\">\n        </mantle-grid-details-section>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'table'\">\n        <mantle-table-details-section\n            [section]=\"asDynamicLayoutTableSection(section)\"\n            [data]=\"content.data\">\n        </mantle-table-details-section>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [""], components: [{ type: DashboardSectionComponent, selector: "mantle-dashboard-section", inputs: ["dashboardPageService", "slug", "data", "section"] }, { type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: ["data", "section", "defaultRowHeight"] }, { type: TableDetailsSectionComponent, selector: "mantle-table-details-section", inputs: ["data", "section"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+PlainDashboardContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: PlainDashboardContainerComponent, selector: "mantle-plain-dashboard-container", inputs: { dashboardPageService: "dashboardPageService", content: "content", container: "container" }, ngImport: i0, template: "<ng-container *ngFor=\"let section of container.sections\">\n  <ng-container *ngIf=\"!section.hidden\">\n    <ng-container [ngSwitch]=\"section.layout\">\n\n      <ng-container *ngSwitchCase=\"'dashboard'\">\n        <mantle-dashboard-section\n            [slug]=\"section.slug\"\n            [section]=\"asDynamicLayoutDashboardSection(section)\"\n            [data]=\"content.data\"\n            [dashboardPageService]=\"dashboardPageService\">\n        </mantle-dashboard-section>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'grid'\">\n        <mantle-grid-details-section\n            [section]=\"asDynamicLayoutGridSection(section)\"\n            [data]=\"content.data\">\n        </mantle-grid-details-section>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'table'\">\n        <mantle-table-details-section\n            [section]=\"asDynamicLayoutTableSection(section)\"\n            [data]=\"content.data\">\n        </mantle-table-details-section>\n      </ng-container>\n\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [""], components: [{ type: DashboardSectionComponent, selector: "mantle-dashboard-section", inputs: ["dashboardPageService", "slug", "data", "section"] }, { type: GridDetailsSectionComponent, selector: "mantle-grid-details-section", inputs: ["data", "section", "defaultRowHeight"] }, { type: TableDetailsSectionComponent, selector: "mantle-table-details-section", inputs: ["data", "section", "detailPageService"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PlainDashboardContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -3838,7 +4313,7 @@ class DashboardPageComponent {
     }
 }
 DashboardPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardPageComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DashboardPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardPageComponent, 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 }}</mantle-page-title>\n  </div>\n\n  <div fxFlex=\"1 0 auto\">\n    <mantle-dynamic-dashboard [content]=\"content$ | async\" [dashboardPageService]=\"dashboardPageService\"></mantle-dynamic-dashboard>\n  </div>\n\n</div>\n", styles: [""], components: [{ type: PageTitleComponent, selector: "mantle-page-title" }, { type: DynamicDashboardComponent, selector: "mantle-dynamic-dashboard", inputs: ["dashboardPageService", "content"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }], pipes: { "async": i4.AsyncPipe } });
+DashboardPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DashboardPageComponent, 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\" [dashboardPageService]=\"dashboardPageService\"></mantle-dynamic-dashboard>\n  </div>\n\n</div>\n", styles: [""], components: [{ type: PageTitleComponent, selector: "mantle-page-title" }, { type: DynamicDashboardComponent, selector: "mantle-dynamic-dashboard", inputs: ["dashboardPageService", "content"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }], pipes: { "translate": i5.TranslatePipe, "async": i4.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DashboardPageComponent, decorators: [{
             type: Component,
             args: [{
@@ -3852,7 +4327,7 @@ class ContentTitleComponent {
     constructor() { }
 }
 ContentTitleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ContentTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ContentTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ContentTitleComponent, selector: "mantle-content-title", inputs: { thumbnail: "thumbnail", title: "title" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"content-title\">\n  <div *ngIf=\"thumbnail\" fxFlex=\"0 0 auto\">\n    <img class=\"content-title-thumbnail\" [attr.src]=\"thumbnail | secureImage | async\" />\n  </div>\n\n  <div fxFlex=\"1 0 1px\">\n    <h1 *ngIf=\"title\" class=\"content-title-title\">{{ title }}</h1>\n  </div>\n</div>\n", styles: [".content-title .content-title-thumbnail{width:60px;height:60px;border-radius:50%;margin:0 16px}.content-title .content-title-title{max-width:100%;text-transform:uppercase;margin-bottom:0}\n"], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$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"] }], pipes: { "async": i4.AsyncPipe, "secureImage": SecureImagePipe } });
+ContentTitleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ContentTitleComponent, selector: "mantle-content-title", inputs: { thumbnail: "thumbnail", title: "title" }, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"center center\" class=\"content-title\">\n  <div *ngIf=\"thumbnail\" fxFlex=\"0 0 auto\">\n    <img class=\"content-title-thumbnail\" [attr.src]=\"thumbnail | secureImage | async\" />\n  </div>\n\n  <div fxFlex=\"1 0 1px\">\n    <h1 *ngIf=\"title\" class=\"content-title-title\">{{ title }}</h1>\n  </div>\n</div>\n", styles: [".content-title .content-title-thumbnail{width:60px;height:60px;border-radius:50%;margin:0 16px}.content-title .content-title-title{max-width:100%;text-transform:uppercase;margin-bottom:0}\n"], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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"] }], pipes: { "async": i4.AsyncPipe, "secureImage": SecureImagePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ContentTitleComponent, decorators: [{
             type: Component,
             args: [{
@@ -3877,17 +4352,20 @@ class LayoutEditorPageComponent {
         this.isTabbedContent = this.route.snapshot.data['isTabbedContent'];
     }
     ngOnInit() {
-        this.loadData();
+        this.pullContent();
     }
-    loadData() {
+    pullContent() {
         this.route.params.subscribe(params => {
             this.id = this.route.snapshot.params['id'];
             this.layoutEditorPageService.getEdit(this.id).subscribe((res) => {
-                this.header = res.header;
-                this.content = res.content;
+                this.loadContent(res);
             });
         });
     }
+    loadContent(response) {
+        this.header = response.header;
+        this.content = response.content;
+    }
     onSaveClicked() {
         this.isSaveInProgress = true;
         this.layoutEditorPageService.save(this.id, this.content.data, (res) => { this.onSaveSuccess(res); }, (res) => { this.onSaveFailure(res); });
@@ -3895,7 +4373,7 @@ class LayoutEditorPageComponent {
     onSaveSuccess(res) {
         this.id = res.id;
         this.content = res.content;
-        this.announcementService.success('Save successful!');
+        this.announcementService.success('mantle.messages.save_successful');
         this.back();
         this.isSaveInProgress = false;
     }
@@ -3906,7 +4384,7 @@ class LayoutEditorPageComponent {
         else {
             this.back();
         }
-        this.announcementService.error('Save failed!');
+        this.announcementService.error('mantle.messages.save_failed');
         this.isSaveInProgress = false;
     }
     back() {
@@ -3914,7 +4392,7 @@ class LayoutEditorPageComponent {
     }
 }
 LayoutEditorPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LayoutEditorPageComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i0.Injector }, { token: AnnouncementService }], target: i0.ɵɵFactoryTarget.Component });
-LayoutEditorPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LayoutEditorPageComponent, 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\">\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=\"save-button\"\n            [ngClass]=\"{ 'in-progress-button': isSaveInProgress }\"\n            [disabled]=\"layoutEditorPageService.isCommitInProgress\"\n            (click)=\"onSaveClicked()\"> <!-- TODO || !dynamicForm?.valid -->\n          Save\n          <mat-spinner *ngIf=\"isSaveInProgress\" matSuffix [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".save-button{width:140px}.in-progress-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: ContentTitleComponent, selector: "mantle-content-title", inputs: ["thumbnail", "title"] }, { type: DynamicLayoutEditorComponent, selector: "mantle-dynamic-layout-editor", inputs: ["layoutEditorPageService", "content"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }] });
+LayoutEditorPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: LayoutEditorPageComponent, 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\">\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=\"save-button\"\n            [ngClass]=\"{ 'in-progress-button': isSaveInProgress }\"\n            [disabled]=\"layoutEditorPageService.isCommitInProgress\"\n            (click)=\"onSaveClicked()\"> <!-- TODO || !dynamicForm?.valid -->\n          {{ 'mantle.buttons.save' | translate }}\n          <mat-spinner *ngIf=\"isSaveInProgress\" matSuffix [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".save-button{width:140px}.in-progress-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: ContentTitleComponent, selector: "mantle-content-title", inputs: ["thumbnail", "title"] }, { type: DynamicLayoutEditorComponent, selector: "mantle-dynamic-layout-editor", inputs: ["layoutEditorPageService", "content"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: LayoutEditorPageComponent, decorators: [{
             type: Component,
             args: [{
@@ -3967,7 +4445,7 @@ class ListPageDataSource extends DataSource {
         if (this.paginator && this.sort && this.searchPanel) {
             // Combine everything that affects the rendered data into one update
             // stream for the data-table to consume.
-            return merge(this.paginator.page, this.sort.sortChange, this.searchPanel.search, this.dataService.webRtcEvents, this.dataService.listContentChangeEvents).pipe(startWith(null), switchMap(() => {
+            return merge(this.paginator.page, this.sort.sortChange, this.searchPanel.search, this.dataService.webRtcEvents, this.dataService.subContentChangeEvents).pipe(startWith(null), switchMap(() => {
                 var _a, _b, _c, _d, _e;
                 let params = new WebApiListRequest({
                     search: (_a = this.searchPanel) === null || _a === void 0 ? void 0 : _a.searchParams,
@@ -4042,7 +4520,7 @@ class SearchPanelComponent {
     }
 }
 SearchPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SearchPanelComponent, deps: [{ token: DynamicFormService }, { token: ObjectService }], target: i0.ɵɵFactoryTarget.Component });
-SearchPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SearchPanelComponent, selector: "mantle-search-panel", inputs: { searchFields: "searchFields" }, outputs: { search: "search" }, viewQueries: [{ propertyName: "searchForm", first: true, predicate: DynamicFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"search-panel\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"stretch\">\n    <div fxFlex=\"1 0 1px\"><h3 class=\"search-panel-title\">Search</h3></div> <div fxFlex=\"0 0 auto\"><mat-icon>search</mat-icon></div>\n  </div>\n  <hr />\n\n  <div class=\"filter-subtitle\">Filter By</div>\n\n  <mantle-dynamic-form #searchForm [content]=\"content\"></mantle-dynamic-form>\n\n  <button mat-button type=\"button\" class=\"reset-button\" (click)=\"onResetClicked()\">\n    Reset\n  </button>\n\n  <button mat-raised-button color=\"primary\" type=\"button\" class=\"search-button\" (click)=\"onSearchClicked();\">\n    Search\n  </button>\n</div>\n", styles: [".search-panel{width:200px}.search-panel .search-panel-title{text-transform:uppercase;margin:0}.search-panel hr{margin-top:0}.search-panel .filter-subtitle{text-transform:uppercase;font-weight:bold;margin-top:16px;margin-bottom:8px}.search-panel .reset-button{display:block;min-width:auto;background-color:transparent;text-transform:uppercase;font-weight:bold;padding:0}.search-panel .search-button{display:block;width:100%;text-transform:uppercase;border-radius:0;margin:16px 0}\n"], components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }] });
+SearchPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SearchPanelComponent, selector: "mantle-search-panel", inputs: { searchFields: "searchFields" }, outputs: { search: "search" }, viewQueries: [{ propertyName: "searchForm", first: true, predicate: DynamicFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"search-panel\">\n  <div fxLayout=\"row\" fxLayoutAlign=\"stretch\">\n    <div fxFlex=\"1 0 1px\"><h3 class=\"search-panel-title\">{{ 'mantle.search_panel.search' | translate }}</h3></div> <div fxFlex=\"0 0 auto\"><mat-icon>search</mat-icon></div>\n  </div>\n  <hr />\n\n  <div class=\"filter-subtitle\">{{ 'mantle.search_panel.filter_by' | translate }}</div>\n\n  <mantle-dynamic-form #searchForm [content]=\"content\"></mantle-dynamic-form>\n\n  <button mat-button type=\"button\" class=\"reset-button\" (click)=\"onResetClicked()\">\n    {{ 'mantle.buttons.reset' | translate }}\n  </button>\n\n  <button mat-raised-button color=\"primary\" type=\"button\" class=\"search-button\" (click)=\"onSearchClicked();\">\n    {{ 'mantle.buttons.search' | translate }}\n  </button>\n</div>\n", styles: [".search-panel{width:200px}.search-panel .search-panel-title{text-transform:uppercase;margin:0}.search-panel hr{margin-top:0}.search-panel .filter-subtitle{text-transform:uppercase;font-weight:bold;margin-top:16px;margin-bottom:8px}.search-panel .reset-button{display:block;min-width:auto;background-color:transparent;text-transform:uppercase;font-weight:bold;padding:0}.search-panel .search-button{display:block;width:100%;text-transform:uppercase;border-radius:0;margin:16px 0}\n"], components: [{ type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SearchPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -4069,6 +4547,7 @@ class ListPageComponent {
         this.isTabbedContent = false;
         this.withCollapsibleColumns = false;
         this.expandCollapsibleColumns = false;
+        this.additionalButtons = [];
         this.isActionPanelOpen = false;
         this.isSmallScreen = false;
         const listPageServiceInjectionToken = this.route.snapshot.data['listPageService'];
@@ -4090,6 +4569,7 @@ class ListPageComponent {
             this.isSmallScreen = screenSize == 'xs' || screenSize == 'sm';
             this.isActionPanelOpen = !this.isSmallScreen;
         });
+        this.loadAdditionalButtons();
     }
     ngAfterViewInit() {
         if (this.listPageService.defaultOrder) {
@@ -4110,6 +4590,9 @@ class ListPageComponent {
     onAddClicked() {
         this.listPageService.openForm();
     }
+    onBackToParentClicked() {
+        this.listPageService.openParent();
+    }
     isRecordChecked(record) {
         return this.arrayService.hasItem(this.dataSource.selectedRecordIds, record.id);
     }
@@ -4136,12 +4619,15 @@ class ListPageComponent {
     onBulkExportClicked(exportOption) {
         exportOption.export(this.dataSource.selectedRecordIds);
     }
+    loadAdditionalButtons() {
+        this.additionalButtons = this.listPageService.additionalListPageButtons();
+    }
     toggleCollapsibleColumns() {
         this.expandCollapsibleColumns = !this.expandCollapsibleColumns;
     }
 }
 ListPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ListPageComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: ArrayService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
-ListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ListPageComponent, 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 full-height-only\" [ngClass]=\"{'page': !isTabbedContent}\">\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!isTabbedContent\">\n    <mantle-page-title>{{ pageTitle }}</mantle-page-title>\n  </div>\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"withCollapsibleColumns\">\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                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>Collapse Table</span>\n          </ng-container>\n          <ng-container *ngIf=\"!expandCollapsibleColumns\">\n            <span>Expand Table</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          + New {{ listPageService?.noun() }}\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 }}</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 }}</span>\n              <mat-icon>download</mat-icon>\n            </button>\n          </ng-container>\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 }}\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          Close Actions<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> Open Actions\n        </ng-container>\n      </button>\n\n    </div>\n  </div>\n</div>\n", styles: [".main-content{padding-top:0;padding-bottom:0}.mat-drawer{padding:0 16px 0 0}.mat-drawer .add-button{display:block;width:100%;text-transform:uppercase;border-radius:0;margin:16px 0 0}.mat-drawer-end{padding:0 16px}.search-section{margin:16px 0 0}.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:normal;line-height:1.25rem;margin-right:.25rem}.export-button .mat-icon{height:auto;width:auto;font-size:2.5rem}.toggle-collapsible-columns-button{width:200px;text-transform:uppercase}.toggle-collapsible-columns-button .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}\n"], components: [{ type: PageTitleComponent, selector: "mantle-page-title" }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i7.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: SearchPanelComponent, selector: "mantle-search-panel", inputs: ["searchFields"], outputs: ["search"] }, { type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "arrowPosition", "sortActionDescription", "disableClear", "mat-sort-header", "start"], exportAs: ["matSortHeader"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i5$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortActive"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], animations: [
+ListPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ListPageComponent, 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 full-height-only\" [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                [ngClass]=\"{ 'in-progress-button': button.isInProgress() }\"\n                [disabled]=\"listPageService.isCommitInProgress || button.disabled || dataSource.selectedRecordIds.length <= 0\"\n                (click)=\"button.onClick(dataSource.selectedRecordIds)\">\n              {{ button.label | translate }}\n              <mat-spinner *ngIf=\"button.isInProgress()\" matSuffix [diameter]=\"16\"></mat-spinner>\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}.mat-drawer{padding:0 16px 0 0}.mat-drawer .add-button{display:block;width:200px;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: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:normal;line-height:1.25rem;margin-right:.25rem}.export-button .mat-icon{height:auto;width:auto;font-size:2.5rem}.toggle-collapsible-columns-button{width:200px;text-transform:uppercase}.toggle-collapsible-columns-button .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:100%;text-transform:uppercase;border-radius:0;margin:16px 0 0}.in-progress-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: PageTitleComponent, selector: "mantle-page-title" }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i7$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i7$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: SearchPanelComponent, selector: "mantle-search-panel", inputs: ["searchFields"], outputs: ["search"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }, { type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i11.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "id", "labelPosition", "name", "required", "checked", "disabled", "indeterminate", "aria-describedby", "value"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "arrowPosition", "sortActionDescription", "disableClear", "mat-sort-header", "start"], exportAs: ["matSortHeader"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortActive"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: ClickStopPropagationDirective, selector: "[click-stop-propagation]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "translate": i5.TranslatePipe }, animations: [
         trigger('collapse', [
             state('false', style({ display: AUTO_STYLE, opacity: 1 })),
             state('true', style({ display: 'none', opacity: 0 })),
@@ -4206,7 +4692,7 @@ class DeleteConfirmationDialogComponent {
     }
 }
 DeleteConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DeleteConfirmationDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-DeleteConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DeleteConfirmationDialogComponent, selector: "mantle-delete-confirmation-dialog", ngImport: i0, template: "<mat-dialog-content class=\"content-section\">\n\n  <h1 class=\"warn-text\">Are you sure?</h1>\n  <h3>{{ message }}</h3>\n\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" class=\"actions-section\">\n  <button fxFlex=\"0 0 auto\" mat-button (click)=\"onCancel()\">Cancel</button>\n  <div fxFlex=\"1 1 auto\"></div>\n  <button fxFlex=\"0 0 auto\" *ngFor=\"let button of buttons\"\n      mat-button\n      color=\"warn\"\n      (click)=\"onDeleteClicked(button.onClick)\">\n    {{ button.label }}\n  </button>\n</mat-dialog-actions>\n", styles: ["h1,h3{margin-bottom:8px}\n"], components: [{ type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DeleteConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DeleteConfirmationDialogComponent, selector: "mantle-delete-confirmation-dialog", ngImport: i0, template: "<mat-dialog-content class=\"content-section\">\n\n  <h1 class=\"warn-text\">{{ 'mantle.messages.are_you_sure' | translate }} </h1>\n  <h3>{{ message | translate }}</h3>\n\n</mat-dialog-content>\n\n<mat-dialog-actions fxLayout=\"row\" class=\"actions-section\">\n  <button fxFlex=\"0 0 auto\" mat-button (click)=\"onCancel()\">{{ 'mantle.buttons.cancel' | translate }}</button>\n  <div fxFlex=\"1 1 auto\"></div>\n  <button fxFlex=\"0 0 auto\" *ngFor=\"let button of buttons\"\n      mat-button\n      color=\"warn\"\n      (click)=\"onDeleteClicked(button.onClick)\">\n    {{ button.label | translate }}\n  </button>\n</mat-dialog-actions>\n", styles: ["h1,h3{margin-bottom:8px}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DeleteConfirmationDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -4223,7 +4709,6 @@ class SaveConfirmationDialogComponent {
     constructor(dialogRef, params) {
         this.dialogRef = dialogRef;
         this.params = params;
-        this.noun = this.params.noun;
         this.message = this.params.message;
     }
     onSaveClicked() {
@@ -4234,7 +4719,7 @@ class SaveConfirmationDialogComponent {
     }
 }
 SaveConfirmationDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SaveConfirmationDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
-SaveConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SaveConfirmationDialogComponent, selector: "mantle-save-confirmation-dialog", ngImport: i0, template: "<mat-dialog-content class=\"content-section\">\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n\n    <div fxFlex=\"0 0 auto\">\n      <mat-icon class=\"large-icon\">error_outline</mat-icon>\n    </div>\n\n    <div fxFlex=\"1 0 1px\">\n      <h3 [innerHtml]=\"message\"></h3>\n    </div>\n\n    <div fxFlex=\"0 0 auto\">\n      <button mat-button mat-stroked-button (click)=\"onSaveClicked()\">Confirm</button>\n    </div>\n\n  </div>\n\n</mat-dialog-content>\n", styles: ["h1,h3{margin-bottom:8px}.large-icon{font-size:40px;height:40px;width:40px}\n"], components: [{ type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }] });
+SaveConfirmationDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SaveConfirmationDialogComponent, selector: "mantle-save-confirmation-dialog", ngImport: i0, template: "<mat-dialog-content class=\"content-section\">\n\n  <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n\n    <div fxFlex=\"0 0 auto\">\n      <mat-icon class=\"large-icon\">error_outline</mat-icon>\n    </div>\n\n    <div *ngIf=\"message\" fxFlex=\"1 0 1px\">\n      <h3>{{ message | translate }}</h3>\n    </div>\n\n    <div fxFlex=\"0 0 auto\">\n      <button mat-button mat-stroked-button (click)=\"onSaveClicked()\">{{ 'mantle.buttons.confirm' | translate }}</button>\n    </div>\n\n  </div>\n\n</mat-dialog-content>\n", styles: ["h1,h3{margin-bottom:8px}.large-icon{width:32px;height:32px;font-size:32px}\n"], components: [{ type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SaveConfirmationDialogComponent, decorators: [{
             type: Component,
             args: [{
@@ -4256,7 +4741,7 @@ class ConfirmationService {
         dialogConfig.data = configData;
         dialogConfig.minWidth = '400px';
         dialogConfig.maxWidth = '80%';
-        dialogConfig.position = { right: '8px', bottom: '8px' };
+        dialogConfig.position = { bottom: '8px' };
         dialogConfig.autoFocus = false;
         dialogConfig.panelClass = 'confirmation-dialog';
         let dialogRef = this.dialog.open(SaveConfirmationDialogComponent, dialogConfig);
@@ -4345,7 +4830,7 @@ class FormPageComponent {
         this.formPageService.onFormContentLoaded(res.content);
         this.loadAdditionalButtons(res.content.data);
         this.content$ = of(res.content);
-        this.announcementService.success('Save successful!');
+        this.announcementService.success('mantle.messages.save_successful');
         this.back();
         this.isSaveInProgress = false;
     }
@@ -4365,11 +4850,11 @@ class FormPageComponent {
                 if (confirmed)
                     this.onSaveClicked();
                 else
-                    this.announcementService.error('Save failed!');
-            }, { noun: this.formPageService.noun(), message: res.confirmationRequest.message });
+                    this.announcementService.error('mantle.messages.save_failed');
+            }, { message: res.confirmationRequest.message });
         }
         else {
-            this.announcementService.error('Save failed!');
+            this.announcementService.error('mantle.messages.save_failed');
         }
         if (!!((_a = res.alert) === null || _a === void 0 ? void 0 : _a.message)) {
             this.announcementService.error(res.alert.message);
@@ -4386,7 +4871,7 @@ class FormPageComponent {
     }
 }
 FormPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: FormPageComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: AnnouncementService }, { token: ConfirmationService }], target: i0.ɵɵFactoryTarget.Component });
-FormPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: FormPageComponent, 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\">\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\">\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=\"additional-button\"\n              [ngClass]=\"{ 'in-progress-button': button.isInProgress() }\"\n              [disabled]=\"formPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(dynamicForm?.value)\">\n            {{ button.label }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" matSuffix [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=\"additional-button\"\n              [ngClass]=\"{ 'in-progress-button': button.isInProgress() }\"\n              [disabled]=\"formPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(dynamicForm?.value)\">\n            {{ button.label }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" matSuffix [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=\"save-button\"\n            [ngClass]=\"{ 'in-progress-button': isSaveInProgress }\"\n            [disabled]=\"formPageService.isCommitInProgress || !dynamicForm?.valid\"\n            (click)=\"onSaveClicked()\">\n          Save\n          <mat-spinner *ngIf=\"isSaveInProgress\" matSuffix [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".save-button,.additional-button{width:140px}.in-progress-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: ContentTitleComponent, selector: "mantle-content-title", inputs: ["thumbnail", "title"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i4.AsyncPipe } });
+FormPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: FormPageComponent, 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\">\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=\"additional-button\"\n              [ngClass]=\"{ 'in-progress-button': button.isInProgress() }\"\n              [disabled]=\"formPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(dynamicForm?.value)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" matSuffix [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=\"additional-button\"\n              [ngClass]=\"{ 'in-progress-button': button.isInProgress() }\"\n              [disabled]=\"formPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(dynamicForm?.value)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" matSuffix [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=\"save-button\"\n            [ngClass]=\"{ 'in-progress-button': isSaveInProgress }\"\n            [disabled]=\"formPageService.isCommitInProgress || !dynamicForm?.valid\"\n            (click)=\"onSaveClicked()\">\n          {{ 'mantle.buttons.save' | translate }}\n          <mat-spinner *ngIf=\"isSaveInProgress\" matSuffix [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".save-button,.additional-button{width:140px}.in-progress-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: ContentTitleComponent, selector: "mantle-content-title", inputs: ["thumbnail", "title"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i4.AsyncPipe, "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: FormPageComponent, decorators: [{
             type: Component,
             args: [{
@@ -4414,24 +4899,27 @@ class DetailPageComponent {
         this.isTabbedContent = this.route.snapshot.data['isTabbedContent'];
     }
     ngOnInit() {
-        this.loadData();
+        this.pullContent();
     }
-    loadData() {
+    pullContent() {
         this.route.params.subscribe(params => {
             this.id = this.route.snapshot.params['id'];
-            this.content$ = this.detailPageService.get(this.id).pipe(map(res => {
-                this.header = res.header;
-                this.detailPageService.onDetailContentLoaded(res.content);
-                res.content.containers.forEach((container) => {
-                    container.sections.forEach((section) => {
-                        this.loadSectionActions(section);
-                    });
-                });
-                this.loadAdditionalButtons(res.content.data);
-                this.exportOptions = this.detailPageService.detailPageExportOptions(res.content.data);
-                return res.content;
-            }));
+            this.detailPageService.get(this.id).subscribe((res) => {
+                this.loadContent(res);
+            });
+        });
+    }
+    loadContent(response) {
+        this.header = response.header;
+        this.content = response.content;
+        this.detailPageService.onDetailContentLoaded(this.content);
+        this.content.containers.forEach((container) => {
+            container.sections.forEach((section) => {
+                this.loadSectionActions(section);
+            });
         });
+        this.loadAdditionalButtons(this.content.data);
+        this.exportOptions = this.detailPageService.detailPageExportOptions(this.content.data);
     }
     loadSectionActions(section) {
         let sectionActions = this.detailPageService.detailPageSectionActions(section.slug);
@@ -4454,6 +4942,9 @@ class DetailPageComponent {
     onEditClicked() {
         this.detailPageService.openForm({ id: this.id });
     }
+    onCloneClicked() {
+        this.detailPageService.openForm({}, { clone_id: this.id });
+    }
     onBackClicked() {
         this.detailPageService.openList();
     }
@@ -4461,12 +4952,12 @@ class DetailPageComponent {
         this.detailPageService.delete(this.id, () => { this.isDeleteInProgress = true; }, (res) => { this.onDeleteSuccess(res); }, (res) => { this.onDeleteFailure(res); });
     }
     onDeleteSuccess(res) {
-        this.announcementService.success('Delete successful!');
+        this.announcementService.success('mantle.messages.delete_successful');
         this.back();
         this.isDeleteInProgress = false;
     }
     onDeleteFailure(res) {
-        this.announcementService.error('Delete failed!');
+        this.announcementService.error('mantle.messages.delete_failed');
         this.isDeleteInProgress = false;
     }
     back() {
@@ -4474,7 +4965,7 @@ class DetailPageComponent {
     }
 }
 DetailPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DetailPageComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i0.Injector }, { token: AnnouncementService }], target: i0.ɵɵFactoryTarget.Component });
-DetailPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DetailPageComponent, 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\">\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=\"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$ | async\" [detailPageService]=\"detailPageService\"></mantle-dynamic-details>\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=\"additional-button\"\n              [ngClass]=\"{ 'in-progress-button': button.isInProgress() }\"\n              [disabled]=\"detailPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(id)\">\n            {{ button.label }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" matSuffix [diameter]=\"16\"></mat-spinner>\n          </button>\n        </div>\n      </ng-container>\n\n      <ng-container *ngIf=\"content$ | async as 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 }}</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      <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=\"additional-button\"\n              [ngClass]=\"{ 'in-progress-button': button.isInProgress() }\"\n              [disabled]=\"detailPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(id)\">\n            {{ button.label }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" matSuffix [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=\"delete-button\"\n            [ngClass]=\"{ 'in-progress-button': isDeleteInProgress }\"\n            [disabled]=\"detailPageService.isCommitInProgress\"\n            (click)=\"onDeleteClicked()\">\n          Delete {{ detailPageService.noun() }}\n          <mat-spinner *ngIf=\"isDeleteInProgress\" matSuffix [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".edit-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:normal;line-height:1.25rem;margin-right:.25rem}.export-button .mat-icon{height:auto;width:auto;font-size:2.5rem}.additional-button{min-width:140px}.in-progress-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ContentTitleComponent, selector: "mantle-content-title", inputs: ["thumbnail", "title"] }, { type: DynamicDetailsComponent, selector: "mantle-dynamic-details", inputs: ["detailPageService", "content"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i4.AsyncPipe } });
+DetailPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DetailPageComponent, 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\">\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=\"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 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=\"additional-button\"\n              [ngClass]=\"{ 'in-progress-button': button.isInProgress() }\"\n              [disabled]=\"detailPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(id)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" matSuffix [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=\"additional-button\"\n              [ngClass]=\"{ 'in-progress-button': button.isInProgress() }\"\n              [disabled]=\"detailPageService.isCommitInProgress || button.disabled\"\n              (click)=\"button.onClick(id)\">\n            {{ button.label | translate }}\n            <mat-spinner *ngIf=\"button.isInProgress()\" matSuffix [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=\"delete-button\"\n            [ngClass]=\"{ 'in-progress-button': isDeleteInProgress }\"\n            [disabled]=\"detailPageService.isCommitInProgress\"\n            (click)=\"onDeleteClicked()\">\n          {{ 'mantle.buttons.delete' | translate }} {{ detailPageService.noun() | translate }}\n          <mat-spinner *ngIf=\"isDeleteInProgress\" matSuffix [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".edit-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:normal;line-height:1.25rem;margin-right:.25rem}.export-button .mat-icon{height:auto;width:auto;font-size:2.5rem}.additional-button{min-width:140px}.clone-button{min-width:140px}.in-progress-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: ContentTitleComponent, selector: "mantle-content-title", inputs: ["thumbnail", "title"] }, { type: DynamicDetailsComponent, selector: "mantle-dynamic-details", inputs: ["detailPageService", "content"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DetailPageComponent, decorators: [{
             type: Component,
             args: [{
@@ -4536,13 +5027,13 @@ class DocumentsPageComponent {
             this.listPageService.openForm({}, { document: document });
             this.uploadInProgress = false;
         }, (response) => {
-            this.announcementService.error('Unable to upload file');
+            this.announcementService.error('mantle.messages.unable_to_upload_file');
             this.uploadInProgress = false;
         });
     }
 }
 DocumentsPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DocumentsPageComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i0.Injector }, { token: AnnouncementService }, { token: WebApiService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
-DocumentsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DocumentsPageComponent, 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 full-height-only\" [ngClass]=\"{'page': !isTabbedContent}\">\n\n  <div fxFlex=\"0 0 auto\" *ngIf=\"!isTabbedContent\">\n    <mantle-page-title>{{ pageTitle }}</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          + New {{ listPageService?.noun() }}\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 }}</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 }}</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          Close Actions<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> Open Actions\n        </ng-container>\n      </button>\n\n    </div>\n  </div>\n</div>\n", styles: [".main-content{padding-top:0;padding-bottom:0}.mat-drawer{padding:0 16px 0 0}.mat-drawer .add-button{display:block;width:100%;text-transform:uppercase;border-radius:0;margin:16px 0 0}.mat-drawer-end{padding:0 16px}.search-section{margin:16px 0 0}.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:normal;line-height:1.25rem;margin-right:.25rem}.export-button .mat-icon{height:auto;width:auto;font-size:2.5rem}.toggle-collapsible-columns-button{width:200px;text-transform:uppercase}.toggle-collapsible-columns-button .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}\n"], components: [{ type: PageTitleComponent, selector: "mantle-page-title" }, { type: i7.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i7.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SearchPanelComponent, selector: "mantle-search-panel", inputs: ["searchFields"], outputs: ["search"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: LoaderComponent, selector: "mantle-loader", inputs: ["delay"] }, { type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "arrowPosition", "sortActionDescription", "disableClear", "mat-sort-header", "start"], exportAs: ["matSortHeader"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i5$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FileDropzoneDirective, selector: "[file-dropzone]", outputs: ["fileDropped"] }, { type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortActive"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
+DocumentsPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DocumentsPageComponent, 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 full-height-only\" [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}.mat-drawer{padding:0 16px 0 0}.mat-drawer .add-button{display:block;width:200px;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: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:normal;line-height:1.25rem;margin-right:.25rem}.export-button .mat-icon{height:auto;width:auto;font-size:2.5rem}.toggle-collapsible-columns-button{width:200px;text-transform:uppercase}.toggle-collapsible-columns-button .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:100%;text-transform:uppercase;border-radius:0;margin:16px 0 0}.in-progress-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: PageTitleComponent, selector: "mantle-page-title" }, { type: i7$1.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { type: i7$1.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: SearchPanelComponent, selector: "mantle-search-panel", inputs: ["searchFields"], outputs: ["search"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: LoaderComponent, selector: "mantle-loader", inputs: ["delay"] }, { type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i12.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "arrowPosition", "sortActionDescription", "disableClear", "mat-sort-header", "start"], exportAs: ["matSortHeader"] }, { type: DynamicAttributeDisplayComponent, selector: "mantle-dynamic-attribute-display", inputs: ["value", "field", "fieldType", "options"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i14.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FileDropzoneDirective, selector: "[file-dropzone]", outputs: ["fileDropped"] }, { type: i12.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortActive"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DocumentsPageComponent, decorators: [{
             type: Component,
             args: [{
@@ -4582,7 +5073,7 @@ class TabbedPageComponent {
     }
 }
 TabbedPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TabbedPageComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i1$4.Router }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TabbedPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TabbedPageComponent, 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>\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}} </a>\n    </nav>\n  </div>\n\n  <div fxFlex=\"1 0 1px\" class=\"tab-content vertically-scrollable\">\n    <router-outlet></router-outlet>\n  </div>\n\n</div>\n", styles: [""], components: [{ type: i2$7.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i2$7.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i1$4.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }] });
+TabbedPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: TabbedPageComponent, 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>\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  <div fxFlex=\"1 0 1px\" class=\"tab-content vertically-scrollable\">\n    <router-outlet></router-outlet>\n  </div>\n\n</div>\n", styles: [""], components: [{ type: i2$8.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["color"], exportAs: ["matTabNavBar", "matTabNav"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i2$8.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matTabLink"] }, { type: i1$4.RouterOutlet, selector: "router-outlet", outputs: ["activate", "deactivate"], exportAs: ["outlet"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: TabbedPageComponent, decorators: [{
             type: Component,
             args: [{
@@ -4592,6 +5083,172 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$4.ActivatedRoute }, { type: i1$4.Router }, { type: i0.Injector }]; } });
 
+const ROSTER_GANTT_CHART = {
+    chart: {
+        type: 'gantt'
+    },
+    exporting: {
+        enabled: true,
+        sourceWidth: 1200,
+        buttons: {
+            contextButton: {
+                menuItems: ["downloadCSV", "downloadPDF", "downloadJPEG"]
+            }
+        }
+    },
+    legend: { enabled: false },
+    plotOptions: {
+        gantt: {
+            borderRadius: 0,
+            pointWidth: 24
+        },
+        series: {
+            dataLabels: {
+                enabled: true,
+                format: '{point.shift_type}'
+            }
+        }
+    },
+    tooltip: {
+        pointFormatter: function () {
+            let point = this;
+            let startDate = new Date(point.start);
+            let startDateString = `${startDate.toLocaleString('en-US', { month: 'short' })}. ${startDate.getDate()}`;
+            let endDate = new Date(point.end);
+            endDate.setDate(endDate.getDate() - 1);
+            let endDateString = `${endDate.toLocaleString('en-US', { month: 'short' })}. ${endDate.getDate()}`;
+            return '<b>' + point.shift_type + '</b><br/><span>From: ' + startDateString + '</span><br/><span>To: ' + endDateString + '</span><br/>';
+        }
+    },
+    yAxis: {
+        type: 'category',
+        grid: {
+            enabled: true,
+            borderWidth: 1,
+            columns: [{
+                    title: { text: 'Employees' }
+                }]
+        },
+        gridLineWidth: 1
+    },
+};
+
+class RosterPageComponent {
+    constructor(route, injector, localeService, dialog, objectService, screenSizeService) {
+        this.route = route;
+        this.injector = injector;
+        this.localeService = localeService;
+        this.dialog = dialog;
+        this.objectService = objectService;
+        this.screenSizeService = screenSizeService;
+        this.rosterData = {}; // Roster gantt chart data
+        this.startDate = '';
+        this.endDate = '';
+        this.month = '';
+        this.isSmallScreen = false;
+        const rosterPageServiceInjectionToken = this.route.snapshot.data['rosterPageService'];
+        this.rosterPageService = this.injector.get(rosterPageServiceInjectionToken);
+        const rosterScheduleServiceInjectionToken = this.route.snapshot.data['rosterScheduleService'];
+        this.rosterScheduleService = this.injector.get(rosterScheduleServiceInjectionToken);
+        this.pageTitle = this.route.snapshot.data['pageTitle'];
+        this.screenSizeService.screenSize.subscribe((screenSize) => {
+            this.isSmallScreen = screenSize == 'xs' || screenSize == 'sm';
+        });
+    }
+    ngOnInit() {
+        this.startDate = moment().locale(this.localeService.currentLocaleCode).startOf('month').format('YYYY-MM-DD');
+        this.endDate = moment().locale(this.localeService.currentLocaleCode).endOf('month').format('YYYY-MM-DD');
+        this.month = moment().locale(this.localeService.currentLocaleCode).startOf('month').format('MMMM YYYY');
+        this.rosterScheduleService.subContentChangeEvents.subscribe((value) => {
+            this.pullContent();
+        });
+        this.pullContent();
+    }
+    showPrevMonth() {
+        this.startDate = moment(this.startDate).locale(this.localeService.currentLocaleCode).subtract(1, 'M').format('YYYY-MM-DD');
+        this.endDate = moment(this.startDate).locale(this.localeService.currentLocaleCode).endOf('month').format('YYYY-MM-DD');
+        this.month = moment(this.startDate).locale(this.localeService.currentLocaleCode).format('MMMM YYYY');
+        this.pullContent();
+    }
+    showNextMonth() {
+        this.startDate = moment(this.startDate).locale(this.localeService.currentLocaleCode).add(1, 'M').format('YYYY-MM-DD');
+        this.endDate = moment(this.startDate).locale(this.localeService.currentLocaleCode).endOf('month').format('YYYY-MM-DD');
+        this.month = moment(this.startDate).locale(this.localeService.currentLocaleCode).format('MMMM YYYY');
+        this.pullContent();
+    }
+    pullContent() {
+        this.route.params.subscribe(params => {
+            this.id = this.route.snapshot.params['id'];
+            this.rosterPageService.get(this.id, { date_from: this.startDate, date_to: this.endDate }).subscribe((res) => {
+                this.loadRoster(res.content.data.roster_schedules.data);
+            });
+        });
+    }
+    loadRoster(data) {
+        let ganttChartConfiguration = this.objectService.deepMerge(ROSTER_GANTT_CHART, {
+            plotOptions: {
+                series: {
+                    events: {
+                        click: (event) => {
+                            this.openScheduleRecord(event.point.schedule_id);
+                        }
+                    }
+                }
+            },
+            exporting: {
+                menuItemDefinitions: {
+                    downloadCSV: {
+                        text: 'Download CSV file',
+                        onclick: () => { this.exportCsv().subscribe(); }
+                    }
+                }
+            }
+        });
+        this.rosterData = this.objectService.deepMerge(ganttChartConfiguration, data);
+    }
+    exportCsv() {
+        return this.rosterPageService.exportRosterCsv(this.id, { date_from: this.startDate, date_to: this.endDate });
+    }
+    onBackClicked() {
+        this.rosterPageService.openList();
+    }
+    onEditClicked() {
+        const dialogConfig = new MatDialogConfig();
+        dialogConfig.data = {
+            formPageService: this.rosterPageService,
+            title: 'shift_management.dialogs.rosters.edit',
+            id: this.id
+        };
+        dialogConfig.width = '80%';
+        dialogConfig.autoFocus = false;
+        let dialogRef = this.dialog.open(DialogFormComponent, dialogConfig);
+        dialogRef.afterClosed().subscribe((response) => {
+            if (response === null || response === void 0 ? void 0 : response._destroy) {
+                this.rosterPageService.openList();
+            }
+            else if (response) {
+                this.pullContent();
+            }
+        });
+    }
+    openScheduleRecord(scheduleId) {
+        this.rosterScheduleService.openRecord({ id: scheduleId });
+    }
+    openScheduleForm(scheduleId) {
+        this.rosterScheduleService.openForm({ id: scheduleId }, { roster_id: this.id });
+    }
+}
+RosterPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RosterPageComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i0.Injector }, { token: LocaleService }, { token: i1$3.MatDialog }, { token: ObjectService }, { token: ScreenSizeService }], target: i0.ɵɵFactoryTarget.Component });
+RosterPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: RosterPageComponent, 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\">\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-weight:500}\n"], components: [{ type: PageTitleComponent, selector: "mantle-page-title" }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicChartComponent, selector: "mantle-dynamic-chart", inputs: ["label", "data"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i5.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: RosterPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mantle-roster-page',
+                    templateUrl: './roster-page.component.html',
+                    styleUrls: ['./roster-page.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$4.ActivatedRoute }, { type: i0.Injector }, { type: LocaleService }, { type: i1$3.MatDialog }, { type: ObjectService }, { type: ScreenSizeService }]; } });
+
 class ExportPageComponent {
     constructor(route, injector, changeDetectorRef, announcementService, objectService) {
         this.route = route;
@@ -4622,12 +5279,12 @@ class ExportPageComponent {
         this.isExportInProgress = false;
     }
     onExportFailure(res) {
-        this.announcementService.error('Export failed!');
+        this.announcementService.error('mantle.messages.export_failed');
         this.isExportInProgress = false;
     }
 }
 ExportPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ExportPageComponent, deps: [{ token: i1$4.ActivatedRoute }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: AnnouncementService }, { token: ObjectService }], target: i0.ɵɵFactoryTarget.Component });
-ExportPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ExportPageComponent, 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          Export\n        </button>\n\n\n        <button mat-raised-button\n            *ngIf=\"isExportInProgress\"\n            color=\"primary\"\n            type=\"button\"\n            class=\"exporting-button\"\n            [disabled]=\"true\">\n          Exporting\n          <mat-spinner matSuffix [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".export-button,.exporting-button{width:140px}.exporting-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i4.AsyncPipe } });
+ExportPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ExportPageComponent, 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=\"exporting-button\"\n            [disabled]=\"true\">\n          {{ 'mantle.buttons.exporting' | translate }}\n          <mat-spinner matSuffix [diameter]=\"16\"></mat-spinner>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".export-button,.exporting-button{width:140px}.exporting-button .mat-spinner{position:absolute;top:10px;right:12px}\n"], components: [{ type: DynamicFormComponent, selector: "mantle-dynamic-form", inputs: ["formPageService", "content"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.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"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i4.AsyncPipe, "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ExportPageComponent, decorators: [{
             type: Component,
             args: [{
@@ -4642,7 +5299,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
 
 class NavTreeComponent {
     constructor() {
-        this.reminderCount = 0;
+        this.notificationCount = 0;
         this.navTreeFeatures = [];
         this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel, this.isExpandable, this.getChildren);
         this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
@@ -4679,7 +5336,7 @@ class NavTreeComponent {
     }
 }
 NavTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NavTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NavTreeComponent, selector: "mantle-nav-tree", inputs: { reminderCount: "reminderCount", 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 == 'Reminders' && reminderCount > 0) ? reminderCount : undefined\"\n              matBadgeColor=\"warn\"\n              matBadgeSize=\"small\">\n            {{ node.icon }}\n          </mat-icon>\n          <div class=\"node-label\">{{ node.name }}</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 }}</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;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;width:calc(100% - 32px)}.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:calc(211px - 20px)!important;margin:6px 0 6px 20px!important}\n"], components: [{ type: i1$9.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i2$6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$9.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i1$9.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i4$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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$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"] }, { type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i1$4.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }, { type: i1$9.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }] });
+NavTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: NavTreeComponent, 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;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;width:calc(100% - 32px)}.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:calc(211px - 20px)!important;margin:6px 0 6px 20px!important}\n"], components: [{ type: i1$9.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i2$7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$9.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i1$9.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i4$2.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"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.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"] }, { type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], exportAs: ["routerLinkActive"] }, { type: i1$4.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["routerLink", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i8.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgePosition", "matBadgeSize", "matBadgeColor", "matBadgeOverlap", "matBadgeDescription", "matBadgeHidden", "matBadge"] }, { type: i1$9.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NavTreeComponent, decorators: [{
             type: Component,
             args: [{
@@ -4687,7 +5344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                     templateUrl: './nav-tree.component.html',
                     styleUrls: ['./nav-tree.component.scss']
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { reminderCount: [{
+        }], ctorParameters: function () { return []; }, propDecorators: { notificationCount: [{
                 type: Input
             }], navTreeFeatures: [{
                 type: Input
@@ -4714,6 +5371,12 @@ class DialogDetailsComponent {
     onCancelClicked() {
         this.close();
     }
+    onCloneClicked() {
+        this.close();
+        setTimeout(() => {
+            this.detailPageService.openForm({}, { clone_id: this.id });
+        }, 500);
+    }
     onEditClicked() {
         this.close();
         setTimeout(() => {
@@ -4724,12 +5387,12 @@ class DialogDetailsComponent {
         this.detailPageService.delete(this.id, () => { this.isDeleteInProgress = true; }, (res) => { this.onDeleteSuccess(res); }, (res) => { this.onDeleteFailure(res); });
     }
     onDeleteSuccess(res) {
-        this.announcementService.success('Delete successful!');
+        this.announcementService.success('mantle.messages.delete_successful');
         this.close({ id: this.id, _destroy: true });
         this.isDeleteInProgress = false;
     }
     onDeleteFailure(res) {
-        this.announcementService.error('Delete failed!');
+        this.announcementService.error('mantle.messages.delete_failed');
         this.isDeleteInProgress = false;
     }
     close(result = false) {
@@ -4740,7 +5403,7 @@ class DialogDetailsComponent {
     }
 }
 DialogDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DialogDetailsComponent, deps: [{ token: i1$4.Router }, { token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: AnnouncementService }], target: i0.ɵɵFactoryTarget.Component });
-DialogDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DialogDetailsComponent, 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      Delete\n    </button>\n\n    <button mat-raised-button\n        *ngIf=\"isDeleteInProgress\"\n        color=\"warn\"\n        type=\"button\"\n        class=\"deleting-button\"\n        [disabled]=\"true\">\n      Deleting\n      <mat-spinner matSuffix [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.showEditButton && detailPageService.canWrite()\">\n    <button mat-raised-button\n        color=\"primary\"\n        type=\"button\"\n        class=\"edit-button\"\n        (click)=\"onEditClicked()\">\n      Edit\n    </button>\n  </div>\n</mat-dialog-actions>\n", styles: [".delete-button,.deleting-button{text-transform:uppercase}.deleting-button .mat-spinner{position:absolute;top:10px;right:12px}.edit-button{width:140px}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i5.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicDetailsComponent, selector: "mantle-dynamic-details", inputs: ["detailPageService", "content"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i4$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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i4.AsyncPipe } });
+DialogDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DialogDetailsComponent, 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=\"deleting-button\"\n        [disabled]=\"true\">\n      {{ 'mantle.buttons.deleting' | translate }}\n      <mat-spinner matSuffix [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}.deleting-button .mat-spinner{position:absolute;top:10px;right:12px}.edit-button{width:140px}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DynamicDetailsComponent, selector: "mantle-dynamic-details", inputs: ["detailPageService", "content"] }, { type: i6.MatSpinner, selector: "mat-spinner", inputs: ["color"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i1$3.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$6.MatSuffix, selector: "[matSuffix]" }], pipes: { "async": i4.AsyncPipe, "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DialogDetailsComponent, decorators: [{
             type: Component,
             args: [{
@@ -4777,6 +5440,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$4.ActivatedRoute }, { type: i0.Injector }]; } });
 
+class QrCodeDialogComponent {
+    constructor(dialogRef, params) {
+        this.dialogRef = dialogRef;
+        this.params = params;
+        this.value = '';
+        this.instructions = '';
+        this.value = this.params.value;
+        this.instructions = this.params.instructions;
+    }
+    onClose() {
+        this.dialogRef.close();
+    }
+}
+QrCodeDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: QrCodeDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
+QrCodeDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: QrCodeDialogComponent, selector: "mantle-qr-code-dialog", 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=\"QR Code\"></mantle-section-title>\n  <button fxFlex=\"0 0 auto\" mat-icon-button tabindex=\"-1\" (click)=\"onClose()\">\n    <mat-icon>cancel</mat-icon>\n  </button>\n</div>\n\n<mat-dialog-content>\n  <p class=\"instructions\">{{ instructions | translate }}</p>\n  <div class=\"qr-code-wrapper\">\n    <qr-code [value]=\"value\"\n            size=\"300\"\n            cssClass=\"qr-code\"\n            errorCorrectionLevel=\"M\">\n    </qr-code>\n  </div>\n</mat-dialog-content>\n", styles: [".instructions{text-align:justify}.qr-code-wrapper{text-align:center}\n"], components: [{ type: SectionTitleComponent, selector: "mantle-section-title", inputs: ["title"] }, { type: i3$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$1.QrCodeComponent, selector: "qr-code", inputs: ["value", "size", "darkColor", "lightColor", "errorCorrectionLevel", "centerImageSrc", "centerImageSize", "margin"] }], directives: [{ type: i1$3.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i4$2.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"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], pipes: { "translate": i5.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: QrCodeDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mantle-qr-code-dialog',
+                    templateUrl: './qr-code-dialog.component.html',
+                    styleUrls: ['./qr-code-dialog.component.scss']
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
 class MantleModule {
 }
 MantleModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MantleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -4787,8 +5477,10 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DynamicDetailsComponent,
         GridDetailsSectionComponent,
         TableDetailsSectionComponent,
+        RosterShiftListDetailsSectionComponent,
         DynamicAttributeDisplayComponent,
         ActionsAttributeDisplayComponent,
+        IconAttributeDisplayComponent,
         ChipAttributeDisplayComponent,
         FileAttributeDisplayComponent,
         ImageAttributeDisplayComponent,
@@ -4798,6 +5490,7 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DynamicFormComponent,
         GridFormSectionComponent,
         TableFormSectionComponent,
+        RosterShiftListFormSectionComponent,
         DynamicFormFieldComponent,
         ChipInputComponent,
         DatepickerComponent,
@@ -4810,6 +5503,7 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         PasswordInputComponent,
         TextareaComponent,
         TextInputComponent,
+        TimeInputComponent,
         MarkdownInputComponent,
         AccordionLayoutEditorContainerComponent,
         DynamicLayoutEditorContainerComponent,
@@ -4831,6 +5525,7 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DetailPageComponent,
         DocumentsPageComponent,
         TabbedPageComponent,
+        RosterPageComponent,
         ExportPageComponent,
         PageTitleComponent,
         SectionTitleComponent,
@@ -4867,17 +5562,22 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DynamicFormSectionComponent,
         DynamicDashboardContainerComponent,
         PlainDashboardContainerComponent,
-        AutocompleteInputComponent], imports: [CommonModule,
+        AutocompleteInputComponent,
+        QrCodeDialogComponent,
+        DraggableTableComponent], imports: [CommonModule,
         RouterModule,
         HttpClientModule,
         LayoutModule,
         FlexLayoutModule,
+        DragDropModule,
         BrowserModule,
         BrowserAnimationsModule,
         FormsModule,
         ReactiveFormsModule,
         ImageCropperModule,
-        HighchartsChartModule, i1$5.MarkdownModule, MaterialModule], exports: [MaterialModule,
+        HighchartsChartModule, i1$5.MarkdownModule, QrCodeModule,
+        TranslateModule,
+        MaterialModule], exports: [MaterialModule,
         DynamicPipe,
         SecureImagePipe,
         ClickStopPropagationDirective,
@@ -4885,8 +5585,10 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DynamicDetailsComponent,
         GridDetailsSectionComponent,
         TableDetailsSectionComponent,
+        RosterShiftListDetailsSectionComponent,
         DynamicAttributeDisplayComponent,
         ActionsAttributeDisplayComponent,
+        IconAttributeDisplayComponent,
         ChipAttributeDisplayComponent,
         FileAttributeDisplayComponent,
         ImageAttributeDisplayComponent,
@@ -4896,6 +5598,7 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DynamicFormComponent,
         GridFormSectionComponent,
         TableFormSectionComponent,
+        RosterShiftListFormSectionComponent,
         DynamicFormFieldComponent,
         ChipInputComponent,
         DatepickerComponent,
@@ -4908,6 +5611,7 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         PasswordInputComponent,
         TextareaComponent,
         TextInputComponent,
+        TimeInputComponent,
         MarkdownInputComponent,
         AccordionLayoutEditorContainerComponent,
         DynamicLayoutEditorContainerComponent,
@@ -4929,6 +5633,7 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DetailPageComponent,
         DocumentsPageComponent,
         TabbedPageComponent,
+        RosterPageComponent,
         ExportPageComponent,
         PageTitleComponent,
         SectionTitleComponent,
@@ -4965,7 +5670,8 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DynamicFormSectionComponent,
         DynamicDashboardContainerComponent,
         PlainDashboardContainerComponent,
-        AutocompleteInputComponent] });
+        AutocompleteInputComponent,
+        DraggableTableComponent] });
 MantleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MantleModule, providers: [
         DatePipe,
     ], imports: [[
@@ -4974,6 +5680,7 @@ MantleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             HttpClientModule,
             LayoutModule,
             FlexLayoutModule,
+            DragDropModule,
             BrowserModule,
             BrowserAnimationsModule,
             FormsModule,
@@ -4981,6 +5688,8 @@ MantleModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             ImageCropperModule,
             HighchartsChartModule,
             MarkdownModule.forRoot(),
+            QrCodeModule,
+            TranslateModule,
             MaterialModule,
         ], MaterialModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MantleModule, decorators: [{
@@ -4994,8 +5703,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         DynamicDetailsComponent,
                         GridDetailsSectionComponent,
                         TableDetailsSectionComponent,
+                        RosterShiftListDetailsSectionComponent,
                         DynamicAttributeDisplayComponent,
                         ActionsAttributeDisplayComponent,
+                        IconAttributeDisplayComponent,
                         ChipAttributeDisplayComponent,
                         FileAttributeDisplayComponent,
                         ImageAttributeDisplayComponent,
@@ -5005,6 +5716,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         DynamicFormComponent,
                         GridFormSectionComponent,
                         TableFormSectionComponent,
+                        RosterShiftListFormSectionComponent,
                         DynamicFormFieldComponent,
                         ChipInputComponent,
                         DatepickerComponent,
@@ -5017,6 +5729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         PasswordInputComponent,
                         TextareaComponent,
                         TextInputComponent,
+                        TimeInputComponent,
                         MarkdownInputComponent,
                         AccordionLayoutEditorContainerComponent,
                         DynamicLayoutEditorContainerComponent,
@@ -5038,6 +5751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         DetailPageComponent,
                         DocumentsPageComponent,
                         TabbedPageComponent,
+                        RosterPageComponent,
                         ExportPageComponent,
                         PageTitleComponent,
                         SectionTitleComponent,
@@ -5075,6 +5789,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         DynamicDashboardContainerComponent,
                         PlainDashboardContainerComponent,
                         AutocompleteInputComponent,
+                        QrCodeDialogComponent,
+                        DraggableTableComponent,
                     ],
                     imports: [
                         CommonModule,
@@ -5082,6 +5798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         HttpClientModule,
                         LayoutModule,
                         FlexLayoutModule,
+                        DragDropModule,
                         BrowserModule,
                         BrowserAnimationsModule,
                         FormsModule,
@@ -5089,6 +5806,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         ImageCropperModule,
                         HighchartsChartModule,
                         MarkdownModule.forRoot(),
+                        QrCodeModule,
+                        TranslateModule,
                         MaterialModule,
                     ],
                     exports: [
@@ -5100,8 +5819,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         DynamicDetailsComponent,
                         GridDetailsSectionComponent,
                         TableDetailsSectionComponent,
+                        RosterShiftListDetailsSectionComponent,
                         DynamicAttributeDisplayComponent,
                         ActionsAttributeDisplayComponent,
+                        IconAttributeDisplayComponent,
                         ChipAttributeDisplayComponent,
                         FileAttributeDisplayComponent,
                         ImageAttributeDisplayComponent,
@@ -5111,6 +5832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         DynamicFormComponent,
                         GridFormSectionComponent,
                         TableFormSectionComponent,
+                        RosterShiftListFormSectionComponent,
                         DynamicFormFieldComponent,
                         ChipInputComponent,
                         DatepickerComponent,
@@ -5123,6 +5845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         PasswordInputComponent,
                         TextareaComponent,
                         TextInputComponent,
+                        TimeInputComponent,
                         MarkdownInputComponent,
                         AccordionLayoutEditorContainerComponent,
                         DynamicLayoutEditorContainerComponent,
@@ -5144,6 +5867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         DetailPageComponent,
                         DocumentsPageComponent,
                         TabbedPageComponent,
+                        RosterPageComponent,
                         ExportPageComponent,
                         PageTitleComponent,
                         SectionTitleComponent,
@@ -5181,6 +5905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         DynamicDashboardContainerComponent,
                         PlainDashboardContainerComponent,
                         AutocompleteInputComponent,
+                        DraggableTableComponent,
                     ],
                     providers: [
                         DatePipe,
@@ -5339,6 +6064,130 @@ const SPLINE_CHART = {
     }
 };
 
+const MANTLE_LANG_EN = {
+    "core": {
+        "auth": {
+            "incorrect_password": "Incorrect password.",
+            "page_access_denied": "You do not have access to this page."
+        },
+        "buttons": {
+            "add": "Add",
+            "add_item": "Add Item",
+            "cancel": "Cancel",
+            "clone": "Clone",
+            "close_actions": "Close Actions",
+            "collapse_table": "Collapse Table",
+            "confirm": "Confirm",
+            "delete": "Delete",
+            "deleting": "Deleting",
+            "download": "Download",
+            "edit": "Edit",
+            "expand_table": "Expand Table",
+            "export": "Export",
+            "exporting": "Exporting",
+            "open_actions": "Open Actions",
+            "reset": "Reset",
+            "save": "Save",
+            "saving": "Saving",
+            "search": "Search"
+        },
+        "file_preview": {
+            "unable_to_preview_file": "Unable to preview file."
+        },
+        "image_cropper": {
+            "crop_image": "Crop Image",
+            "original": "Original",
+            "preview": "Preview"
+        },
+        "messages": {
+            "are_you_sure": "Are you sure?",
+            "confirm_deletion": "Do you want to delete this record?",
+            "could_not_update_locale": "Could not set language",
+            "delete_failed": "Delete failed!",
+            "delete_successful": "Delete successful!",
+            "export_failed": "Export failed!",
+            "save_failed": "Save failed!",
+            "save_successful": "Save successful!",
+            "unable_to_upload_file": "Unable to upload file",
+            "unknown_error": "Unknown error"
+        },
+        "paginator": {
+            "items_per_page": "Items per page:",
+            "first_page": "First page",
+            "previous_page": "Previous page",
+            "next_page": "Next page",
+            "last_page": "Last page",
+            "of": "of"
+        },
+        "search_panel": {
+            "search": "Search",
+            "filter_by": "Filter By"
+        }
+    }
+};
+
+const MANTLE_LANG_MS = {
+    "core": {
+        "auth": {
+            "incorrect_password": "Kata laluan salah.",
+            "page_access_denied": "Anda tidak mempunyai akses ke halaman ini."
+        },
+        "buttons": {
+            "add": "Tambah",
+            "add_item": "Tambah Item",
+            "cancel": "Batal",
+            "clone": "Klon",
+            "close_actions": "Tutup Tindakan",
+            "collapse_table": "Runtuhkan Jadual",
+            "confirm": "Sahkan",
+            "delete": "Padam",
+            "deleting": "Memadam",
+            "download": "Muat turun",
+            "edit": "Sunting",
+            "expand_table": "Kembangkan Jadual",
+            "export": "Eksport",
+            "exporting": "Mengeksport",
+            "open_actions": "Buka Tindakan",
+            "reset": "Set semula",
+            "save": "Simpan",
+            "saving": "Menyimpan",
+            "search": "Cari"
+        },
+        "file_preview": {
+            "unable_to_preview_file": "Tidak dapat pratonton fail."
+        },
+        "image_cropper": {
+            "crop_image": "Pangkas Imej",
+            "original": "Asal",
+            "preview": "Pratonton"
+        },
+        "messages": {
+            "are_you_sure": "Adakah anda pasti?",
+            "confirm_deletion": "Adakah anda mahu memadamkan rekod ini?",
+            "could_not_update_locale": "Tidak dapat menetapkan bahasa",
+            "delete_failed": "Padam gagal!",
+            "delete_successful": "Padam berjaya!",
+            "export_failed": "Eksport gagal!",
+            "save_failed": "Simpanan gagal!",
+            "save_successful": "Simpanan berjaya!",
+            "unable_to_upload_file": "Tidak dapat memuat naik fail",
+            "unknown_error": "Ralat tidak diketahui"
+        },
+        "paginator": {
+            "items_per_page": "Item/halaman:",
+            "first_page": "Muka pertama",
+            "previous_page": "Halaman sebelumnya",
+            "next_page": "Muka seterusnya",
+            "last_page": "Muka terakhir",
+            "of": "daripada"
+        },
+        "search_panel": {
+            "search": "Cari",
+            "filter_by": "Tapis Mengikut"
+        }
+    }
+};
+
 class ScreenSizeMap {
     constructor(params) {
         this.entries = params;
@@ -5349,22 +6198,30 @@ class ScreenSizeMap {
 }
 
 class CurrentUserService {
-    constructor(tokenService, router, arrayService) {
+    constructor(tokenService, router, announcementService, arrayService, dataBroadcastService, localeService, webApiService) {
         this.tokenService = tokenService;
         this.router = router;
+        this.announcementService = announcementService;
         this.arrayService = arrayService;
-        this.sessionData = new BehaviorSubject({});
-        this.sessionData.next(this.getSessionData());
-        this.sessionData.subscribe((sessionData) => {
-            if (sessionData)
+        this.dataBroadcastService = dataBroadcastService;
+        this.localeService = localeService;
+        this.webApiService = webApiService;
+        this.dataBroadcastService.sessionData.next(this.getSessionData());
+        this.dataBroadcastService.sessionData.subscribe((sessionData) => {
+            if (sessionData === null || sessionData === void 0 ? void 0 : sessionData.id) {
                 localStorage.setItem('sessionData', JSON.stringify(sessionData));
-            else
-                localStorage.removeItem("sessionData");
+                if (sessionData.password_expired)
+                    this.router.navigateByUrl('/password-expired');
+                this.dataBroadcastService.locale.next(sessionData.locale);
+            }
+            else {
+                localStorage.removeItem('sessionData');
+            }
         });
     }
-    signIn(signInData, onSuccess, onFailure) {
-        this.tokenService.signIn(signInData).subscribe((response) => {
-            this.sessionData.next(response.data);
+    signIn(signInData, additionalData, onSuccess, onFailure) {
+        this.tokenService.signIn(signInData, additionalData).subscribe((response) => {
+            this.dataBroadcastService.sessionData.next(response.data);
             this.setLatestPasswordCheckTime();
             if (onSuccess)
                 onSuccess(response);
@@ -5379,7 +6236,7 @@ class CurrentUserService {
                 throw response;
             }
         })))).subscribe((response) => {
-            this.sessionData.next(response.data);
+            this.dataBroadcastService.sessionData.next(response.data);
             if (onValid)
                 onValid(response);
         }, (response) => {
@@ -5390,6 +6247,7 @@ class CurrentUserService {
     }
     updatePassword(updatePasswordData, onSuccess, onFailure) {
         this.tokenService.updatePassword(updatePasswordData).subscribe((response) => {
+            this.dataBroadcastService.sessionData.next(response.data);
             if (onSuccess)
                 onSuccess(response);
         }, (response) => {
@@ -5423,19 +6281,23 @@ class CurrentUserService {
         return this.tokenService.userSignedIn();
     }
     getSessionData() {
-        return JSON.parse(localStorage.getItem('sessionData')) || {};
+        const sessionData = localStorage.getItem('sessionData');
+        return sessionData ? JSON.parse(sessionData) : undefined;
     }
     clearSessionData() {
-        this.sessionData.next(undefined);
+        this.dataBroadcastService.sessionData.next(undefined);
+        this.dataBroadcastService.locale.next(undefined);
     }
     getId() {
-        return this.getSessionData().id;
+        var _a;
+        return (_a = this.getSessionData()) === null || _a === void 0 ? void 0 : _a.id;
     }
     changePassword() {
-        this.router.navigateByUrl('change-password');
+        this.router.navigateByUrl('/app/account/change-password');
     }
     getPermissions() {
-        return this.getSessionData().permissions || [];
+        var _a;
+        return ((_a = this.getSessionData()) === null || _a === void 0 ? void 0 : _a.permissions) || [];
     }
     hasFeatureAccess(feature, action = 'Read') {
         return this.arrayService.hasItemWithAttributes(this.getPermissions(), { feature: feature, action: action });
@@ -5447,15 +6309,33 @@ class CurrentUserService {
     getLatestPasswordCheckTime() {
         return localStorage.getItem('latestPasswordCheckTime');
     }
+    setLocale(locale) {
+        if (locale == this.localeService.currentLocale)
+            return;
+        if (!this.localeService.availableLocales.includes(locale))
+            return;
+        if (this.isSignedIn()) {
+            this.webApiService.update('my_account/locale', { locale: locale }).subscribe((response) => {
+                let sessionData = this.dataBroadcastService.sessionData.getValue();
+                sessionData.locale = response.content.data.locale;
+                this.dataBroadcastService.sessionData.next(sessionData);
+            }, (error) => {
+                this.announcementService.error('mantle.messages.could_not_update_locale');
+            });
+        }
+        else {
+            this.dataBroadcastService.locale.next(locale);
+        }
+    }
 }
-CurrentUserService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: CurrentUserService, deps: [{ token: i1$1.AngularTokenService }, { token: i1$4.Router }, { token: ArrayService }], target: i0.ɵɵFactoryTarget.Injectable });
+CurrentUserService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: CurrentUserService, deps: [{ token: i1$1.AngularTokenService }, { token: i1$4.Router }, { token: AnnouncementService }, { token: ArrayService }, { token: DataBroadcastService }, { token: LocaleService }, { token: WebApiService }], target: i0.ɵɵFactoryTarget.Injectable });
 CurrentUserService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: CurrentUserService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: CurrentUserService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$1.AngularTokenService }, { type: i1$4.Router }, { type: ArrayService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$1.AngularTokenService }, { type: i1$4.Router }, { type: AnnouncementService }, { type: ArrayService }, { type: DataBroadcastService }, { type: LocaleService }, { type: WebApiService }]; } });
 
 class ChartService {
     constructor(objectService) {
@@ -5547,10 +6427,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
 
 const passwordCheckValidityMinutes = 5;
 class PasswordCheckService {
-    constructor(dialog, announcementService, currentUserService, webApiService) {
+    constructor(dialog, announcementService, currentUserService, dataBroadcastService, webApiService) {
         this.dialog = dialog;
         this.announcementService = announcementService;
         this.currentUserService = currentUserService;
+        this.dataBroadcastService = dataBroadcastService;
         this.webApiService = webApiService;
     }
     checkPassword() {
@@ -5563,13 +6444,13 @@ class PasswordCheckService {
                         subscriber.complete();
                         return;
                     }
-                    const username = this.currentUserService.sessionData.getValue().username;
+                    const username = this.dataBroadcastService.sessionData.getValue().username;
                     this.validatePassword(username, formData['password']).subscribe((response) => {
                         this.setLatestPasswordCheckTime();
                         subscriber.next(true);
                         subscriber.complete();
                     }, (error) => {
-                        this.announcementService.error('Incorrect password.');
+                        this.announcementService.error('mantle.auth.incorrect_password');
                         subscriber.next(false);
                         subscriber.complete();
                     });
@@ -5610,27 +6491,27 @@ class PasswordCheckService {
                     { label: 'Password', attr: 'password', required: true, type: 'password' }
                 ]
             },
-            saveButtonText: 'Submit'
+            saveButtonText: 'mantle.buttons.submit'
         };
         dialogConfig.width = '40%';
         return dialogConfig;
     }
 }
-PasswordCheckService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PasswordCheckService, deps: [{ token: i1$3.MatDialog }, { token: AnnouncementService }, { token: CurrentUserService }, { token: WebApiService }], target: i0.ɵɵFactoryTarget.Injectable });
+PasswordCheckService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PasswordCheckService, deps: [{ token: i1$3.MatDialog }, { token: AnnouncementService }, { token: CurrentUserService }, { token: DataBroadcastService }, { token: WebApiService }], target: i0.ɵɵFactoryTarget.Injectable });
 PasswordCheckService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PasswordCheckService, providedIn: 'root' });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PasswordCheckService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: AnnouncementService }, { type: CurrentUserService }, { type: WebApiService }]; } });
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialog }, { type: AnnouncementService }, { type: CurrentUserService }, { type: DataBroadcastService }, { type: WebApiService }]; } });
 
 class FeatureConfigService {
     constructor(config) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         this.sessionData = {};
         this.webRtcEvents = new EventEmitter();
-        this.listContentChangeEvents = new EventEmitter();
+        this.subContentChangeEvents = new EventEmitter();
         this.isCommitInProgress = false;
         this.webApiBaseUrl = (_a = config.webApi) === null || _a === void 0 ? void 0 : _a.baseUrl;
         this.webApiService = (_b = config.webApi) === null || _b === void 0 ? void 0 : _b.service;
@@ -5638,10 +6519,11 @@ class FeatureConfigService {
         this.webRtcService = (_d = config.webRtc) === null || _d === void 0 ? void 0 : _d.service;
         this.feature = (_e = config.authorisation) === null || _e === void 0 ? void 0 : _e.feature;
         this.currentUserService = (_f = config.authorisation) === null || _f === void 0 ? void 0 : _f.service;
-        (_g = this.currentUserService) === null || _g === void 0 ? void 0 : _g.sessionData.subscribe(sessionData => { this.sessionData = sessionData; });
-        this.router = (_h = config.routing) === null || _h === void 0 ? void 0 : _h.service;
-        this.dialog = (_j = config.dialog) === null || _j === void 0 ? void 0 : _j.service;
-        this.confirmationService = (_k = config.confirmation) === null || _k === void 0 ? void 0 : _k.service;
+        this.dataBroadcastService = (_g = config.dataBroadcast) === null || _g === void 0 ? void 0 : _g.service;
+        (_h = this.dataBroadcastService) === null || _h === void 0 ? void 0 : _h.sessionData.subscribe(sessionData => { this.sessionData = sessionData; });
+        this.router = (_j = config.routing) === null || _j === void 0 ? void 0 : _j.service;
+        this.dialog = (_k = config.dialog) === null || _k === void 0 ? void 0 : _k.service;
+        this.confirmationService = (_l = config.confirmation) === null || _l === void 0 ? void 0 : _l.service;
         this.onInit();
     }
     onInit() { }
@@ -5656,7 +6538,10 @@ class FeatureConfigService {
         this.parentComponent = parentComponent;
     }
     refreshParentComponent() {
-        this.parentComponent.loadData();
+        this.parentComponent.pullContent();
+    }
+    populateParentComponent(data) {
+        this.parentComponent.loadContent(data);
     }
     /*
      * WEB API INTERFACE
@@ -5740,6 +6625,7 @@ class FeatureConfigService {
     openRoute(route) {
         this.router.navigateByUrl(route);
     }
+    openParent() { }
     /*
      * DIALOG
      */
@@ -5755,7 +6641,7 @@ class FeatureConfigService {
         let dialogRef = this.dialog.open(DialogDetailsComponent, dialogConfig);
         dialogRef.afterClosed().subscribe((response) => {
             if (response)
-                this.listContentChangeEvents.emit();
+                this.subContentChangeEvents.emit();
         });
     }
     openFormDialog(formPageService, title, record = {}, initData = {}) {
@@ -5771,7 +6657,7 @@ class FeatureConfigService {
         let dialogRef = this.dialog.open(DialogFormComponent, dialogConfig);
         dialogRef.afterClosed().subscribe((response) => {
             if (response)
-                this.listContentChangeEvents.emit();
+                this.subContentChangeEvents.emit();
         });
     }
     /*
@@ -5788,15 +6674,19 @@ class FeatureConfigService {
         return [];
     }
     // Override this method in your domain-service if you would like to use it.
+    detailDialogLayoutChanges(section, record) {
+        return section;
+    }
+    // Override this method in your domain-service if you would like to use it.
     additionalDetailPageButtons(record) {
         return [];
     }
     deletionOptions() {
         return {
-            message: `Do you want to delete this ${this.noun()}?`,
+            message: 'mantle.messages.confirm_deletion',
             buttons: [
                 {
-                    label: 'Delete',
+                    label: 'mantle.buttons.delete',
                     onClick: (id) => {
                         return this.destroy(id);
                     }
@@ -5829,6 +6719,15 @@ class FeatureConfigService {
     onFormValueChanged(pageContent, formValue) { }
     ;
     // Override this method in you domain-service if you would like to use it.
+    onDialogFormContentLoaded(content) { }
+    // Override this method in your domain-service if you would like to use it.
+    formDialogLayoutChanges(section, record) {
+        return section;
+    }
+    // Override this method in your domain-service if you would like to use it.
+    onDialogFormValueChanged(dialogContent, formValue) { }
+    ;
+    // Override this method in you domain-service if you would like to use it.
     additionalFormPageButtons(record) {
         return [];
     }
@@ -5858,6 +6757,10 @@ class FeatureConfigService {
     listPageBulkExportOptions() {
         return [];
     }
+    // Override this method in your domain-service if you would like to use it.
+    additionalListPageButtons() {
+        return [];
+    }
 }
 
 class SessionGuard {
@@ -5892,7 +6795,7 @@ class FeatureGuard {
                 const authorisableAction = route.data.authorise.action;
                 const permitted = authorisableFeatureService.authorise(authorisableAction);
                 if (!permitted) {
-                    this.announcementService.error('You do not have access to this page.');
+                    this.announcementService.error('mantle.auth.page_access_denied');
                     this.router.navigateByUrl('');
                 }
                 resolve(permitted);
@@ -5936,5 +6839,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionDetailsContainerComponent, AccordionFormContainerComponent, AccordionLayoutEditorContainerComponent, ActionsAttributeDisplayComponent, AnnouncementService, ArrayService, AutocompleteInputComponent, COLUMN_CHART, ChartService, ChipAttributeDisplayComponent, ChipInputComponent, ClickStopPropagationDirective, ConfirmationService, ContentTitleComponent, CurrentUserService, DashboardCardComponent, DashboardCardSearchMenuComponent, DashboardInfoCardComponent, DashboardLayoutEditorSectionComponent, DashboardPageComponent, DashboardSectionComponent, DashboardTableComponent, DashboardTableDataSource, DatepickerComponent, DatetimepickerComponent, DeleteConfirmationDialogComponent, DetailPageComponent, DialogDetailsComponent, DialogFormComponent, DialogNestedDetailsComponent, DialogNestedFormComponent, DocumentsPageComponent, DropdownComponent, DynamicAttributeDisplayComponent, DynamicChartComponent, DynamicDashboardComponent, DynamicDashboardContainerComponent, DynamicDetailsComponent, DynamicDetailsContainerComponent, DynamicDetailsSectionComponent, DynamicFormComponent, DynamicFormContainerComponent, DynamicFormField, DynamicFormFieldComponent, DynamicFormSectionComponent, DynamicFormService, DynamicLayoutEditorComponent, DynamicLayoutEditorContainerComponent, DynamicLayoutEditorElementComponent, DynamicLayoutEditorSectionComponent, DynamicPipe, DynamicTableComponent, DynamicTableDataSource, DynamicWidgetDisplayComponent, ENVIRONMENT, ExportPageComponent, FeatureConfigService, FeatureGuard, FileAttributeDisplayComponent, FileDropzoneDirective, FilePreviewDialogComponent, FilepickerComponent, FormPageComponent, GANTT_CHART, GridDetailsSectionComponent, GridFormSectionComponent, GridLayoutEditorSectionComponent, ImageAttributeDisplayComponent, ImageCropperComponent, ImagepickerComponent, LayoutEditorFieldElementComponent, LayoutEditorPageComponent, LayoutEditorTableColumnElementComponent, LayoutEditorWidgetElementComponent, LinkAttributeDisplayComponent, ListPageComponent, ListPageDataSource, LoaderComponent, MantleModule, MarkdownAttributeDisplayComponent, MarkdownDetailsSectionComponent, MarkdownInputComponent, MarkdownLayoutEditorSectionComponent, MaterialModule, NavTreeComponent, NumberInputComponent, ObjectService, PIE_CHART, PROGRESS_BAR_CHART, PageTitleComponent, PasswordCheckGuard, PasswordCheckService, PasswordInputComponent, PlainDashboardContainerComponent, PlainDetailsContainerComponent, PlainFormContainerComponent, PlainLayoutEditorContainerComponent, RerouteComponent, SPLINE_CHART, SaveConfirmationDialogComponent, ScreenSizeMap, ScreenSizeService, SearchPanelComponent, SectionTitleComponent, SecureImagePipe, SessionGuard, SnackbarComponent, TabbedPageComponent, TableDetailsSectionComponent, TableFormSectionComponent, TableLayoutEditorSectionComponent, TextInputComponent, TextareaComponent, ThumbnailDisplayComponent, WebApiListRequest, WebApiService, WebsocketService };
+export { AccordionDetailsContainerComponent, AccordionFormContainerComponent, AccordionLayoutEditorContainerComponent, ActionsAttributeDisplayComponent, AnnouncementService, ArrayService, AutocompleteInputComponent, COLUMN_CHART, ChartService, ChipAttributeDisplayComponent, ChipInputComponent, ClickStopPropagationDirective, ConfirmationService, ContentTitleComponent, CurrentUserService, DashboardCardComponent, DashboardCardSearchMenuComponent, DashboardInfoCardComponent, DashboardLayoutEditorSectionComponent, DashboardPageComponent, DashboardSectionComponent, DashboardTableComponent, DashboardTableDataSource, DataBroadcastService, DatepickerComponent, DatetimepickerComponent, DeleteConfirmationDialogComponent, DetailPageComponent, DialogDetailsComponent, DialogFormComponent, DialogNestedDetailsComponent, DialogNestedFormComponent, DocumentsPageComponent, DraggableTableComponent, DraggableTableDataSource, DropdownComponent, DynamicAttributeDisplayComponent, DynamicChartComponent, DynamicDashboardComponent, DynamicDashboardContainerComponent, DynamicDetailsComponent, DynamicDetailsContainerComponent, DynamicDetailsSectionComponent, DynamicFormComponent, DynamicFormContainerComponent, DynamicFormField, DynamicFormFieldComponent, DynamicFormSectionComponent, DynamicFormService, DynamicLayoutEditorComponent, DynamicLayoutEditorContainerComponent, DynamicLayoutEditorElementComponent, DynamicLayoutEditorSectionComponent, DynamicPipe, DynamicTableComponent, DynamicTableDataSource, DynamicWidgetDisplayComponent, ENVIRONMENT, ExportPageComponent, FeatureConfigService, FeatureGuard, FileAttributeDisplayComponent, FileDropzoneDirective, FilePreviewDialogComponent, FilepickerComponent, FormPageComponent, GANTT_CHART, GridDetailsSectionComponent, GridFormSectionComponent, GridLayoutEditorSectionComponent, IconAttributeDisplayComponent, ImageAttributeDisplayComponent, ImageCropperComponent, ImagepickerComponent, LayoutEditorFieldElementComponent, LayoutEditorPageComponent, LayoutEditorTableColumnElementComponent, LayoutEditorWidgetElementComponent, LinkAttributeDisplayComponent, ListPageComponent, ListPageDataSource, LoaderComponent, LocaleService, MANTLE_LANG_EN, MANTLE_LANG_MS, MantleModule, MarkdownAttributeDisplayComponent, MarkdownDetailsSectionComponent, MarkdownInputComponent, MarkdownLayoutEditorSectionComponent, MaterialModule, NavTreeComponent, NumberInputComponent, ObjectService, PIE_CHART, PROGRESS_BAR_CHART, PageTitleComponent, PasswordCheckGuard, PasswordCheckService, PasswordInputComponent, PlainDashboardContainerComponent, PlainDetailsContainerComponent, PlainFormContainerComponent, PlainLayoutEditorContainerComponent, QrCodeDialogComponent, RerouteComponent, RosterPageComponent, RosterShiftListDetailsSectionComponent, RosterShiftListFormSectionComponent, SPLINE_CHART, SaveConfirmationDialogComponent, ScreenSizeMap, ScreenSizeService, SearchPanelComponent, SectionTitleComponent, SecureImagePipe, SessionGuard, SnackbarComponent, TabbedPageComponent, TableDetailsSectionComponent, TableFormSectionComponent, TableLayoutEditorSectionComponent, TextInputComponent, TextareaComponent, ThumbnailDisplayComponent, TimeInputComponent, WebApiListRequest, WebApiService, WebsocketService };
 //# sourceMappingURL=codetectonics-mantle.js.map