@codetectonics/mantle 1.0.2 → 1.0.4

package/fesm2015/codetectonics-mantle.js

@@ -17,7 +17,7 @@ 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$6 from 'highcharts-angular';
+import * as i2$7 from 'highcharts-angular';
 import { HighchartsChartModule } from 'highcharts-angular';
 import * as i1$5 from 'ngx-markdown';
 import { MarkdownModule } from 'ngx-markdown';
@@ -50,11 +50,10 @@ import { MatInputModule } from '@angular/material/input';
 import { MatListModule } from '@angular/material/list';
 import * as i4$4 from '@angular/material/menu';
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
-import * as i2$3 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i7$1 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i2$8 from '@angular/material/tabs';
+import * as i2$9 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i7 from '@angular/material/tooltip';
@@ -70,9 +69,9 @@ 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';
 import { MatSnackBarModule, MAT_SNACK_BAR_DEFAULT_OPTIONS, MAT_SNACK_BAR_DATA } from '@angular/material/snack-bar';
-import * as i3$4 from '@angular/material/core';
+import * as i3$5 from '@angular/material/core';
 import { DateAdapter, MAT_DATE_LOCALE, MAT_DATE_FORMATS } from '@angular/material/core';
-import * as i3$5 from '@angular-material-components/datetime-picker';
+import * as i3$4 from '@angular-material-components/datetime-picker';
 import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NGX_MAT_DATE_FORMATS } from '@angular-material-components/datetime-picker';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
 import * as i1$9 from '@angular/material/tree';
@@ -81,6 +80,10 @@ import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import * as i2$5 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { BehaviorSubject, Observable, Subject, merge, of } from 'rxjs';
+import * as i2$3 from '@ng-matero/extensions/select';
+import { MtxSelectModule } from '@ng-matero/extensions/select';
+import * as i2$6 from '@ng-matero/extensions/colorpicker';
+import { MtxColorpickerModule } from '@ng-matero/extensions/colorpicker';
 import * as moment from 'moment';
 import { DirectUpload } from '@rails/activestorage';
 import { map, takeUntil, startWith, switchMap, filter, retryWhen, delay, tap, finalize } from 'rxjs/operators';
@@ -90,7 +93,7 @@ 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$7 from '@angular/material/divider';
+import * as i2$8 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';
@@ -315,7 +318,9 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         NgxMatTimepickerModule,
         NgxMatMomentModule,
         MatTreeModule,
-        MatAutocompleteModule], exports: [MatBadgeModule,
+        MatAutocompleteModule,
+        MtxSelectModule,
+        MtxColorpickerModule], exports: [MatBadgeModule,
         MatButtonModule,
         MatCardModule,
         MatCheckboxModule,
@@ -343,7 +348,9 @@ MaterialModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         NgxMatTimepickerModule,
         NgxMatMomentModule,
         MatTreeModule,
-        MatAutocompleteModule] });
+        MatAutocompleteModule,
+        MtxSelectModule,
+        MtxColorpickerModule] });
 MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MaterialModule, providers: [
         {
             provide: DateAdapter,
@@ -412,6 +419,8 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             NgxMatMomentModule,
             MatTreeModule,
             MatAutocompleteModule,
+            MtxSelectModule,
+            MtxColorpickerModule,
         ], MatBadgeModule,
         MatButtonModule,
         MatCardModule,
@@ -440,7 +449,9 @@ MaterialModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
         NgxMatTimepickerModule,
         NgxMatMomentModule,
         MatTreeModule,
-        MatAutocompleteModule] });
+        MatAutocompleteModule,
+        MtxSelectModule,
+        MtxColorpickerModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: MaterialModule, decorators: [{
             type: NgModule,
             args: [{
@@ -476,6 +487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         NgxMatMomentModule,
                         MatTreeModule,
                         MatAutocompleteModule,
+                        MtxSelectModule,
+                        MtxColorpickerModule,
                     ],
                     exports: [
                         MatBadgeModule,
@@ -507,6 +520,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         NgxMatMomentModule,
                         MatTreeModule,
                         MatAutocompleteModule,
+                        MtxSelectModule,
+                        MtxColorpickerModule,
                     ],
                     providers: [
                         {
@@ -1621,7 +1636,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 | 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 } });
+    ], usesOnChanges: true, ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <mtx-select\n      [(ngModel)]=\"value\"\n      (change)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      appendTo=\"body\">\n    <mtx-option value=\"\"></mtx-option>\n    <mtx-option *ngFor=\"let option of dropdownValues\" [value]=\"option.value\">\n      {{option.label}}\n    </mtx-option>\n  </mtx-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.MtxSelectComponent, selector: "mtx-select", inputs: ["addTag", "addTagText", "appearance", "closeOnSelect", "clearAllText", "clearable", "clearOnBackspace", "dropdownPosition", "selectableGroup", "selectableGroupAsModel", "hideSelected", "loading", "loadingText", "labelForId", "markFirst", "multiple", "notFoundText", "searchable", "readonly", "searchFn", "searchWhileComposing", "selectOnTab", "trackByFn", "inputAttrs", "minTermLength", "editableSearchTerm", "keyDownFn", "virtualScroll", "typeToSearchText", "aria-label", "aria-labelledby", "id", "clearSearchOnAdd", "items", "value", "placeholder", "required", "disabled", "appendTo", "bindLabel", "bindValue", "compareWith", "groupBy", "groupValue", "isOpen", "maxSelectedItems", "tabIndex", "openOnEnter", "typeahead", "errorStateMatcher"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"], exportAs: ["mtxSelect"] }, { type: i2$3.MtxOptionComponent, selector: "mtx-option", inputs: ["disabled", "value"], exportAs: ["mtxOption"] }], 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: [{
@@ -1787,7 +1802,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 | 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 } });
+    ], 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$4.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$4.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: [{
@@ -2423,7 +2438,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 | 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 } });
+    ], 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$5.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: [{
@@ -2450,10 +2465,58 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }] } });
 
+class ColorPickerInputComponent {
+    constructor() {
+        this.value = null;
+        this.onChange = (newValue) => { };
+        this.onTouched = () => { };
+    }
+    registerOnChange(fn) { this.onChange = fn; }
+    registerOnTouched(fn) { this.onTouched = fn; }
+    writeValue(newValue) {
+        this.value = newValue;
+        this.onChange(newValue);
+    }
+    onValueChanged(event) {
+        this.onChange(this.value);
+    }
+}
+ColorPickerInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: ColorPickerInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: ColorPickerInputComponent, selector: "mantle-colorpicker-input", inputs: { label: "label", disable: "disable", required: "required", error: "error" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => ColorPickerInputComponent),
+            multi: true
+        }
+    ], ngImport: i0, template: "<mat-form-field [class.mat-form-field-invalid]=\"error\">\n  <mat-label>{{ label | translate }}</mat-label>\n  <input matInput\n      [mtxColorpicker]=\"picker\"\n      [(ngModel)]=\"value\"\n      (colorChange)=\"onValueChanged($event)\"\n      [required]=\"required\"\n      [disabled]=\"disable\"\n      format=\"hex\"\n      autocomplete=\"off\" />\n  <mtx-colorpicker-toggle matSuffix [for]=\"picker\" tabindex=\"-1\"></mtx-colorpicker-toggle>\n  <mtx-colorpicker #picker></mtx-colorpicker>\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$6.MtxColorpickerToggle, selector: "mtx-colorpicker-toggle", inputs: ["tabIndex", "disabled", "for", "aria-label", "disableRipple"], exportAs: ["mtxColorpickerToggle"] }, { type: i2$6.MtxColorpicker, selector: "mtx-colorpicker", inputs: ["xPosition", "yPosition", "disabled", "restoreFocus", "opened", "color", "format", "content"], outputs: ["opened", "closed"], exportAs: ["mtxColorpicker"] }], 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$6.MtxColorpickerInput, selector: "input[mtxColorpicker]", inputs: ["format", "mtxColorpicker", "value", "disabled"], outputs: ["colorChange", "colorInput"], exportAs: ["mtxColorpickerInput"] }, { 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: ColorPickerInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mantle-colorpicker-input',
+                    templateUrl: './colorpicker-input.component.html',
+                    styleUrls: ['./colorpicker-input.component.scss'],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ColorPickerInputComponent),
+                            multi: true
+                        }
+                    ]
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { label: [{
+                type: Input
+            }], disable: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }] } });
+
 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\" [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"] }] });
+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    <mantle-colorpicker-input *ngSwitchCase=\"'color'\"\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-colorpicker-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: ColorPickerInputComponent, selector: "mantle-colorpicker-input", inputs: ["label", "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: [{
@@ -2673,7 +2736,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 | 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 } });
+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$7.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: [{
@@ -2815,6 +2878,7 @@ class DashboardCardComponent {
         this.objectService = objectService;
         this.screenSizeService = screenSizeService;
         this.rowHeight = '';
+        this.searchValues = {};
         this.widgetItemContexts = [];
         this.exportOptions = [];
         this.additionalWidgetButtons = [];
@@ -2849,9 +2913,15 @@ class DashboardCardComponent {
         });
     }
     refreshFormContent() {
+        let elements = this.dashboardWidgetService.widgetSearchFields();
+        elements.forEach((searchField) => {
+            if ((searchField.type == 'dropdown') && (this.searchValues[searchField.attr] !== undefined)) {
+                searchField.options = { values: this.searchValues[searchField.attr] };
+            }
+        });
         this.formContent = {
             data: this.options,
-            elements: this.dashboardWidgetService.widgetSearchFields()
+            elements: elements
         };
     }
     onSearchClicked() {
@@ -2896,7 +2966,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 | 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 } });
+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", searchValues: "searchValues" }, 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: [{
@@ -2922,6 +2992,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }], dashboardPageService: [{
                 type: Input
+            }], searchValues: [{
+                type: Input
             }] } });
 
 class DashboardSectionComponent {
@@ -2929,6 +3001,7 @@ class DashboardSectionComponent {
         this.arrayService = arrayService;
         this.screenSizeService = screenSizeService;
         this.data = {};
+        this.searchValues = {};
         this.dashboardWidgetServices = [];
         this.screenSize = 'default';
         this.SECTION_COLUMNS = 12;
@@ -2968,7 +3041,7 @@ 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"] }] });
+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", searchValues: "searchValues" }, 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        [searchValues]=\"searchValues\">\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", "searchValues"] }], 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: [{
@@ -2984,6 +3057,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }], section: [{
                 type: Input
+            }], searchValues: [{
+                type: Input
             }] } });
 
 class MarkdownDetailsSectionComponent {
@@ -3134,7 +3209,7 @@ class DynamicDetailsSectionComponent {
     }
 }
 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        [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"] }] });
+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", "searchValues"] }, { 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: [{
@@ -3174,7 +3249,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$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" }] });
+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$8.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: [{
@@ -3471,7 +3546,7 @@ class DynamicFormSectionComponent {
     }
 }
 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          [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"] }] });
+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", "searchValues"] }, { 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: [{
@@ -3515,7 +3590,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$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" }] });
+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$8.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: [{
@@ -4141,7 +4216,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$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" }] });
+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$8.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: [{
@@ -4232,7 +4307,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
         }], ctorParameters: function () { return [{ type: LocaleService }, { type: ScreenSizeService }]; } });
 
 class PlainDashboardContainerComponent {
-    constructor() { }
+    constructor() {
+        this.searchValues = {};
+    }
     asDynamicLayoutGridSection(section) {
         return section;
     }
@@ -4244,7 +4321,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", "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"] }] });
+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", searchValues: "searchValues" }, 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            [searchValues]=\"searchValues\">\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", "searchValues"] }, { 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: [{
@@ -4258,13 +4335,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }], container: [{
                 type: Input
+            }], searchValues: [{
+                type: Input
             }] } });
 
 class DynamicDashboardContainerComponent {
-    constructor() { }
+    constructor() {
+        this.searchValues = {};
+    }
 }
 DynamicDashboardContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicDashboardContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicDashboardContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicDashboardContainerComponent, selector: "mantle-dynamic-dashboard-container", inputs: { dashboardPageService: "dashboardPageService", content: "content", container: "container" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"container.container_style\">\n\n  <ng-container *ngSwitchCase=\"'plain'\">\n    <mantle-plain-dashboard-container [dashboardPageService]=\"dashboardPageService\" [container]=\"container\" [content]=\"content\">\n    </mantle-plain-dashboard-container>\n  </ng-container>\n\n</ng-container>\n", styles: [""], components: [{ type: PlainDashboardContainerComponent, selector: "mantle-plain-dashboard-container", inputs: ["dashboardPageService", "content", "container"] }], directives: [{ type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+DynamicDashboardContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicDashboardContainerComponent, selector: "mantle-dynamic-dashboard-container", inputs: { dashboardPageService: "dashboardPageService", content: "content", container: "container", searchValues: "searchValues" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"container.container_style\">\n\n  <ng-container *ngSwitchCase=\"'plain'\">\n    <mantle-plain-dashboard-container [dashboardPageService]=\"dashboardPageService\" [container]=\"container\" [content]=\"content\" [searchValues]=\"searchValues\">\n    </mantle-plain-dashboard-container>\n  </ng-container>\n\n</ng-container>\n", styles: [""], components: [{ type: PlainDashboardContainerComponent, selector: "mantle-plain-dashboard-container", inputs: ["dashboardPageService", "content", "container", "searchValues"] }], 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: DynamicDashboardContainerComponent, decorators: [{
             type: Component,
             args: [{
@@ -4278,13 +4359,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }], container: [{
                 type: Input
+            }], searchValues: [{
+                type: Input
             }] } });
 
 class DynamicDashboardComponent {
-    constructor() { }
+    constructor() {
+        this.searchValues = {};
+    }
 }
 DynamicDashboardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DynamicDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicDashboardComponent, selector: "mantle-dynamic-dashboard", inputs: { dashboardPageService: "dashboardPageService", content: "content" }, ngImport: i0, template: "<ng-container *ngIf=\"content; else loader\">\n  <ng-container *ngFor=\"let container of content.containers\">\n    <mantle-dynamic-dashboard-container [dashboardPageService]=\"dashboardPageService\" [container]=\"container\" [content]=\"content\">\n    </mantle-dynamic-dashboard-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #loader>\n  <mantle-loader></mantle-loader>\n</ng-template>\n", styles: [""], components: [{ type: DynamicDashboardContainerComponent, selector: "mantle-dynamic-dashboard-container", inputs: ["dashboardPageService", "content", "container"] }, { type: LoaderComponent, selector: "mantle-loader", inputs: ["delay"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+DynamicDashboardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DynamicDashboardComponent, selector: "mantle-dynamic-dashboard", inputs: { dashboardPageService: "dashboardPageService", content: "content", searchValues: "searchValues" }, ngImport: i0, template: "<ng-container *ngIf=\"content; else loader\">\n  <ng-container *ngFor=\"let container of content.containers\">\n    <mantle-dynamic-dashboard-container [dashboardPageService]=\"dashboardPageService\" [container]=\"container\" [content]=\"content\" [searchValues]=\"searchValues\">\n    </mantle-dynamic-dashboard-container>\n  </ng-container>\n</ng-container>\n\n<ng-template #loader>\n  <mantle-loader></mantle-loader>\n</ng-template>\n", styles: [""], components: [{ type: DynamicDashboardContainerComponent, selector: "mantle-dynamic-dashboard-container", inputs: ["dashboardPageService", "content", "container", "searchValues"] }, { type: LoaderComponent, selector: "mantle-loader", inputs: ["delay"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DynamicDashboardComponent, decorators: [{
             type: Component,
             args: [{
@@ -4296,24 +4381,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                 type: Input
             }], content: [{
                 type: Input
+            }], searchValues: [{
+                type: Input
             }] } });
 
 class DashboardPageComponent {
     constructor(route, injector) {
         this.route = route;
         this.injector = injector;
+        this.searchValues = {};
         const dashboardPageServiceInjectionToken = this.route.snapshot.data['dashboardPageService'];
         this.dashboardPageService = this.injector.get(dashboardPageServiceInjectionToken);
         this.pageTitle = this.route.snapshot.data['pageTitle'];
     }
     ngOnInit() {
         this.content$ = this.dashboardPageService.getWidgetItems({}).pipe(map(res => {
+            this.searchValues = res.search_values;
             return res.content;
         }));
     }
 }
 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 | 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 } });
+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\" [searchValues]=\"searchValues\" [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", "searchValues"] }], 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: [{
@@ -4464,6 +4553,13 @@ class ListPageDataSource extends DataSource {
                     this.sort.active = (_d = res.sort) === null || _d === void 0 ? void 0 : _d.attr;
                     this.sort.direction = (_e = res.sort) === null || _e === void 0 ? void 0 : _e.direction;
                 }
+                if (this.searchPanel && !!res.search_values) {
+                    this.searchPanel.searchFields.forEach((searchField) => {
+                        if ((searchField.type == 'dropdown') && (res.search_values[searchField.attr] !== undefined)) {
+                            searchField.options = { values: res.search_values[searchField.attr] };
+                        }
+                    });
+                }
                 this.data = res.content;
                 this.selectedRecordIds = [];
                 this.selectAll = false;
@@ -5073,7 +5169,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 | 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 } });
+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$9.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$9.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: [{
@@ -5336,7 +5432,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: { 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 } });
+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$8.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: [{
@@ -5495,6 +5591,7 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         ChipInputComponent,
         DatepickerComponent,
         DatetimepickerComponent,
+        ColorPickerInputComponent,
         DropdownComponent,
         FilepickerComponent,
         ImagepickerComponent,
@@ -5603,6 +5700,7 @@ MantleModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         ChipInputComponent,
         DatepickerComponent,
         DatetimepickerComponent,
+        ColorPickerInputComponent,
         DropdownComponent,
         FilepickerComponent,
         ImagepickerComponent,
@@ -5721,6 +5819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         ChipInputComponent,
                         DatepickerComponent,
                         DatetimepickerComponent,
+                        ColorPickerInputComponent,
                         DropdownComponent,
                         FilepickerComponent,
                         ImagepickerComponent,
@@ -5837,6 +5936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImpor
                         ChipInputComponent,
                         DatepickerComponent,
                         DatetimepickerComponent,
+                        ColorPickerInputComponent,
                         DropdownComponent,
                         FilepickerComponent,
                         ImagepickerComponent,
@@ -6839,5 +6939,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, 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 };
+export { AccordionDetailsContainerComponent, AccordionFormContainerComponent, AccordionLayoutEditorContainerComponent, ActionsAttributeDisplayComponent, AnnouncementService, ArrayService, AutocompleteInputComponent, COLUMN_CHART, ChartService, ChipAttributeDisplayComponent, ChipInputComponent, ClickStopPropagationDirective, ColorPickerInputComponent, 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