ichec-angular-core 0.1.6 → 0.1.7

package/fesm2022/ichec-angular-core.mjs

@@ -18,21 +18,22 @@ import * as i1$1 from '@angular/material/sidenav';
 import { MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
 import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import { NgIf, Location, TitleCasePipe, NgTemplateOutlet } from '@angular/common';
+import { NgIf, Location, TitleCasePipe, DatePipe, NgTemplateOutlet } from '@angular/common';
 import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i1$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i4$1 from '@angular/material/checkbox';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
+import * as i4$2 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i4$1 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i1$5 from '@angular/material/table';
 import { MatTableModule, MatTable } from '@angular/material/table';
-import * as i4$2 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$4 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i6$1 from '@angular/material/autocomplete';
@@ -127,6 +128,7 @@ var FieldType;
     FieldType[FieldType["Selection"] = 4] = "Selection";
     FieldType[FieldType["Integer"] = 5] = "Integer";
     FieldType[FieldType["File"] = 6] = "File";
+    FieldType[FieldType["Undefined"] = 7] = "Undefined";
 })(FieldType || (FieldType = {}));
 const FORM_FIELD_CHOICES = [{ value: "BOOLEAN", display_name: "Boolean" },
     { value: "CHAR", display_name: "Short Text" },
@@ -511,29 +513,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class FormService {
+    static getBaseTemplate() {
+        return { name: "template", display_name: "template", file_type: "", remote: "", local: "", file: null };
+    }
     toFormGroup(form) {
         const controls = {};
-        form.groups.forEach(group => group.fields.forEach(field => {
-            controls[field.id.toString()] = field.required
-                ? new FormControl(field.default || '', Validators.required)
-                : new FormControl(field.default || '');
-        }));
+        for (const group of form.groups) {
+            for (const field of group.fields) {
+                if (field.field_type == "CHAR" || field.field_type == "TEXT" || field.field_type == "RICH_TEXT") {
+                    controls[field.id.toString()] = field.required ? new FormControl(field.default || '', Validators.required)
+                        : new FormControl(field.default || '');
+                }
+                else if (field.field_type == "BOOLEAN") {
+                    controls[field.id.toString()] = field.required ? new FormControl(field.default == "true", Validators.required)
+                        : new FormControl(field.default == "true");
+                }
+                else if (field.field_type == "FILE") {
+                    controls[field.id.toString()] = field.required ? new FormControl(FormService.getBaseTemplate(), Validators.required)
+                        : new FormControl(FormService.getBaseTemplate());
+                }
+                else {
+                    controls[field.id.toString()] = field.required ? new FormControl(field.default || '', Validators.required)
+                        : new FormControl(field.default || '');
+                }
+            }
+        }
         return new FormGroup(controls);
     }
-    createFieldValue(key, control) {
-        return { field: parseInt(key),
-            asset: null,
-            value: control.value
-        };
+    createFieldValue(key, control, input) {
+        const field_type = this.getType(key, input);
+        if (field_type == "FILE") {
+            return { field: parseInt(key),
+                asset: null,
+                value: ""
+            };
+        }
+        else if (field_type == "BOOLEAN") {
+            return { field: parseInt(key),
+                asset: null,
+                value: control.value ? "true" : "false"
+            };
+        }
+        else {
+            return { field: parseInt(key),
+                asset: null,
+                value: control.value
+            };
+        }
     }
-    createItem(form) {
-        const values = Object.keys(form.controls).map(key => this.createFieldValue(key, form.controls[key]));
+    createItem(form, input) {
+        const values = Object.keys(form.controls).map(key => this.createFieldValue(key, form.controls[key], input));
         return { values: Array.from(values) };
     }
+    getFiles(form, input) {
+        const files = [];
+        for (const key of Object.keys(form.controls)) {
+            if (this.getType(key, input) == "FILE") {
+                files.push({ id: parseInt(key), asset: form.get(key)?.value });
+            }
+        }
+        return files;
+    }
     updateFieldValue(control, item) {
         item.value = control.value.value;
         return item;
     }
+    getType(key, input) {
+        const field_id = parseInt(key);
+        for (const group of input.groups) {
+            for (const field of group.fields) {
+                if (field.id == field_id) {
+                    return field.field_type;
+                }
+            }
+        }
+        return "";
+    }
     getValue(key, form) {
         const field = parseInt(key);
         for (const value of form.values) {
@@ -722,11 +777,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
             args: [{ selector: 'lib-avatar', imports: [], template: "<div class=\"container\"> <span>{{text()}}</span> </div>", styles: [".container{width:36px;height:36px;border-radius:100%;text-align:center;justify-content:center;align-content:center;background-color:#d3d3d3}.container span{line-height:8px;color:#000}\n"] }]
         }] });
 
+class DeleteDialogComponent {
+    dialogRef = inject((MatDialogRef));
+    data = inject(MAT_DIALOG_DATA);
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: DeleteDialogComponent, isStandalone: true, selector: "lib-delete-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.title}}</h2>\n<mat-dialog-content>\n  <p>{{data.message}}</p>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button matButton (click)=\"onNoClick()\">No Thanks</button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>Delete</button>\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DeleteDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-delete-dialog', imports: [MatButtonModule,
+                        MatDialogTitle,
+                        MatDialogContent,
+                        MatDialogActions,
+                        MatDialogClose,], template: "<h2 mat-dialog-title>{{data.title}}</h2>\n<mat-dialog-content>\n  <p>{{data.message}}</p>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button matButton (click)=\"onNoClick()\">No Thanks</button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>Delete</button>\n</mat-dialog-actions>" }]
+        }] });
+
 class DetailView {
     item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
     route = inject(ActivatedRoute);
     userService = inject(UserService);
     itemService;
+    location = inject(Location);
+    deleteDialog = inject(MatDialog);
     constructor(itemService) {
         this.itemService = itemService;
     }
@@ -752,12 +827,28 @@ class DetailView {
             this.onItemAvailable(item);
         });
     }
+    onDeleteClicked() {
+        const dialogRef = this.deleteDialog.open(DeleteDialogComponent, {
+            data: {
+                title: "Delete " + this.title() + "?",
+                message: "Are you sure you want to delete this " + this.title() + "?. This cannot be undone."
+            },
+        });
+        dialogRef.afterClosed().subscribe(result => {
+            if (result !== undefined) {
+                this.onDelete();
+            }
+        });
+    }
     onDelete() {
         const item = this.item();
         if (item) {
-            this.itemService.deleteItem(item.id);
+            this.itemService.deleteItem(item.id).subscribe(_ => this.goBack());
         }
     }
+    goBack() {
+        this.location.back();
+    }
     canEdit() {
         return this.itemService.canEdit();
     }
@@ -840,9 +931,7 @@ class EditView {
         this.itemService.putItem(this.updateItem(item)).subscribe(item => this.saveFiles(item));
     }
     saveFiles(item) {
-        console.log("Saving files");
         const next_file = this.getNextFileForUpload();
-        console.log("next is:", next_file);
         if (next_file) {
             this.saveFile(item, next_file);
         }
@@ -909,26 +998,6 @@ class EditView {
     }
 }
 
-class FormFieldDetailComponent {
-    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
-    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
-    get isValid() {
-        return this.form().controls[this.key].valid;
-    }
-    get key() {
-        return this.field().id.toString();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormFieldDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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  <label [attr.for]=\"key\">{{ field().label }}</label>\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=\"trl_stage\">\n        </mat-form-field>\n      }\n    }\n  </div>\n  @if (!isValid) {\n    <div class=\"errorMessage\">{{ field().label }} is required</div>\n  }\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],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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormFieldDetailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-form-field-detail', imports: [ReactiveFormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        MatCheckboxModule], template: "<div [formGroup]=\"form()\">\n  <label [attr.for]=\"key\">{{ field().label }}</label>\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=\"trl_stage\">\n        </mat-form-field>\n      }\n    }\n  </div>\n  @if (!isValid) {\n    <div class=\"errorMessage\">{{ field().label }} is required</div>\n  }\n</div>\n" }]
-        }] });
-
 class FileUploadComponent {
     control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
     onFileUpload(event) {
@@ -963,11 +1032,38 @@ class FileUploadComponent {
         this.control().setValue(record);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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)\n  {\n  <div class=\"image_holder\">\n    <p>Update {{control().value.display_name | titlecase}}</p>\n    <div style=\"display:flex; flex-direction:row; justify-content: center; align-content: center;\">\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.local}}\" style=\"height:120px;\">\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  </div>\n  }\n  @else\n  {\n  @if (control().value.remote){\n  <div class=\"image_holder\">\n    <p>Update {{control().value.display_name | titlecase}}</p>\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" style=\"height:120px;\">\n  </div>\n  }\n  @else {\n  <div>\n    <span>Upload a {{control().value.display_name}}</span>\n  </div>\n  }\n  <div class=\"button-row\">\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Attach\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>attachment</mat-icon>\n    </button>\n    <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" />\n  </div>\n  }\n</div>", styles: [".container{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.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: "20.1.1", 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>Update {{control().value.display_name | titlecase}}</p>\n    <div style=\"display:flex; flex-direction:row; justify-content: center; align-content: center;\">\n\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>Update {{control().value.display_name | titlecase}}</p>\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" style=\"height:120px;\">\n  </div>\n  }\n  @else {\n  <div>\n    <span>Upload a {{control().value.display_name}}</span>\n  </div>\n  }\n  <div class=\"button-row\">\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Attach\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>attachment</mat-icon>\n    </button>\n    <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" />\n  </div>\n  }\n</div>", styles: [".container{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", 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)\n  {\n  <div class=\"image_holder\">\n    <p>Update {{control().value.display_name | titlecase}}</p>\n    <div style=\"display:flex; flex-direction:row; justify-content: center; align-content: center;\">\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.local}}\" style=\"height:120px;\">\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  </div>\n  }\n  @else\n  {\n  @if (control().value.remote){\n  <div class=\"image_holder\">\n    <p>Update {{control().value.display_name | titlecase}}</p>\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" style=\"height:120px;\">\n  </div>\n  }\n  @else {\n  <div>\n    <span>Upload a {{control().value.display_name}}</span>\n  </div>\n  }\n  <div class=\"button-row\">\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Attach\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>attachment</mat-icon>\n    </button>\n    <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" />\n  </div>\n  }\n</div>", styles: [".container{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"] }]
+            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>Update {{control().value.display_name | titlecase}}</p>\n    <div style=\"display:flex; flex-direction:row; justify-content: center; align-content: center;\">\n\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>Update {{control().value.display_name | titlecase}}</p>\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" style=\"height:120px;\">\n  </div>\n  }\n  @else {\n  <div>\n    <span>Upload a {{control().value.display_name}}</span>\n  </div>\n  }\n  <div class=\"button-row\">\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Attach\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>attachment</mat-icon>\n    </button>\n    <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" />\n  </div>\n  }\n</div>", styles: [".container{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"] }]
+        }] });
+
+class FormFieldDetailComponent {
+    field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    get isValid() {
+        const control = this.form().get(this.key);
+        if (control) {
+            return control.valid;
+        }
+        return false;
+    }
+    get key() {
+        return this.field().id.toString();
+    }
+    get control() {
+        return this.form().get(this.key);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormFieldDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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=\"trl_stage\">\n        </mat-form-field>\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=\"trl_stage\">\n        </mat-form-field>\n      }\n      @case('FILE') {\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        <lib-file-upload [control]=\"control\"></lib-file-upload>\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],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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: MatCheckboxModule }, { kind: "component", type: i4$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: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormFieldDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-form-field-detail', imports: [ReactiveFormsModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        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=\"trl_stage\">\n        </mat-form-field>\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=\"trl_stage\">\n        </mat-form-field>\n      }\n      @case('FILE') {\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        <lib-file-upload [control]=\"control\"></lib-file-upload>\n      }    \n    }\n  </div>\n</div>\n" }]
         }] });
 
 class FormFieldEditComponent {
@@ -981,7 +1077,11 @@ class FormFieldEditComponent {
         return this.form().get('template');
     }
     get fieldType() {
-        return getFieldTypeFromKey(this.form().value.field_type);
+        const field_type = this.form().value.field_type;
+        if (field_type) {
+            return getFieldTypeFromKey(field_type);
+        }
+        return FieldType.Undefined;
     }
     submit() {
         this.submitted.emit();
@@ -990,7 +1090,7 @@ class FormFieldEditComponent {
         this.cancelled.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormFieldEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: FormFieldEditComponent, isStandalone: true, selector: "lib-form-field-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled" }, ngImport: i0, template: "<form class=\"form-card\" id=\"app-field-form\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\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-form-field>\n\n    <mat-checkbox class=\"example-margin\" formControlName=\"required\">Required?</mat-checkbox>\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-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\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\">\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-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\"></lib-file-upload>\n    }\n}\n\n    <div>\n        @if(!editMode()) {\n        <button mat-fab class=\"form-action-button\" type=\"submit\" matTooltip=\"Add Field\"\n            [disabled]=\"!form().valid\">\n            <mat-icon>add</mat-icon>\n        </button>\n        <button mat-fab class=\"form-action-button\" (click)=\"cancel()\" type=\"button\" matTooltip=\"Cancel\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n    </div>\n</form>", styles: [""], 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],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.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$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.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: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: FormFieldEditComponent, isStandalone: true, selector: "lib-form-field-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled" }, ngImport: i0, template: "<form class=\"form-card\" id=\"app-field-form\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\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-form-field>\n\n    <mat-checkbox class=\"example-margin\" formControlName=\"required\">Required?</mat-checkbox>\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-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\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\">\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-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\"></lib-file-upload>\n    }\n}\n    <div>\n        @if(!editMode()) {\n        <button mat-fab class=\"form-action-button\" type=\"submit\" matTooltip=\"Add Field\"\n            [disabled]=\"!form().valid\">\n            <mat-icon>add</mat-icon>\n        </button>\n        <button mat-fab class=\"form-action-button\" (click)=\"cancel()\" type=\"button\" matTooltip=\"Cancel\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n    </div>\n</form>", styles: [""], 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],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.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$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.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: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormFieldEditComponent, decorators: [{
             type: Component,
@@ -1005,7 +1105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatSelectModule,
                         MatTooltipModule,
                         MatCheckboxModule,
-                        FileUploadComponent], template: "<form class=\"form-card\" id=\"app-field-form\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\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-form-field>\n\n    <mat-checkbox class=\"example-margin\" formControlName=\"required\">Required?</mat-checkbox>\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-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\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\">\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-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\"></lib-file-upload>\n    }\n}\n\n    <div>\n        @if(!editMode()) {\n        <button mat-fab class=\"form-action-button\" type=\"submit\" matTooltip=\"Add Field\"\n            [disabled]=\"!form().valid\">\n            <mat-icon>add</mat-icon>\n        </button>\n        <button mat-fab class=\"form-action-button\" (click)=\"cancel()\" type=\"button\" matTooltip=\"Cancel\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n    </div>\n</form>" }]
+                        FileUploadComponent], template: "<form class=\"form-card\" id=\"app-field-form\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\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-form-field>\n\n    <mat-checkbox class=\"example-margin\" formControlName=\"required\">Required?</mat-checkbox>\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-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\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\">\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-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\"></lib-file-upload>\n    }\n}\n    <div>\n        @if(!editMode()) {\n        <button mat-fab class=\"form-action-button\" type=\"submit\" matTooltip=\"Add Field\"\n            [disabled]=\"!form().valid\">\n            <mat-icon>add</mat-icon>\n        </button>\n        <button mat-fab class=\"form-action-button\" (click)=\"cancel()\" type=\"button\" matTooltip=\"Cancel\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n    </div>\n</form>" }]
         }] });
 
 class DynamicFormComponent {
@@ -1187,6 +1287,7 @@ class FormGroupEditComponent {
     editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
     submitted = output();
     cancelled = output();
+    deleted = output();
     fb = inject(FormBuilder);
     fieldForm = null;
     get fields() {
@@ -1213,6 +1314,9 @@ class FormGroupEditComponent {
         }
         this.fieldForm = null;
     }
+    onDelete() {
+        this.deleted.emit();
+    }
     cancel() {
         this.cancelled.emit();
     }
@@ -1220,7 +1324,7 @@ class FormGroupEditComponent {
         this.submitted.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormGroupEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: FormGroupEditComponent, isStandalone: true, selector: "lib-form-group-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled" }, ngImport: i0, template: "<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n\n    <mat-form-field class=\"form-field\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:150px\" formControlName=\"description\"\n        name=\"description\"></textarea>\n    </mat-form-field>\n\n    <h3>Fields</h3>\n    @if(fieldForm){\n        <lib-form-field-edit [form]=\"fieldForm\" (submitted)=\"submitField()\" (cancelled)=\"cancelField()\"></lib-form-field-edit>\n    }\n    @else {\n\n    <button mat-fab class=\"form-action-button\" (click)=\"addField()\" matTooltip=\"Add a Field\" type=\"button\">\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <mat-accordion style=\"width:100%\">\n    @for(field of fields.controls; track field; let idx=$index)\n    {\n        <mat-expansion-panel style=\"width:100%\">\n        <mat-expansion-panel-header>\n            <mat-panel-title>{{field.value.label}}</mat-panel-title>\n            <div class=\"control\">\n            <button mat-icon-button type=\"button\" color=\"primary\" matTooltip=\"Delete the Field\" aria-label=\"Delete an item\"\n                (click)=\"onFieldDelete(idx)\">\n                <mat-icon>delete\n                </mat-icon>\n            </button>\n            @if(idx>0){\n            <button mat-icon-button type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n                (click)=\"onFieldOrderUp(idx)\">\n                <mat-icon>arrow_upward\n                </mat-icon>\n            </button>\n            }\n            @if(idx<fields.controls.length -1){\n            <button mat-icon-button type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n                (click)=\"onFieldOrderDown(idx)\">\n                <mat-icon>arrow_downward\n                </mat-icon>\n            </button>\n            }\n            </div>\n        </mat-expansion-panel-header>\n        <lib-form-field-edit [form]=\"field\" [editMode]=\"true\"></lib-form-field-edit>\n        </mat-expansion-panel>\n    }\n    </mat-accordion>\n    }\n\n    @if(!editMode()){\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"submit\" matTooltip=\"Save Group\" [disabled]=\"!form().valid\">\n    <mat-icon>save</mat-icon>\n    </button>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Cancel\" (click)=\"cancel()\">\n    <mat-icon>cancel</mat-icon>\n    </button>        \n    </div>\n}\n<form>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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],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: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: "component", type: FormFieldEditComponent, selector: "lib-form-field-edit", inputs: ["form", "editMode"], outputs: ["submitted", "cancelled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: FormGroupEditComponent, isStandalone: true, selector: "lib-form-group-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled", deleted: "deleted" }, ngImport: i0, template: "<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n\n    <mat-form-field class=\"form-field\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:150px\" formControlName=\"description\"\n        name=\"description\"></textarea>\n    </mat-form-field>\n\n    <button matFab type=\"button\" style=\"margin:10px\" color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n        (click)=\"onDelete()\">\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <h3>Fields</h3>\n    @if(fieldForm){\n        <lib-form-field-edit style=\"min-width:450px\" [form]=\"fieldForm\" (submitted)=\"submitField()\" (cancelled)=\"cancelField()\"></lib-form-field-edit>\n    }\n    @else {\n\n    <button mat-fab class=\"form-action-button\" (click)=\"addField()\" matTooltip=\"Add a Field\" type=\"button\">\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <mat-accordion style=\"min-width:450px\">\n    @for(field of fields.controls; track field; let idx=$index)\n    {\n        <mat-expansion-panel style=\"width:100%\">\n        <mat-expansion-panel-header class=\"expansion-panel\">\n            <mat-panel-title>{{field.value.label}}</mat-panel-title>\n            <div class=\"expansion-panel-controls\">\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Delete the Field\" aria-label=\"Delete an item\"\n                (click)=\"onFieldDelete(idx)\">\n                <mat-icon>delete\n                </mat-icon>\n            </button>\n            @if(idx>0){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n                (click)=\"onFieldOrderUp(idx)\">\n                <mat-icon>arrow_upward\n                </mat-icon>\n            </button>\n            }\n            @if(idx<fields.controls.length -1){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n                (click)=\"onFieldOrderDown(idx)\">\n                <mat-icon>arrow_downward\n                </mat-icon>\n            </button>\n            }\n            </div>\n        </mat-expansion-panel-header>\n        <lib-form-field-edit [form]=\"field\" [editMode]=\"true\"></lib-form-field-edit>\n        </mat-expansion-panel>\n    }\n    </mat-accordion>\n    }\n\n    @if(!editMode()){\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"submit\" matTooltip=\"Save Group\" [disabled]=\"!form().valid\">\n    <mat-icon>save</mat-icon>\n    </button>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Cancel\" (click)=\"cancel()\">\n    <mat-icon>cancel</mat-icon>\n    </button>        \n    </div>\n}\n<form>", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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],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: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.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: "component", type: FormFieldEditComponent, selector: "lib-form-field-edit", inputs: ["form", "editMode"], outputs: ["submitted", "cancelled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FormGroupEditComponent, decorators: [{
             type: Component,
@@ -1231,7 +1335,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         ReactiveFormsModule,
                         MatFormFieldModule,
                         MatInputModule,
-                        FormFieldEditComponent], template: "<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n\n    <mat-form-field class=\"form-field\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:150px\" formControlName=\"description\"\n        name=\"description\"></textarea>\n    </mat-form-field>\n\n    <h3>Fields</h3>\n    @if(fieldForm){\n        <lib-form-field-edit [form]=\"fieldForm\" (submitted)=\"submitField()\" (cancelled)=\"cancelField()\"></lib-form-field-edit>\n    }\n    @else {\n\n    <button mat-fab class=\"form-action-button\" (click)=\"addField()\" matTooltip=\"Add a Field\" type=\"button\">\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <mat-accordion style=\"width:100%\">\n    @for(field of fields.controls; track field; let idx=$index)\n    {\n        <mat-expansion-panel style=\"width:100%\">\n        <mat-expansion-panel-header>\n            <mat-panel-title>{{field.value.label}}</mat-panel-title>\n            <div class=\"control\">\n            <button mat-icon-button type=\"button\" color=\"primary\" matTooltip=\"Delete the Field\" aria-label=\"Delete an item\"\n                (click)=\"onFieldDelete(idx)\">\n                <mat-icon>delete\n                </mat-icon>\n            </button>\n            @if(idx>0){\n            <button mat-icon-button type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n                (click)=\"onFieldOrderUp(idx)\">\n                <mat-icon>arrow_upward\n                </mat-icon>\n            </button>\n            }\n            @if(idx<fields.controls.length -1){\n            <button mat-icon-button type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n                (click)=\"onFieldOrderDown(idx)\">\n                <mat-icon>arrow_downward\n                </mat-icon>\n            </button>\n            }\n            </div>\n        </mat-expansion-panel-header>\n        <lib-form-field-edit [form]=\"field\" [editMode]=\"true\"></lib-form-field-edit>\n        </mat-expansion-panel>\n    }\n    </mat-accordion>\n    }\n\n    @if(!editMode()){\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"submit\" matTooltip=\"Save Group\" [disabled]=\"!form().valid\">\n    <mat-icon>save</mat-icon>\n    </button>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Cancel\" (click)=\"cancel()\">\n    <mat-icon>cancel</mat-icon>\n    </button>        \n    </div>\n}\n<form>" }]
+                        FormFieldEditComponent], template: "<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n\n    <mat-form-field class=\"form-field\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:150px\" formControlName=\"description\"\n        name=\"description\"></textarea>\n    </mat-form-field>\n\n    <button matFab type=\"button\" style=\"margin:10px\" color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n        (click)=\"onDelete()\">\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <h3>Fields</h3>\n    @if(fieldForm){\n        <lib-form-field-edit style=\"min-width:450px\" [form]=\"fieldForm\" (submitted)=\"submitField()\" (cancelled)=\"cancelField()\"></lib-form-field-edit>\n    }\n    @else {\n\n    <button mat-fab class=\"form-action-button\" (click)=\"addField()\" matTooltip=\"Add a Field\" type=\"button\">\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <mat-accordion style=\"min-width:450px\">\n    @for(field of fields.controls; track field; let idx=$index)\n    {\n        <mat-expansion-panel style=\"width:100%\">\n        <mat-expansion-panel-header class=\"expansion-panel\">\n            <mat-panel-title>{{field.value.label}}</mat-panel-title>\n            <div class=\"expansion-panel-controls\">\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Delete the Field\" aria-label=\"Delete an item\"\n                (click)=\"onFieldDelete(idx)\">\n                <mat-icon>delete\n                </mat-icon>\n            </button>\n            @if(idx>0){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n                (click)=\"onFieldOrderUp(idx)\">\n                <mat-icon>arrow_upward\n                </mat-icon>\n            </button>\n            }\n            @if(idx<fields.controls.length -1){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n                (click)=\"onFieldOrderDown(idx)\">\n                <mat-icon>arrow_downward\n                </mat-icon>\n            </button>\n            }\n            </div>\n        </mat-expansion-panel-header>\n        <lib-form-field-edit [form]=\"field\" [editMode]=\"true\"></lib-form-field-edit>\n        </mat-expansion-panel>\n    }\n    </mat-accordion>\n    }\n\n    @if(!editMode()){\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"submit\" matTooltip=\"Save Group\" [disabled]=\"!form().valid\">\n    <mat-icon>save</mat-icon>\n    </button>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Cancel\" (click)=\"cancel()\">\n    <mat-icon>cancel</mat-icon>\n    </button>        \n    </div>\n}\n<form>", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"] }]
         }] });
 
 class DynamicFormBuilderComponent {
@@ -1279,7 +1383,7 @@ class DynamicFormBuilderComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DynamicFormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: DynamicFormBuilderComponent, isStandalone: true, selector: "lib-dynamic-form-builder", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, handleSubmit: { classPropertyName: "handleSubmit", publicName: "handleSubmit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<h2>Groups</h2>\n\n\n@if(groupForm)\n{\n<lib-form-group-edit [form]=\"groupForm\" (cancelled)=\"cancelGroup()\" (submitted)=\"createGroup()\"></lib-form-group-edit>\n}\n@else{\n\n<button mat-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n  <mat-icon>add</mat-icon>\n</button>\n\n@if (form().groups.length > 0){\n\n<mat-accordion style=\"width:100%\">\n\n  @for(group of form().groups.controls; track group; let group_idx=$index)\n  {\n  <mat-expansion-panel style=\"width:100%\">\n    <mat-expansion-panel-header class=\"expansion-panel\">\n      <mat-panel-title>{{getLabel(group)}}</mat-panel-title>\n      <div class=\"expansion-panel-controls\">\n        <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete an item\"\n          (click)=\"deleteGroup(group_idx)\">\n          <mat-icon>delete\n          </mat-icon>\n        </button>\n        @if(group_idx>0){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n          (click)=\"onOrderUp(group_idx)\">\n          <mat-icon>arrow_upward\n          </mat-icon>\n        </button>\n        }\n        @if(group_idx < form().groups.controls.length - 1){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n          (click)=\"onOrderDown(group_idx)\">\n          <mat-icon>arrow_downward\n          </mat-icon>\n        </button>\n        }\n      </div>\n    </mat-expansion-panel-header>\n    <lib-form-group-edit [form]=\"group\" [editMode]=\"true\"></lib-form-group-edit>\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n\n}\n\n@if(handleSubmit() && dirty())\n{\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Save Changes\" (click)=\"onSubmit()\">\n    <mat-icon>save</mat-icon>\n    </button>\n    </div>\n}\n}", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: FormGroupEditComponent, selector: "lib-form-group-edit", inputs: ["form", "editMode"], outputs: ["submitted", "cancelled"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: DynamicFormBuilderComponent, isStandalone: true, selector: "lib-dynamic-form-builder", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, handleSubmit: { classPropertyName: "handleSubmit", publicName: "handleSubmit", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<h2>Groups</h2>\n\n\n@if(groupForm)\n{\n<lib-form-group-edit [form]=\"groupForm\" (cancelled)=\"cancelGroup()\" (submitted)=\"createGroup()\"></lib-form-group-edit>\n}\n@else{\n<button mat-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n  <mat-icon>add</mat-icon>\n</button>\n\n@if (form().groups.length > 0){\n\n<mat-accordion style=\"width:100%\">\n\n  @for(group of form().groups.controls; track group; let group_idx=$index)\n  {\n  <mat-expansion-panel style=\"width:100%\">\n    <mat-expansion-panel-header class=\"expansion-panel\">\n      <mat-panel-title>{{getLabel(group)}}</mat-panel-title>\n      <div class=\"expansion-panel-controls\">\n        @if(group_idx>0){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n          (click)=\"onOrderUp(group_idx)\">\n          <mat-icon>arrow_upward\n          </mat-icon>\n        </button>\n        }\n        @if(group_idx < form().groups.controls.length - 1){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n          (click)=\"onOrderDown(group_idx)\">\n          <mat-icon>arrow_downward\n          </mat-icon>\n        </button>\n        }\n      </div>\n    </mat-expansion-panel-header>\n    <lib-form-group-edit [form]=\"group\" [editMode]=\"true\" (deleted)=\"deleteGroup(group_idx)\"></lib-form-group-edit>\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n\n}\n\n@if(handleSubmit() && dirty())\n{\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Save Changes\" (click)=\"onSubmit()\">\n    <mat-icon>save</mat-icon>\n    </button>\n    </div>\n}\n}", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: FormGroupEditComponent, selector: "lib-form-group-edit", inputs: ["form", "editMode"], outputs: ["submitted", "cancelled", "deleted"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DynamicFormBuilderComponent, decorators: [{
             type: Component,
@@ -1292,7 +1396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatTooltipModule,
                         MatExpansionModule,
                         FormGroupEditComponent
-                    ], template: "<h2>Groups</h2>\n\n\n@if(groupForm)\n{\n<lib-form-group-edit [form]=\"groupForm\" (cancelled)=\"cancelGroup()\" (submitted)=\"createGroup()\"></lib-form-group-edit>\n}\n@else{\n\n<button mat-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n  <mat-icon>add</mat-icon>\n</button>\n\n@if (form().groups.length > 0){\n\n<mat-accordion style=\"width:100%\">\n\n  @for(group of form().groups.controls; track group; let group_idx=$index)\n  {\n  <mat-expansion-panel style=\"width:100%\">\n    <mat-expansion-panel-header class=\"expansion-panel\">\n      <mat-panel-title>{{getLabel(group)}}</mat-panel-title>\n      <div class=\"expansion-panel-controls\">\n        <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete an item\"\n          (click)=\"deleteGroup(group_idx)\">\n          <mat-icon>delete\n          </mat-icon>\n        </button>\n        @if(group_idx>0){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n          (click)=\"onOrderUp(group_idx)\">\n          <mat-icon>arrow_upward\n          </mat-icon>\n        </button>\n        }\n        @if(group_idx < form().groups.controls.length - 1){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n          (click)=\"onOrderDown(group_idx)\">\n          <mat-icon>arrow_downward\n          </mat-icon>\n        </button>\n        }\n      </div>\n    </mat-expansion-panel-header>\n    <lib-form-group-edit [form]=\"group\" [editMode]=\"true\"></lib-form-group-edit>\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n\n}\n\n@if(handleSubmit() && dirty())\n{\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Save Changes\" (click)=\"onSubmit()\">\n    <mat-icon>save</mat-icon>\n    </button>\n    </div>\n}\n}", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"] }]
+                    ], template: "<h2>Groups</h2>\n\n\n@if(groupForm)\n{\n<lib-form-group-edit [form]=\"groupForm\" (cancelled)=\"cancelGroup()\" (submitted)=\"createGroup()\"></lib-form-group-edit>\n}\n@else{\n<button mat-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n  <mat-icon>add</mat-icon>\n</button>\n\n@if (form().groups.length > 0){\n\n<mat-accordion style=\"width:100%\">\n\n  @for(group of form().groups.controls; track group; let group_idx=$index)\n  {\n  <mat-expansion-panel style=\"width:100%\">\n    <mat-expansion-panel-header class=\"expansion-panel\">\n      <mat-panel-title>{{getLabel(group)}}</mat-panel-title>\n      <div class=\"expansion-panel-controls\">\n        @if(group_idx>0){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n          (click)=\"onOrderUp(group_idx)\">\n          <mat-icon>arrow_upward\n          </mat-icon>\n        </button>\n        }\n        @if(group_idx < form().groups.controls.length - 1){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n          (click)=\"onOrderDown(group_idx)\">\n          <mat-icon>arrow_downward\n          </mat-icon>\n        </button>\n        }\n      </div>\n    </mat-expansion-panel-header>\n    <lib-form-group-edit [form]=\"group\" [editMode]=\"true\" (deleted)=\"deleteGroup(group_idx)\"></lib-form-group-edit>\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n\n}\n\n@if(handleSubmit() && dirty())\n{\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Save Changes\" (click)=\"onSubmit()\">\n    <mat-icon>save</mat-icon>\n    </button>\n    </div>\n}\n}", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"] }]
         }] });
 
 class DynamicFormForm {
@@ -1570,7 +1674,7 @@ class ListTableViewComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: ListTableViewComponent, isStandalone: true, selector: "lib-list-table-view", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if (dataSource(); as dataSource) {\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    matSortActive=\"name\"\n    matSortDisableClear\n    matSortDirection=\"desc\"\n    class=\"mat-elevation-z8\"\n  >\n    @for (column of columns(); track column.name) {\n      <ng-container matColumnDef=\"{{ column.name }}\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          {{ column.title }}\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[column.name] }}</td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: columnNames()\"\n      [routerLink]=\"['/' + itemType() + '/detail/', row.id]\"\n      [routerLinkActive]=\"['is-active']\"\n    ></tr>\n  </table>\n\n  <mat-paginator\n    [length]=\"dataSource.length()\"\n    [pageSize]=\"20\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    aria-label=\"Select page\"\n  >\n  </mat-paginator>\n}\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: ListTableViewComponent, isStandalone: true, selector: "lib-list-table-view", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if (dataSource(); as dataSource) {\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    matSortActive=\"name\"\n    matSortDisableClear\n    matSortDirection=\"desc\"\n    class=\"mat-elevation-z8\"\n  >\n    @for (column of columns(); track column.name) {\n      <ng-container matColumnDef=\"{{ column.name }}\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          {{ column.title }}\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n\n          @if(column.element_type === \"date\")\n          {\n            {{ element[column.name] | date}}\n          }\n          @else if(column.element_type === \"enum\")\n          {\n            {{ element[column.name] | titlecase}}\n          }\n          @else {\n            {{ element[column.name] }}\n          }\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: columnNames()\"\n      [routerLink]=\"['/' + itemType() + '/detail/', row.id]\"\n      [routerLinkActive]=\"['is-active']\"\n    ></tr>\n  </table>\n\n  <mat-paginator\n    [length]=\"dataSource.length()\"\n    [pageSize]=\"20\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    aria-label=\"Select page\"\n  >\n  </mat-paginator>\n}\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListTableViewComponent, decorators: [{
             type: Component,
@@ -1581,8 +1685,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatIconModule,
                         MatPaginatorModule,
                         MatSortModule,
-                        RouterModule
-                    ], template: "@if (dataSource(); as dataSource) {\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    matSortActive=\"name\"\n    matSortDisableClear\n    matSortDirection=\"desc\"\n    class=\"mat-elevation-z8\"\n  >\n    @for (column of columns(); track column.name) {\n      <ng-container matColumnDef=\"{{ column.name }}\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          {{ column.title }}\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[column.name] }}</td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: columnNames()\"\n      [routerLink]=\"['/' + itemType() + '/detail/', row.id]\"\n      [routerLinkActive]=\"['is-active']\"\n    ></tr>\n  </table>\n\n  <mat-paginator\n    [length]=\"dataSource.length()\"\n    [pageSize]=\"20\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    aria-label=\"Select page\"\n  >\n  </mat-paginator>\n}\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"] }]
+                        RouterModule,
+                        DatePipe,
+                        TitleCasePipe
+                    ], template: "@if (dataSource(); as dataSource) {\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    matSortActive=\"name\"\n    matSortDisableClear\n    matSortDirection=\"desc\"\n    class=\"mat-elevation-z8\"\n  >\n    @for (column of columns(); track column.name) {\n      <ng-container matColumnDef=\"{{ column.name }}\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          {{ column.title }}\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n\n          @if(column.element_type === \"date\")\n          {\n            {{ element[column.name] | date}}\n          }\n          @else if(column.element_type === \"enum\")\n          {\n            {{ element[column.name] | titlecase}}\n          }\n          @else {\n            {{ element[column.name] }}\n          }\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: columnNames()\"\n      [routerLink]=\"['/' + itemType() + '/detail/', row.id]\"\n      [routerLinkActive]=\"['is-active']\"\n    ></tr>\n  </table>\n\n  <mat-paginator\n    [length]=\"dataSource.length()\"\n    [pageSize]=\"20\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    aria-label=\"Select page\"\n  >\n  </mat-paginator>\n}\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"] }]
         }] });
 
 // Datasource needs any
@@ -1642,7 +1748,7 @@ class SearchBarComponent {
         this.searchChanged.emit(this.searchFilter.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"container\">\n    <mat-form-field class=\"search\" style=\"margin: 10px;\">\n        <mat-label>Search</mat-label>\n        <input matInput [formControl]=\"searchFilter\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchFilter.value){\n        <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n        @else(){\n        <button matSuffix mat-icon-button aria-label=\"Search\">\n            <mat-icon>search</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n\n    @if(sortFields().length > 0){\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select>\n            @for(field of sortFields(); track field)\n            {\n            <mat-option>{{field}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\">\n        <mat-icon>sort</mat-icon>\n    </button>\n    }\n</div>", styles: [".container{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}\n"], 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"container\">\n    <mat-form-field class=\"search\" style=\"margin: 10px;\">\n        <mat-label>Search</mat-label>\n        <input matInput [formControl]=\"searchFilter\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchFilter.value){\n        <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n        @else(){\n        <button matSuffix mat-icon-button aria-label=\"Search\">\n            <mat-icon>search</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n\n    @if(sortFields().length > 0){\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select>\n            @for(field of sortFields(); track field)\n            {\n            <mat-option>{{field}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\">\n        <mat-icon>sort</mat-icon>\n    </button>\n    }\n</div>", styles: [".container{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}\n"], 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", 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: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
@@ -1743,6 +1849,7 @@ class ListViewComponent {
     noItemsCanCreateMessage = input(...(ngDevMode ? [undefined, { debugName: "noItemsCanCreateMessage" }] : []));
     noItemsMessage = input(...(ngDevMode ? [undefined, { debugName: "noItemsMessage" }] : []));
     defaultQueries = input([], ...(ngDevMode ? [{ debugName: "defaultQueries" }] : []));
+    embeddedMode = input(false, ...(ngDevMode ? [{ debugName: "embeddedMode" }] : []));
     selectedViewType = signal("table", ...(ngDevMode ? [{ debugName: "selectedViewType" }] : []));
     pageSize = 20;
     pageSizeOptions = [20, 50, 100];
@@ -1803,10 +1910,13 @@ class ListViewComponent {
     }
     isSelfList() {
         const url_segments = this.route.snapshot.url;
+        if (!url_segments) {
+            return false;
+        }
         return (url_segments.length == 2) && (url_segments[1].path == "self");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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 }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", 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 } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n\n    @if(itemDetailTemplate()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\n\n    @if (dataSource.loading()) {\n    <div class=\"spinner-container\">\n      <mat-spinner></mat-spinner>\n    </div>\n    }\n\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      <div [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          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\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", "dataSource", "listItemTemplate"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SearchBarComponent, selector: "lib-search-bar", inputs: ["itemType", "sortFields"], outputs: ["searchChanged"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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 }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", 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 }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, 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  <div class=\"header\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate() && !embeddedMode()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n\n    @if(!embeddedMode()){\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n    }\n\n    @if(itemDetailTemplate() && !embeddedMode()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\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 [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          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\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", "dataSource", "listItemTemplate"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SearchBarComponent, selector: "lib-search-bar", inputs: ["itemType", "sortFields"], outputs: ["searchChanged"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -1823,7 +1933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatInputModule,
                         MatTooltipModule,
                         MatButtonModule,
-                        SearchBarComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n\n    @if(itemDetailTemplate()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\n\n    @if (dataSource.loading()) {\n    <div class=\"spinner-container\">\n      <mat-spinner></mat-spinner>\n    </div>\n    }\n\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      <div [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          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\n"] }]
+                        SearchBarComponent], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate() && !embeddedMode()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n\n    @if(!embeddedMode()){\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n    }\n\n    @if(itemDetailTemplate() && !embeddedMode()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\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 [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          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\n"] }]
         }] });
 
 class DetailHeaderComponent {
@@ -1838,7 +1948,7 @@ class DetailHeaderComponent {
         this.deleteClicked.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: DetailHeaderComponent, isStandalone: true, selector: "lib-detail-header", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClicked: "deleteClicked" }, ngImport: i0, template: "<div class=\"container\">\n\n  <h1 class=\"header\">{{text()}}</h1>\n\n  <div class=\"controls\">\n  @if(canEdit()){\n  <a mat-mini-fab class=\"control-button\" matTooltip=\"Edit the item\" title=\"Click to edit this item\" aria-label=\"Click to edit this item\"\n    [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n  </a>\n  }\n\n  @if(canDelete()){\n  <button mat-mini-fab class=\"control-button\" (click)=\"deleteClick()\" matTooltip=\"Delete the item\" title=\"Click to delete this item\"\n    aria-label=\"Click to delete this item\">\n    <mat-icon>delete</mat-icon></button>\n  }\n  </div>\n\n</div>", styles: [".container{width:100%;max-width:500px;padding:5px}.header{width:100%;padding:5px;margin:5px}.controls{display:flex;flex-direction:row;align-content:center;justify-content:center}.control-button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: DetailHeaderComponent, isStandalone: true, selector: "lib-detail-header", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClicked: "deleteClicked" }, ngImport: i0, template: "<div class=\"container\">\n\n  <h1 class=\"header\">{{text()}}</h1>\n\n  <div class=\"controls\">\n  @if(canEdit()){\n  <a mat-mini-fab class=\"control-button\" matTooltip=\"Edit the item\" title=\"Click to edit this item\" aria-label=\"Click to edit this item\"\n    [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n  </a>\n  }\n\n  @if(canDelete()){\n  <button mat-mini-fab class=\"control-button\" (click)=\"deleteClick()\" matTooltip=\"Delete the item\" title=\"Click to delete this item\"\n    aria-label=\"Click to delete this item\">\n    <mat-icon>delete</mat-icon></button>\n  }\n  </div>\n\n</div>", styles: [".container{width:100%;max-width:500px;padding:5px}.header{width:100%;padding:5px;margin:5px}.controls{display:flex;flex-direction:row;align-content:center;justify-content:center}.control-button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DetailHeaderComponent, decorators: [{
             type: Component,
@@ -1918,7 +2028,8 @@ class UserForm {
             email: value.email || "",
             first_name: value.first_name || "",
             last_name: value.last_name || "",
-            phone: value.phone || ""
+            phone: value.phone || "",
+            identifiers: []
         };
     }
     updateItem(item) {
@@ -1979,7 +2090,7 @@ class UserComponent {
     itemService = inject(UserService);
     columns = USER_TABLE_FULL;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: UserComponent, isStandalone: true, selector: "lib-user", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [itemDetailTemplate]=\"listItemTemplate\"\n  [columns]=\"columns\"\n  [viewType]=\"viewType()\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\">\n    <lib-user-list-detail [item]=\"item\"\n                          [routerLink]=\"['/' + itemService.typePlural() + '/detail/', item.id]\"\n                          [routerLinkActive]=\"['is-active']\">\n    </lib-user-list-detail>\n  </ng-template>\n</lib-list-view>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: UserComponent, isStandalone: true, selector: "lib-user", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [itemDetailTemplate]=\"listItemTemplate\"\n  [columns]=\"columns\"\n  [viewType]=\"viewType()\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\">\n    <lib-user-list-detail [item]=\"item\"\n                          [routerLink]=\"['/' + itemService.typePlural() + '/detail/', item.id]\"\n                          [routerLinkActive]=\"['is-active']\">\n    </lib-user-list-detail>\n  </ng-template>\n</lib-list-view>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "embeddedMode"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserComponent, decorators: [{
             type: Component,
@@ -2006,7 +2117,7 @@ class GroupComponent {
     itemService = inject(GroupService);
     columns = [{ name: 'name', title: 'Name', element_type: 'string' }];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: GroupComponent, isStandalone: true, selector: "lib-group", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: GroupComponent, isStandalone: true, selector: "lib-group", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "embeddedMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupComponent, decorators: [{
             type: Component,
@@ -2031,11 +2142,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
 class AddressDetailComponent {
     address = input(...(ngDevMode ? [undefined, { debugName: "address" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: AddressDetailComponent, isStandalone: true, selector: "lib-address-detail", inputs: { address: { classPropertyName: "address", publicName: "address", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(address(); as address){\n<div class=\"item-field\" style=\"display:flex;flex-wrap: wrap;justify-content: center;align-content: center;\">\n    <span style=\"margin-left: 3px;\">{{address.line1}}, </span>\n    <span style=\"margin-left: 3px;\">{{address.line2}},</span>\n    @if(address.line3){\n    <span style=\"margin-left: 3px;\">{{address.line3}},</span>\n    }\n    @if(address.city){\n    <span style=\"margin-left: 3px;\">{{address.city}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.region}},</span>\n    @if(address.postcode){    \n    <span style=\"margin-left: 3px;\">{{address.postcode}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.country_name}}</span>\n</div>\n}", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: AddressDetailComponent, isStandalone: true, selector: "lib-address-detail", inputs: { address: { classPropertyName: "address", publicName: "address", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(address(); as address){\n<div class=\"item-field\" style=\"display:flex;flex-wrap: wrap;justify-content: center;align-content: center;\">\n    <span style=\"margin-left: 3px;\">{{address.line1}}, </span>\n    @if(address.line2)\n    {\n    <span style=\"margin-left: 3px;\">{{address.line2}},</span>\n    }\n    @if(address.line3){\n    <span style=\"margin-left: 3px;\">{{address.line3}},</span>\n    }\n    @if(address.city){\n    <span style=\"margin-left: 3px;\">{{address.city}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.region}},</span>\n    @if(address.postcode){    \n    <span style=\"margin-left: 3px;\">{{address.postcode}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.country_name}}</span>\n</div>\n}", styles: [""] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-address-detail', imports: [], template: "@if(address(); as address){\n<div class=\"item-field\" style=\"display:flex;flex-wrap: wrap;justify-content: center;align-content: center;\">\n    <span style=\"margin-left: 3px;\">{{address.line1}}, </span>\n    <span style=\"margin-left: 3px;\">{{address.line2}},</span>\n    @if(address.line3){\n    <span style=\"margin-left: 3px;\">{{address.line3}},</span>\n    }\n    @if(address.city){\n    <span style=\"margin-left: 3px;\">{{address.city}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.region}},</span>\n    @if(address.postcode){    \n    <span style=\"margin-left: 3px;\">{{address.postcode}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.country_name}}</span>\n</div>\n}" }]
+            args: [{ selector: 'lib-address-detail', imports: [], template: "@if(address(); as address){\n<div class=\"item-field\" style=\"display:flex;flex-wrap: wrap;justify-content: center;align-content: center;\">\n    <span style=\"margin-left: 3px;\">{{address.line1}}, </span>\n    @if(address.line2)\n    {\n    <span style=\"margin-left: 3px;\">{{address.line2}},</span>\n    }\n    @if(address.line3){\n    <span style=\"margin-left: 3px;\">{{address.line3}},</span>\n    }\n    @if(address.city){\n    <span style=\"margin-left: 3px;\">{{address.city}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.region}},</span>\n    @if(address.postcode){    \n    <span style=\"margin-left: 3px;\">{{address.postcode}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.country_name}}</span>\n</div>\n}" }]
         }] });
 
 class AddressForm {
@@ -2097,7 +2208,7 @@ class OrganizationComponent {
         { name: 'website', title: 'Website', element_type: 'url' },
         { name: 'is_partner', title: 'Is Partner', element_type: 'boolean' }];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "embeddedMode"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
@@ -2114,12 +2225,12 @@ class OrganizationDetailComponent extends DetailView {
         this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    <h3>Address</h3>\n    <lib-address-detail [address]=\"item.address\"></lib-address-detail>\n\n    <div class=\"item-field\">\n      <h3>Website</h3>{{item.website}}\n    </div>\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"] }, { kind: "component", type: AddressDetailComponent, selector: "lib-address-detail", inputs: ["address"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"\n      (deleteClicked)=\"onDeleteClicked()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      <p style=\"text-align: justify; text-justify: inter-word;\">{{item.description}}</p>\n    </div>\n    \n    <h3>Address</h3>\n    <lib-address-detail [address]=\"item.address\"></lib-address-detail>\n\n    <h3>Website</h3>\n    <div class=\"item-field\">\n      <a href=\"{{item.website}}\" target=\"_blank\" rel=\"noopener noreferrer\">{{item.website}}</a>\n    </div>\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"] }, { kind: "component", type: AddressDetailComponent, selector: "lib-address-detail", inputs: ["address"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-organization-detail', imports: [BackButtonComponent,
-                        DetailHeaderComponent, AddressDetailComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    <h3>Address</h3>\n    <lib-address-detail [address]=\"item.address\"></lib-address-detail>\n\n    <div class=\"item-field\">\n      <h3>Website</h3>{{item.website}}\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
+                        DetailHeaderComponent, AddressDetailComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"\n      (deleteClicked)=\"onDeleteClicked()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      <p style=\"text-align: justify; text-justify: inter-word;\">{{item.description}}</p>\n    </div>\n    \n    <h3>Address</h3>\n    <lib-address-detail [address]=\"item.address\"></lib-address-detail>\n\n    <h3>Website</h3>\n    <div class=\"item-field\">\n      <a href=\"{{item.website}}\" target=\"_blank\" rel=\"noopener noreferrer\">{{item.website}}</a>\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
         }], ctorParameters: () => [] });
 
 class OrganizationForm {