ichec-angular-core 0.3.12 → 1.0.0

package/fesm2022/ichec-angular-core.mjs

@@ -13,7 +13,7 @@ import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i1 from '@angular/material/table';
 import { MatTable, MatTableModule } from '@angular/material/table';
-import * as i5 from '@angular/material/form-field';
+import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
@@ -29,28 +29,28 @@ import * as i7 from '@angular/material/slide-toggle';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i4 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i6$2 from '@angular/material/checkbox';
+import * as i7$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i2$1 from '@angular/material/list';
+import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i3$2 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i1$4 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import { DataSource } from '@angular/cdk/collections';
-import * as i2$2 from '@angular/material/paginator';
+import * as i2$3 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i2$3 from '@angular/cdk/scrolling';
+import * as i2$4 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import * as i2$4 from '@angular/material/toolbar';
+import * as i2$5 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i5$1 from '@angular/material/menu';
+import * as i5 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
 import * as i1$5 from '@angular/material/sidenav';
 import { MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
-import * as i6$3 from '@angular/material/expansion';
+import * as i6$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i10 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -66,6 +66,10 @@ class Permission {
     static plural = "permissions";
 }
 
+class Feedback {
+    static typename = "feedback";
+    static plural = "feedback";
+}
 class PortalMember {
     static typename = "member";
     static plural = "members";
@@ -643,6 +647,19 @@ class FormService {
         }
         return files;
     }
+    hasRequiredFiles(form, input) {
+        for (const key of Object.keys(form.controls)) {
+            if (this.getType(key, input) == "FILE") {
+                if (this.isRequired(key, input)) {
+                    const record = form.get(key)?.value;
+                    if (!record.file) {
+                        return false;
+                    }
+                }
+            }
+        }
+        return true;
+    }
     updateFieldValue(control, item) {
         return { value: control.value.value,
             field: item.field.id,
@@ -661,6 +678,17 @@ class FormService {
         }
         return "";
     }
+    isRequired(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.required;
+                }
+            }
+        }
+        return false;
+    }
     getValue(key, item) {
         const field = parseInt(key);
         for (const value of item.values) {
@@ -843,7 +871,10 @@ class DetailView {
     constructor(itemService) {
         this.itemService = itemService;
     }
-    onInit() {
+    onInit(embedded = false) {
+        if (embedded) {
+            return;
+        }
         const id = Number(this.route.snapshot.paramMap.get('id'));
         if (id) {
             this._getItem(id);
@@ -1077,7 +1108,7 @@ class SelectTableComponent {
         this.table()?.renderRows();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SelectTableComponent, isStandalone: true, selector: "lib-select-table", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemAdded: "itemAdded", itemRemoved: "itemRemoved", searchChanged: "searchChanged" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<div class='select-container'>\n  <div class='controls-container'>\n    <mat-form-field style=\"width:100%\">\n      <mat-label>Search {{itemType()}} to add...</mat-label>\n      <input \n          type=\"text\"\n           aria-label=\"Selected item\"\n           matInput\n           [formControl]=\"searchControl\" \n           placeholder=\"Search {{itemType()}} to add...\"\n           [matAutocomplete]=\"auto\">\n\n      <mat-autocomplete #auto=\"matAutocomplete\" style=\"width:100%\">\n        @for(item of options(); track item.item.id){\n        <mat-option [value]=\"item.title\" style=\"width:100%\">\n          <ng-container\n            *ngTemplateOutlet=\"itemTemplate(); context: { item: item.item }\">\n          </ng-container>\n        </mat-option>\n        }\n    </mat-autocomplete>\n    </mat-form-field>\n\n    @if(searchControl.value){\n    <button mat-mini-fab type=\"button\" \n      class=\"form-action-button\" \n      matTooltip=\"Add new item\"\n      (click)=\"add()\">\n      <mat-icon>add</mat-icon>\n    </button>\n    }\n  </div>\n\n  @if(selected().length > 0){\n  <table mat-table [dataSource]=\"selected()\" class=\"mat-elevation-z8\">\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    <ng-container matColumnDef=\"remove\">\n          <th mat-header-cell *matHeaderCellDef>Remove\n          </th>\n        <td mat-cell *matCellDef=\"let element\">\n            <button mat-icon-button\n                    color=\"primary\"\n                    type=\"button\" \n                    matTooltip=\"Remove item\"\n                    aria-label=\"Remove an item\"\n                    (click)=\"remove(element.id)\">\n              <mat-icon>remove\n              </mat-icon>\n            </button>\n        </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\">\n    </tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnNames();\">\n    </tr>\n  </table>\n  }\n</div>", styles: [".select-container{display:flex;text-align:center;justify-content:center;flex-direction:column;width:100%}.controls-container{width:100%;display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SelectTableComponent, isStandalone: true, selector: "lib-select-table", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemAdded: "itemAdded", itemRemoved: "itemRemoved", searchChanged: "searchChanged" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<div class='select-container'>\n  <div class='controls-container'>\n    <mat-form-field style=\"width:100%\">\n      <mat-label>Search {{itemType()}} to add...</mat-label>\n      <input \n          type=\"text\"\n           aria-label=\"Selected item\"\n           matInput\n           [formControl]=\"searchControl\" \n           placeholder=\"Search {{itemType()}} to add...\"\n           [matAutocomplete]=\"auto\">\n\n      <mat-autocomplete #auto=\"matAutocomplete\" style=\"width:100%\">\n        @for(item of options(); track item.item.id){\n        <mat-option [value]=\"item.title\" style=\"width:100%\">\n          <ng-container\n            *ngTemplateOutlet=\"itemTemplate(); context: { item: item.item }\">\n          </ng-container>\n        </mat-option>\n        }\n    </mat-autocomplete>\n    </mat-form-field>\n\n    @if(searchControl.value){\n    <button mat-mini-fab type=\"button\" \n      class=\"form-action-button\" \n      matTooltip=\"Add new item\"\n      (click)=\"add()\">\n      <mat-icon>add</mat-icon>\n    </button>\n    }\n  </div>\n\n  @if(selected().length > 0){\n  <table mat-table [dataSource]=\"selected()\" class=\"mat-elevation-z8\">\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    <ng-container matColumnDef=\"remove\">\n          <th mat-header-cell *matHeaderCellDef>Remove\n          </th>\n        <td mat-cell *matCellDef=\"let element\">\n            <button mat-icon-button\n                    color=\"primary\"\n                    type=\"button\" \n                    matTooltip=\"Remove item\"\n                    aria-label=\"Remove an item\"\n                    (click)=\"remove(element.id)\">\n              <mat-icon>remove\n              </mat-icon>\n            </button>\n        </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\">\n    </tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnNames();\">\n    </tr>\n  </table>\n  }\n</div>", styles: [".select-container{display:flex;text-align:center;justify-content:center;flex-direction:column;width:100%}.controls-container{width:100%;display:flex;flex-direction:row}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { 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: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectTableComponent, decorators: [{
             type: Component,
@@ -1213,7 +1244,7 @@ class SearchBarComponent {
         this.sortControl.setValue(!this.sortControl.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n    <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n    <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n    <div class=\"search-row\">\n    <mat-form-field class=\"search\" style=\"width:70%\">\n        <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchControl.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(form().searchFields.sortFields.length > 0){\n    <div>\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select formControlName=\"sortField\">\n            @for(field of form().searchFields.sortFields; track field)\n            {\n            <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n        @if(sortControl.value){\n        <mat-icon>arrow_upward</mat-icon>\n        }\n        @else{\n            <mat-icon>arrow_downward</mat-icon>\n        }\n    </button>\n    </div>\n    }\n    </div>\n\n    @if(form().searchFields.filter.rows.length > 0)\n    {\n        @if(showFilters())\n        {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>hide</mat-icon>Hide Filters</button>\n\n            <button mat-button=\"tonal\" (click)=\"clearFilters()\"><mat-icon>collapse_all</mat-icon>Clear Filters</button>\n        }\n        @else {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n        }\n    }\n\n    </div>\n\n    <div class=\"filter-container\">\n    @if(showFilters() && form().searchFields.filter.rows.length > 0)\n    {\n        <div style=\"display: flex; flex-direction: row;\">\n        <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n        @for(row of form().searchFields.filter.rows; track row)\n        {\n            @for(filter of row.filters; track filter)\n            {\n                @if(filter.type === \"boolean\")\n                {\n                    <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n                }\n                @else if (filter.type === \"selection\") {\n                    <mat-form-field>\n                        <mat-label>{{filter.display_name}}</mat-label>\n                        <mat-select [formControlName]=\"filter.key\">\n                            @for(choice of filter.choices; track choice){\n                            <mat-option [value]=\"choice.value\">\n                                {{choice.display_name}}\n                            </mat-option>\n                        }\n                        </mat-select>\n                    </mat-form-field>\n                }\n            }\n        }\n        </form>\n        </div>\n    }\n    </div>\n    </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.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: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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: "21.0.3", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n    <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n    <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n    <div class=\"search-row\">\n    <mat-form-field class=\"search\" style=\"width:70%\">\n        <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchControl.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(form().searchFields.sortFields.length > 0){\n    <div>\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select formControlName=\"sortField\">\n            @for(field of form().searchFields.sortFields; track field)\n            {\n            <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n        @if(sortControl.value){\n        <mat-icon>arrow_upward</mat-icon>\n        }\n        @else{\n            <mat-icon>arrow_downward</mat-icon>\n        }\n    </button>\n    </div>\n    }\n    </div>\n\n    @if(form().searchFields.filter.rows.length > 0)\n    {\n        @if(showFilters())\n        {\n            <div>\n            <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"toggleFilterVisibility()\"><mat-icon>arrow_drop_up</mat-icon>Hide Filters</button>\n\n            <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"clearFilters()\"><mat-icon>delete</mat-icon>Clear Filters</button>\n            </div>\n        }\n        @else {\n            <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n        }\n    }\n\n    </div>\n\n    <div class=\"filter-container\">\n    @if(showFilters() && form().searchFields.filter.rows.length > 0)\n    {\n        <div style=\"display: flex; flex-direction: row;\">\n        <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n        @for(row of form().searchFields.filter.rows; track row)\n        {\n            @for(filter of row.filters; track filter)\n            {\n                @if(filter.type === \"boolean\")\n                {\n                    <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n                }\n                @else if (filter.type === \"selection\") {\n                    <mat-form-field>\n                        <mat-label>{{filter.display_name}}</mat-label>\n                        <mat-select [formControlName]=\"filter.key\">\n                            @for(choice of filter.choices; track choice){\n                            <mat-option [value]=\"choice.value\">\n                                {{choice.display_name}}\n                            </mat-option>\n                        }\n                        </mat-select>\n                    </mat-form-field>\n                }\n            }\n        }\n        </form>\n        </div>\n    }\n    </div>\n    </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.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: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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: "21.0.3", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
@@ -1224,7 +1255,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatSelectModule,
                         MatSlideToggleModule,
                         MatIconModule,
-                        TitleCasePipe], template: "<div class=\"container\">\n    <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n    <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n    <div class=\"search-row\">\n    <mat-form-field class=\"search\" style=\"width:70%\">\n        <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchControl.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(form().searchFields.sortFields.length > 0){\n    <div>\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select formControlName=\"sortField\">\n            @for(field of form().searchFields.sortFields; track field)\n            {\n            <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n        @if(sortControl.value){\n        <mat-icon>arrow_upward</mat-icon>\n        }\n        @else{\n            <mat-icon>arrow_downward</mat-icon>\n        }\n    </button>\n    </div>\n    }\n    </div>\n\n    @if(form().searchFields.filter.rows.length > 0)\n    {\n        @if(showFilters())\n        {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>hide</mat-icon>Hide Filters</button>\n\n            <button mat-button=\"tonal\" (click)=\"clearFilters()\"><mat-icon>collapse_all</mat-icon>Clear Filters</button>\n        }\n        @else {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n        }\n    }\n\n    </div>\n\n    <div class=\"filter-container\">\n    @if(showFilters() && form().searchFields.filter.rows.length > 0)\n    {\n        <div style=\"display: flex; flex-direction: row;\">\n        <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n        @for(row of form().searchFields.filter.rows; track row)\n        {\n            @for(filter of row.filters; track filter)\n            {\n                @if(filter.type === \"boolean\")\n                {\n                    <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n                }\n                @else if (filter.type === \"selection\") {\n                    <mat-form-field>\n                        <mat-label>{{filter.display_name}}</mat-label>\n                        <mat-select [formControlName]=\"filter.key\">\n                            @for(choice of filter.choices; track choice){\n                            <mat-option [value]=\"choice.value\">\n                                {{choice.display_name}}\n                            </mat-option>\n                        }\n                        </mat-select>\n                    </mat-form-field>\n                }\n            }\n        }\n        </form>\n        </div>\n    }\n    </div>\n    </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"] }]
+                        TitleCasePipe], template: "<div class=\"container\">\n    <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n    <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n    <div class=\"search-row\">\n    <mat-form-field class=\"search\" style=\"width:70%\">\n        <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchControl.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(form().searchFields.sortFields.length > 0){\n    <div>\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select formControlName=\"sortField\">\n            @for(field of form().searchFields.sortFields; track field)\n            {\n            <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n        @if(sortControl.value){\n        <mat-icon>arrow_upward</mat-icon>\n        }\n        @else{\n            <mat-icon>arrow_downward</mat-icon>\n        }\n    </button>\n    </div>\n    }\n    </div>\n\n    @if(form().searchFields.filter.rows.length > 0)\n    {\n        @if(showFilters())\n        {\n            <div>\n            <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"toggleFilterVisibility()\"><mat-icon>arrow_drop_up</mat-icon>Hide Filters</button>\n\n            <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"clearFilters()\"><mat-icon>delete</mat-icon>Clear Filters</button>\n            </div>\n        }\n        @else {\n            <button mat-button=\"tonal\" style=\"margin: 5px\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n        }\n    }\n\n    </div>\n\n    <div class=\"filter-container\">\n    @if(showFilters() && form().searchFields.filter.rows.length > 0)\n    {\n        <div style=\"display: flex; flex-direction: row;\">\n        <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n        @for(row of form().searchFields.filter.rows; track row)\n        {\n            @for(filter of row.filters; track filter)\n            {\n                @if(filter.type === \"boolean\")\n                {\n                    <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n                }\n                @else if (filter.type === \"selection\") {\n                    <mat-form-field>\n                        <mat-label>{{filter.display_name}}</mat-label>\n                        <mat-select [formControlName]=\"filter.key\">\n                            @for(choice of filter.choices; track choice){\n                            <mat-option [value]=\"choice.value\">\n                                {{choice.display_name}}\n                            </mat-option>\n                        }\n                        </mat-select>\n                    </mat-form-field>\n                }\n            }\n        }\n        </form>\n        </div>\n    }\n    </div>\n    </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"] }]
         }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
 
 class FileUploadComponent {
@@ -1332,7 +1363,7 @@ class FormFieldDetailComponent {
         return this.form().get(this.key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldDetailComponent, isStandalone: true, selector: "lib-form-field-detail", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  <p>{{field().description}}</p>\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\">\n           {{ field().label }}\n         </mat-checkbox>\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('SELECTION')\n      {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n        <mat-label>{{ field().label }}</mat-label>\n        <mat-select formControlName=\"key\" name=\"key\">\n            @for(option of resolveOptions(field().options); track $index)\n            {\n                <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n            }\n        </mat-select>\n      </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Template\n          </a>\n        }\n        <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n        <h4>Upload</h4>\n        <lib-file-upload [control]=\"control\" \n        [showHeading]=\"false\" \n        [uploadCategory]=\"'document'\"></lib-file-upload>\n        </div>\n        </div>\n      }    \n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldDetailComponent, isStandalone: true, selector: "lib-form-field-detail", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  @if(field().description)\n  {\n    <p>{{field().description}}</p>\n  }\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\"\n           >\n           {{ field().label }}\n         </mat-checkbox>\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n        </mat-form-field>\n      }\n      @case ('SELECTION')\n      {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n        <mat-label>{{ field().label }}</mat-label>\n        <mat-select formControlName=\"key\" name=\"key\">\n            @for(option of resolveOptions(field().options); track $index)\n            {\n                <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n            }\n        </mat-select>\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n      </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Template\n          </a>\n        }\n        <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n        <h4>Upload</h4>\n        <lib-file-upload [control]=\"control\" \n        [showHeading]=\"false\" \n        [uploadCategory]=\"'document'\"></lib-file-upload>\n        </div>\n        </div>\n      }    \n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7$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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, decorators: [{
             type: Component,
@@ -1342,7 +1373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatButtonModule,
                         MatSelectModule,
                         MatTooltipModule,
-                        MatCheckboxModule, MatIconModule, FileUploadComponent], template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  <p>{{field().description}}</p>\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\">\n           {{ field().label }}\n         </mat-checkbox>\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case ('SELECTION')\n      {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n        <mat-label>{{ field().label }}</mat-label>\n        <mat-select formControlName=\"key\" name=\"key\">\n            @for(option of resolveOptions(field().options); track $index)\n            {\n                <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n            }\n        </mat-select>\n      </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Template\n          </a>\n        }\n        <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n        <h4>Upload</h4>\n        <lib-file-upload [control]=\"control\" \n        [showHeading]=\"false\" \n        [uploadCategory]=\"'document'\"></lib-file-upload>\n        </div>\n        </div>\n      }    \n    }\n  </div>\n</div>\n" }]
+                        MatCheckboxModule, MatIconModule, FileUploadComponent], template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  @if(field().description)\n  {\n    <p>{{field().description}}</p>\n  }\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\"\n           >\n           {{ field().label }}\n         </mat-checkbox>\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n        </mat-form-field>\n      }\n      @case ('SELECTION')\n      {\n        <mat-form-field class=\"form-field-wide\" style=\"width: 70%; max-width: 800px;\">\n        <mat-label>{{ field().label }}</mat-label>\n        <mat-select formControlName=\"key\" name=\"key\">\n            @for(option of resolveOptions(field().options); track $index)\n            {\n                <mat-option [value]=\"option.value\">{{option.key}}</mat-option>\n            }\n        </mat-select>\n          @if(field().tooltip){\n          <mat-icon matSuffix matTooltip=\"{{field().tooltip}}\">\n            info\n        </mat-icon>\n        }\n      </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Template\n          </a>\n        }\n        <div style=\"display: flex;flex-direction: column; justify-content: center; align-items: center;\">\n        <h4>Upload</h4>\n        <lib-file-upload [control]=\"control\" \n        [showHeading]=\"false\" \n        [uploadCategory]=\"'document'\"></lib-file-upload>\n        </div>\n        </div>\n      }    \n    }\n  </div>\n</div>\n" }]
         }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
 
 class FormFieldEditComponent {
@@ -1417,7 +1448,7 @@ class FormFieldEditComponent {
         this.optionsControl.setValue(options.filter(e => e.value !== value));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldEditComponent, isStandalone: true, selector: "lib-form-field-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { orderUp: "orderUp", orderDown: "orderDown", deleted: "deleted" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n    @if(canOrderUp())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n    }\n    @if(canOrderDown())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n    }\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n        <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n            required name=\"description\"></textarea>\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's instructions for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <div style=\"display: flex; flex-direction: row; align-items: center;\">\n    <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n        <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n            info\n        </mat-icon>\n    </div>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n        <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n            info\n        </mat-icon>        \n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon> \n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n    }\n    @case ((FieldType.Selection)) {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <h4>Add Choice</h4>\n        <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Choice</mat-label>\n        <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n        <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Display Name</mat-label>\n        <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n        <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n    </div>\n\n        @if(optionsControl.value && optionsControl.value.length > 0){\n            <h4>Choices</h4>\n        <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n            <ng-container matColumnDef=\"name\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Display Name\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"value\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Value\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"remove\">\n                <th mat-header-cell *matHeaderCellDef>Remove\n                </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <button mat-icon-button\n                            color=\"primary\"\n                            type=\"button\" \n                            matTooltip=\"Remove option\"\n                            aria-label=\"Remove this option\"\n                            (click)=\"removeOption(element.value)\">\n                    <mat-icon>remove\n                    </mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n            </tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n            </tr>\n        </table>\n        }\n    }\n    }\n</form>", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i6$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldEditComponent, isStandalone: true, selector: "lib-form-field-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { orderUp: "orderUp", orderDown: "orderDown", deleted: "deleted" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n    @if(canOrderUp())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n    }\n    @if(canOrderDown())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n    }\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n        <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n             name=\"description\"></textarea>\n        <mat-icon matSuffix matTooltip=\"Optional, this will be rendered as the field's instructions for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Tooltip</mat-label>\n        <textarea matInput placeholder=\"Tooltip\" style=\"min-height:150px\" type=\"text\" formControlName=\"tooltip\"\n             name=\"tooltip\"></textarea>\n        <mat-icon matSuffix matTooltip=\"Optional, this will be rendered as the field's tooltip for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <div style=\"display: flex; flex-direction: row; align-items: center;\">\n    <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n        <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n            info\n        </mat-icon>\n    </div>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n        <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n            info\n        </mat-icon>        \n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon> \n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n    }\n    @case ((FieldType.Selection)) {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <h4>Add Choice</h4>\n        <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Choice</mat-label>\n        <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n        <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Display Name</mat-label>\n        <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n        <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n    </div>\n\n        @if(optionsControl.value && optionsControl.value.length > 0){\n            <h4>Choices</h4>\n        <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n            <ng-container matColumnDef=\"name\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Display Name\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"value\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Value\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"remove\">\n                <th mat-header-cell *matHeaderCellDef>Remove\n                </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <button mat-icon-button\n                            color=\"primary\"\n                            type=\"button\" \n                            matTooltip=\"Remove option\"\n                            aria-label=\"Remove this option\"\n                            (click)=\"removeOption(element.value)\">\n                    <mat-icon>remove\n                    </mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n            </tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n            </tr>\n        </table>\n        }\n    }\n    }\n</form>", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i7$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", "uploadCategory", "allowedSizeMb", "showHeading"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldEditComponent, decorators: [{
             type: Component,
@@ -1432,7 +1463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatSelectModule,
                         MatTooltipModule,
                         MatCheckboxModule,
-                        FileUploadComponent], template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n    @if(canOrderUp())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n    }\n    @if(canOrderDown())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n    }\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n        <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n            required name=\"description\"></textarea>\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's instructions for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <div style=\"display: flex; flex-direction: row; align-items: center;\">\n    <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n        <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n            info\n        </mat-icon>\n    </div>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n        <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n            info\n        </mat-icon>        \n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon> \n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n    }\n    @case ((FieldType.Selection)) {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <h4>Add Choice</h4>\n        <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Choice</mat-label>\n        <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n        <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Display Name</mat-label>\n        <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n        <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n    </div>\n\n        @if(optionsControl.value && optionsControl.value.length > 0){\n            <h4>Choices</h4>\n        <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n            <ng-container matColumnDef=\"name\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Display Name\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"value\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Value\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"remove\">\n                <th mat-header-cell *matHeaderCellDef>Remove\n                </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <button mat-icon-button\n                            color=\"primary\"\n                            type=\"button\" \n                            matTooltip=\"Remove option\"\n                            aria-label=\"Remove this option\"\n                            (click)=\"removeOption(element.value)\">\n                    <mat-icon>remove\n                    </mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n            </tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n            </tr>\n        </table>\n        }\n    }\n    }\n</form>", styles: [":host{flex-grow:1}\n"] }]
+                        FileUploadComponent], template: "<h3>Editing Field</h3>\n\n<div class=\"button-container\">\n    @if(canOrderUp())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n    }\n    @if(canOrderDown())\n    {\n        <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the field down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n    }\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Delete the Field\" (click)=\"onDeleteClicked()\"><mat-icon>delete</mat-icon></button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n        <mat-icon matSuffix matTooltip=\"This will be rendered as the field's heading in the form\">info</mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n        <mat-icon matSuffix matTooltip=\"This will be used to uniquely identify the field in machine-readable versions of the form. Use alphabetical characters only with underscores.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n             name=\"description\"></textarea>\n        <mat-icon matSuffix matTooltip=\"Optional, this will be rendered as the field's instructions for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Tooltip</mat-label>\n        <textarea matInput placeholder=\"Tooltip\" style=\"min-height:150px\" type=\"text\" formControlName=\"tooltip\"\n             name=\"tooltip\"></textarea>\n        <mat-icon matSuffix matTooltip=\"Optional, this will be rendered as the field's tooltip for the person filling in the form.\">\n            info\n        </mat-icon>\n    </mat-form-field>\n\n    <div style=\"display: flex; flex-direction: row; align-items: center;\">\n    <mat-checkbox style=\"margin-bottom: 5px;\" formControlName=\"required\">Required?</mat-checkbox>\n        <mat-icon matSuffix matTooltip=\"Tick this if the user is required to enter a value for the field.\">\n            info\n        </mat-icon>\n    </div>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n        <mat-icon matSuffix matTooltip=\"Select the Type of the field.\">\n            info\n        </mat-icon>        \n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\" style=\"width:100%; max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\" style=\"max-width: 600px;\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon> \n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\" [uploadCategory]=\"'document'\"></lib-file-upload>\n    }\n    @case ((FieldType.Selection)) {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n        <mat-icon matSuffix matTooltip=\"An optional default value for the field.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <h4>Add Choice</h4>\n        <div style=\"display: flex; flex-direction: row; justify-content: center; align-items: center; width:100%\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Choice</mat-label>\n        <input matInput placeholder=\"Choice\" type=\"text\" [formControl]=\"valueControl\" name=\"option_value\">\n        <mat-icon matSuffix matTooltip=\"A choice to be selected from.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Display Name</mat-label>\n        <input matInput placeholder=\"Display Name\" type=\"text\" [formControl]=\"keyControl\" name=\"option_key\">\n        <mat-icon matSuffix matTooltip=\"An optional display name for the choice.\">\n            info\n        </mat-icon>     \n    </mat-form-field>\n\n        <button [hidden]=\"!valueControl.value\" mat-mini-fab matTooltip=\"Add choice\" (click)=\"addChoice()\"><mat-icon>add</mat-icon></button>\n\n    </div>\n\n        @if(optionsControl.value && optionsControl.value.length > 0){\n            <h4>Choices</h4>\n        <table mat-table [dataSource]=\"optionsControl.value\" class=\"mat-elevation-z8\">\n \n            <ng-container matColumnDef=\"name\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Display Name\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.key }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"value\">\n            <th mat-header-cell mat-sort-header *matHeaderCellDef>\n                Value\n            </th>\n            <td mat-cell *matCellDef=\"let element\">{{ element.value }}</td>\n            </ng-container>\n\n            <ng-container matColumnDef=\"remove\">\n                <th mat-header-cell *matHeaderCellDef>Remove\n                </th>\n                <td mat-cell *matCellDef=\"let element\">\n                    <button mat-icon-button\n                            color=\"primary\"\n                            type=\"button\" \n                            matTooltip=\"Remove option\"\n                            aria-label=\"Remove this option\"\n                            (click)=\"removeOption(element.value)\">\n                    <mat-icon>remove\n                    </mat-icon>\n                    </button>\n                </td>\n            </ng-container>\n\n            <tr mat-header-row *matHeaderRowDef=\"['name', 'value', 'remove']\">\n            </tr>\n            <tr mat-row *matRowDef=\"let row; columns: ['name', 'value', 'remove'];\">\n            </tr>\n        </table>\n        }\n    }\n    }\n</form>", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], canOrderUp: [{ type: i0.Input, args: [{ isSignal: true, alias: "canOrderUp", required: false }] }], canOrderDown: [{ type: i0.Input, args: [{ isSignal: true, alias: "canOrderDown", required: false }] }], orderUp: [{ type: i0.Output, args: ["orderUp"] }], orderDown: [{ type: i0.Output, args: ["orderDown"] }], deleted: [{ type: i0.Output, args: ["deleted"] }] } });
 
 class FormFieldForm {
@@ -1444,7 +1475,8 @@ class FormFieldForm {
             label: fb.control('', Validators.required),
             key: fb.control('', Validators.required),
             required: fb.control(false, Validators.required),
-            description: fb.control('', Validators.required),
+            description: fb.control(''),
+            tooltip: fb.control(''),
             template: fb.control(this.getBaseTemplate()),
             options: fb.control(null),
             default: fb.control(''),
@@ -1476,6 +1508,7 @@ class FormFieldForm {
             key: item.key,
             required: item.required,
             description: item.description,
+            tooltip: item.tooltip,
             template: template,
             options: options,
             default: item.default,
@@ -1495,6 +1528,7 @@ class FormFieldForm {
             key: value.key || "",
             required: value.required || false,
             description: value.description || "",
+            tooltip: value.tooltip || "",
             options: options,
             default: value.default || "",
             field_type: value.field_type || "BOOLEAN",
@@ -1511,6 +1545,7 @@ class FormFieldForm {
         item.key = value.key || "";
         item.required = value.required || false;
         item.description = value.description || "";
+        item.tooltip = value.tooltip || "";
         item.options = options;
         item.default = value.default || "";
         item.field_type = value.field_type || "BOOLEAN";
@@ -1825,7 +1860,7 @@ class FormGroupEditComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormGroupEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormGroupEditComponent, isStandalone: true, selector: "lib-form-group-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", fieldAdded: "fieldAdded", orderUp: "orderUp", orderDown: "orderDown" }, ngImport: i0, template: "<div class=\"container\">\n\n<div class=\"header\">\n<h3>Editing Group</h3>\n@if(canOrderUp())\n{\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the group up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n}\n@if(canOrderDown())\n{\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the group down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n}\n<button mat-mini-fab type=\"button\" \n    style=\"margin:5px\" \n    color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n    (click)=\"onDeleteClicked()\">\n    <mat-icon>delete</mat-icon>\n</button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width: 70%\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    <mat-icon matSuffix matTooltip=\"An optional label that will appear as a heading for the group in the form.\">info</mat-icon>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\" style=\"width: 70%\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:120px;\" formControlName=\"description\"\n        name=\"description\"></textarea>\n     <mat-icon matSuffix matTooltip=\"An optional description of the group, that will appear as a paragraph in the form.\">info</mat-icon>\n    </mat-form-field>\n</form>\n\n<button matButton=\"filled\" type=\"button\" style=\"margin:5px\" \n    color=\"primary\" matTooltip=\"Add a new field\" aria-label=\"Add a new field\"\n    (click)=\"onAddField()\">\n    Add Field\n</button>\n\n</div>", styles: [":host{flex-grow:1}.control-button{margin-right:10px}.container,.header{display:flex;flex-direction:column;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormGroupEditComponent, isStandalone: true, selector: "lib-form-group-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, canOrderUp: { classPropertyName: "canOrderUp", publicName: "canOrderUp", isSignal: true, isRequired: false, transformFunction: null }, canOrderDown: { classPropertyName: "canOrderDown", publicName: "canOrderDown", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", fieldAdded: "fieldAdded", orderUp: "orderUp", orderDown: "orderDown" }, ngImport: i0, template: "<div class=\"container\">\n\n<div class=\"header\">\n<h3>Editing Group</h3>\n@if(canOrderUp())\n{\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the group up\" (click)=\"onOrderUp()\"><mat-icon>arrow_upward</mat-icon></button>\n}\n@if(canOrderDown())\n{\n    <button type=\"button\" class=\"form-action-button\" mat-mini-fab matTooltip=\"Move the group down\" (click)=\"onOrderDown()\"><mat-icon>arrow_downward</mat-icon></button>\n}\n<button mat-mini-fab type=\"button\" \n    style=\"margin:5px\" \n    color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n    (click)=\"onDeleteClicked()\">\n    <mat-icon>delete</mat-icon>\n</button>\n</div>\n\n<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\">\n    <mat-form-field class=\"form-field\" style=\"width: 70%\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    <mat-icon matSuffix matTooltip=\"An optional label that will appear as a heading for the group in the form.\">info</mat-icon>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\" style=\"width: 70%\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:120px;\" formControlName=\"description\"\n        name=\"description\"></textarea>\n     <mat-icon matSuffix matTooltip=\"An optional description of the group, that will appear as a paragraph in the form.\">info</mat-icon>\n    </mat-form-field>\n</form>\n\n<button matButton=\"filled\" type=\"button\" style=\"margin:5px\" \n    color=\"primary\" matTooltip=\"Add a new field\" aria-label=\"Add a new field\"\n    (click)=\"onAddField()\">\n    Add Field\n</button>\n\n</div>", styles: [":host{flex-grow:1}.control-button{margin-right:10px}.container,.header{display:flex;flex-direction:column;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormGroupEditComponent, decorators: [{
             type: Component,
@@ -1991,7 +2026,7 @@ class DynamicFormBuilderComponent {
         this.form().form.markAsDirty();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<div class=\"container\">\n  <div class=\"group-list\">\n    <div class=\"group-list-header\">\n      <h3 class=\"heading\">Groups</h3>\n      <button mat-mini-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n    <mat-list class=\"group-scroll\">\n      @for(group of form().groups.controls; track group; let group_idx=$index; let even=$even)\n      {\n        <div class=\"scroll-item-container\">\n      <mat-list-item class=\"scroll-item\"  [class.selected]=\"isGroupSelected(group_idx)\" (click)=\"onGroupClick(group_idx, group)\">\n        <div class=\"scroll-item-content\">\n          <mat-icon matListIcon>list</mat-icon>\n          @if(!group.valid){\n          <mat-icon style=\"color:var(--mat-sys-error)\">error</mat-icon>\n            }\n          <h4 class=\"scroll-group-heading\">{{getGroupLabel(group)}}</h4>\n        </div>\n      </mat-list-item>\n\n      @for(field of getFields(group).controls; track field; let field_idx=$index; let field_even=$even; let count=$count)\n      {\n        <mat-list-item class=\"scroll-item\" [class.selected]=\"isFieldSelected(group_idx, field_idx)\" [class.even]=\"field_even\" (click)=\"onFieldClick(field_idx, group_idx, field)\">\n          <div class=\"scroll-item-content\">\n            @if(!field.valid){\n          <mat-icon style=\"padding-left: 5px;color:var(--mat-sys-error)\">error</mat-icon>\n            }\n          <span style=\"padding-left: 5px;\">{{getFieldLabel(field)}}</span>\n          </div>\n        </mat-list-item>\n        @if(field_idx < count - 1){\n        <mat-divider></mat-divider>\n        }\n      }\n      </div>\n      }\n    </mat-list>\n  </div>\n\n  <div class=\"group-view\">\n    @if(activeGroup(); as group)\n    {\n      <lib-form-group-edit [form]=\"group.group\" \n      [canOrderUp]=\"allowGroupOrderUp()\" \n      [canOrderDown]=\"allowGroupOrderDown()\"\n      (fieldAdded)=\"addField(group.group)\"\n      (orderUp)=\"onGroupOrderUp()\"\n      (orderDown)=\"onGroupOrderDown()\"\n      (deleted)=\"deleteGroup(group.index)\"\n      \n      >\n    </lib-form-group-edit>\n    }\n    @else if(activeField(); as field)\n    {\n      <lib-form-field-edit [form]=\"field.field\" \n      [canOrderUp]=\"allowOrderUp()\" \n      [canOrderDown]=\"allowOrderDown()\"\n      (orderUp)=\"onFieldOrderUp()\"\n      (orderDown)=\"onFieldOrderDown()\"\n      (deleted)=\"deleteField()\"\n      ></lib-form-field-edit>\n    }\n    @else {\n      <p>Select a Group or Field to view and edit it</p>\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}.heading{margin:0 5px 5px 0}.container{display:flex;flex-direction:row;width:100%;margin-left:5px}.group-list{display:flex;flex-direction:column;width:100%;max-width:300px;height:520px}.group-list-header{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.group-scroll{width:100%}.group-view{width:100%;margin-left:10px}.scroll-item-container{width:100%;border-radius:6px;margin-bottom:2px;background-color:var(--mat-sys-surface-container-low)}.scroll-item{width:100%;height:40px;display:flex;padding-left:5px;flex-direction:row;text-align:left;align-items:center;justify-content:center}.scroll-item:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.scroll-item-content{display:flex;flex-direction:row;align-items:center}.scroll-group-heading{padding-left:5px;width:100%;text-align:center}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: FormGroupEditComponent, selector: "lib-form-group-edit", inputs: ["form", "canOrderUp", "canOrderDown"], outputs: ["deleted", "fieldAdded", "orderUp", "orderDown"] }, { kind: "component", type: FormFieldEditComponent, selector: "lib-form-field-edit", inputs: ["form", "canOrderUp", "canOrderDown"], outputs: ["orderUp", "orderDown", "deleted"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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: "<div class=\"container\">\n  <div class=\"group-list\">\n    <div class=\"group-list-header\">\n      <h3 class=\"heading\">Groups</h3>\n      <button mat-mini-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n        <mat-icon>add</mat-icon>\n      </button>\n    </div>\n    <mat-list class=\"group-scroll\">\n      @for(group of form().groups.controls; track group; let group_idx=$index; let even=$even)\n      {\n        <div class=\"scroll-item-container\">\n      <mat-list-item class=\"scroll-item\"  [class.selected]=\"isGroupSelected(group_idx)\" (click)=\"onGroupClick(group_idx, group)\">\n        <div class=\"scroll-item-content\">\n          <mat-icon matListIcon>list</mat-icon>\n          @if(!group.valid){\n          <mat-icon style=\"color:var(--mat-sys-error)\">error</mat-icon>\n            }\n          <h4 class=\"scroll-group-heading\">{{getGroupLabel(group)}}</h4>\n        </div>\n      </mat-list-item>\n\n      @for(field of getFields(group).controls; track field; let field_idx=$index; let field_even=$even; let count=$count)\n      {\n        <mat-list-item class=\"scroll-item\" [class.selected]=\"isFieldSelected(group_idx, field_idx)\" [class.even]=\"field_even\" (click)=\"onFieldClick(field_idx, group_idx, field)\">\n          <div class=\"scroll-item-content\">\n            @if(!field.valid){\n          <mat-icon style=\"padding-left: 5px;color:var(--mat-sys-error)\">error</mat-icon>\n            }\n          <span style=\"padding-left: 5px;\">{{getFieldLabel(field)}}</span>\n          </div>\n        </mat-list-item>\n        @if(field_idx < count - 1){\n        <mat-divider></mat-divider>\n        }\n      }\n      </div>\n      }\n    </mat-list>\n  </div>\n\n  <div class=\"group-view\">\n    @if(activeGroup(); as group)\n    {\n      <lib-form-group-edit [form]=\"group.group\" \n      [canOrderUp]=\"allowGroupOrderUp()\" \n      [canOrderDown]=\"allowGroupOrderDown()\"\n      (fieldAdded)=\"addField(group.group)\"\n      (orderUp)=\"onGroupOrderUp()\"\n      (orderDown)=\"onGroupOrderDown()\"\n      (deleted)=\"deleteGroup(group.index)\"\n      \n      >\n    </lib-form-group-edit>\n    }\n    @else if(activeField(); as field)\n    {\n      <lib-form-field-edit [form]=\"field.field\" \n      [canOrderUp]=\"allowOrderUp()\" \n      [canOrderDown]=\"allowOrderDown()\"\n      (orderUp)=\"onFieldOrderUp()\"\n      (orderDown)=\"onFieldOrderDown()\"\n      (deleted)=\"deleteField()\"\n      ></lib-form-field-edit>\n    }\n    @else {\n      <p>Select a Group or Field to view and edit it</p>\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}.heading{margin:0 5px 5px 0}.container{display:flex;flex-direction:row;width:100%;margin-left:5px}.group-list{display:flex;flex-direction:column;width:100%;max-width:300px;height:520px}.group-list-header{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.group-scroll{width:100%}.group-view{width:100%;margin-left:10px}.scroll-item-container{width:100%;border-radius:6px;margin-bottom:2px;background-color:var(--mat-sys-surface-container-low)}.scroll-item{width:100%;height:40px;display:flex;padding-left:5px;flex-direction:row;text-align:left;align-items:center;justify-content:center}.scroll-item:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.scroll-item-content{display:flex;flex-direction:row;align-items:center}.scroll-group-heading{padding-left:5px;width:100%;text-align:center}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: FormGroupEditComponent, selector: "lib-form-group-edit", inputs: ["form", "canOrderUp", "canOrderDown"], outputs: ["deleted", "fieldAdded", "orderUp", "orderDown"] }, { kind: "component", type: FormFieldEditComponent, selector: "lib-form-field-edit", inputs: ["form", "canOrderUp", "canOrderDown"], outputs: ["orderUp", "orderDown", "deleted"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormBuilderComponent, decorators: [{
             type: Component,
@@ -2166,7 +2201,7 @@ class ListTableViewComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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    style=\"width:100%; max-width: 800px;\"\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.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$2.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$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", 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    style=\"width:100%; max-width: 800px;\"\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.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: 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$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListTableViewComponent, decorators: [{
             type: Component,
@@ -2198,7 +2233,7 @@ class ListScrollViewComponent {
         this.selected.emit(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListScrollViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListScrollViewComponent, isStandalone: true, selector: "lib-list-scroll-view", inputs: { itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, routerMode: { classPropertyName: "routerMode", publicName: "routerMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<mat-nav-list class=\"scrollable-container\">\n  <cdk-virtual-scroll-viewport\n    itemSize=\"itemHeight()\"\n    class=\"scrollable-list\"\n    style=\"width: 100%;\">\n    <ng-container *cdkVirtualFor=\"let item of dataSource(); let even = even;\">\n      @if(routerMode())\n      {\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>\n      }\n      @else \n      {\n      <div\n      (click)=\"onSelected(item.id)\"     \n      (keydown)=\"onSelected(item.id)\"\n      tabindex=\"0\"\n      style=\"width: 100%; margin-right: 5px; margin-bottom: 2px;\"\n      role=\"button\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>    \n      </div>   \n      }\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.scrollable-container{padding:0;display:flex;justify-content:center}.scrollable-list{height:540px;padding:5px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListScrollViewComponent, isStandalone: true, selector: "lib-list-scroll-view", inputs: { itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, routerMode: { classPropertyName: "routerMode", publicName: "routerMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<mat-nav-list class=\"scrollable-container\">\n  <cdk-virtual-scroll-viewport\n    itemSize=\"itemHeight()\"\n    class=\"scrollable-list\"\n    style=\"width: 100%;\">\n    <ng-container *cdkVirtualFor=\"let item of dataSource(); let even = even;\">\n      @if(routerMode())\n      {\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>\n      }\n      @else \n      {\n      <div\n      (click)=\"onSelected(item.id)\"     \n      (keydown)=\"onSelected(item.id)\"\n      tabindex=\"0\"\n      style=\"width: 100%; margin-right: 5px; margin-bottom: 2px;\"\n      role=\"button\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>    \n      </div>   \n      }\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.scrollable-container{padding:0;display:flex;justify-content:center}.scrollable-list{height:540px;padding:5px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListScrollViewComponent, decorators: [{
             type: Component,
@@ -2287,6 +2322,7 @@ class ListViewComponent {
     columnNames = computed(() => this.columns().map(c => c.name), ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
     fb = inject(FormBuilder);
     searchForm = signal(new SearchForm(new SearchFields(), this.fb), ...(ngDevMode ? [{ debugName: "searchForm" }] : []));
+    scrollView = viewChild(ListScrollViewComponent, ...(ngDevMode ? [{ debugName: "scrollView" }] : []));
     get resolvedItemWidth() {
         if (this.itemDetailTemplate() && this.dataSource !== undefined && !this.dataSource.sourceIsEmpty()) {
             return (this.itemWidth() + 50).toString() + "px";
@@ -2336,9 +2372,21 @@ class ListViewComponent {
         const item_service = this.itemService();
         if (item_service) {
             this.dataSource = new ListDataSource(item_service, this.selectedViewType(), this.searchFields().defaultQueries);
+            this.dataSource.items.subscribe(items => this.onSearchItems(items));
         }
         this.reset();
     }
+    onSearchItems(items) {
+        const scrollView = this.scrollView();
+        if (scrollView) {
+            if (items.length === 0) {
+                scrollView.onSelected(null);
+            }
+            else {
+                scrollView.onSelected(items[0].id);
+            }
+        }
+    }
     reset() {
         if (this.dataSource) {
             this.dataSource.reset(this.searchForm().toQuery());
@@ -2359,7 +2407,7 @@ class ListViewComponent {
         return (url_segments.length == 2) && (url_segments[1].path == "self");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, 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 }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: true, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" \n  [itemType]=\"itemType()\" \n  [canCreate]=\"canCreate()\" \n  [showControls]=\"showControls()\" \n  [searchForm]=\"searchForm()\"\n  [embedded]=\"embeddedMode()\"></lib-list-header>\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["itemHeight", "itemWidth", "dataSource", "listItemTemplate", "routerMode"], outputs: ["selected"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ListHeaderComponent, selector: "lib-list-header", inputs: ["itemType", "canCreate", "showControls", "embedded", "searchForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, 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 }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: true, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "scrollView", first: true, predicate: ListScrollViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" \n  [itemType]=\"itemType()\" \n  [canCreate]=\"canCreate()\" \n  [showControls]=\"showControls()\" \n  [searchForm]=\"searchForm()\"\n  [embedded]=\"embeddedMode()\"></lib-list-header>\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["itemHeight", "itemWidth", "dataSource", "listItemTemplate", "routerMode"], outputs: ["selected"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ListHeaderComponent, selector: "lib-list-header", inputs: ["itemType", "canCreate", "showControls", "embedded", "searchForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -2377,7 +2425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatButtonModule,
                         ListHeaderComponent,
                         NgTemplateOutlet], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" \n  [itemType]=\"itemType()\" \n  [canCreate]=\"canCreate()\" \n  [showControls]=\"showControls()\" \n  [searchForm]=\"searchForm()\"\n  [embedded]=\"embeddedMode()\"></lib-list-header>\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"] }]
-        }], propDecorators: { viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], itemService: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemService", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], itemDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDetailTemplate", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], noSelfItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelfItemsMessage", required: false }] }], noItemsCanCreateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsCanCreateMessage", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], searchFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFields", required: true }] }], embeddedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "embeddedMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
+        }], propDecorators: { viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], itemService: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemService", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], itemDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDetailTemplate", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], noSelfItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelfItemsMessage", required: false }] }], noItemsCanCreateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsCanCreateMessage", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], searchFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFields", required: true }] }], embeddedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "embeddedMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }], scrollView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ListScrollViewComponent), { isSignal: true }] }] } });
 
 class TopBarComponent {
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
@@ -2416,7 +2464,7 @@ class TopBarComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TopBarComponent, isStandalone: true, selector: "lib-top-bar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, loginRoute: { classPropertyName: "loginRoute", publicName: "loginRoute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-toolbar class=\"toolbar\" [style.background-image]=\"backgroundStyle\">\n\n  @if(logo())\n  {\n    <a aria-label=\"Home\" [routerLink]=\"['home']\">\n    <img src=\"{{logo()}}\" class=\"logo\" alt=\"Website logo\"/>\n    </a>\n  }\n  @else {\n    <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n      <mat-icon class=\"icon\">home</mat-icon>\n    </a>\n    <span>{{title()}}</span>\n  }\n  @if(user()){\n  <button mat-icon-button style=\"margin: 5px\" aria-label=\"Toggle Nav Bar\">\n    <mat-icon class=\"icon\" (click)=\"leftNavService.toggle()\">\n    @if(leftNavService.wide()){\n      menu_open\n    }\n    @else {\n      menu\n    }\n  </mat-icon>\n  </button>\n  }\n\n    <span class=\"topbar-spacer\"></span>\n    @if(user(); as user)\n    {\n      <span>{{user.username}}</span>\n      \n      <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n        <mat-icon class=\"icon\">person</mat-icon>\n      </button>\n\n      <mat-menu #profile_menu=\"matMenu\">\n        <a mat-menu-item aria-label=\"My Profile\" [routerLink]=\"['/members/detail', user.id]\">\n        <mat-icon>manage_accounts</mat-icon>\n        <span>My Profile</span>\n        </a>      \n        <a mat-menu-item aria-label=\"Get Support\" [routerLink]=\"['/feedback']\">\n        <mat-icon>contact_support</mat-icon>\n        <span>Get Support</span>\n        </a>            \n        <button mat-menu-item (click)=\"onLogout()\">\n          <mat-icon>logout</mat-icon>\n          <span>Log Out</span>\n        </button>\n\n      </mat-menu>\n    }\n    @else {\n        <span>Log In</span>\n        <button matIconButton (click)=\"onLogin()\">\n          <mat-icon class=\"icon\">login</mat-icon>\n        </button>\n    }\n</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}.toolbar{height:60px;background-size:cover;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary)}.logo{height:50px;margin-top:5px}.icon{color:var(--mat-sys-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: TopBarComponent, isStandalone: true, selector: "lib-top-bar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, loginRoute: { classPropertyName: "loginRoute", publicName: "loginRoute", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-toolbar class=\"toolbar\" [style.background-image]=\"backgroundStyle\">\n\n  @if(logo())\n  {\n    <a aria-label=\"Home\" [routerLink]=\"['home']\">\n    <img src=\"{{logo()}}\" class=\"logo\" alt=\"Website logo\"/>\n    </a>\n  }\n  @else {\n    <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n      <mat-icon class=\"icon\">home</mat-icon>\n    </a>\n    <span>{{title()}}</span>\n  }\n  @if(user()){\n  <button mat-icon-button style=\"margin: 5px\" aria-label=\"Toggle Nav Bar\">\n    <mat-icon class=\"icon\" (click)=\"leftNavService.toggle()\">\n    @if(leftNavService.wide()){\n      menu_open\n    }\n    @else {\n      menu\n    }\n  </mat-icon>\n  </button>\n  }\n\n    <span class=\"topbar-spacer\"></span>\n    @if(user(); as user)\n    {\n      <span>{{user.username}}</span>\n      \n      <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n        <mat-icon class=\"icon\">person</mat-icon>\n      </button>\n\n      <mat-menu #profile_menu=\"matMenu\">\n        <a mat-menu-item aria-label=\"My Profile\" [routerLink]=\"['/members/detail', user.id]\">\n        <mat-icon>manage_accounts</mat-icon>\n        <span>My Profile</span>\n        </a>      \n        <a mat-menu-item aria-label=\"Get Support\" [routerLink]=\"['/feedback/create']\">\n        <mat-icon>contact_support</mat-icon>\n        <span>Get Support</span>\n        </a>            \n        <button mat-menu-item (click)=\"onLogout()\">\n          <mat-icon>logout</mat-icon>\n          <span>Log Out</span>\n        </button>\n\n      </mat-menu>\n    }\n    @else {\n        <span>Log In</span>\n        <button matIconButton (click)=\"onLogin()\">\n          <mat-icon class=\"icon\">login</mat-icon>\n        </button>\n    }\n</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}.toolbar{height:60px;background-size:cover;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary)}.logo{height:50px;margin-top:5px}.icon{color:var(--mat-sys-on-primary)}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TopBarComponent, decorators: [{
             type: Component,
@@ -2424,7 +2472,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatToolbarModule,
                         MatIconModule,
                         MatButtonModule,
-                        MatMenuModule], template: "<mat-toolbar class=\"toolbar\" [style.background-image]=\"backgroundStyle\">\n\n  @if(logo())\n  {\n    <a aria-label=\"Home\" [routerLink]=\"['home']\">\n    <img src=\"{{logo()}}\" class=\"logo\" alt=\"Website logo\"/>\n    </a>\n  }\n  @else {\n    <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n      <mat-icon class=\"icon\">home</mat-icon>\n    </a>\n    <span>{{title()}}</span>\n  }\n  @if(user()){\n  <button mat-icon-button style=\"margin: 5px\" aria-label=\"Toggle Nav Bar\">\n    <mat-icon class=\"icon\" (click)=\"leftNavService.toggle()\">\n    @if(leftNavService.wide()){\n      menu_open\n    }\n    @else {\n      menu\n    }\n  </mat-icon>\n  </button>\n  }\n\n    <span class=\"topbar-spacer\"></span>\n    @if(user(); as user)\n    {\n      <span>{{user.username}}</span>\n      \n      <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n        <mat-icon class=\"icon\">person</mat-icon>\n      </button>\n\n      <mat-menu #profile_menu=\"matMenu\">\n        <a mat-menu-item aria-label=\"My Profile\" [routerLink]=\"['/members/detail', user.id]\">\n        <mat-icon>manage_accounts</mat-icon>\n        <span>My Profile</span>\n        </a>      \n        <a mat-menu-item aria-label=\"Get Support\" [routerLink]=\"['/feedback']\">\n        <mat-icon>contact_support</mat-icon>\n        <span>Get Support</span>\n        </a>            \n        <button mat-menu-item (click)=\"onLogout()\">\n          <mat-icon>logout</mat-icon>\n          <span>Log Out</span>\n        </button>\n\n      </mat-menu>\n    }\n    @else {\n        <span>Log In</span>\n        <button matIconButton (click)=\"onLogin()\">\n          <mat-icon class=\"icon\">login</mat-icon>\n        </button>\n    }\n</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}.toolbar{height:60px;background-size:cover;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary)}.logo{height:50px;margin-top:5px}.icon{color:var(--mat-sys-on-primary)}\n"] }]
+                        MatMenuModule], template: "<mat-toolbar class=\"toolbar\" [style.background-image]=\"backgroundStyle\">\n\n  @if(logo())\n  {\n    <a aria-label=\"Home\" [routerLink]=\"['home']\">\n    <img src=\"{{logo()}}\" class=\"logo\" alt=\"Website logo\"/>\n    </a>\n  }\n  @else {\n    <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n      <mat-icon class=\"icon\">home</mat-icon>\n    </a>\n    <span>{{title()}}</span>\n  }\n  @if(user()){\n  <button mat-icon-button style=\"margin: 5px\" aria-label=\"Toggle Nav Bar\">\n    <mat-icon class=\"icon\" (click)=\"leftNavService.toggle()\">\n    @if(leftNavService.wide()){\n      menu_open\n    }\n    @else {\n      menu\n    }\n  </mat-icon>\n  </button>\n  }\n\n    <span class=\"topbar-spacer\"></span>\n    @if(user(); as user)\n    {\n      <span>{{user.username}}</span>\n      \n      <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n        <mat-icon class=\"icon\">person</mat-icon>\n      </button>\n\n      <mat-menu #profile_menu=\"matMenu\">\n        <a mat-menu-item aria-label=\"My Profile\" [routerLink]=\"['/members/detail', user.id]\">\n        <mat-icon>manage_accounts</mat-icon>\n        <span>My Profile</span>\n        </a>      \n        <a mat-menu-item aria-label=\"Get Support\" [routerLink]=\"['/feedback/create']\">\n        <mat-icon>contact_support</mat-icon>\n        <span>Get Support</span>\n        </a>            \n        <button mat-menu-item (click)=\"onLogout()\">\n          <mat-icon>logout</mat-icon>\n          <span>Log Out</span>\n        </button>\n\n      </mat-menu>\n    }\n    @else {\n        <span>Log In</span>\n        <button matIconButton (click)=\"onLogin()\">\n          <mat-icon class=\"icon\">login</mat-icon>\n        </button>\n    }\n</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}.toolbar{height:60px;background-size:cover;--mat-toolbar-container-background-color: var(--mat-sys-primary);--mat-toolbar-container-text-color: var(--mat-sys-on-primary)}.logo{height:50px;margin-top:5px}.icon{color:var(--mat-sys-on-primary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], loginRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "loginRoute", required: false }] }] } });
 
 class LeftNavComponent {
@@ -2449,7 +2497,7 @@ class LeftNavComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LeftNavComponent, isStandalone: true, selector: "lib-left-nav", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sideNavContent", first: true, predicate: MatSidenavContent, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n  @if(leftNavService.wide()){\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping; let idx=$index; let count=$count) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\">\n              <div style=\"display:flex; vertical-align:middle;\">\n              <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n              </div>\n            </a>\n              </li>\n            }\n            @if(idx < count-1)\n            {\n              <mat-divider></mat-divider>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n  @else{\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 70px;\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping; let idx=$index; let count=$count) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; flex-direction: row; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n              <div style=\"display:flex; vertical-align:middle;\">\n                <mat-icon>{{option.icon}}</mat-icon>\n              </div>\n            </a>\n              </li>\n            }\n            @if(idx < count-1)\n            {\n              <mat-divider></mat-divider>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n\n    <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n        <router-outlet />\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$1.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i2$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: LeftNavComponent, isStandalone: true, selector: "lib-left-nav", inputs: { background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sideNavContent", first: true, predicate: MatSidenavContent, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n  @if(leftNavService.wide()){\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping; let idx=$index; let count=$count) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\">\n              <div style=\"display:flex; vertical-align:middle;\">\n              <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n              </div>\n            </a>\n              </li>\n            }\n            @if(idx < count-1)\n            {\n              <mat-divider></mat-divider>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n  @else{\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 70px;\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping; let idx=$index; let count=$count) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; flex-direction: row; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n              <div style=\"display:flex; vertical-align:middle;\">\n                <mat-icon>{{option.icon}}</mat-icon>\n              </div>\n            </a>\n              </li>\n            }\n            @if(idx < count-1)\n            {\n              <mat-divider></mat-divider>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n\n    <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n        <router-outlet />\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$5.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$5.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$5.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i2$2.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatDividerModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, decorators: [{
             type: Component,
@@ -2463,14 +2511,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatDividerModule], template: "<mat-sidenav-container class=\"leftnav-container\">\n  @if(leftNavService.wide()){\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width:200px; padding-top:0px\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping; let idx=$index; let count=$count) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\">\n              <div style=\"display:flex; vertical-align:middle;\">\n              <mat-icon style=\"margin-right: 5px;\">{{option.icon}}</mat-icon><span>{{ option.name }}</span>\n              </div>\n            </a>\n              </li>\n            }\n            @if(idx < count-1)\n            {\n              <mat-divider></mat-divider>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n  @else{\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" [opened]=\"user()!== null\" style=\"width: 70px;\">\n        <mat-nav-list>\n          @for (grouping of leftNavService.activeGroupings(); track grouping; let idx=$index; let count=$count) {          \n          <ul>\n            @if(grouping.name)\n            {\n              <div style=\"display:flex; width: 100%; flex-direction: row; align-items: center; text-align: center;margin-top: 5px; margin-bottom: 5px;\">\n              <span style=\"width:100%\">{{grouping.name}}</span>\n              </div>\n            }\n            @for (option of grouping.options; track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\" matTooltip=\"{{option.name}}\">\n              <div style=\"display:flex; vertical-align:middle;\">\n                <mat-icon>{{option.icon}}</mat-icon>\n              </div>\n            </a>\n              </li>\n            }\n            @if(idx < count-1)\n            {\n              <mat-divider></mat-divider>\n            }\n          </ul>\n        }\n        </mat-nav-list>\n    </mat-sidenav>\n  }\n\n    <mat-sidenav-content class=\"leftnav-content\" [style.background-image]=\"backgroundStyle\"> \n        <router-outlet />\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh;background-blend-mode:lighten;background-color:#ffffffa6;background-size:cover}.leftnav-side{padding:5px}ul,li{margin:0;padding:0;list-style-type:none;padding-inline-start:0;list-style:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], sideNavContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenavContent), { isSignal: true }] }] } });
 
-class FeedbackComponent {
+class FeedbackService extends ItemWithUserService {
+    _url = Feedback.plural;
+    typename = Feedback.typename;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class FeedbackForm {
+    fb = inject(FormBuilder);
+    form;
+    constructor() {
+        this.form = FeedbackForm.createForm(this.fb);
+    }
+    static createForm(fb) {
+        return fb.group({
+            comments: fb.control('', Validators.required)
+        });
+    }
+    setValue(item) {
+        this.form.patchValue({
+            comments: item.comments,
+        });
+    }
+    createItem() {
+        const value = this.form.value;
+        return {
+            comments: value.comments || ""
+        };
+    }
+    updateItem(item) {
+        item.comments = this.form.value.comments || "";
+        return item;
+    }
+}
+
+class FeedbackComponent extends EditView {
+    helpLink = signal("", ...(ngDevMode ? [{ debugName: "helpLink" }] : []));
+    constructor() {
+        super(inject(FeedbackService), new (FeedbackForm));
+        this.itemService.manifest.subscribe(m => { if (m) {
+            this.helpLink.set(m.docs_url);
+        } });
+    }
+    ngOnInit() {
+        this.onInit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: FeedbackComponent, isStandalone: true, selector: "lib-feedback", ngImport: i0, template: "<p>feedback works!</p>\n", styles: [""] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FeedbackComponent, isStandalone: true, selector: "lib-feedback", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(submitting())\n  {\n    <mat-spinner></mat-spinner>\n  }\n  @else{\n  <div class=\"item-edit-container\">\n    \n    @if(helpLink(); as helplink)\n    {\n        <h2>User Guide</h2>\n        <p>See the <a href=\"{{helplink}}\">User Guide</a> for information on using the portal.</p>\n    }\n\n    <h2>Comments</h2>\n    <p>If you notice a defect or have general feedback on the portal please fill in the comments field below.</p>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n        <mat-form-field class=\"form-field-wide\" style=\"max-width:800px\">\n          <mat-label for=\"description\">Comments</mat-label>\n          <textarea matInput placeholder=\"Comments\"\n                    type=\"text\"\n                    id=\"comments\"\n                    formControlName=\"comments\"\n                    name=\"comments\"\n                    class=\"medium-textarea\"\n                    required></textarea>\n        </mat-form-field>\n\n        <div class=\"button-group\">\n        <button mat-fab\n                class=\"form-action-button\"\n                type=\"submit\"\n                matTooltip=\"Submit\"\n                [disabled]=\"!this.form.form.valid || !this.form.form.dirty\">\n            <mat-icon>save</mat-icon>\n        </button>\n        \n        <button mat-fab\n                type=\"button\"\n                class=\"form-action-button\"\n                matTooltip=\"Cancel\"\n                (click)=\"cancel()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        </div>\n\n    </form>\n    </div>\n}\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FeedbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-feedback', imports: [], template: "<p>feedback works!</p>\n" }]
-        }] });
+            args: [{ selector: 'lib-feedback', imports: [BackButtonComponent,
+                        ReactiveFormsModule,
+                        MatProgressSpinner,
+                        TitleCasePipe,
+                        MatInputModule,
+                        MatButtonModule,
+                        MatIconModule], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(submitting())\n  {\n    <mat-spinner></mat-spinner>\n  }\n  @else{\n  <div class=\"item-edit-container\">\n    \n    @if(helpLink(); as helplink)\n    {\n        <h2>User Guide</h2>\n        <p>See the <a href=\"{{helplink}}\">User Guide</a> for information on using the portal.</p>\n    }\n\n    <h2>Comments</h2>\n    <p>If you notice a defect or have general feedback on the portal please fill in the comments field below.</p>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n        <mat-form-field class=\"form-field-wide\" style=\"max-width:800px\">\n          <mat-label for=\"description\">Comments</mat-label>\n          <textarea matInput placeholder=\"Comments\"\n                    type=\"text\"\n                    id=\"comments\"\n                    formControlName=\"comments\"\n                    name=\"comments\"\n                    class=\"medium-textarea\"\n                    required></textarea>\n        </mat-form-field>\n\n        <div class=\"button-group\">\n        <button mat-fab\n                class=\"form-action-button\"\n                type=\"submit\"\n                matTooltip=\"Submit\"\n                [disabled]=\"!this.form.form.valid || !this.form.form.dirty\">\n            <mat-icon>save</mat-icon>\n        </button>\n        \n        <button mat-fab\n                type=\"button\"\n                class=\"form-action-button\"\n                matTooltip=\"Cancel\"\n                (click)=\"cancel()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        </div>\n\n    </form>\n    </div>\n}\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"] }]
+        }], ctorParameters: () => [] });
 
 class AvatarComponent {
     text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
@@ -2572,7 +2677,7 @@ class UserEditComponent extends EditView {
         return this.form.form.get('profile');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <lib-file-upload [control]=\"profileControl\" [uploadCategory]=\"'image'\"></lib-file-upload>\n\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 formControlName=\"username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"email\"\n                 name=\"email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"first_name\"\n                name=\"first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n    <div class=\"button-group\">\n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"submit\"\n               matTooltip=\"Save\"\n               [disabled]=\"!form.form.valid || !form.form.dirty\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"button\"\n               matTooltip=\"Cancel\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <lib-file-upload [control]=\"profileControl\" [uploadCategory]=\"'image'\"></lib-file-upload>\n\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 formControlName=\"username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"email\"\n                 name=\"email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"first_name\"\n                name=\"first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n    <div class=\"button-group\">\n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"submit\"\n               matTooltip=\"Save\"\n               [disabled]=\"!form.form.valid || !form.form.dirty\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"button\"\n               matTooltip=\"Cancel\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control", "uploadCategory", "allowedSizeMb", "showHeading"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
@@ -2635,7 +2740,7 @@ class UserCreateComponent {
         this._location.back();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: UserCreateComponent, isStandalone: true, selector: "lib-user-create", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">Invite Member</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form().form\" (ngSubmit)=\"submit()\">\n\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"user_email\"\n                 name=\"user_email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"user_first_name\"\n                name=\"user_first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"user_last_name\"\n                 name=\"user_last_name\">\n        </mat-form-field>\n\n    <div class=\"button-group\">\n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"submit\"\n               matTooltip=\"Invite\"\n               [disabled]=\"!form().form.valid || !form().form.dirty\">\n         <mat-icon>save</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: UserCreateComponent, isStandalone: true, selector: "lib-user-create", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted" }, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">Invite Member</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form().form\" (ngSubmit)=\"submit()\">\n\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"user_email\"\n                 name=\"user_email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"user_first_name\"\n                name=\"user_first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"user_last_name\"\n                 name=\"user_last_name\">\n        </mat-form-field>\n\n    <div class=\"button-group\">\n       <button mat-fab\n               class=\"form-action-button\"\n               type=\"submit\"\n               matTooltip=\"Invite\"\n               [disabled]=\"!form().form.valid || !form().form.dirty\">\n         <mat-icon>save</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserCreateComponent, decorators: [{
             type: Component,
@@ -2660,7 +2765,7 @@ class UserListDetailComponent {
         return title;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserListDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserListDetailComponent, isStandalone: true, selector: "lib-user-list-detail", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, even: { classPropertyName: "even", publicName: "even", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n    @if(item().profile_thumbnail){\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <img matListItemAvatar \n        alt=\"User Avatar\" \n        src=\"{{item().profile_thumbnail}}\" style=\"height:30px; border-radius: 5px;\">\n    </div>    \n    }\n    @else if(!item().verified)\n    {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>mail</mat-icon>\n    </div>        \n    }\n    @else {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>person</mat-icon>\n    </div>\n    }\n    <div class=\"text-container\">\n        <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n        <p matListItemLine>{{item().email}}</p>\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;width:100%;display:flex;padding-top:5px;border-radius:12px;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$1.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i2$1.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$1.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$1.MatListItemTitle, selector: "[matListItemTitle]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserListDetailComponent, isStandalone: true, selector: "lib-user-list-detail", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, even: { classPropertyName: "even", publicName: "even", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n    @if(item().profile_thumbnail){\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <img matListItemAvatar \n        alt=\"User Avatar\" \n        src=\"{{item().profile_thumbnail}}\" style=\"height:30px; border-radius: 5px;\">\n    </div>    \n    }\n    @else if(!item().verified)\n    {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>mail</mat-icon>\n    </div>        \n    }\n    @else {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>person</mat-icon>\n    </div>\n    }\n    <div class=\"text-container\">\n        <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n        <p matListItemLine>{{item().email}}</p>\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;width:100%;display:flex;padding-top:5px;border-radius:12px;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$2.MatListItemAvatar, selector: "[matListItemAvatar]" }, { kind: "directive", type: i2$2.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i2$2.MatListItemLine, selector: "[matListItemLine]" }, { kind: "directive", type: i2$2.MatListItemTitle, selector: "[matListItemTitle]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserListDetailComponent, decorators: [{
             type: Component,
@@ -2777,7 +2882,7 @@ class GroupEditComponent extends EditView {
         this.selectionManager.fetchCandidates(this.itemService.typePlural() + "__id", item.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: GroupEditComponent, isStandalone: true, selector: "lib-group-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <lib-select-table style=\"width:100%\" [selected]=\"selectionManager.selected()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"selectionManager.columns\"\n                          [itemTemplate]=\"itemTemplate\"\n                         [options]=\"selectionManager.candidates()\"\n                         (itemAdded)=\"selectionManager.onAdded($event)\"\n                         (itemRemoved)=\"selectionManager.onRemoved($event)\"\n                         (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n        </lib-select-table>\n        <ng-template #itemTemplate let-item=\"item\">\n          <div>\n            <p><b>{{item.first_name}} {{item.last_name}} ({{item.username}})</b></p>\n            <p>{{item.email}}</p>\n          </div>\n        </ng-template>\n\n          <div class=\"button-group\">\n           <button mat-fab\n                   class=\"form-action-button\"\n                   type=\"submit\"\n                   matTooltip=\"Submit\"\n                   [disabled]=\"!showSubmit\">\n             <mat-icon>save</mat-icon>\n           </button>\n           \n           <button mat-fab\n                  type=\"button\"\n                   class=\"form-action-button\"\n                   matTooltip=\"Cancel\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n     </form>\n  </div>\n</div>\n\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.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: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "component", type: SelectTableComponent, selector: "lib-select-table", inputs: ["itemType", "selected", "options", "columns", "itemTemplate"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: GroupEditComponent, isStandalone: true, selector: "lib-group-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <lib-select-table style=\"width:100%\" [selected]=\"selectionManager.selected()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"selectionManager.columns\"\n                          [itemTemplate]=\"itemTemplate\"\n                         [options]=\"selectionManager.candidates()\"\n                         (itemAdded)=\"selectionManager.onAdded($event)\"\n                         (itemRemoved)=\"selectionManager.onRemoved($event)\"\n                         (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n        </lib-select-table>\n        <ng-template #itemTemplate let-item=\"item\">\n          <div>\n            <p><b>{{item.first_name}} {{item.last_name}} ({{item.username}})</b></p>\n            <p>{{item.email}}</p>\n          </div>\n        </ng-template>\n\n          <div class=\"button-group\">\n           <button mat-fab\n                   class=\"form-action-button\"\n                   type=\"submit\"\n                   matTooltip=\"Submit\"\n                   [disabled]=\"!showSubmit\">\n             <mat-icon>save</mat-icon>\n           </button>\n           \n           <button mat-fab\n                  type=\"button\"\n                   class=\"form-action-button\"\n                   matTooltip=\"Cancel\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n     </form>\n  </div>\n</div>\n\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.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: 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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: SelectTableComponent, selector: "lib-select-table", inputs: ["itemType", "selected", "options", "columns", "itemTemplate"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupEditComponent, decorators: [{
             type: Component,
@@ -2801,7 +2906,7 @@ class GroupComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: GroupComponent, isStandalone: true, selector: "lib-group", viewQueries: [{ propertyName: "detailView", first: true, predicate: GroupDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"42\"\n  [searchFields]=\"searchFields\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n      </div>\n  </div>\n\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-group-detail [showBack]='false'></lib-group-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}.container{height:40px;padding-top:5px;padding-left:5px;width:100%;display:flex;flex-direction:row;border-radius:6px;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: GroupDetailComponent, selector: "lib-group-detail", inputs: ["showBack"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$1.MatListItemTitle, selector: "[matListItemTitle]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: GroupComponent, isStandalone: true, selector: "lib-group", viewQueries: [{ propertyName: "detailView", first: true, predicate: GroupDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"42\"\n  [searchFields]=\"searchFields\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n      </div>\n  </div>\n\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-group-detail [showBack]='false'></lib-group-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}.container{height:40px;padding-top:5px;padding-left:5px;width:100%;display:flex;flex-direction:row;border-radius:6px;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: GroupDetailComponent, selector: "lib-group-detail", inputs: ["showBack"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$2.MatListItemTitle, selector: "[matListItemTitle]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupComponent, decorators: [{
             type: Component,
@@ -2812,7 +2917,7 @@ class AddressEditComponent {
     countryOptions = input([], ...(ngDevMode ? [{ debugName: "countryOptions" }] : []));
     form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AddressEditComponent, isStandalone: true, selector: "lib-address-edit", inputs: { countryOptions: { classPropertyName: "countryOptions", publicName: "countryOptions", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(form(); as form){\n<div [formGroup]=\"form\" style=\"display: flex; flex-direction: column; width:100%\">\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line1\">Line 1</mat-label>\n        <input matInput placeholder=\"Address Line 1\" type=\"text\" id=\"line1\" formControlName=\"line1\" name=\"line1\"\n            required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line2\">Line 2</mat-label>\n        <input matInput placeholder=\"Address Line 2\" type=\"text\" id=\"line2\" formControlName=\"line2\" name=\"line1\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line3\">Line 3</mat-label>\n        <input matInput placeholder=\"Address Line 3\" type=\"text\" id=\"line3\" formControlName=\"line3\" name=\"line3\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"city\">City</mat-label>\n        <input matInput placeholder=\"City\" type=\"text\" id=\"city\" formControlName=\"city\" name=\"city\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"region\">Region</mat-label>\n        <input matInput placeholder=\"Region\" type=\"text\" id=\"region\" formControlName=\"region\" name=\"region\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"line1\">Post Code</mat-label>\n        <input matInput placeholder=\"Post Code\" type=\"text\" id=\"postcode\" formControlName=\"postcode\" name=\"postcode\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"country\">Country</mat-label>\n        <mat-select formControlName=\"country\" name=\"country\" id=\"country\" required>\n            @for(country of countryOptions(); track $index){\n            <mat-option [value]=\"country.code\">{{country.name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n</div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: 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: 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: 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: AddressEditComponent, isStandalone: true, selector: "lib-address-edit", inputs: { countryOptions: { classPropertyName: "countryOptions", publicName: "countryOptions", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(form(); as form){\n<div [formGroup]=\"form\" style=\"display: flex; flex-direction: column; width:100%\">\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line1\">Line 1</mat-label>\n        <input matInput placeholder=\"Address Line 1\" type=\"text\" id=\"line1\" formControlName=\"line1\" name=\"line1\"\n            required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line2\">Line 2</mat-label>\n        <input matInput placeholder=\"Address Line 2\" type=\"text\" id=\"line2\" formControlName=\"line2\" name=\"line1\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line3\">Line 3</mat-label>\n        <input matInput placeholder=\"Address Line 3\" type=\"text\" id=\"line3\" formControlName=\"line3\" name=\"line3\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"city\">City</mat-label>\n        <input matInput placeholder=\"City\" type=\"text\" id=\"city\" formControlName=\"city\" name=\"city\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"region\">Region</mat-label>\n        <input matInput placeholder=\"Region\" type=\"text\" id=\"region\" formControlName=\"region\" name=\"region\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"line1\">Post Code</mat-label>\n        <input matInput placeholder=\"Post Code\" type=\"text\" id=\"postcode\" formControlName=\"postcode\" name=\"postcode\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"country\">Country</mat-label>\n        <mat-select formControlName=\"country\" name=\"country\" id=\"country\" required>\n            @for(country of countryOptions(); track $index){\n            <mat-option [value]=\"country.code\">{{country.name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n</div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { 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: 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: 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressEditComponent, decorators: [{
             type: Component,
@@ -2914,16 +3019,19 @@ class OrganizationComponent {
             rows: [{
                     filters: [{
                             display_name: "Country",
-                            key: "country_name",
+                            key: "address__country",
                             type: "selection",
                             tooltip: "",
-                            choices: [],
+                            choices: [{ display_name: "Ireland", value: "IE" },
+                                { display_name: "France", value: "FR" },
+                                { display_name: "Spain", value: "ES" },
+                                { display_name: "Italy", value: "IT" }
+                            ],
                             default: "",
                             include_if_null: false
                         }]
                 }]
         },
-        defaultQueries: [{ key: "address__country", value: "IE" }],
         sortFields: [{ display_name: "Age", value: "created_at" },
             { display_name: "Last Updated", value: "updated_at" },
             { display_name: "Name", value: "name" }
@@ -2931,9 +3039,7 @@ class OrganizationComponent {
     }), ...(ngDevMode ? [{ debugName: "searchFields" }] : []));
     detailView = viewChild(OrganizationDetailComponent, ...(ngDevMode ? [{ debugName: "detailView" }] : []));
     onSelected(id) {
-        if (id) {
-            this.detailView()?.onSelection(id);
-        }
+        this.detailView()?.onSelection(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", inputs: { embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "detailView", first: true, predicate: OrganizationDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"82\"\n  [itemWidth]=\"400\"\n  [embeddedMode]=\"embedded()\"\n  [searchFields]=\"searchFields()\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n          @if(item.address.region && item.address.country_name){\n          <p matListItemLine style=\"margin-bottom: 0px; margin-top: 0px\">\n            {{item.address.region}}, {{item.address.country_name}}\n          </p>\n        }\n      </div>\n  </div>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-organization-detail [showBack]='false'></lib-organization-detail>\n  </ng-template>\n\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}.container{height:80px;padding-left:5px;padding-top:5px;border-radius:12px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: OrganizationDetailComponent, selector: "lib-organization-detail", inputs: ["showBack"] }] });
@@ -3030,7 +3136,7 @@ class OrganizationEditComponent extends EditView {
         this.selectionManager.fetchCandidates(this.itemService.typePlural() + "__id", item.id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(submitting())\n  {\n    <mat-spinner></mat-spinner>\n  }\n  @else{\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n    <mat-tab-group mat-stretch-tabs=\"true\" mat-align-tabs=\"center\" style=\"width:100%;\">\n\n    <mat-tab label=\"Overview\" style=\"width:100%;\">\n      <div style=\"padding:10px;\">\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"acronym\">Acronym</mat-label> \n          <input matInput placeholder=\"Acronym\"\n                 type=\"text\"\n                 id=\"acronym\"\n                 formControlName=\"acronym\"\n                 name=\"acronym\">\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=\"Description\"\n                    type=\"text\"\n                    id=\"description\"\n                    formControlName=\"description\"\n                    name=\"description\"\n                    class=\"medium-textarea\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-accordion style=\"width:100%\">\n        <mat-expansion-panel style=\"width:100%\" [expanded]=\"true\">\n        <mat-expansion-panel-header>\n          <mat-panel-title>Address</mat-panel-title>\n        </mat-expansion-panel-header>\n\n        <lib-address-edit \n        [countryOptions]=\"organizationService.countryOptions()\"\n        [form]=\"addressForm()\"\n        ></lib-address-edit>\n        </mat-expansion-panel>\n        </mat-accordion>\n\n        <mat-slide-toggle style=\"margin-top: 10px;\" formControlName=\"public\">Is Public?</mat-slide-toggle>\n\n        </div>\n        </mat-tab>\n\n        <mat-tab label=\"Members\" style=\"width:100%;\">\n          <div style=\"padding:10px\">\n        <lib-select-table style=\"width:100%\" [selected]=\"selectionManager.selected()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"selectionManager.columns\"\n                          [itemTemplate]=\"itemTemplate\"\n                         [options]=\"selectionManager.candidates()\"\n                         (itemAdded)=\"selectionManager.onAdded($event)\"\n                         (itemRemoved)=\"selectionManager.onRemoved($event)\"\n                         (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n        </lib-select-table>\n        <ng-template #itemTemplate let-item=\"item\">\n          <div>\n            <p><b>{{item.first_name}} {{item.last_name}} ({{item.username}})</b></p>\n            <p>{{item.email}}</p>\n          </div>\n        </ng-template>\n        </div>\n        </mat-tab>\n        </mat-tab-group>\n\n          <div class=\"button-group\">\n           <button mat-fab\n                   class=\"form-action-button\"\n                   type=\"submit\"\n                   matTooltip=\"Submit\"\n                   [disabled]=\"!showSubmit\">\n             <mat-icon>save</mat-icon>\n           </button>\n           \n           <button mat-fab\n                  type=\"button\"\n                   class=\"form-action-button\"\n                   matTooltip=\"Cancel\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n     </form>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$3.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: AddressEditComponent, selector: "lib-address-edit", inputs: ["countryOptions", "form"] }, { kind: "component", type: SelectTableComponent, selector: "lib-select-table", inputs: ["itemType", "selected", "options", "columns", "itemTemplate"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(submitting())\n  {\n    <mat-spinner></mat-spinner>\n  }\n  @else{\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n    <mat-tab-group mat-stretch-tabs=\"true\" mat-align-tabs=\"center\" style=\"width:100%;\">\n\n    <mat-tab label=\"Overview\" style=\"width:100%;\">\n      <div style=\"padding:10px;\">\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"acronym\">Acronym</mat-label> \n          <input matInput placeholder=\"Acronym\"\n                 type=\"text\"\n                 id=\"acronym\"\n                 formControlName=\"acronym\"\n                 name=\"acronym\">\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=\"Description\"\n                    type=\"text\"\n                    id=\"description\"\n                    formControlName=\"description\"\n                    name=\"description\"\n                    class=\"medium-textarea\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-accordion style=\"width:100%\">\n        <mat-expansion-panel style=\"width:100%\" [expanded]=\"true\">\n        <mat-expansion-panel-header>\n          <mat-panel-title>Address</mat-panel-title>\n        </mat-expansion-panel-header>\n\n        <lib-address-edit \n        [countryOptions]=\"organizationService.countryOptions()\"\n        [form]=\"addressForm()\"\n        ></lib-address-edit>\n        </mat-expansion-panel>\n        </mat-accordion>\n\n        <mat-slide-toggle style=\"margin-top: 10px;\" formControlName=\"public\">Is Public?</mat-slide-toggle>\n\n        </div>\n        </mat-tab>\n\n        <mat-tab label=\"Members\" style=\"width:100%;\">\n          <div style=\"padding:10px\">\n        <lib-select-table style=\"width:100%\" [selected]=\"selectionManager.selected()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"selectionManager.columns\"\n                          [itemTemplate]=\"itemTemplate\"\n                         [options]=\"selectionManager.candidates()\"\n                         (itemAdded)=\"selectionManager.onAdded($event)\"\n                         (itemRemoved)=\"selectionManager.onRemoved($event)\"\n                         (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n        </lib-select-table>\n        <ng-template #itemTemplate let-item=\"item\">\n          <div>\n            <p><b>{{item.first_name}} {{item.last_name}} ({{item.username}})</b></p>\n            <p>{{item.email}}</p>\n          </div>\n        </ng-template>\n        </div>\n        </mat-tab>\n        </mat-tab-group>\n\n          <div class=\"button-group\">\n           <button mat-fab\n                   class=\"form-action-button\"\n                   type=\"submit\"\n                   matTooltip=\"Submit\"\n                   [disabled]=\"!showSubmit\">\n             <mat-icon>save</mat-icon>\n           </button>\n           \n           <button mat-fab\n                  type=\"button\"\n                   class=\"form-action-button\"\n                   matTooltip=\"Cancel\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n     </form>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "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: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: AddressEditComponent, selector: "lib-address-edit", inputs: ["countryOptions", "form"] }, { kind: "component", type: SelectTableComponent, selector: "lib-select-table", inputs: ["itemType", "selected", "options", "columns", "itemTemplate"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i10.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i10.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationEditComponent, decorators: [{
             type: Component,
@@ -3062,5 +3168,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, ApiError, AvatarComponent, BackButtonComponent, DetailHeaderComponent, DetailView, DynamicFormBuilderComponent, DynamicFormComponent, DynamicFormForm, EditView, ErrorCode, FORM_FIELD_CHOICES, FeedbackComponent, FieldType, FileRecord, FileUploadComponent, FormFieldDetailComponent, FormFieldEditComponent, FormFieldValueForm, FormService, Group, GroupComponent, GroupDetailComponent, GroupEditComponent, GroupService, ItemQuery, ItemService, ItemWithUserService, LeftNavComponent, LeftNavService, ListTableViewComponent, ListViewComponent, MemberSelectionManager, MockItemService, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, Paginated, Permission, PopulatedFormComponent, PopulatedFormForm, PortalMember, REST_SERVICE_CONFIG, ResolvedPermission, RestService, SearchBarComponent, SearchFields, SelectTableComponent, SelectionManager, TopBarComponent, UserComponent, UserCreateComponent, UserCreateForm, UserDetailComponent, UserEditComponent, UserService, getFieldTypeFromKey, getFileFieldIds, getFilter };
+export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, ApiError, AvatarComponent, BackButtonComponent, DetailHeaderComponent, DetailView, DynamicFormBuilderComponent, DynamicFormComponent, DynamicFormForm, EditView, ErrorCode, FORM_FIELD_CHOICES, Feedback, FeedbackComponent, FieldType, FileRecord, FileUploadComponent, FormFieldDetailComponent, FormFieldEditComponent, FormFieldValueForm, FormService, Group, GroupComponent, GroupDetailComponent, GroupEditComponent, GroupService, ItemQuery, ItemService, ItemWithUserService, LeftNavComponent, LeftNavService, ListTableViewComponent, ListViewComponent, MemberSelectionManager, MockItemService, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, Paginated, Permission, PopulatedFormComponent, PopulatedFormForm, PortalMember, REST_SERVICE_CONFIG, ResolvedPermission, RestService, SearchBarComponent, SearchFields, SelectTableComponent, SelectionManager, TopBarComponent, UserComponent, UserCreateComponent, UserCreateForm, UserDetailComponent, UserEditComponent, UserService, getFieldTypeFromKey, getFileFieldIds, getFilter };
 //# sourceMappingURL=ichec-angular-core.mjs.map