ichec-angular-core 0.3.4 → 0.3.6

package/fesm2022/ichec-angular-core.mjs

@@ -27,9 +27,10 @@ import * as i3$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import * as i4 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
 import * as i6$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatCardModule } from '@angular/material/card';
 import * as i2$1 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import { MatDividerModule } from '@angular/material/divider';
@@ -689,12 +690,18 @@ class LeftNavService {
     onGroupsUpdated(groups) {
         const groupings = new Set();
         this._defaultGroupings.forEach(e => groupings.add(e));
-        groups.forEach(g => this._groups.forEach(n => {
-            if (n.name == g.name) {
-                n.groupings.forEach(g => groupings.add(g));
+        for (const g of this._groups) {
+            let found = false;
+            for (const n of groups) {
+                if (n.name == g.name) {
+                    g.groupings.forEach(ui_group => groupings.add(ui_group));
+                    found = true;
+                }
             }
-            ;
-        }));
+            if (found) {
+                break;
+            }
+        }
         this.activeGroupings.set(groupings);
     }
     setDefaultGroupings(groupings) {
@@ -1206,20 +1213,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 
 class FileUploadComponent {
     control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
+    uploadCategory = input("", ...(ngDevMode ? [{ debugName: "uploadCategory" }] : []));
+    allowedSizeMb = input(10, ...(ngDevMode ? [{ debugName: "allowedSizeMb" }] : []));
+    showHeading = input(true, ...(ngDevMode ? [{ debugName: "showHeading" }] : []));
+    error = signal("", ...(ngDevMode ? [{ debugName: "error" }] : []));
+    get accepts() {
+        if (this.uploadCategory() === "image") {
+            return "image/jpeg, image/png";
+        }
+        else if (this.uploadCategory() === "document") {
+            return ".doc,.docx,.pdf,.odt,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+        }
+        return "*";
+    }
+    get acceptTitle() {
+        if (this.uploadCategory() === "image") {
+            return "JPG, PNG";
+        }
+        else if (this.uploadCategory() === "document") {
+            return "DOC, DOCX, ODT, PDF";
+        }
+        return "";
+    }
+    get maxSize() {
+        return this.allowedSizeMb().toString() + "MB";
+    }
     onFileUpload(event) {
         if (!event.target) {
             return;
         }
+        this.error.set("");
         const input_element = event.target;
         if (input_element.files && input_element.files.length > 0) {
             this.onFileUploaded(input_element.files[0]);
         }
     }
+    isImage() {
+        return this.control().value.file_type === "image";
+    }
     onFileUploaded(file) {
+        if (file.size > this.allowedSizeMb() * 1024 * 1024) {
+            this.error.set("File size exceeds maximum of " + this.maxSize);
+            return;
+        }
         const record = this.control().value;
         record.file = file;
         this.control().setValue(record);
-        if (record.file_type == "image") {
+        this.control().markAsDirty();
+        if (record.file_type === "image") {
             const reader = new FileReader();
             reader.readAsDataURL(file);
             reader.onload = () => { if (reader.result) {
@@ -1231,19 +1272,22 @@ class FileUploadComponent {
         const record = this.control().value;
         record.local = preview;
         this.control().setValue(record);
+        this.control().markAsDirty();
     }
     onClearLocal() {
         const record = this.control().value;
         record.local = "";
+        record.file = null;
         this.control().setValue(record);
+        this.control().markAsDirty();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FileUploadComponent, isStandalone: true, selector: "lib-file-upload", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n  @if (control().value.local || control().value.file)\n  {\n  <div class=\"image-holder\">\n    <p>Change {{control().value.display_name | titlecase}}</p>\n    <div class=\"control-container\">\n      @if(control().value.local){\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.local}}\" style=\"height:120px;\">\n      }\n      @else {\n        <div>{{control().value.file?.name}}</div>\n      }\n\n    <button mat-mini-fab (click)=\"onClearLocal()\" matTooltip=\"Clear\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    </div>\n\n  </div>\n  }\n  @else\n  {\n  @if (control().value.remote){\n  <div class=\"image-holder\">\n    <p>{{control().value.display_name | titlecase}}</p>\n    <div style=\"display:flex; flex-direction: row; align-items: end;\">\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" style=\"height:120px;\">\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Edit\" type=\"button\" style=\"margin:3px\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    </div>\n  </div>\n  }\n  @else {\n  <div style=\"display: flex; flex-direction: column;\">\n    <span>Upload a {{control().value.display_name}}</span>\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Upload\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>upload</mat-icon>\n    </button>\n  </div>\n  }\n  <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" />\n  }\n</div>", styles: [".container{display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}.control-container{display:flex;flex-direction:row;justify-content:center;align-content:center}p{margin-top:0;margin-bottom:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FileUploadComponent, isStandalone: true, selector: "lib-file-upload", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, uploadCategory: { classPropertyName: "uploadCategory", publicName: "uploadCategory", isSignal: true, isRequired: false, transformFunction: null }, allowedSizeMb: { classPropertyName: "allowedSizeMb", publicName: "allowedSizeMb", isSignal: true, isRequired: false, transformFunction: null }, showHeading: { classPropertyName: "showHeading", publicName: "showHeading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n  <mat-card class=\"card\">\n  @if (control().value.local || control().value.file)\n  {\n      @if(showHeading())\n      {\n        <h4 class=\"header\">Change {{control().value.display_name | titlecase}}</h4>\n      }\n      <div class=\"content\">\n        @if(control().value.local && isImage()){\n        <img class=\"image\" src=\"{{control().value.local}}\" alt=\"{{control().value.display_name}}\">\n        }\n        @else {\n        <div><p><b>Selected</b></p><p>{{control().value.file?.name}}</p></div>\n        }\n        <div class=\"controls\">\n        <button mat-mini-fab (click)=\"onClearLocal()\" matTooltip=\"Clear\" type=\"button\" style=\"margin:10px\">\n          <mat-icon>clear</mat-icon>\n        </button>\n        </div>\n      </div>\n  }\n  @else\n  {\n  @if (control().value.remote){\n      @if(showHeading())\n      {\n    <h4 class=\"header\">{{control().value.display_name | titlecase}}</h4>\n      }\n    <div class=\"content\">\n      @if(isImage())\n      {\n        <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" class=\"image\">\n      }\n      @else {\n        <a href=\"{{control().value.remote}}\" mat-mini-fab matTooltip=\"Download\"><mat-icon>download</mat-icon>Download</a>\n      }\n\n      <div class=\"controls\">\n        @if(uploadCategory())\n        {\n        <p>Formats: {{acceptTitle}}</p>\n        }\n        <p>Max Size: {{maxSize}}</p>\n        <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Edit\" type=\"button\" style=\"margin:3px\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </div>\n  }\n  @else {\n      @if(showHeading())\n      {\n    <h4 class=\"header\">Upload a {{control().value.display_name}}</h4>\n      }\n    <div class=\"controls\">\n    @if(uploadCategory())\n    {\n    <p>Formats: {{acceptTitle}}</p>\n    }\n    <p>Max Size: {{maxSize}}</p>\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Upload\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>upload</mat-icon>\n    </button>\n    </div>\n  }\n\n  }\n  @if(error())\n  {\n  <p>{{this.error()}}</p>\n  }\n  </mat-card>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" [accept]=\"accepts\" />\n</div>", styles: [".container{display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:column;max-width:300px}.card{padding:10px;margin-bottom:5px}.header{margin:0 0 5px}.content{display:flex;flex-direction:row;justify-content:center;align-items:center}.image{height:120px;margin-right:10px;border-radius:10px}.controls{display:flex;flex-direction:column;justify-content:center;align-items:center}p{margin-top:0;margin-bottom:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-upload', imports: [MatIconModule, MatButtonModule, MatTooltipModule, TitleCasePipe], template: "<div class=\"container\">\n  @if (control().value.local || control().value.file)\n  {\n  <div class=\"image-holder\">\n    <p>Change {{control().value.display_name | titlecase}}</p>\n    <div class=\"control-container\">\n      @if(control().value.local){\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.local}}\" style=\"height:120px;\">\n      }\n      @else {\n        <div>{{control().value.file?.name}}</div>\n      }\n\n    <button mat-mini-fab (click)=\"onClearLocal()\" matTooltip=\"Clear\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    </div>\n\n  </div>\n  }\n  @else\n  {\n  @if (control().value.remote){\n  <div class=\"image-holder\">\n    <p>{{control().value.display_name | titlecase}}</p>\n    <div style=\"display:flex; flex-direction: row; align-items: end;\">\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" style=\"height:120px;\">\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Edit\" type=\"button\" style=\"margin:3px\">\n      <mat-icon>edit</mat-icon>\n    </button>\n    </div>\n  </div>\n  }\n  @else {\n  <div style=\"display: flex; flex-direction: column;\">\n    <span>Upload a {{control().value.display_name}}</span>\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Upload\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>upload</mat-icon>\n    </button>\n  </div>\n  }\n  <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" />\n  }\n</div>", styles: [".container{display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}.control-container{display:flex;flex-direction:row;justify-content:center;align-content:center}p{margin-top:0;margin-bottom:5px}\n"] }]
-        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }] } });
+            args: [{ selector: 'lib-file-upload', imports: [MatIconModule, MatButtonModule, MatTooltipModule, TitleCasePipe, MatCardModule], template: "<div class=\"container\">\n  <mat-card class=\"card\">\n  @if (control().value.local || control().value.file)\n  {\n      @if(showHeading())\n      {\n        <h4 class=\"header\">Change {{control().value.display_name | titlecase}}</h4>\n      }\n      <div class=\"content\">\n        @if(control().value.local && isImage()){\n        <img class=\"image\" src=\"{{control().value.local}}\" alt=\"{{control().value.display_name}}\">\n        }\n        @else {\n        <div><p><b>Selected</b></p><p>{{control().value.file?.name}}</p></div>\n        }\n        <div class=\"controls\">\n        <button mat-mini-fab (click)=\"onClearLocal()\" matTooltip=\"Clear\" type=\"button\" style=\"margin:10px\">\n          <mat-icon>clear</mat-icon>\n        </button>\n        </div>\n      </div>\n  }\n  @else\n  {\n  @if (control().value.remote){\n      @if(showHeading())\n      {\n    <h4 class=\"header\">{{control().value.display_name | titlecase}}</h4>\n      }\n    <div class=\"content\">\n      @if(isImage())\n      {\n        <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" class=\"image\">\n      }\n      @else {\n        <a href=\"{{control().value.remote}}\" mat-mini-fab matTooltip=\"Download\"><mat-icon>download</mat-icon>Download</a>\n      }\n\n      <div class=\"controls\">\n        @if(uploadCategory())\n        {\n        <p>Formats: {{acceptTitle}}</p>\n        }\n        <p>Max Size: {{maxSize}}</p>\n        <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Edit\" type=\"button\" style=\"margin:3px\">\n          <mat-icon>edit</mat-icon>\n        </button>\n      </div>\n    </div>\n  }\n  @else {\n      @if(showHeading())\n      {\n    <h4 class=\"header\">Upload a {{control().value.display_name}}</h4>\n      }\n    <div class=\"controls\">\n    @if(uploadCategory())\n    {\n    <p>Formats: {{acceptTitle}}</p>\n    }\n    <p>Max Size: {{maxSize}}</p>\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Upload\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>upload</mat-icon>\n    </button>\n    </div>\n  }\n\n  }\n  @if(error())\n  {\n  <p>{{this.error()}}</p>\n  }\n  </mat-card>\n  <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" [accept]=\"accepts\" />\n</div>", styles: [".container{display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:column;max-width:300px}.card{padding:10px;margin-bottom:5px}.header{margin:0 0 5px}.content{display:flex;flex-direction:row;justify-content:center;align-items:center}.image{height:120px;margin-right:10px;border-radius:10px}.controls{display:flex;flex-direction:column;justify-content:center;align-items:center}p{margin-top:0;margin-bottom:5px}\n"] }]
+        }], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], uploadCategory: [{ type: i0.Input, args: [{ isSignal: true, alias: "uploadCategory", required: false }] }], allowedSizeMb: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowedSizeMb", required: false }] }], showHeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeading", required: false }] }] } });
 
 class FormFieldDetailComponent {
     field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
@@ -1257,6 +1301,14 @@ class FormFieldDetailComponent {
       return false;
     }
       */
+    resolveOptions(options) {
+        if (options) {
+            return JSON.parse(decodeURIComponent(options));
+        }
+        else {
+            return [];
+        }
+    }
     get key() {
         return this.field().id.toString();
     }
@@ -1264,7 +1316,7 @@ class FormFieldDetailComponent {
         return this.form().get(this.key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldDetailComponent, isStandalone: true, selector: "lib-form-field-detail", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  <p>{{field().description}}</p>\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\">\n           {{ field().label }}\n         </mat-checkbox>\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('SELECTION')\n      {\n        <mat-form-field class=\"form-field\">\n        <mat-label>{{ field().label }}</mat-label>\n        <mat-select formControlName=\"key\" name=\"key\">\n            @for(option of field().options; track option)\n            {\n                <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n            }\n        </mat-select>\n      </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Form\n          </a>\n        }\n        <h4>Upload Completed Form</h4>\n        <lib-file-upload [control]=\"control\"></lib-file-upload>\n        </div>\n      }    \n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldDetailComponent, isStandalone: true, selector: "lib-form-field-detail", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  <p>{{field().description}}</p>\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\">\n           {{ field().label }}\n         </mat-checkbox>\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('SELECTION')\n      {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n        <mat-label>{{ field().label }}</mat-label>\n        <mat-select formControlName=\"key\" name=\"key\">\n            @for(option of resolveOptions(field().options); track $index)\n            {\n                <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n            }\n        </mat-select>\n      </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Template\n          </a>\n        }\n        <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n        <h4>Upload</h4>\n        <lib-file-upload [control]=\"control\" \n        [showHeading]=\"false\" \n        [uploadCategory]=\"'document'\"></lib-file-upload>\n        </div>\n        </div>\n      }    \n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, decorators: [{
             type: Component,
@@ -1274,7 +1326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatButtonModule,
                         MatSelectModule,
                         MatTooltipModule,
-                        MatCheckboxModule, MatIconModule, FileUploadComponent], template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  <p>{{field().description}}</p>\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\">\n           {{ field().label }}\n         </mat-checkbox>\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('SELECTION')\n      {\n        <mat-form-field class=\"form-field\">\n        <mat-label>{{ field().label }}</mat-label>\n        <mat-select formControlName=\"key\" name=\"key\">\n            @for(option of field().options; track option)\n            {\n                <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n            }\n        </mat-select>\n      </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Form\n          </a>\n        }\n        <h4>Upload Completed Form</h4>\n        <lib-file-upload [control]=\"control\"></lib-file-upload>\n        </div>\n      }    \n    }\n  </div>\n</div>\n" }]
+                        MatCheckboxModule, MatIconModule, FileUploadComponent], template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  <p>{{field().description}}</p>\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\">\n           {{ field().label }}\n         </mat-checkbox>\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('SELECTION')\n      {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n        <mat-label>{{ field().label }}</mat-label>\n        <mat-select formControlName=\"key\" name=\"key\">\n            @for(option of resolveOptions(field().options); track $index)\n            {\n                <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n            }\n        </mat-select>\n      </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Template\n          </a>\n        }\n        <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n        <h4>Upload</h4>\n        <lib-file-upload [control]=\"control\" \n        [showHeading]=\"false\" \n        [uploadCategory]=\"'document'\"></lib-file-upload>\n        </div>\n        </div>\n      }    \n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
 
 class FormFieldEditComponent {
@@ -1349,7 +1401,7 @@ class FormFieldEditComponent {
         this.optionsControl.setValue(options.filter(e => e.value !== value));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldEditComponent, isStandalone: true, selector: "lib-form-field-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { orderUp: "orderUp", orderDown: "orderDown", deleted: "deleted" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n    @if(canOrderUp())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n    }\n    @if(canOrderDown())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n    }\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n        <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n            required name=\"description\"></textarea>\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's instructions for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <div style=\"display: flex; flex-direction: row; align-items: center;\">\n    <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n        <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n            info\n        </mat-icon>\n    </div>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n        <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n            info\n        </mat-icon>        \n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon> \n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\"></lib-file-upload>\n    }\n    @case ((FieldType.Selection)) {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <h4>Add Choice</h4>\n        <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Choice</mat-label>\n        <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n        <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Display Name</mat-label>\n        <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n        <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n    </div>\n\n        @if(optionsControl.value && optionsControl.value.length > 0){\n            <h4>Choices</h4>\n        <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n            <ng-container matColumnDef=\"name\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Display Name\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"value\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Value\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"remove\">\n                <th mat-header-cell *matHeaderCellDef>Remove\n                </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <button mat-icon-button\n                            color=\"primary\"\n                            type=\"button\" \n                            matTooltip=\"Remove option\"\n                            aria-label=\"Remove this option\"\n                            (click)=\"removeOption(element.value)\">\n                    <mat-icon>remove\n                    </mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n            </tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n            </tr>\n        </table>\n        }\n    }\n    }\n</form>", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldEditComponent, isStandalone: true, selector: "lib-form-field-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { orderUp: "orderUp", orderDown: "orderDown", deleted: "deleted" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n    @if(canOrderUp())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n    }\n    @if(canOrderDown())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n    }\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n        <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n            required name=\"description\"></textarea>\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's instructions for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <div style=\"display: flex; flex-direction: row; align-items: center;\">\n    <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n        <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n            info\n        </mat-icon>\n    </div>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n        <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n            info\n        </mat-icon>        \n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon> \n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n    }\n    @case ((FieldType.Selection)) {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <h4>Add Choice</h4>\n        <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Choice</mat-label>\n        <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n        <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Display Name</mat-label>\n        <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n        <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n    </div>\n\n        @if(optionsControl.value && optionsControl.value.length > 0){\n            <h4>Choices</h4>\n        <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n            <ng-container matColumnDef=\"name\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Display Name\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"value\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Value\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"remove\">\n                <th mat-header-cell *matHeaderCellDef>Remove\n                </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <button mat-icon-button\n                            color=\"primary\"\n                            type=\"button\" \n                            matTooltip=\"Remove option\"\n                            aria-label=\"Remove this option\"\n                            (click)=\"removeOption(element.value)\">\n                    <mat-icon>remove\n                    </mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n            </tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n            </tr>\n        </table>\n        }\n    }\n    }\n</form>", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldEditComponent, decorators: [{
             type: Component,
@@ -1364,7 +1416,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatSelectModule,
                         MatTooltipModule,
                         MatCheckboxModule,
-                        FileUploadComponent], template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n    @if(canOrderUp())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n    }\n    @if(canOrderDown())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n    }\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n        <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n            required name=\"description\"></textarea>\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's instructions for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <div style=\"display: flex; flex-direction: row; align-items: center;\">\n    <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n        <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n            info\n        </mat-icon>\n    </div>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n        <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n            info\n        </mat-icon>        \n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon> \n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\"></lib-file-upload>\n    }\n    @case ((FieldType.Selection)) {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <h4>Add Choice</h4>\n        <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Choice</mat-label>\n        <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n        <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Display Name</mat-label>\n        <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n        <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n    </div>\n\n        @if(optionsControl.value && optionsControl.value.length > 0){\n            <h4>Choices</h4>\n        <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n            <ng-container matColumnDef=\"name\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Display Name\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"value\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Value\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"remove\">\n                <th mat-header-cell *matHeaderCellDef>Remove\n                </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <button mat-icon-button\n                            color=\"primary\"\n                            type=\"button\" \n                            matTooltip=\"Remove option\"\n                            aria-label=\"Remove this option\"\n                            (click)=\"removeOption(element.value)\">\n                    <mat-icon>remove\n                    </mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n            </tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n            </tr>\n        </table>\n        }\n    }\n    }\n</form>", styles: [":host{flex-grow:1}\n"] }]
+                        FileUploadComponent], template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n    @if(canOrderUp())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n    }\n    @if(canOrderDown())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n    }\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n        <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n            required name=\"description\"></textarea>\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's instructions for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <div style=\"display: flex; flex-direction: row; align-items: center;\">\n    <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n        <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n            info\n        </mat-icon>\n    </div>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n        <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n            info\n        </mat-icon>        \n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon> \n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n    }\n    @case ((FieldType.Selection)) {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <h4>Add Choice</h4>\n        <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Choice</mat-label>\n        <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n        <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Display Name</mat-label>\n        <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n        <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n    </div>\n\n        @if(optionsControl.value && optionsControl.value.length > 0){\n            <h4>Choices</h4>\n        <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n            <ng-container matColumnDef=\"name\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Display Name\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"value\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Value\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"remove\">\n                <th mat-header-cell *matHeaderCellDef>Remove\n                </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <button mat-icon-button\n                            color=\"primary\"\n                            type=\"button\" \n                            matTooltip=\"Remove option\"\n                            aria-label=\"Remove this option\"\n                            (click)=\"removeOption(element.value)\">\n                    <mat-icon>remove\n                    </mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n            </tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n            </tr>\n        </table>\n        }\n    }\n    }\n</form>", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], canOrderUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "canOrderUp", required: false }] }], canOrderDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "canOrderDown", required: false }] }], orderUp: [{ type: i0.Output, args: ["orderUp"] }], orderDown: [{ type: i0.Output, args: ["orderDown"] }], deleted: [{ type: i0.Output, args: ["deleted"] }] } });
 
 class FormFieldForm {
@@ -1399,13 +1451,17 @@ class FormFieldForm {
         if (item.template) {
             template.remote = item.template;
         }
+        let options = null;
+        if (item.options) {
+            options = JSON.parse(decodeURIComponent(item.options));
+        }
         form.setValue({
             label: item.label,
             key: item.key,
             required: item.required,
             description: item.description,
             template: template,
-            options: item.options,
+            options: options,
             default: item.default,
             field_type: item.field_type,
             order: item.order,
@@ -1414,12 +1470,16 @@ class FormFieldForm {
     }
     static createItem(form) {
         const value = form.value;
+        let options = null;
+        if (value.options) {
+            options = encodeURIComponent(JSON.stringify(value.options));
+        }
         return {
             label: value.label || "",
             key: value.key || "",
             required: value.required || false,
             description: value.description || "",
-            options: value.options || null,
+            options: options,
             default: value.default || "",
             field_type: value.field_type || "BOOLEAN",
             order: value.order || 0
@@ -1427,11 +1487,15 @@ class FormFieldForm {
     }
     static updateItem(form, item) {
         const value = form.value;
+        let options = null;
+        if (value.options) {
+            options = encodeURIComponent(JSON.stringify(value.options));
+        }
         item.label = value.label || "";
         item.key = value.key || "";
         item.required = value.required || false;
         item.description = value.description || "";
-        item.options = value.options || null;
+        item.options = options;
         item.default = value.default || "";
         item.field_type = value.field_type || "BOOLEAN";
         item.order = value.order || 0;
@@ -2237,7 +2301,7 @@ class ListViewComponent {
         return (url_segments.length == 2) && (url_segments[1].path == "self");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, defaultQueries: { classPropertyName: "defaultQueries", publicName: "defaultQueries", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n    [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n        <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["searchTerm", "pageSize", "itemHeight", "itemWidth", "dataSource", "listItemTemplate", "routerMode"], outputs: ["selected"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ListHeaderComponent, selector: "lib-list-header", inputs: ["itemType", "canCreate", "showControls", "sortFields", "filters"], outputs: ["searchChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, defaultQueries: { classPropertyName: "defaultQueries", publicName: "defaultQueries", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n    [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n        <lib-list-table-view style=\"max-width:800px\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["searchTerm", "pageSize", "itemHeight", "itemWidth", "dataSource", "listItemTemplate", "routerMode"], outputs: ["selected"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ListHeaderComponent, selector: "lib-list-header", inputs: ["itemType", "canCreate", "showControls", "sortFields", "filters"], outputs: ["searchChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -2254,7 +2318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatTooltipModule,
                         MatButtonModule,
                         ListHeaderComponent,
-                        NgTemplateOutlet], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n    [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n        <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"] }]
+                        NgTemplateOutlet], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n    [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n        <lib-list-table-view style=\"max-width:800px\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"] }]
         }], propDecorators: { viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], itemService: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemService", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], itemDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDetailTemplate", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", required: false }] }], noSelfItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelfItemsMessage", required: false }] }], noItemsCanCreateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsCanCreateMessage", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], defaultQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultQueries", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], embeddedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "embeddedMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
 
 class TopBarComponent {
@@ -2262,7 +2326,7 @@ class TopBarComponent {
     logo = input(...(ngDevMode ? [undefined, { debugName: "logo" }] : []));
     background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
     user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
-    loginRoute = input("home", ...(ngDevMode ? [{ debugName: "loginRoute" }] : []));
+    loginRoute = input("", ...(ngDevMode ? [{ debugName: "loginRoute" }] : []));
     userService = inject(UserService);
     leftNavService = inject(LeftNavService);
     constructor() {
@@ -2272,7 +2336,11 @@ class TopBarComponent {
         this.userService.logout();
     }
     onLogin() {
-        this.userService.login("/" + this.loginRoute);
+        let route = "/";
+        if (this.loginRoute()) {
+            route = "/" + this.loginRoute();
+        }
+        this.userService.login(route);
     }
     get initials() {
         const user = this.user();
@@ -2323,11 +2391,11 @@ class LeftNavComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LeftNavComponent, isStandalone: true, selector: "lib-left-nav", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sideNavContent", first: true, predicate: MatSidenavContent, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n  @if(leftNavService.wide()){\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <span>{{grouping.name}}</span>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\">\n              <div style=\"display:flex; vertical-align:middle;\">\n              <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n              </div>\n            </a>\n              </li>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n  @else{\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 64px;\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <span>{{grouping.name}}</span>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n              <div style=\"display:flex; vertical-align:middle;\">\n                <mat-icon>{{option.icon}}</mat-icon>\n              </div>\n            </a>\n              </li>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n\n    <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n        <router-outlet />\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LeftNavComponent, isStandalone: true, selector: "lib-left-nav", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sideNavContent", first: true, predicate: MatSidenavContent, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n  @if(leftNavService.wide()){\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\">\n              <div style=\"display:flex; vertical-align:middle;\">\n              <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n              </div>\n            </a>\n              </li>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n  @else{\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 70px;\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; flex-direction: row; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n              <div style=\"display:flex; vertical-align:middle;\">\n                <mat-icon>{{option.icon}}</mat-icon>\n              </div>\n            </a>\n              </li>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n\n    <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n        <router-outlet />\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-left-nav', imports: [MatSidenavModule, MatListModule, RouterOutlet, RouterModule, MatIconModule, MatTooltipModule, NgStyle], template: "<mat-sidenav-container class=\"leftnav-container\">\n  @if(leftNavService.wide()){\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <span>{{grouping.name}}</span>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\">\n              <div style=\"display:flex; vertical-align:middle;\">\n              <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n              </div>\n            </a>\n              </li>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n  @else{\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 64px;\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <span>{{grouping.name}}</span>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n              <div style=\"display:flex; vertical-align:middle;\">\n                <mat-icon>{{option.icon}}</mat-icon>\n              </div>\n            </a>\n              </li>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n\n    <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n        <router-outlet />\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"] }]
+            args: [{ selector: 'lib-left-nav', imports: [MatSidenavModule, MatListModule, RouterOutlet, RouterModule, MatIconModule, MatTooltipModule, NgStyle], template: "<mat-sidenav-container class=\"leftnav-container\">\n  @if(leftNavService.wide()){\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\">\n              <div style=\"display:flex; vertical-align:middle;\">\n              <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n              </div>\n            </a>\n              </li>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n  @else{\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 70px;\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; flex-direction: row; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n              <div style=\"display:flex; vertical-align:middle;\">\n                <mat-icon>{{option.icon}}</mat-icon>\n              </div>\n            </a>\n              </li>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n\n    <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n        <router-outlet />\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], sideNavContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenavContent), { isSignal: true }] }] } });
 
 class FeedbackComponent {
@@ -2367,11 +2435,11 @@ class UserDetailComponent extends DetailView {
         return super.canEdit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserDetailComponent, isStandalone: true, selector: "lib-user-detail", inputs: { showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if(showBack())\n{\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    @if(item.profile){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.profile}}\" style=\"height:120px;\">\n    </div>    \n    }\n\n    <lib-detail-header\n      [text]=\"item.first_name + ' ' + item.last_name\"\n      [id]=\"item.id\"\n      [route]=\"itemService.typePlural()\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete()\"></lib-detail-header>\n\n    <div class=\"form-card-left\" style=\"width:50%\">\n    <div class=\"item-field\">\n      <span><b>Username: </b></span>\n      {{item.username}}\n    </div>\n\n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserDetailComponent, isStandalone: true, selector: "lib-user-detail", inputs: { showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if(showBack())\n{\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    @if(item.profile){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.profile}}\" style=\"height:120px;border-radius: 10px;\">\n    </div>    \n    }\n\n    <lib-detail-header\n      [text]=\"item.first_name + ' ' + item.last_name\"\n      [id]=\"item.id\"\n      [route]=\"itemService.typePlural()\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete()\"></lib-detail-header>\n\n    <div class=\"form-card-left\" style=\"width:50%\">\n    <div class=\"item-field\">\n      <span><b>Username: </b></span>\n      {{item.username}}\n    </div>\n\n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-detail', imports: [BackButtonComponent, DetailHeaderComponent], template: "@if(showBack())\n{\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    @if(item.profile){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.profile}}\" style=\"height:120px;\">\n    </div>    \n    }\n\n    <lib-detail-header\n      [text]=\"item.first_name + ' ' + item.last_name\"\n      [id]=\"item.id\"\n      [route]=\"itemService.typePlural()\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete()\"></lib-detail-header>\n\n    <div class=\"form-card-left\" style=\"width:50%\">\n    <div class=\"item-field\">\n      <span><b>Username: </b></span>\n      {{item.username}}\n    </div>\n\n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
+            args: [{ selector: 'lib-user-detail', imports: [BackButtonComponent, DetailHeaderComponent], template: "@if(showBack())\n{\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    @if(item.profile){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.profile}}\" style=\"height:120px;border-radius: 10px;\">\n    </div>    \n    }\n\n    <lib-detail-header\n      [text]=\"item.first_name + ' ' + item.last_name\"\n      [id]=\"item.id\"\n      [route]=\"itemService.typePlural()\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete()\"></lib-detail-header>\n\n    <div class=\"form-card-left\" style=\"width:50%\">\n    <div class=\"item-field\">\n      <span><b>Username: </b></span>\n      {{item.username}}\n    </div>\n\n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }] } });
 
 class UserForm {
@@ -2382,6 +2450,7 @@ class UserForm {
         first_name: this.fb.control(''),
         last_name: this.fb.control(''),
         phone: this.fb.control(''),
+        preferences: this.fb.control({ notifications: "" }),
         profile: this.fb.control(UserForm.getDefaultProfile()),
     });
     static getDefaultProfile() {
@@ -2398,6 +2467,7 @@ class UserForm {
             first_name: item.first_name,
             last_name: item.last_name,
             phone: item.phone,
+            preferences: item.preferences,
             profile: profile
         });
     }
@@ -2409,6 +2479,7 @@ class UserForm {
             first_name: value.first_name || "",
             last_name: value.last_name || "",
             phone: value.phone || "",
+            preferences: value.preferences || { notifications: "" },
             identifiers: []
         };
     }
@@ -2419,6 +2490,7 @@ class UserForm {
         item.first_name = value.first_name || "";
         item.last_name = value.last_name || "";
         item.phone = value.phone || "";
+        item.preferences = value.preferences || { notifications: "" };
         return item;
     }
 }
@@ -2435,7 +2507,7 @@ class UserEditComponent extends EditView {
         return this.form.form.get('profile');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <lib-file-upload [control]=\"profileControl\"></lib-file-upload>\n\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 formControlName=\"username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"email\"\n                 name=\"email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"first_name\"\n                name=\"first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n    <div class=\"button-group\">\n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"submit\"\n               matTooltip=\"Save\"\n               [disabled]=\"!form.form.valid || !form.form.dirty\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"button\"\n               matTooltip=\"Cancel\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <lib-file-upload [control]=\"profileControl\" [uploadCategory]=\"'image'\"></lib-file-upload>\n\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 formControlName=\"username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"email\"\n                 name=\"email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"first_name\"\n                name=\"first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n    <div class=\"button-group\">\n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"submit\"\n               matTooltip=\"Save\"\n               [disabled]=\"!form.form.valid || !form.form.dirty\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"button\"\n               matTooltip=\"Cancel\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
@@ -2449,7 +2521,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatTooltipModule,
                         FileUploadComponent,
                         TitleCasePipe
-                    ], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <lib-file-upload [control]=\"profileControl\"></lib-file-upload>\n\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 formControlName=\"username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"email\"\n                 name=\"email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"first_name\"\n                name=\"first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n    <div class=\"button-group\">\n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"submit\"\n               matTooltip=\"Save\"\n               [disabled]=\"!form.form.valid || !form.form.dirty\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"button\"\n               matTooltip=\"Cancel\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
+                    ], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <lib-file-upload [control]=\"profileControl\" [uploadCategory]=\"'image'\"></lib-file-upload>\n\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 formControlName=\"username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"email\"\n                 name=\"email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"first_name\"\n                name=\"first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n    <div class=\"button-group\">\n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"submit\"\n               matTooltip=\"Save\"\n               [disabled]=\"!form.form.valid || !form.form.dirty\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"button\"\n               matTooltip=\"Cancel\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
         }], ctorParameters: () => [] });
 
 class UserCreateForm {
@@ -2506,11 +2578,11 @@ class UserListDetailComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserListDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserListDetailComponent, isStandalone: true, selector: "lib-user-list-detail", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, even: { classPropertyName: "even", publicName: "even", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n    @if(item().profile_thumbnail){\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <img matListItemAvatar \n        alt=\"User Avatar\" \n        src=\"{{item().profile_thumbnail}}\" style=\"height:30px\">\n    </div>    \n    }\n    @else {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>person</mat-icon>\n    </div>\n    }\n    <div class=\"text-container\">\n        <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n        <p matListItemLine>{{item().email}}</p>\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;width:100%;display:flex;padding-top:5px;border-radius:12px;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i2$1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$1.MatListItemTitle, selector: "[matListItemTitle]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserListDetailComponent, isStandalone: true, selector: "lib-user-list-detail", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, even: { classPropertyName: "even", publicName: "even", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n    @if(item().profile_thumbnail){\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <img matListItemAvatar \n        alt=\"User Avatar\" \n        src=\"{{item().profile_thumbnail}}\" style=\"height:30px; border-radius: 5px;\">\n    </div>    \n    }\n    @else {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>person</mat-icon>\n    </div>\n    }\n    <div class=\"text-container\">\n        <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n        <p matListItemLine>{{item().email}}</p>\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;width:100%;display:flex;padding-top:5px;border-radius:12px;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i2$1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$1.MatListItemTitle, selector: "[matListItemTitle]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserListDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-list-detail', imports: [MatIconModule, MatListModule], template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n    @if(item().profile_thumbnail){\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <img matListItemAvatar \n        alt=\"User Avatar\" \n        src=\"{{item().profile_thumbnail}}\" style=\"height:30px\">\n    </div>    \n    }\n    @else {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>person</mat-icon>\n    </div>\n    }\n    <div class=\"text-container\">\n        <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n        <p matListItemLine>{{item().email}}</p>\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;width:100%;display:flex;padding-top:5px;border-radius:12px;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
+            args: [{ selector: 'lib-user-list-detail', imports: [MatIconModule, MatListModule], template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n    @if(item().profile_thumbnail){\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <img matListItemAvatar \n        alt=\"User Avatar\" \n        src=\"{{item().profile_thumbnail}}\" style=\"height:30px; border-radius: 5px;\">\n    </div>    \n    }\n    @else {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>person</mat-icon>\n    </div>\n    }\n    <div class=\"text-container\">\n        <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n        <p matListItemLine>{{item().email}}</p>\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;width:100%;display:flex;padding-top:5px;border-radius:12px;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], even: [{ type: i0.Input, args: [{ isSignal: true, alias: "even", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
 
 class UserComponent {
@@ -2732,8 +2804,7 @@ class OrganizationComponent {
     columns = [{ name: 'name', title: 'Name', element_type: 'string' },
         { name: 'website', title: 'Website', element_type: 'url' },
         { name: 'is_partner', title: 'Is Partner', element_type: 'boolean' }];
-    filters = { rows: [{ filters: [{ display_name: "Public?", key: "public", type: "boolean", tooltip: "", choices: [], default: "false", include_if_null: false }] }
-        ] };
+    filters = null;
     detailView = viewChild(OrganizationDetailComponent, ...(ngDevMode ? [{ debugName: "detailView" }] : []));
     onSelected(id) {
         if (id) {