ichec-angular-core 0.2.5 → 0.3.0

package/fesm2022/ichec-angular-core.mjs

@@ -1,55 +1,53 @@
-import { map, catchError, mergeMap, throwError, BehaviorSubject, tap, of, merge, debounceTime, distinctUntilChanged, Subscription, finalize } from 'rxjs';
+import { map, catchError, mergeMap, throwError, BehaviorSubject, tap, of, debounceTime, distinctUntilChanged, merge, Subscription, finalize } from 'rxjs';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, DOCUMENT, Injectable, signal, input, Component, viewChild, computed, output } from '@angular/core';
+import { InjectionToken, inject, DOCUMENT, Injectable, signal, Component, computed, input, output, viewChild } from '@angular/core';
 import { CookieService } from 'ngx-cookie-service';
-import * as i1$3 from '@angular/forms';
+import * as i1$2 from '@angular/forms';
 import { FormControl, Validators, FormGroup, ReactiveFormsModule, FormBuilder } from '@angular/forms';
-import * as i1 from '@angular/router';
-import { RouterModule, RouterOutlet, ActivatedRoute } from '@angular/router';
-import * as i2 from '@angular/material/toolbar';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i1$1 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i2$1 from '@angular/material/button';
-import { MatButtonModule } from '@angular/material/button';
-import * as i5 from '@angular/material/menu';
-import { MatMenuModule } from '@angular/material/menu';
-import * as i1$2 from '@angular/material/sidenav';
-import { MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
-import * as i2$2 from '@angular/material/list';
-import { MatListModule } from '@angular/material/list';
-import { Location, TitleCasePipe, DatePipe, NgTemplateOutlet } from '@angular/common';
+import { Location, NgTemplateOutlet, TitleCasePipe, DatePipe } from '@angular/common';
+import * as i1$3 from '@angular/router';
+import { ActivatedRoute, RouterModule, RouterOutlet } from '@angular/router';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogContent, MatDialogActions, MatDialogClose, MatDialog } from '@angular/material/dialog';
-import * as i4$1 from '@angular/material/form-field';
+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 i4 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';
+import * as i1$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i6$1 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i3 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i5$1 from '@angular/material/checkbox';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i4 from '@angular/material/tooltip';
+import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i1$7 from '@angular/material/card';
+import * as i5 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatCardModule } from '@angular/material/card';
-import * as i6 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import * as i1$5 from '@angular/material/table';
-import { MatTableModule, MatTable } from '@angular/material/table';
 import * as i1$4 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i6$1 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i3$1 from '@angular/material/sort';
 import { MatSort, MatSortModule } from '@angular/material/sort';
-import * as i1$6 from '@angular/material/button-toggle';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import * as i2$5 from '@angular/material/progress-spinner';
+import * as i1$5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i2$3 from '@angular/material/paginator';
+import * as i2$1 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import * as i2$4 from '@angular/cdk/scrolling';
+import * as i2$3 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
+import * as i2$2 from '@angular/material/list';
+import { MatListModule } from '@angular/material/list';
 import { DataSource } from '@angular/cdk/collections';
+import * as i2$4 from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i5$1 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$6 from '@angular/material/sidenav';
+import { MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
 import * as i7 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 
@@ -156,6 +154,27 @@ function getFieldTypeFromKey(key) {
     }
     return FieldType.Char;
 }
+function getFileFieldIds(form) {
+    const ids = [];
+    form.groups.map(g => g.fields.map(f => {
+        if (f.field_type == "FILE") {
+            ids.push(f.id);
+        }
+    }));
+    return ids;
+}
+
+class FileRecord {
+    name = "";
+    display_name = "";
+    file_type = "standard";
+    file = null;
+    remote = "";
+    local = "";
+    constructor(params = {}) {
+        Object.assign(this, params);
+    }
+}
 
 const REST_SERVICE_CONFIG = new InjectionToken("Config for the rest service");
 class RestService {
@@ -318,47 +337,22 @@ class UserService extends ItemService {
     permissions = new Map();
     login(next = "/") {
         console.log("Starting login flow");
-        return this._getServiceManifest(next);
-    }
-    _getServiceManifest(next) {
-        console.log("Fetching service manifest");
-        return this._http.get(this.config.endpoint_url + "/manifest").pipe(mergeMap(manifest => { this.manifest = manifest; return this._getSelf(next); }));
-    }
-    _getSelf(next) {
-        console.log("Attempting to fetch self profile");
-        return this.getUrl(this.config.endpoint_url + "/api/self/").pipe(tap(user => this.onLoggedIn(user)), map(user => { return user; }), catchError(e => this._login(e, next)));
-    }
-    _login(error, next) {
-        if (error.status == 401) {
-            console.log("Couldn't authenticate with session - redirect to login url: ", this.manifest.login_url, error);
-            this._do_login_redirect(next);
-            return of(null);
-        }
-        else {
-            console.log("Error logging in: ", error);
-            return throwError(() => error);
-        }
-    }
-    _do_login_redirect(next) {
-        let prefix = "";
-        if (this.config.endpoint_url) {
-            prefix = this.config.endpoint_url + "/";
-        }
-        this.document.location.href = prefix + this.manifest.login_url + "/?next=" + next;
+        this._getServiceManifest().subscribe(m => { this.manifest = m; this._do_login(next); });
     }
     logout(next = "") {
-        if (this.loggedInUser === null) {
+        if (this.loggedInUser.value === null) {
             return;
         }
         console.log("Session Log Out");
         let prefix = "";
         if (this.config.endpoint_url) {
-            prefix = this.config.endpoint_url;
+            prefix = this.config.endpoint_url + "/";
         }
         let suffix = "";
         if (next) {
             suffix = "?next=" + next;
         }
+        console.log("posting logout to: ", prefix + this.manifest.logout_url + "/" + suffix);
         this._http.post(prefix + this.manifest.logout_url + "/" + suffix, "", {
             headers: new HttpHeaders({
                 'X-CSRFToken': this.cookieService.get("csrftoken")
@@ -374,6 +368,34 @@ class UserService extends ItemService {
             //this.login(next)
         });
     }
+    getSelf() {
+        console.log("Attempting to fetch self profile");
+        return this._getServiceManifest().pipe(mergeMap(m => { this.manifest = m; return this._getSelf(); }));
+    }
+    _getSelf() {
+        return this.getUrl(this.config.endpoint_url + "/api/self/").pipe(tap(user => this.onSelf(user)), map(user => { return user; }), catchError(e => this._selfFetchFailed(e)));
+    }
+    _selfFetchFailed(error) {
+        if (error.status == 401) {
+            console.log("No valid user session found:", error);
+            return of(null);
+        }
+        else {
+            console.log("Unexpected error fetching user session: ", error);
+            return throwError(() => error);
+        }
+    }
+    _getServiceManifest() {
+        console.log("Fetching service manifest");
+        return this._http.get(this.config.endpoint_url + "/manifest");
+    }
+    _do_login(next) {
+        let prefix = "";
+        if (this.config.endpoint_url) {
+            prefix = this.config.endpoint_url + "/";
+        }
+        this.document.location.href = prefix + this.manifest.login_url + "/?next=" + next;
+    }
     hasAddPermission(feature) {
         const perm = this.permissions.get(feature);
         if (!perm) {
@@ -402,8 +424,8 @@ class UserService extends ItemService {
         }
         return perm.canView;
     }
-    onLoggedIn(user) {
-        console.log("Log in successful for user: " + user.username);
+    onSelf(user) {
+        console.log("Fetched self user: " + user.username);
         this.loggedInUser.next(user);
         this.processPermissions();
     }
@@ -490,69 +512,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class AddressService extends ItemWithUserService {
-    _url = Address.plural;
-    typename = Address.typename;
-    countryOptions = signal([], ...(ngDevMode ? [{ debugName: "countryOptions" }] : []));
-    refreshCountryOptions() {
-        this.getOptions().subscribe(options => this.onOptions(options));
-    }
-    onOptions(options) {
-        if (!options.actions) {
-            return;
-        }
-        if ('POST' in options.actions) {
-            this.onPostActions(options.actions['POST']);
-        }
-    }
-    onPostActions(actions) {
-        if ('country' in actions && actions['country'].choices) {
-            this.onCountryChoices(actions['country'].choices);
-        }
-    }
-    onCountryChoices(choices) {
-        this.countryOptions.update(() => choices.map(c => { return { name: c.display_name, code: c.value, flag: "" }; }));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class GroupService extends ItemWithUserService {
-    _url = Group.plural;
-    typename = Group.typename;
-    constructor() {
-        super();
-        this.userService.loggedInUser.subscribe(user => this.refreshUserItems(user));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: () => [] });
-
-class OrganizationService extends ItemWithUserService {
-    _url = Organization.plural;
-    typename = Organization.typename;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class FormService {
     static getBaseTemplate() {
@@ -672,8 +631,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 }]
         }] });
 
+class GroupService extends ItemWithUserService {
+    _url = Group.plural;
+    typename = Group.typename;
+    constructor() {
+        super();
+        this.userService.loggedInUser.subscribe(user => this.refreshUserItems(user));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 class LeftNavService {
-    activeOptions = new Set();
+    activeOptions = signal(new Set(), ...(ngDevMode ? [{ debugName: "activeOptions" }] : []));
     _groups = [];
     _defaultOptions = [];
     _groupService = inject(GroupService);
@@ -681,17 +657,15 @@ class LeftNavService {
         this._groupService.userItems.subscribe(groups => this.onGroupsUpdated(groups));
     }
     onGroupsUpdated(groups) {
-        this.activeOptions = new Set();
-        this._defaultOptions.forEach(e => this.activeOptions.add(e));
+        const options = new Set();
+        this._defaultOptions.forEach(e => options.add(e));
         groups.forEach(g => this._groups.forEach(n => {
             if (n.name == g.name) {
-                this.addNavGroup(n);
+                n.options.forEach(o => options.add(o));
             }
             ;
         }));
-    }
-    addNavGroup(group) {
-        group.options.forEach(o => this.activeOptions.add(o));
+        this.activeOptions.set(options);
     }
     setDefaultOptions(options) {
         this._defaultOptions = options;
@@ -709,6 +683,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class AddressService extends ItemWithUserService {
+    _url = Address.plural;
+    typename = Address.typename;
+    countryOptions = signal([], ...(ngDevMode ? [{ debugName: "countryOptions" }] : []));
+    refreshCountryOptions() {
+        this.getOptions().subscribe(options => this.onOptions(options));
+    }
+    onOptions(options) {
+        if (!options.actions) {
+            return;
+        }
+        if ('POST' in options.actions) {
+            this.onPostActions(options.actions['POST']);
+        }
+    }
+    onPostActions(actions) {
+        if ('country' in actions && actions['country'].choices) {
+            this.onCountryChoices(actions['country'].choices);
+        }
+    }
+    onCountryChoices(choices) {
+        this.countryOptions.update(() => choices.map(c => { return { name: c.display_name, code: c.value, flag: "" }; }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AddressService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class OrganizationService extends ItemWithUserService {
+    _url = Organization.plural;
+    typename = Organization.typename;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class MockItemService {
     canEdit() {
         return false;
@@ -724,61 +744,6 @@ class MockItemService {
     }
 }
 
-class TopBarComponent {
-    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
-    user = input.required(...(ngDevMode ? [{ debugName: "user" }] : []));
-    userService = inject(UserService);
-    onLogout() {
-        this.userService.logout();
-    }
-    get initials() {
-        return PortalMember.getInitials(this.user());
-    }
-    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.1.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 }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "\n<mat-toolbar style=\"height:60px\">\n    <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n      <mat-icon>home</mat-icon>\n    </a>\n    <span>{{title()}}</span>\n    <span class=\"topbar-spacer\"></span>\n    <span>{{user().username}}</span>\n    \n    <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n      <mat-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</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.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$1.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,
-            args: [{ selector: 'lib-top-bar', imports: [RouterModule,
-                        MatToolbarModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatMenuModule], template: "\n<mat-toolbar style=\"height:60px\">\n    <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n      <mat-icon>home</mat-icon>\n    </a>\n    <span>{{title()}}</span>\n    <span class=\"topbar-spacer\"></span>\n    <span>{{user().username}}</span>\n    \n    <button mat-icon-button style=\"margin: 5px\" aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n      <mat-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</mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}\n"] }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }] } });
-
-class LeftNavComponent {
-    _leftNavService = inject(LeftNavService);
-    sideNavContent = viewChild(MatSidenavContent, ...(ngDevMode ? [{ debugName: "sideNavContent" }] : []));
-    getOptions() {
-        return this._leftNavService.activeOptions;
-    }
-    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", viewQueries: [{ propertyName: "sideNavContent", first: true, predicate: MatSidenavContent, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" opened>\n        <mat-nav-list>\n            @for (option of getOptions(); track option) {\n              <a mat-list-item [routerLink]=\"option.route\" [routerLinkActive]=\"['is-active']\">{{ option.name }}</a>\n            }\n        </mat-nav-list>\n    </mat-sidenav>\n    <mat-sidenav-content class=\"leftnav-content\"> \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}.leftnav-side{padding:5px;width:200px}.is-active{background-color:#d3d3d3}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$2.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$2.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$2.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: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-left-nav', imports: [MatSidenavModule, MatListModule, RouterOutlet, RouterModule], template: "<mat-sidenav-container class=\"leftnav-container\">\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" opened>\n        <mat-nav-list>\n            @for (option of getOptions(); track option) {\n              <a mat-list-item [routerLink]=\"option.route\" [routerLinkActive]=\"['is-active']\">{{ option.name }}</a>\n            }\n        </mat-nav-list>\n    </mat-sidenav>\n    <mat-sidenav-content class=\"leftnav-content\"> \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}.leftnav-side{padding:5px;width:200px}.is-active{background-color:#d3d3d3}\n"] }]
-        }], propDecorators: { sideNavContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenavContent), { isSignal: true }] }] } });
-
-class FeedbackComponent {
-    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: [""] });
-}
-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" }]
-        }] });
-
-class AvatarComponent {
-    text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: AvatarComponent, isStandalone: true, selector: "lib-avatar", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\"> <span>{{text()}}</span> </div>", styles: [".container{width:36px;height:36px;border-radius:100%;text-align:center;justify-content:center;align-content:center;background-color:#d3d3d3}.container span{line-height:8px;color:#000}\n"] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AvatarComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-avatar', imports: [], template: "<div class=\"container\"> <span>{{text()}}</span> </div>", styles: [".container{width:36px;height:36px;border-radius:100%;text-align:center;justify-content:center;align-content:center;background-color:#d3d3d3}.container span{line-height:8px;color:#000}\n"] }]
-        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
-
 class DeleteDialogComponent {
     dialogRef = inject((MatDialogRef));
     data = inject(MAT_DIALOG_DATA);
@@ -786,7 +751,7 @@ class DeleteDialogComponent {
         this.dialogRef.close();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DeleteDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: DeleteDialogComponent, isStandalone: true, selector: "lib-delete-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.title}}</h2>\n<mat-dialog-content>\n  <p>{{data.message}}</p>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button matButton (click)=\"onNoClick()\">No Thanks</button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>Delete</button>\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: DeleteDialogComponent, isStandalone: true, selector: "lib-delete-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.title}}</h2>\n<mat-dialog-content>\n  <p>{{data.message}}</p>\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button matButton (click)=\"onNoClick()\">No Thanks</button>\n  <button matButton [mat-dialog-close]=\"true\" cdkFocusInitial>Delete</button>\n</mat-dialog-actions>", styles: [""], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DeleteDialogComponent, decorators: [{
             type: Component,
@@ -808,11 +773,22 @@ class DetailView {
         this.itemService = itemService;
     }
     onInit() {
-        this.getItem();
+        const id = Number(this.route.snapshot.paramMap.get('id'));
+        if (id) {
+            this._getItem(id);
+        }
     }
-    title() {
-        if (this.itemService.typename) {
-            return this.itemService.typename.replace("_", " ");
+    onSelection(id) {
+        if (id) {
+            this._getItem(id);
+        }
+        else {
+            this.item.set(null);
+        }
+    }
+    title() {
+        if (this.itemService.typename) {
+            return this.itemService.typename.replace("_", " ");
         }
         return "";
     }
@@ -823,12 +799,6 @@ class DetailView {
         } });
     }
     onItemAndUserAvailable(_item, _user) { }
-    getItem() {
-        const id = Number(this.route.snapshot.paramMap.get('id'));
-        this.itemService.getItem(id).subscribe(item => {
-            this.onItemAvailable(item);
-        });
-    }
     onDeleteClicked() {
         const dialogRef = this.deleteDialog.open(DeleteDialogComponent, {
             data: {
@@ -857,6 +827,11 @@ class DetailView {
     canDelete() {
         return this.itemService.canDelete();
     }
+    _getItem(id) {
+        this.itemService.getItem(id).subscribe(item => {
+            this.onItemAvailable(item);
+        });
+    }
 }
 
 class EditView {
@@ -1000,6 +975,172 @@ class EditView {
     }
 }
 
+class SelectTableComponent {
+    itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
+    selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    itemAdded = output();
+    itemRemoved = output();
+    searchChanged = output();
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    columnNames = computed(() => { const names = this.columns().map(c => c.name); names.push("remove"); return names; }, ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
+    searchControl = new FormControl('');
+    table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "table" }] : []));
+    ngOnInit() {
+        this.searchControl.valueChanges.subscribe(value => this.searchChanged.emit(value));
+    }
+    remove(id) {
+        this.itemRemoved.emit(id);
+        this.table()?.renderRows();
+    }
+    add() {
+        if (this.searchControl.value) {
+            this.itemAdded.emit(this.searchControl.value);
+        }
+        this.searchControl.reset();
+        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' style=\"width:100%\">\n  <div style=\"width:100%; display:flex; flex-direction: row;\">\n    <mat-form-field style=\"width:100%\">\n      <mat-label>Add {{itemType()}}</mat-label>\n      <input \n          type=\"text\"\n           aria-label=\"Selected item\"\n           matInput\n           [formControl]=\"searchControl\" \n           placeholder=\"Search\"\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    <button mat-mini-fab type=\"button\" \n      class=\"form_action_button\" \n      (click)=\"add()\">\n      <mat-icon>add</mat-icon>\n    </button>\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                    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,.table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: 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: "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,
+            args: [{ selector: 'lib-select-table', imports: [MatTableModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatAutocompleteModule,
+                        ReactiveFormsModule,
+                        MatInputModule,
+                        NgTemplateOutlet], template: "<div class='select-container' style=\"width:100%\">\n  <div style=\"width:100%; display:flex; flex-direction: row;\">\n    <mat-form-field style=\"width:100%\">\n      <mat-label>Add {{itemType()}}</mat-label>\n      <input \n          type=\"text\"\n           aria-label=\"Selected item\"\n           matInput\n           [formControl]=\"searchControl\" \n           placeholder=\"Search\"\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    <button mat-mini-fab type=\"button\" \n      class=\"form_action_button\" \n      (click)=\"add()\">\n      <mat-icon>add</mat-icon>\n    </button>\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                    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,.table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\n"] }]
+        }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemAdded: [{ type: i0.Output, args: ["itemAdded"] }], itemRemoved: [{ type: i0.Output, args: ["itemRemoved"] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }] } });
+
+const USER_TABLE_FULL = [
+    { name: 'first_name', title: 'First Name', element_type: 'string' },
+    { name: 'last_name', title: 'Surname', element_type: 'string' },
+    { name: 'username', title: 'Username', element_type: 'string' },
+    { name: 'email', title: 'Email', element_type: 'email' }
+];
+
+class SelectionManager {
+    candidates = signal([], ...(ngDevMode ? [{ debugName: "candidates" }] : []));
+    selected = signal([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    columns = [];
+    itemService;
+    constructor(itemService) {
+        this.itemService = itemService;
+    }
+    fetchCandidates(item, id) {
+        const queries = new Map([[item, id.toString()]]);
+        const query = new ItemQuery({ queries: queries });
+        this.itemService.get(query).subscribe(items => this.selected.set(items.results));
+        this.itemService.get().subscribe(items => this.updateCandidates(items));
+    }
+    updateCandidates(items) {
+        this.candidates.set(items.results.map(item => this.toSelectable(item)));
+    }
+    onRemoved(id) {
+        const url = this.selected().find(m => m.id == id).url;
+        this.selected.update(items => items.filter(m => m.id != id));
+        return url;
+    }
+    onAdded(title) {
+        const selected = this.candidates().find(m => m.title == title);
+        if (selected) {
+            this.selected.update(members => { members.push(selected.item); return members; });
+        }
+        this.candidates.update(members => members.filter(m => m.title != title));
+        return this.selected().find(m => this.hasTitle(m, title)).url;
+    }
+    onSearchChanged(searchTerm) {
+        if (searchTerm) {
+            this.itemService.get(new ItemQuery({ filter: searchTerm })).subscribe(items => this.updateCandidates(items));
+        }
+        else {
+            this.itemService.get().subscribe(items => this.updateCandidates(items));
+        }
+    }
+}
+class MemberSelectionManager extends SelectionManager {
+    columns = USER_TABLE_FULL;
+    constructor() {
+        super(inject(UserService));
+    }
+    toSelectable(item) {
+        return { title: item.username, item: item };
+    }
+    hasTitle(item, title) {
+        return item.username == title;
+    }
+}
+
+class BackButtonComponent {
+    location = inject(Location);
+    goBack() {
+        this.location.back();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: BackButtonComponent, isStandalone: true, selector: "lib-back-button", ngImport: i0, template: "<a mat-icon-button class=\"padded-button\"\n    (click)=\"goBack()\"\n    (keydown)=\"goBack()\"\n    tabindex=\"0\"\n    role=\"button\">\n<mat-icon>arrow_back</mat-icon>\n</a>\n\n", styles: [".padded-button{margin-left:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BackButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-back-button', imports: [MatIconModule, MatButtonModule], template: "<a mat-icon-button class=\"padded-button\"\n    (click)=\"goBack()\"\n    (keydown)=\"goBack()\"\n    tabindex=\"0\"\n    role=\"button\">\n<mat-icon>arrow_back</mat-icon>\n</a>\n\n", styles: [".padded-button{margin-left:5px}\n"] }]
+        }] });
+
+class DetailHeaderComponent {
+    id = input(0, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
+    route = input("", ...(ngDevMode ? [{ debugName: "route" }] : []));
+    canEdit = input(false, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canDelete = input(false, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    deleteClicked = output();
+    fullRoute = computed(() => "/" + this.route() + "/edit/", ...(ngDevMode ? [{ debugName: "fullRoute" }] : []));
+    deleteClick() {
+        this.deleteClicked.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DetailHeaderComponent, isStandalone: true, selector: "lib-detail-header", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClicked: "deleteClicked" }, ngImport: i0, template: "<div class=\"container\">\n\n  <h1 class=\"header\">{{text()}}</h1>\n\n  <div class=\"controls\">\n  @if(canEdit()){\n  <a mat-mini-fab class=\"control-button\" matTooltip=\"Edit the item\" title=\"Click to edit this item\" aria-label=\"Click to edit this item\"\n    [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n  </a>\n  }\n\n  @if(canDelete()){\n  <button mat-mini-fab class=\"control-button\" (click)=\"deleteClick()\" matTooltip=\"Delete the item\" title=\"Click to delete this item\"\n    aria-label=\"Click to delete this item\">\n    <mat-icon>delete</mat-icon></button>\n  }\n  </div>\n\n</div>", styles: [".container{width:100%;max-width:500px;padding:5px}.header{width:100%;padding:5px;margin:0}.controls{display:flex;flex-direction:row;align-content:center;justify-content:center}.control-button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { 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: 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: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DetailHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-detail-header', imports: [RouterModule,
+                        MatButtonModule,
+                        MatIconModule, MatTooltipModule], template: "<div class=\"container\">\n\n  <h1 class=\"header\">{{text()}}</h1>\n\n  <div class=\"controls\">\n  @if(canEdit()){\n  <a mat-mini-fab class=\"control-button\" matTooltip=\"Edit the item\" title=\"Click to edit this item\" aria-label=\"Click to edit this item\"\n    [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n  </a>\n  }\n\n  @if(canDelete()){\n  <button mat-mini-fab class=\"control-button\" (click)=\"deleteClick()\" matTooltip=\"Delete the item\" title=\"Click to delete this item\"\n    aria-label=\"Click to delete this item\">\n    <mat-icon>delete</mat-icon></button>\n  }\n  </div>\n\n</div>", styles: [".container{width:100%;max-width:500px;padding:5px}.header{width:100%;padding:5px;margin:0}.controls{display:flex;flex-direction:row;align-content:center;justify-content:center}.control-button{padding:5px;margin:5px}\n"] }]
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }], deleteClicked: [{ type: i0.Output, args: ["deleteClicked"] }] } });
+
+class SearchBarComponent {
+    itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
+    sortFields = input([], ...(ngDevMode ? [{ debugName: "sortFields" }] : []));
+    sortAscending = signal(true, ...(ngDevMode ? [{ debugName: "sortAscending" }] : []));
+    searchChanged = output();
+    searchFilter = new FormControl();
+    ngAfterViewInit() {
+        this.searchFilter.valueChanges.pipe(debounceTime(150), distinctUntilChanged(), tap(() => {
+            this.searchEntered();
+        })).subscribe();
+    }
+    clearSearch() {
+        this.searchFilter.setValue("");
+    }
+    searchEntered() {
+        this.searchChanged.emit(this.searchFilter.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 }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"container\">\n    <mat-form-field class=\"search\" style=\"margin: 10px;width:100%\">\n        <mat-label>Search</mat-label>\n        <input matInput [formControl]=\"searchFilter\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchFilter.value){\n        <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n        @else(){\n        <button matSuffix mat-icon-button aria-label=\"Search\">\n            <mat-icon>search</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n\n    @if(sortFields().length > 0){\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select>\n            @for(field of sortFields(); track field)\n            {\n            <mat-option>{{field}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\">\n        <mat-icon>sort</mat-icon>\n    </button>\n    }\n</div>", styles: [".container{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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,
+            args: [{ selector: 'lib-search-bar', imports: [ReactiveFormsModule,
+                        MatInputModule,
+                        MatTooltipModule,
+                        MatButtonModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        TitleCasePipe], template: "<div class=\"container\">\n    <mat-form-field class=\"search\" style=\"margin: 10px;width:100%\">\n        <mat-label>Search</mat-label>\n        <input matInput [formControl]=\"searchFilter\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchFilter.value){\n        <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n        @else(){\n        <button matSuffix mat-icon-button aria-label=\"Search\">\n            <mat-icon>search</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n\n    @if(sortFields().length > 0){\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select>\n            @for(field of sortFields(); track field)\n            {\n            <mat-option>{{field}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\">\n        <mat-icon>sort</mat-icon>\n    </button>\n    }\n</div>", styles: [".container{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}\n"] }]
+        }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", required: false }] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }] } });
+
 class FileUploadComponent {
     control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
     onFileUpload(event) {
@@ -1034,7 +1175,7 @@ class FileUploadComponent {
         this.control().setValue(record);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FileUploadComponent, isStandalone: true, selector: "lib-file-upload", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n  @if (control().value.local || control().value.file)\n  {\n  <div class=\"image_holder\">\n    <p>Update {{control().value.display_name | titlecase}}</p>\n    <div style=\"display:flex; flex-direction:row; justify-content: center; align-content: center;\">\n\n      @if(control().value.local){\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.local}}\" style=\"height:120px;\">\n      }\n      @else {\n        <div>{{control().value.file?.name}}</div>\n      }\n\n    <button mat-mini-fab (click)=\"onClearLocal()\" matTooltip=\"Clear\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    </div>\n\n  </div>\n  }\n  @else\n  {\n  @if (control().value.remote){\n  <div class=\"image_holder\">\n    <p>Update {{control().value.display_name | titlecase}}</p>\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" style=\"height:120px;\">\n  </div>\n  }\n  @else {\n  <div>\n    <span>Upload a {{control().value.display_name}}</span>\n  </div>\n  }\n  <div class=\"button-row\">\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Attach\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>attachment</mat-icon>\n    </button>\n    <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" />\n  </div>\n  }\n</div>", styles: [".container{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FileUploadComponent, isStandalone: true, selector: "lib-file-upload", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n  @if (control().value.local || control().value.file)\n  {\n  <div class=\"image_holder\">\n    <p>Update {{control().value.display_name | titlecase}}</p>\n    <div style=\"display:flex; flex-direction:row; justify-content: center; align-content: center;\">\n\n      @if(control().value.local){\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.local}}\" style=\"height:120px;\">\n      }\n      @else {\n        <div>{{control().value.file?.name}}</div>\n      }\n\n    <button mat-mini-fab (click)=\"onClearLocal()\" matTooltip=\"Clear\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>clear</mat-icon>\n    </button>\n    </div>\n\n  </div>\n  }\n  @else\n  {\n  @if (control().value.remote){\n  <div class=\"image_holder\">\n    <p>Update {{control().value.display_name | titlecase}}</p>\n    <img alt=\"{{control().value.display_name}}\" src=\"{{control().value.remote}}\" style=\"height:120px;\">\n  </div>\n  }\n  @else {\n  <div>\n    <span>Upload a {{control().value.display_name}}</span>\n  </div>\n  }\n  <div class=\"button-row\">\n    <button mat-mini-fab (click)=\"fileInput.click()\" matTooltip=\"Attach\" type=\"button\" style=\"margin:10px\">\n      <mat-icon>attachment</mat-icon>\n    </button>\n    <input hidden type=\"file\" #fileInput (change)=\"onFileUpload($event)\" />\n  </div>\n  }\n</div>", styles: [".container{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -1058,7 +1199,7 @@ class FormFieldDetailComponent {
         return this.form().get(this.key);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldDetailComponent, isStandalone: true, selector: "lib-form-field-detail", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  <p>{{field().description}}</p>\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\">\n           {{ field().label }}\n         </mat-checkbox>\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"trl_stage\">\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Form\n          </a>\n        }\n        <h4>Upload Completed Form</h4>\n        <lib-file-upload [control]=\"control\"></lib-file-upload>\n        </div>\n      }    \n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.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$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldDetailComponent, isStandalone: true, selector: "lib-form-field-detail", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div [formGroup]=\"form()\">\n  <h3>{{ field().label }}</h3>\n  <p>{{field().description}}</p>\n  <div>\n    @switch (field().field_type) {\n      @case ('TEXT') {\n    <mat-form-field class=\"form-field-wide\">\n         <mat-label [attr.for]=\"key\">{{ field().label }}</mat-label>\n         <textarea matInput\n                   [placeholder]=\"field().default\"\n                   type=\"text\"\n                   style=\"min-height:150px\"\n                   [formControlName]=\"key\"\n                   [name]=\"key\"></textarea>\n    </mat-form-field>\n      }\n      @case('BOOLEAN')\n      {\n        <mat-checkbox\n           class=\"form-field\"\n           [name]=\"key\"\n           [formControlName]=\"key\">\n           {{ field().label }}\n         </mat-checkbox>\n      }\n      @case ('INTEGER') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"number\"\n                 max=\"10\" min=\"1\"\n                 [formControlName]=\"key\"\n                 name=\"trl_stage\">\n        </mat-form-field>\n      }\n      @case ('CHAR') {\n        <mat-form-field class=\"form-field\">\n         <mat-label>{{ field().label }}</mat-label>\n          <input matInput\n                 [placeholder]=\"field().default\"\n                 type=\"text\"\n                 [formControlName]=\"key\"\n                 name=\"key\">\n        </mat-form-field>\n      }\n      @case('FILE') {\n        <div class=\"form-field\">\n        @if(field().template)\n        {\n          <a href=\"{{field().template}}\" matFab extended aria-label=\"Download template\">\n            <mat-icon>download</mat-icon>\n            Download Form\n          </a>\n        }\n        <h4>Upload Completed Form</h4>\n        <lib-file-upload [control]=\"control\"></lib-file-upload>\n        </div>\n      }    \n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: 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: MatCheckboxModule }, { kind: "component", type: i5.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldDetailComponent, decorators: [{
             type: Component,
@@ -1093,7 +1234,7 @@ class FormFieldEditComponent {
         this.cancelled.emit();
     }
     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 }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled" }, ngImport: i0, template: "<form class=\"form-card\" id=\"app-field-form\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n            required name=\"description\"></textarea>\n    </mat-form-field>\n\n    <mat-checkbox class=\"example-margin\" formControlName=\"required\">Required?</mat-checkbox>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\"></lib-file-upload>\n    }\n}\n    <div>\n        @if(!editMode()) {\n        <button mat-fab class=\"form-action-button\" type=\"submit\" matTooltip=\"Add Field\"\n            [disabled]=\"!form().valid\">\n            <mat-icon>add</mat-icon>\n        </button>\n        <button mat-fab class=\"form-action-button\" (click)=\"cancel()\" type=\"button\" matTooltip=\"Cancel\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$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: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: FormFieldEditComponent, isStandalone: true, selector: "lib-form-field-edit", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled" }, ngImport: i0, template: "<form class=\"form-card\" id=\"app-field-form\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n            required name=\"description\"></textarea>\n    </mat-form-field>\n\n    <mat-checkbox class=\"example-margin\" formControlName=\"required\">Required?</mat-checkbox>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\"></lib-file-upload>\n    }\n}\n    <div>\n        @if(!editMode()) {\n        <button mat-fab class=\"form-action-button\" type=\"submit\" matTooltip=\"Add Field\"\n            [disabled]=\"!form().valid\">\n            <mat-icon>add</mat-icon>\n        </button>\n        <button mat-fab class=\"form-action-button\" (click)=\"cancel()\" type=\"button\" matTooltip=\"Cancel\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[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: RouterModule }, { 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: MatCardModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormFieldEditComponent, decorators: [{
             type: Component,
@@ -1111,22 +1252,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         FileUploadComponent], template: "<form class=\"form-card\" id=\"app-field-form\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n    <mat-form-field class=\"form-field\">\n        <mat-label>Label</mat-label>\n        <input matInput placeholder=\"Label\" type=\"text\" formControlName=\"label\" required name=\"label\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Key</mat-label>\n        <input matInput placeholder=\"Key\" type=\"text\" formControlName=\"key\" required name=\"key\">\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label>Description</mat-label>\n        <textarea matInput placeholder=\"Description\" style=\"min-height:150px\" type=\"text\" formControlName=\"description\"\n            required name=\"description\"></textarea>\n    </mat-form-field>\n\n    <mat-checkbox class=\"example-margin\" formControlName=\"required\">Required?</mat-checkbox>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label>Type</mat-label>\n        <mat-select formControlName=\"field_type\" name=\"field_type\" required>\n            @for(type of availableTypes; track type.value){\n            <mat-option [value]=\"type.value\">{{type.display_name}}\n            </mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    @switch (fieldType) {\n    @case(FieldType.Boolean)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <mat-select formControlName=\"default\" name=\"default\" required>\n            <mat-option [value]=\"'true'\">True</mat-option>\n            <mat-option [value]=\"'false'\">False</mat-option>\n        </mat-select>\n    </mat-form-field>\n    }\n    @case(FieldType.Char)\n    {\n    <mat-form-field class=\"form-field\">\n        <mat-label>Default</mat-label>\n        <input matInput placeholder=\"Default\" type=\"text\" formControlName=\"default\" name=\"default\">\n    </mat-form-field>\n    }\n    @case(FieldType.Text || FieldType.RichText)\n    {\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label>Default</mat-label>\n        <textarea matInput placeholder=\"Default\" style=\"min-height:150px\" type=\"text\" formControlName=\"default\"\n            name=\"default\"></textarea>\n    </mat-form-field>\n    }\n    @case(FieldType.File)\n    {\n    <lib-file-upload [control]=\"templateControl\"></lib-file-upload>\n    }\n}\n    <div>\n        @if(!editMode()) {\n        <button mat-fab class=\"form-action-button\" type=\"submit\" matTooltip=\"Add Field\"\n            [disabled]=\"!form().valid\">\n            <mat-icon>add</mat-icon>\n        </button>\n        <button mat-fab class=\"form-action-button\" (click)=\"cancel()\" type=\"button\" matTooltip=\"Cancel\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n    </div>\n</form>" }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
 
-class DynamicFormComponent {
-    formService = inject(FormService);
-    inputForm = input.required(...(ngDevMode ? [{ debugName: "inputForm" }] : []));
-    form = computed(() => this.formService.toFormGroup(this.inputForm()), ...(ngDevMode ? [{ debugName: "form" }] : []));
-    payLoad = '';
-    onSubmit() {
-        this.payLoad = JSON.stringify(this.form().getRawValue());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DynamicFormComponent, isStandalone: true, selector: "lib-dynamic-form", inputs: { inputForm: { classPropertyName: "inputForm", publicName: "inputForm", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div>\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form()\">\n\n    @for (group of inputForm().groups; track group.order) {\n\n      @if(group.label)\n      {\n        <h3>{{group.label}}</h3>\n      }\n\n      @if(group.description){\n        <p>{{group.description}}</p>\n      }\n\n      @for (field of group.fields; track field.order) {\n      <div class=\"form-row\">\n        <lib-form-field-detail [field]=\"field\" [form]=\"form()\" />\n      </div>\n      }\n    }\n  </form>\n</div>", styles: [""], dependencies: [{ kind: "component", type: FormFieldDetailComponent, selector: "lib-form-field-detail", inputs: ["field", "form"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-dynamic-form', imports: [FormFieldDetailComponent, ReactiveFormsModule, FormFieldDetailComponent], template: "<div>\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form()\">\n\n    @for (group of inputForm().groups; track group.order) {\n\n      @if(group.label)\n      {\n        <h3>{{group.label}}</h3>\n      }\n\n      @if(group.description){\n        <p>{{group.description}}</p>\n      }\n\n      @for (field of group.fields; track field.order) {\n      <div class=\"form-row\">\n        <lib-form-field-detail [field]=\"field\" [form]=\"form()\" />\n      </div>\n      }\n    }\n  </form>\n</div>" }]
-        }], propDecorators: { inputForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputForm", required: true }] }] } });
-
 class FormFieldForm {
     static getBaseTemplate() {
         return { name: "template", display_name: "template", file_type: "", remote: "", local: "", file: null };
@@ -1209,6 +1334,16 @@ class FormGroupForm {
             id: fb.control(-1)
         });
     }
+    static getFileRecords(form) {
+        const records = [];
+        this.getFields(form).controls.map(f => {
+            const f_typed = f;
+            if (f_typed.value.field_type == "FILE" && f_typed.value.template) {
+                records.push(f_typed.value.template);
+            }
+        });
+        return records;
+    }
     static createField(form, field) {
         const fields = this.getFields(form);
         field.patchValue({ order: fields.controls.length });
@@ -1285,123 +1420,6 @@ class FormGroupForm {
     }
 }
 
-class FormGroupEditComponent {
-    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
-    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
-    submitted = output();
-    cancelled = output();
-    deleted = output();
-    fb = inject(FormBuilder);
-    fieldForm = null;
-    get fields() {
-        return this.form().get('fields');
-    }
-    onFieldDelete(id) {
-        FormGroupForm.deleteField(this.form(), id);
-    }
-    onFieldOrderUp(id) {
-        FormGroupForm.reorderField(this.form(), id, id + 1);
-    }
-    onFieldOrderDown(id) {
-        FormGroupForm.reorderField(this.form(), id, id - 1);
-    }
-    addField() {
-        this.fieldForm = FormFieldForm.createForm(this.fb);
-    }
-    cancelField() {
-        this.fieldForm = null;
-    }
-    submitField() {
-        if (this.fieldForm) {
-            FormGroupForm.createField(this.form(), this.fieldForm);
-        }
-        this.fieldForm = null;
-    }
-    onDelete() {
-        this.deleted.emit();
-    }
-    cancel() {
-        this.cancelled.emit();
-    }
-    submit() {
-        this.submitted.emit();
-    }
-    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 }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled", deleted: "deleted" }, ngImport: i0, template: "<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n\n    <mat-form-field class=\"form-field\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:150px\" formControlName=\"description\"\n        name=\"description\"></textarea>\n    </mat-form-field>\n\n    <button matFab type=\"button\" style=\"margin:10px\" color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n        (click)=\"onDelete()\">\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <h3>Fields</h3>\n    @if(fieldForm){\n        <lib-form-field-edit style=\"min-width:450px\" [form]=\"fieldForm\" (submitted)=\"submitField()\" (cancelled)=\"cancelField()\"></lib-form-field-edit>\n    }\n    @else {\n\n    <button mat-fab class=\"form-action-button\" (click)=\"addField()\" matTooltip=\"Add a Field\" type=\"button\">\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <mat-accordion style=\"min-width:450px\">\n    @for(field of fields.controls; track field; let idx=$index)\n    {\n        <mat-expansion-panel style=\"width:100%\">\n        <mat-expansion-panel-header class=\"expansion-panel\">\n            <mat-panel-title>{{field.value.label}}</mat-panel-title>\n            <div class=\"expansion-panel-controls\">\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Delete the Field\" aria-label=\"Delete an item\"\n                (click)=\"onFieldDelete(idx)\">\n                <mat-icon>delete\n                </mat-icon>\n            </button>\n            @if(idx>0){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n                (click)=\"onFieldOrderUp(idx)\">\n                <mat-icon>arrow_upward\n                </mat-icon>\n            </button>\n            }\n            @if(idx<fields.controls.length -1){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n                (click)=\"onFieldOrderDown(idx)\">\n                <mat-icon>arrow_downward\n                </mat-icon>\n            </button>\n            }\n            </div>\n        </mat-expansion-panel-header>\n        <lib-form-field-edit [form]=\"field\" [editMode]=\"true\"></lib-form-field-edit>\n        </mat-expansion-panel>\n    }\n    </mat-accordion>\n    }\n\n    @if(!editMode()){\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"submit\" matTooltip=\"Save Group\" [disabled]=\"!form().valid\">\n    <mat-icon>save</mat-icon>\n    </button>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Cancel\" (click)=\"cancel()\">\n    <mat-icon>cancel</mat-icon>\n    </button>        \n    </div>\n}\n<form>", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormFieldEditComponent, selector: "lib-form-field-edit", inputs: ["form", "editMode"], outputs: ["submitted", "cancelled"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormGroupEditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-form-group-edit', imports: [MatExpansionModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatTooltipModule,
-                        ReactiveFormsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        FormFieldEditComponent], template: "<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n\n    <mat-form-field class=\"form-field\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:150px\" formControlName=\"description\"\n        name=\"description\"></textarea>\n    </mat-form-field>\n\n    <button matFab type=\"button\" style=\"margin:10px\" color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n        (click)=\"onDelete()\">\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <h3>Fields</h3>\n    @if(fieldForm){\n        <lib-form-field-edit style=\"min-width:450px\" [form]=\"fieldForm\" (submitted)=\"submitField()\" (cancelled)=\"cancelField()\"></lib-form-field-edit>\n    }\n    @else {\n\n    <button mat-fab class=\"form-action-button\" (click)=\"addField()\" matTooltip=\"Add a Field\" type=\"button\">\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <mat-accordion style=\"min-width:450px\">\n    @for(field of fields.controls; track field; let idx=$index)\n    {\n        <mat-expansion-panel style=\"width:100%\">\n        <mat-expansion-panel-header class=\"expansion-panel\">\n            <mat-panel-title>{{field.value.label}}</mat-panel-title>\n            <div class=\"expansion-panel-controls\">\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Delete the Field\" aria-label=\"Delete an item\"\n                (click)=\"onFieldDelete(idx)\">\n                <mat-icon>delete\n                </mat-icon>\n            </button>\n            @if(idx>0){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n                (click)=\"onFieldOrderUp(idx)\">\n                <mat-icon>arrow_upward\n                </mat-icon>\n            </button>\n            }\n            @if(idx<fields.controls.length -1){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n                (click)=\"onFieldOrderDown(idx)\">\n                <mat-icon>arrow_downward\n                </mat-icon>\n            </button>\n            }\n            </div>\n        </mat-expansion-panel-header>\n        <lib-form-field-edit [form]=\"field\" [editMode]=\"true\"></lib-form-field-edit>\n        </mat-expansion-panel>\n    }\n    </mat-accordion>\n    }\n\n    @if(!editMode()){\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"submit\" matTooltip=\"Save Group\" [disabled]=\"!form().valid\">\n    <mat-icon>save</mat-icon>\n    </button>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Cancel\" (click)=\"cancel()\">\n    <mat-icon>cancel</mat-icon>\n    </button>        \n    </div>\n}\n<form>", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"] }]
-        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], deleted: [{ type: i0.Output, args: ["deleted"] }] } });
-
-class DynamicFormBuilderComponent {
-    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
-    handleSubmit = input(false, ...(ngDevMode ? [{ debugName: "handleSubmit" }] : []));
-    submitted = output();
-    dirty = signal(false, ...(ngDevMode ? [{ debugName: "dirty" }] : []));
-    fb = inject(FormBuilder);
-    groupForm = null;
-    addGroup() {
-        this.groupForm = FormGroupForm.createForm(this.fb);
-    }
-    createGroup() {
-        if (this.groupForm) {
-            this.form().createGroup(this.groupForm);
-        }
-        this.groupForm = null;
-    }
-    cancelGroup() {
-        this.groupForm = null;
-    }
-    onSubmit() {
-        this.submitted.emit();
-        this.dirty.set(false);
-    }
-    deleteGroup(id) {
-        this.form().deleteGroup(id);
-        this.dirty.set(true);
-    }
-    onOrderUp(id) {
-        this.form().orderUp(id);
-        this.dirty.set(true);
-    }
-    onOrderDown(id) {
-        this.form().orderDown(id);
-        this.dirty.set(true);
-    }
-    getLabel(control) {
-        const form = control;
-        if (form.value.label) {
-            return form.value.label;
-        }
-        else {
-            return "Group " + form.value.order.toString();
-        }
-    }
-    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: "<h2>Groups</h2>\n\n\n@if(groupForm)\n{\n<lib-form-group-edit [form]=\"groupForm\" (cancelled)=\"cancelGroup()\" (submitted)=\"createGroup()\"></lib-form-group-edit>\n}\n@else{\n<button mat-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n  <mat-icon>add</mat-icon>\n</button>\n\n@if (form().groups.length > 0){\n\n<mat-accordion style=\"width:100%\">\n\n  @for(group of form().groups.controls; track group; let group_idx=$index)\n  {\n  <mat-expansion-panel style=\"width:100%\">\n    <mat-expansion-panel-header class=\"expansion-panel\">\n      <mat-panel-title>{{getLabel(group)}}</mat-panel-title>\n      <div class=\"expansion-panel-controls\">\n        @if(group_idx>0){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n          (click)=\"onOrderUp(group_idx)\">\n          <mat-icon>arrow_upward\n          </mat-icon>\n        </button>\n        }\n        @if(group_idx < form().groups.controls.length - 1){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n          (click)=\"onOrderDown(group_idx)\">\n          <mat-icon>arrow_downward\n          </mat-icon>\n        </button>\n        }\n      </div>\n    </mat-expansion-panel-header>\n    <lib-form-group-edit [form]=\"group\" [editMode]=\"true\" (deleted)=\"deleteGroup(group_idx)\"></lib-form-group-edit>\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n\n}\n\n@if(handleSubmit() && dirty())\n{\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Save Changes\" (click)=\"onSubmit()\">\n    <mat-icon>save</mat-icon>\n    </button>\n    </div>\n}\n}", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: FormGroupEditComponent, selector: "lib-form-group-edit", inputs: ["form", "editMode"], outputs: ["submitted", "cancelled", "deleted"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormBuilderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-dynamic-form-builder', imports: [
-                        MatIconModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        ReactiveFormsModule,
-                        MatButtonModule,
-                        MatTooltipModule,
-                        MatExpansionModule,
-                        FormGroupEditComponent
-                    ], template: "<h2>Groups</h2>\n\n\n@if(groupForm)\n{\n<lib-form-group-edit [form]=\"groupForm\" (cancelled)=\"cancelGroup()\" (submitted)=\"createGroup()\"></lib-form-group-edit>\n}\n@else{\n<button mat-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n  <mat-icon>add</mat-icon>\n</button>\n\n@if (form().groups.length > 0){\n\n<mat-accordion style=\"width:100%\">\n\n  @for(group of form().groups.controls; track group; let group_idx=$index)\n  {\n  <mat-expansion-panel style=\"width:100%\">\n    <mat-expansion-panel-header class=\"expansion-panel\">\n      <mat-panel-title>{{getLabel(group)}}</mat-panel-title>\n      <div class=\"expansion-panel-controls\">\n        @if(group_idx>0){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n          (click)=\"onOrderUp(group_idx)\">\n          <mat-icon>arrow_upward\n          </mat-icon>\n        </button>\n        }\n        @if(group_idx < form().groups.controls.length - 1){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n          (click)=\"onOrderDown(group_idx)\">\n          <mat-icon>arrow_downward\n          </mat-icon>\n        </button>\n        }\n      </div>\n    </mat-expansion-panel-header>\n    <lib-form-group-edit [form]=\"group\" [editMode]=\"true\" (deleted)=\"deleteGroup(group_idx)\"></lib-form-group-edit>\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n\n}\n\n@if(handleSubmit() && dirty())\n{\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Save Changes\" (click)=\"onSubmit()\">\n    <mat-icon>save</mat-icon>\n    </button>\n    </div>\n}\n}", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"] }]
-        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], handleSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleSubmit", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
-
 class DynamicFormForm {
     fb = inject(FormBuilder);
     form;
@@ -1413,6 +1431,16 @@ class DynamicFormForm {
     get groups() {
         return this.form.get('groups');
     }
+    getFileFields(form) {
+        const ids = getFileFieldIds(form);
+        const records = [];
+        this.groups.controls.map(g => records.push(...FormGroupForm.getFileRecords(g)));
+        const fields = [];
+        for (let i = 0; i < ids.length; i++) {
+            fields.push({ id: ids[i], file: records[i] });
+        }
+        return fields;
+    }
     orderUp(id) {
         this.reorder(id, id - 1);
     }
@@ -1548,114 +1576,148 @@ class PopulatedFormForm {
     }
 }
 
-class PopulatedFormComponent {
-    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PopulatedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PopulatedFormComponent, isStandalone: true, selector: "lib-populated-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for(value of form().values; track value.id)\n{\n@if(value.field.field_type === \"TEXT\" || value.field.field_type === \"RICH_TEXT\")\n{\n    <div class=\"item-field\">\n        <h3 style=\"margin-right: 10px\">{{value.field.label}}</h3>\n        <p>{{value.value}}</p>\n    </div>\n}\n@else if(value.field.field_type === \"CHAR\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <span>{{value.value}}</span>\n    </div>\n}\n@else if(value.field.field_type === \"BOOLEAN\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        @if(value.value === \"true\")\n        {\n            <mat-icon>check</mat-icon>\n        }\n        @else {\n            <mat-icon>close_small</mat-icon>\n        }\n    </div>\n}\n@else if(value.field.field_type === \"FILE\" && value.asset)\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <a matFab href=\"value.asset\">\n            <mat-icon>download</mat-icon>\n        </a>\n    </div>\n}\n}", styles: [""], 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$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }] });
+class DynamicFormComponent {
+    formService = inject(FormService);
+    inputForm = input.required(...(ngDevMode ? [{ debugName: "inputForm" }] : []));
+    form = computed(() => this.formService.toFormGroup(this.inputForm()), ...(ngDevMode ? [{ debugName: "form" }] : []));
+    payLoad = '';
+    onSubmit() {
+        this.payLoad = JSON.stringify(this.form().getRawValue());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DynamicFormComponent, isStandalone: true, selector: "lib-dynamic-form", inputs: { inputForm: { classPropertyName: "inputForm", publicName: "inputForm", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div>\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form()\">\n\n    @for (group of inputForm().groups; track group.order) {\n\n      @if(group.label)\n      {\n        <h3>{{group.label}}</h3>\n      }\n\n      @if(group.description){\n        <p>{{group.description}}</p>\n      }\n\n      @for (field of group.fields; track field.order) {\n      <div class=\"form-row\">\n        <lib-form-field-detail [field]=\"field\" [form]=\"form()\" />\n      </div>\n      }\n    }\n  </form>\n</div>", styles: [""], dependencies: [{ kind: "component", type: FormFieldDetailComponent, selector: "lib-form-field-detail", inputs: ["field", "form"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PopulatedFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-populated-form', imports: [MatIconModule, MatButtonModule], template: "@for(value of form().values; track value.id)\n{\n@if(value.field.field_type === \"TEXT\" || value.field.field_type === \"RICH_TEXT\")\n{\n    <div class=\"item-field\">\n        <h3 style=\"margin-right: 10px\">{{value.field.label}}</h3>\n        <p>{{value.value}}</p>\n    </div>\n}\n@else if(value.field.field_type === \"CHAR\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <span>{{value.value}}</span>\n    </div>\n}\n@else if(value.field.field_type === \"BOOLEAN\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        @if(value.value === \"true\")\n        {\n            <mat-icon>check</mat-icon>\n        }\n        @else {\n            <mat-icon>close_small</mat-icon>\n        }\n    </div>\n}\n@else if(value.field.field_type === \"FILE\" && value.asset)\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <a matFab href=\"value.asset\">\n            <mat-icon>download</mat-icon>\n        </a>\n    </div>\n}\n}" }]
-        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
+            args: [{ selector: 'lib-dynamic-form', imports: [FormFieldDetailComponent, ReactiveFormsModule, FormFieldDetailComponent], template: "<div>\n  <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form()\">\n\n    @for (group of inputForm().groups; track group.order) {\n\n      @if(group.label)\n      {\n        <h3>{{group.label}}</h3>\n      }\n\n      @if(group.description){\n        <p>{{group.description}}</p>\n      }\n\n      @for (field of group.fields; track field.order) {\n      <div class=\"form-row\">\n        <lib-form-field-detail [field]=\"field\" [form]=\"form()\" />\n      </div>\n      }\n    }\n  </form>\n</div>" }]
+        }], propDecorators: { inputForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputForm", required: true }] }] } });
 
-class SelectTableComponent {
-    itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
-    selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
-    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
-    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    itemAdded = output();
-    itemRemoved = output();
-    searchChanged = output();
-    columnNames = computed(() => { const names = this.columns().map(c => c.name); names.push("remove"); return names; }, ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
-    searchControl = new FormControl('');
-    table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "table" }] : []));
-    ngOnInit() {
-        this.searchControl.valueChanges.subscribe(value => this.searchChanged.emit(value));
+class FormGroupEditComponent {
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    editMode = input(false, ...(ngDevMode ? [{ debugName: "editMode" }] : []));
+    submitted = output();
+    cancelled = output();
+    deleted = output();
+    fb = inject(FormBuilder);
+    fieldForm = null;
+    get fields() {
+        return this.form().get('fields');
     }
-    remove(id) {
-        this.itemRemoved.emit(id);
-        this.table()?.renderRows();
+    onFieldDelete(id) {
+        FormGroupForm.deleteField(this.form(), id);
     }
-    add() {
-        if (this.searchControl.value) {
-            this.itemAdded.emit(this.searchControl.value);
+    onFieldOrderUp(id) {
+        FormGroupForm.reorderField(this.form(), id, id + 1);
+    }
+    onFieldOrderDown(id) {
+        FormGroupForm.reorderField(this.form(), id, id - 1);
+    }
+    addField() {
+        this.fieldForm = FormFieldForm.createForm(this.fb);
+    }
+    cancelField() {
+        this.fieldForm = null;
+    }
+    submitField() {
+        if (this.fieldForm) {
+            FormGroupForm.createField(this.form(), this.fieldForm);
         }
-        this.searchControl.reset();
-        this.table()?.renderRows();
+        this.fieldForm = null;
     }
-    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 } }, 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>\n    <mat-form-field>\n      <mat-label>Add {{itemType()}}</mat-label>\n      <input \n          type=\"text\"\n           aria-label=\"Selected item\"\n           matInput\n           [formControl]=\"searchControl\" \n           [matAutocomplete]=\"auto\">\n\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        @for(item of options(); track item.item.id){\n        <mat-option [value]=\"item.title\">{{item.title}}\n        </mat-option>\n        }\n    </mat-autocomplete>\n    </mat-form-field>\n\n    <button mat-mini-fab type=\"button\" class=\"form_action_button\" (click)=\"add()\">\n      <mat-icon>add\n      </mat-icon>\n    </button>\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                    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,.table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.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"] }] });
+    onDelete() {
+        this.deleted.emit();
+    }
+    cancel() {
+        this.cancelled.emit();
+    }
+    submit() {
+        this.submitted.emit();
+    }
+    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 }, editMode: { classPropertyName: "editMode", publicName: "editMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled", deleted: "deleted" }, ngImport: i0, template: "<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n\n    <mat-form-field class=\"form-field\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:150px\" formControlName=\"description\"\n        name=\"description\"></textarea>\n    </mat-form-field>\n\n    <button matFab type=\"button\" style=\"margin:10px\" color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n        (click)=\"onDelete()\">\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <h3>Fields</h3>\n    @if(fieldForm){\n        <lib-form-field-edit style=\"min-width:450px\" [form]=\"fieldForm\" (submitted)=\"submitField()\" (cancelled)=\"cancelField()\"></lib-form-field-edit>\n    }\n    @else {\n\n    <button mat-fab class=\"form-action-button\" (click)=\"addField()\" matTooltip=\"Add a Field\" type=\"button\">\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <mat-accordion style=\"min-width:450px\">\n    @for(field of fields.controls; track field; let idx=$index)\n    {\n        <mat-expansion-panel style=\"width:100%\">\n        <mat-expansion-panel-header class=\"expansion-panel\">\n            <mat-panel-title>{{field.value.label}}</mat-panel-title>\n            <div class=\"expansion-panel-controls\">\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Delete the Field\" aria-label=\"Delete an item\"\n                (click)=\"onFieldDelete(idx)\">\n                <mat-icon>delete\n                </mat-icon>\n            </button>\n            @if(idx>0){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n                (click)=\"onFieldOrderUp(idx)\">\n                <mat-icon>arrow_upward\n                </mat-icon>\n            </button>\n            }\n            @if(idx<fields.controls.length -1){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n                (click)=\"onFieldOrderDown(idx)\">\n                <mat-icon>arrow_downward\n                </mat-icon>\n            </button>\n            }\n            </div>\n        </mat-expansion-panel-header>\n        <lib-form-field-edit [form]=\"field\" [editMode]=\"true\"></lib-form-field-edit>\n        </mat-expansion-panel>\n    }\n    </mat-accordion>\n    }\n\n    @if(!editMode()){\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"submit\" matTooltip=\"Save Group\" [disabled]=\"!form().valid\">\n    <mat-icon>save</mat-icon>\n    </button>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Cancel\" (click)=\"cancel()\">\n    <mat-icon>cancel</mat-icon>\n    </button>        \n    </div>\n}\n<form>", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: FormFieldEditComponent, selector: "lib-form-field-edit", inputs: ["form", "editMode"], outputs: ["submitted", "cancelled"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SelectTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: FormGroupEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-select-table', imports: [MatTableModule,
-                        MatFormFieldModule,
-                        MatButtonModule,
-                        MatSelectModule,
+            args: [{ selector: 'lib-form-group-edit', imports: [MatExpansionModule,
                         MatIconModule,
-                        MatAutocompleteModule,
+                        MatButtonModule,
+                        MatTooltipModule,
                         ReactiveFormsModule,
-                        MatInputModule], template: "<div class='select-container'>\n  <div>\n    <mat-form-field>\n      <mat-label>Add {{itemType()}}</mat-label>\n      <input \n          type=\"text\"\n           aria-label=\"Selected item\"\n           matInput\n           [formControl]=\"searchControl\" \n           [matAutocomplete]=\"auto\">\n\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        @for(item of options(); track item.item.id){\n        <mat-option [value]=\"item.title\">{{item.title}}\n        </mat-option>\n        }\n    </mat-autocomplete>\n    </mat-form-field>\n\n    <button mat-mini-fab type=\"button\" class=\"form_action_button\" (click)=\"add()\">\n      <mat-icon>add\n      </mat-icon>\n    </button>\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                    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,.table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\n"] }]
-        }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], itemAdded: [{ type: i0.Output, args: ["itemAdded"] }], itemRemoved: [{ type: i0.Output, args: ["itemRemoved"] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }], table: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatTable), { isSignal: true }] }] } });
-
-const USER_TABLE_FULL = [
-    { name: 'first_name', title: 'First Name', element_type: 'string' },
-    { name: 'last_name', title: 'Surname', element_type: 'string' },
-    { name: 'username', title: 'Username', element_type: 'string' },
-    { name: 'email', title: 'Email', element_type: 'email' }
-];
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormFieldEditComponent], template: "<form class=\"form-card\" style=\"width:100%\" [formGroup]=\"form()\" (ngSubmit)=\"submit()\">\n\n    <mat-form-field class=\"form-field\">\n    <mat-label for=\"label\">Label</mat-label>\n    <input matInput placeholder=\"\" type=\"text\" formControlName=\"label\"\n        name=\"label\"/>\n    </mat-form-field>      \n\n    <mat-form-field class=\"form-field-wide\">\n    <mat-label for=\"description\">Description</mat-label>\n    <textarea matInput placeholder=\"\" type=\"text\" style=\"min-height:150px\" formControlName=\"description\"\n        name=\"description\"></textarea>\n    </mat-form-field>\n\n    <button matFab type=\"button\" style=\"margin:10px\" color=\"primary\" matTooltip=\"Delete the Group\" aria-label=\"Delete the group\"\n        (click)=\"onDelete()\">\n        <mat-icon>delete</mat-icon>\n    </button>\n\n    <h3>Fields</h3>\n    @if(fieldForm){\n        <lib-form-field-edit style=\"min-width:450px\" [form]=\"fieldForm\" (submitted)=\"submitField()\" (cancelled)=\"cancelField()\"></lib-form-field-edit>\n    }\n    @else {\n\n    <button mat-fab class=\"form-action-button\" (click)=\"addField()\" matTooltip=\"Add a Field\" type=\"button\">\n        <mat-icon>add</mat-icon>\n    </button>\n\n    <mat-accordion style=\"min-width:450px\">\n    @for(field of fields.controls; track field; let idx=$index)\n    {\n        <mat-expansion-panel style=\"width:100%\">\n        <mat-expansion-panel-header class=\"expansion-panel\">\n            <mat-panel-title>{{field.value.label}}</mat-panel-title>\n            <div class=\"expansion-panel-controls\">\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Delete the Field\" aria-label=\"Delete an item\"\n                (click)=\"onFieldDelete(idx)\">\n                <mat-icon>delete\n                </mat-icon>\n            </button>\n            @if(idx>0){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n                (click)=\"onFieldOrderUp(idx)\">\n                <mat-icon>arrow_upward\n                </mat-icon>\n            </button>\n            }\n            @if(idx<fields.controls.length -1){\n            <button mat-icon-button type=\"button\" class=\"control-button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n                (click)=\"onFieldOrderDown(idx)\">\n                <mat-icon>arrow_downward\n                </mat-icon>\n            </button>\n            }\n            </div>\n        </mat-expansion-panel-header>\n        <lib-form-field-edit [form]=\"field\" [editMode]=\"true\"></lib-form-field-edit>\n        </mat-expansion-panel>\n    }\n    </mat-accordion>\n    }\n\n    @if(!editMode()){\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"submit\" matTooltip=\"Save Group\" [disabled]=\"!form().valid\">\n    <mat-icon>save</mat-icon>\n    </button>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Cancel\" (click)=\"cancel()\">\n    <mat-icon>cancel</mat-icon>\n    </button>        \n    </div>\n}\n<form>", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], editMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "editMode", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], deleted: [{ type: i0.Output, args: ["deleted"] }] } });
 
-class SelectionManager {
-    candidates = signal([], ...(ngDevMode ? [{ debugName: "candidates" }] : []));
-    selected = signal([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
-    columns = [];
-    itemService;
-    constructor(itemService) {
-        this.itemService = itemService;
+class DynamicFormBuilderComponent {
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    handleSubmit = input(false, ...(ngDevMode ? [{ debugName: "handleSubmit" }] : []));
+    submitted = output();
+    dirty = signal(false, ...(ngDevMode ? [{ debugName: "dirty" }] : []));
+    fb = inject(FormBuilder);
+    groupForm = null;
+    addGroup() {
+        this.groupForm = FormGroupForm.createForm(this.fb);
     }
-    fetchCandidates(item, id) {
-        const queries = new Map([[item, id.toString()]]);
-        const query = new ItemQuery({ queries: queries });
-        this.itemService.get(query).subscribe(items => this.selected.set(items.results));
-        this.itemService.get().subscribe(items => this.updateCandidates(items));
+    createGroup() {
+        if (this.groupForm) {
+            this.form().createGroup(this.groupForm);
+        }
+        this.groupForm = null;
     }
-    updateCandidates(items) {
-        this.candidates.set(items.results.map(item => this.toSelectable(item)));
+    cancelGroup() {
+        this.groupForm = null;
     }
-    onRemoved(id) {
-        const url = this.selected().find(m => m.id == id).url;
-        this.selected.update(items => items.filter(m => m.id != id));
-        return url;
+    onSubmit() {
+        this.submitted.emit();
+        this.dirty.set(false);
     }
-    onAdded(title) {
-        const selected = this.candidates().find(m => m.title == title);
-        if (selected) {
-            this.selected.update(members => { members.push(selected.item); return members; });
-        }
-        this.candidates.update(members => members.filter(m => m.title != title));
-        return this.selected().find(m => this.hasTitle(m, title)).url;
+    deleteGroup(id) {
+        this.form().deleteGroup(id);
+        this.dirty.set(true);
     }
-    onSearchChanged(searchTerm) {
-        if (searchTerm) {
-            this.itemService.get(new ItemQuery({ filter: searchTerm })).subscribe(items => this.updateCandidates(items));
+    onOrderUp(id) {
+        this.form().orderUp(id);
+        this.dirty.set(true);
+    }
+    onOrderDown(id) {
+        this.form().orderDown(id);
+        this.dirty.set(true);
+    }
+    getLabel(control) {
+        const form = control;
+        if (form.value.label) {
+            return form.value.label;
         }
         else {
-            this.itemService.get().subscribe(items => this.updateCandidates(items));
+            return "Group " + form.value.order.toString();
         }
     }
+    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: "<h2>Groups</h2>\n\n\n@if(groupForm)\n{\n<lib-form-group-edit [form]=\"groupForm\" (cancelled)=\"cancelGroup()\" (submitted)=\"createGroup()\"></lib-form-group-edit>\n}\n@else{\n<button mat-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n  <mat-icon>add</mat-icon>\n</button>\n\n@if (form().groups.length > 0){\n\n<mat-accordion style=\"width:100%\">\n\n  @for(group of form().groups.controls; track group; let group_idx=$index)\n  {\n  <mat-expansion-panel style=\"width:100%\">\n    <mat-expansion-panel-header class=\"expansion-panel\">\n      <mat-panel-title>{{getLabel(group)}}</mat-panel-title>\n      <div class=\"expansion-panel-controls\">\n        @if(group_idx>0){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n          (click)=\"onOrderUp(group_idx)\">\n          <mat-icon>arrow_upward\n          </mat-icon>\n        </button>\n        }\n        @if(group_idx < form().groups.controls.length - 1){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n          (click)=\"onOrderDown(group_idx)\">\n          <mat-icon>arrow_downward\n          </mat-icon>\n        </button>\n        }\n      </div>\n    </mat-expansion-panel-header>\n    <lib-form-group-edit [form]=\"group\" [editMode]=\"true\" (deleted)=\"deleteGroup(group_idx)\"></lib-form-group-edit>\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n\n}\n\n@if(handleSubmit() && dirty())\n{\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Save Changes\" (click)=\"onSubmit()\">\n    <mat-icon>save</mat-icon>\n    </button>\n    </div>\n}\n}", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: FormGroupEditComponent, selector: "lib-form-group-edit", inputs: ["form", "editMode"], outputs: ["submitted", "cancelled", "deleted"] }] });
 }
-class MemberSelectionManager extends SelectionManager {
-    columns = USER_TABLE_FULL;
-    constructor() {
-        super(inject(UserService));
-    }
-    toSelectable(item) {
-        return { title: item.username, item: item };
-    }
-    hasTitle(item, title) {
-        return item.username == title;
-    }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DynamicFormBuilderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-dynamic-form-builder', imports: [
+                        MatIconModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        MatExpansionModule,
+                        FormGroupEditComponent
+                    ], template: "<h2>Groups</h2>\n\n\n@if(groupForm)\n{\n<lib-form-group-edit [form]=\"groupForm\" (cancelled)=\"cancelGroup()\" (submitted)=\"createGroup()\"></lib-form-group-edit>\n}\n@else{\n<button mat-fab class=\"form-action-button\" (click)=\"addGroup()\" matTooltip=\"Add a Group\" type=\"button\">\n  <mat-icon>add</mat-icon>\n</button>\n\n@if (form().groups.length > 0){\n\n<mat-accordion style=\"width:100%\">\n\n  @for(group of form().groups.controls; track group; let group_idx=$index)\n  {\n  <mat-expansion-panel style=\"width:100%\">\n    <mat-expansion-panel-header class=\"expansion-panel\">\n      <mat-panel-title>{{getLabel(group)}}</mat-panel-title>\n      <div class=\"expansion-panel-controls\">\n        @if(group_idx>0){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Up\" aria-label=\"Move Order Up\"\n          (click)=\"onOrderUp(group_idx)\">\n          <mat-icon>arrow_upward\n          </mat-icon>\n        </button>\n        }\n        @if(group_idx < form().groups.controls.length - 1){\n        <button mat-icon-button class=\"control-button\" type=\"button\" color=\"primary\" matTooltip=\"Move Order Down\" aria-label=\"Move Order Down\"\n          (click)=\"onOrderDown(group_idx)\">\n          <mat-icon>arrow_downward\n          </mat-icon>\n        </button>\n        }\n      </div>\n    </mat-expansion-panel-header>\n    <lib-form-group-edit [form]=\"group\" [editMode]=\"true\" (deleted)=\"deleteGroup(group_idx)\"></lib-form-group-edit>\n  </mat-expansion-panel>\n  }\n</mat-accordion>\n\n}\n\n@if(handleSubmit() && dirty())\n{\n    <div>\n    <button mat-fab class=\"form-action-button\" \n        type=\"button\" matTooltip=\"Save Changes\" (click)=\"onSubmit()\">\n    <mat-icon>save</mat-icon>\n    </button>\n    </div>\n}\n}", styles: [".expansion-panel-controls{display:none}.expansion-panel:hover .expansion-panel-controls{display:block}.control-button{margin-right:10px}\n"] }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], handleSubmit: [{ type: i0.Input, args: [{ isSignal: true, alias: "handleSubmit", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }] } });
+
+class PopulatedFormComponent {
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: PopulatedFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: PopulatedFormComponent, isStandalone: true, selector: "lib-populated-form", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for(value of form().values; track value.id)\n{\n@if(value.field.field_type === \"TEXT\" || value.field.field_type === \"RICH_TEXT\")\n{\n    <div class=\"item-field\">\n        <h3 style=\"margin-right: 10px\">{{value.field.label}}</h3>\n        <p>{{value.value}}</p>\n    </div>\n}\n@else if(value.field.field_type === \"CHAR\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <span>{{value.value}}</span>\n    </div>\n}\n@else if(value.field.field_type === \"BOOLEAN\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        @if(value.value === \"true\")\n        {\n            <mat-icon>check</mat-icon>\n        }\n        @else {\n            <mat-icon>close_small</mat-icon>\n        }\n    </div>\n}\n@else if(value.field.field_type === \"FILE\" && value.asset)\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <a matFab href=\"value.asset\">\n            <mat-icon>download</mat-icon>\n        </a>\n    </div>\n}\n}", styles: [""], 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.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: PopulatedFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-populated-form', imports: [MatIconModule, MatButtonModule], template: "@for(value of form().values; track value.id)\n{\n@if(value.field.field_type === \"TEXT\" || value.field.field_type === \"RICH_TEXT\")\n{\n    <div class=\"item-field\">\n        <h3 style=\"margin-right: 10px\">{{value.field.label}}</h3>\n        <p>{{value.value}}</p>\n    </div>\n}\n@else if(value.field.field_type === \"CHAR\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <span>{{value.value}}</span>\n    </div>\n}\n@else if(value.field.field_type === \"BOOLEAN\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        @if(value.value === \"true\")\n        {\n            <mat-icon>check</mat-icon>\n        }\n        @else {\n            <mat-icon>close_small</mat-icon>\n        }\n    </div>\n}\n@else if(value.field.field_type === \"FILE\" && value.asset)\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <a matFab href=\"value.asset\">\n            <mat-icon>download</mat-icon>\n        </a>\n    </div>\n}\n}" }]
+        }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ListTableViewComponent {
@@ -1702,7 +1764,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  >\n    @for (column of columns(); track column.name) {\n      <ng-container matColumnDef=\"{{ column.name }}\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          {{ column.title }}\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n\n          @if(column.element_type === \"date\")\n          {\n            {{ element[column.name] | date}}\n          }\n          @else if(column.element_type === \"enum\")\n          {\n            {{ element[column.name] | titlecase}}\n          }\n          @else {\n            {{ element[column.name] }}\n          }\n        </td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: columnNames()\"\n      [routerLink]=\"['/' + itemType() + '/detail/', row.id]\"\n      [routerLinkActive]=\"['is-active']\"\n    ></tr>\n  </table>\n\n  <mat-paginator\n    [length]=\"dataSource.length()\"\n    [pageSize]=\"20\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    aria-label=\"Select page\"\n  >\n  </mat-paginator>\n}\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    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  >\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$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$1.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$1.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$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,
@@ -1724,8 +1786,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 class ListScrollViewComponent {
     searchTerm = input("", ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    itemHeight = input(100, ...(ngDevMode ? [{ debugName: "itemHeight" }] : []));
     dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : []));
     listItemTemplate = input(null, ...(ngDevMode ? [{ debugName: "listItemTemplate" }] : []));
+    selection = signal(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
+    selected = output();
     reset() {
         const data_source = this.dataSource();
         if (!data_source) {
@@ -1735,59 +1800,19 @@ class ListScrollViewComponent {
         //            sort_field: this.sort!.active,        
         data_source.reset(this.searchTerm(), this.pageSize());
     }
+    onSelected(id) {
+        this.selection.set(id);
+        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.1.0", version: "21.0.3", type: ListScrollViewComponent, isStandalone: true, selector: "lib-list-scroll-view", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", 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 } }, ngImport: i0, template: "<mat-nav-list>\n  <cdk-virtual-scroll-viewport\n    itemSize=\"150\"\n    class=\"scrollable-list\"\n    style=\"height: 600px; width: 500px\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of dataSource()\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item }\"\n      >\n      </ng-container>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.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: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: ListScrollViewComponent, isStandalone: true, selector: "lib-list-scroll-view", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", 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 } }, outputs: { selected: "selected" }, ngImport: i0, template: "<mat-nav-list style=\"padding: 0px; display:flex; justify-content: center; \">\n  <ul style=\"margin: 0px; padding: 0px\">\n  <cdk-virtual-scroll-viewport\n    itemSize=\"itemHeight()\"\n    class=\"scrollable-list\"\n    style=\"height: 600px; width: 300px; padding: 5px\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of dataSource(); let even = even;\">\n      <li style=\"margin: 0px; padding: 0px\" \n      (click)=\"onSelected(item.id)\"     \n      (keydown)=\"onSelected(item.id)\"\n      tabindex=\"0\"\n      role=\"button\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>\n      </li>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n  </ul>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.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: 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$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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListScrollViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-list-scroll-view', imports: [MatListModule,
                         NgTemplateOutlet,
-                        ScrollingModule], template: "<mat-nav-list>\n  <cdk-virtual-scroll-viewport\n    itemSize=\"150\"\n    class=\"scrollable-list\"\n    style=\"height: 600px; width: 500px\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of dataSource()\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item }\"\n      >\n      </ng-container>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.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"] }]
-        }], propDecorators: { searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }] } });
-
-class BackButtonComponent {
-    location = inject(Location);
-    goBack() {
-        this.location.back();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: BackButtonComponent, isStandalone: true, selector: "lib-back-button", ngImport: i0, template: "<a mat-icon-button class=\"padded-button\"\n    (click)=\"goBack()\"\n    (keydown)=\"goBack()\"\n    tabindex=\"0\"\n    role=\"button\">\n<mat-icon>arrow_back</mat-icon>\n</a>\n\n", styles: [".padded-button{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: BackButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-back-button', imports: [MatIconModule, MatButtonModule], template: "<a mat-icon-button class=\"padded-button\"\n    (click)=\"goBack()\"\n    (keydown)=\"goBack()\"\n    tabindex=\"0\"\n    role=\"button\">\n<mat-icon>arrow_back</mat-icon>\n</a>\n\n", styles: [".padded-button{margin:5px}\n"] }]
-        }] });
-
-class SearchBarComponent {
-    itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
-    sortFields = input([], ...(ngDevMode ? [{ debugName: "sortFields" }] : []));
-    sortAscending = signal(true, ...(ngDevMode ? [{ debugName: "sortAscending" }] : []));
-    searchChanged = output();
-    searchFilter = new FormControl();
-    ngAfterViewInit() {
-        this.searchFilter.valueChanges.pipe(debounceTime(150), distinctUntilChanged(), tap(() => {
-            this.searchEntered();
-        })).subscribe();
-    }
-    clearSearch() {
-        this.searchFilter.setValue("");
-    }
-    searchEntered() {
-        this.searchChanged.emit(this.searchFilter.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 }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"container\">\n    <mat-form-field class=\"search\" style=\"margin: 10px;\">\n        <mat-label>Search</mat-label>\n        <input matInput [formControl]=\"searchFilter\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchFilter.value){\n        <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n        @else(){\n        <button matSuffix mat-icon-button aria-label=\"Search\">\n            <mat-icon>search</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n\n    @if(sortFields().length > 0){\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select>\n            @for(field of sortFields(); track field)\n            {\n            <mat-option>{{field}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\">\n        <mat-icon>sort</mat-icon>\n    </button>\n    }\n</div>", styles: [".container{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: 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,
-            args: [{ selector: 'lib-search-bar', imports: [ReactiveFormsModule,
-                        MatInputModule,
-                        MatTooltipModule,
-                        MatButtonModule,
-                        MatSelectModule,
-                        MatIconModule,
-                        TitleCasePipe], template: "<div class=\"container\">\n    <mat-form-field class=\"search\" style=\"margin: 10px;\">\n        <mat-label>Search</mat-label>\n        <input matInput [formControl]=\"searchFilter\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchFilter.value){\n        <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n        @else(){\n        <button matSuffix mat-icon-button aria-label=\"Search\">\n            <mat-icon>search</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n\n    @if(sortFields().length > 0){\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select>\n            @for(field of sortFields(); track field)\n            {\n            <mat-option>{{field}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\">\n        <mat-icon>sort</mat-icon>\n    </button>\n    }\n</div>", styles: [".container{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}\n"] }]
-        }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", required: false }] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }] } });
+                        ScrollingModule], template: "<mat-nav-list style=\"padding: 0px; display:flex; justify-content: center; \">\n  <ul style=\"margin: 0px; padding: 0px\">\n  <cdk-virtual-scroll-viewport\n    itemSize=\"itemHeight()\"\n    class=\"scrollable-list\"\n    style=\"height: 600px; width: 300px; padding: 5px\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of dataSource(); let even = even;\">\n      <li style=\"margin: 0px; padding: 0px\" \n      (click)=\"onSelected(item.id)\"     \n      (keydown)=\"onSelected(item.id)\"\n      tabindex=\"0\"\n      role=\"button\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>\n      </li>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n  </ul>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.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"] }]
+        }], propDecorators: { searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
 class ListDataSource extends DataSource {
     length = signal(0, ...(ngDevMode ? [{ debugName: "length" }] : []));
@@ -1867,10 +1892,36 @@ class ListDataSource extends DataSource {
     }
 }
 
+class ListHeaderComponent {
+    itemType = input.required(...(ngDevMode ? [{ debugName: "itemType" }] : []));
+    canCreate = input.required(...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    showControls = input.required(...(ngDevMode ? [{ debugName: "showControls" }] : []));
+    sortFields = input.required(...(ngDevMode ? [{ debugName: "sortFields" }] : []));
+    searchChanged = output();
+    title() {
+        return this.itemType().replace("_", " ");
+    }
+    onSearchChange(value) {
+        this.searchChanged.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListHeaderComponent, isStandalone: true, selector: "lib-list-header", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: true, transformFunction: null }, canCreate: { classPropertyName: "canCreate", publicName: "canCreate", isSignal: true, isRequired: true, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: true, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"container\">\n\n  <div class=\"title-container\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\"\n        [routerLink]=\"['/' + itemType(), 'create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  <div class=\"controls\" [hidden]=\"!showControls()\">\n    <lib-search-bar style=\"width:70%\" [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n  </div>\n</div>", styles: [".container{display:flex;flex-direction:column;align-items:center;justify-content:center}.title-container{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:5px;margin:0}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}\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: 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: "component", type: SearchBarComponent, selector: "lib-search-bar", inputs: ["itemType", "sortFields"], outputs: ["searchChanged"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-header', imports: [TitleCasePipe,
+                        RouterModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        SearchBarComponent], template: "<div class=\"container\">\n\n  <div class=\"title-container\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\"\n        [routerLink]=\"['/' + itemType(), 'create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  <div class=\"controls\" [hidden]=\"!showControls()\">\n    <lib-search-bar style=\"width:70%\" [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n  </div>\n</div>", styles: [".container{display:flex;flex-direction:column;align-items:center;justify-content:center}.title-container{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:5px;margin:0}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}\n"] }]
+        }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: true }] }], canCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreate", required: true }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: true }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", required: true }] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }] } });
+
 class ListViewComponent {
     viewType = input("table", ...(ngDevMode ? [{ debugName: "viewType" }] : []));
     itemService = input(...(ngDevMode ? [undefined, { debugName: "itemService" }] : []));
+    listItemTemplate = input(null, ...(ngDevMode ? [{ debugName: "listItemTemplate" }] : []));
     itemDetailTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemDetailTemplate" }] : []));
+    itemHeight = input(100, ...(ngDevMode ? [{ debugName: "itemHeight" }] : []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
     sortFields = input([], ...(ngDevMode ? [{ debugName: "sortFields" }] : []));
     noSelfItemsMessage = input(...(ngDevMode ? [undefined, { debugName: "noSelfItemsMessage" }] : []));
@@ -1879,6 +1930,7 @@ class ListViewComponent {
     defaultQueries = input([], ...(ngDevMode ? [{ debugName: "defaultQueries" }] : []));
     embeddedMode = input(false, ...(ngDevMode ? [{ debugName: "embeddedMode" }] : []));
     selectedViewType = signal("table", ...(ngDevMode ? [{ debugName: "selectedViewType" }] : []));
+    selected = output();
     pageSize = 20;
     pageSizeOptions = [20, 50, 100];
     route = inject(ActivatedRoute);
@@ -1896,6 +1948,9 @@ class ListViewComponent {
             sort.sortChange.pipe(tap(() => this.reset())).subscribe();
         }
     }
+    showControls() {
+        return this.dataSource != undefined && !this.dataSource.sourceIsEmpty();
+    }
     onSearchChange(value) {
         this.searchTerm = value;
         this.reset();
@@ -1936,6 +1991,9 @@ class ListViewComponent {
         this.selectedViewType.set(event.value);
         this.resetDataSource();
     }
+    onSelection(id) {
+        this.selected.emit(id);
+    }
     isSelfList() {
         const url_segments = this.route.snapshot.url;
         if (!url_segments) {
@@ -1944,7 +2002,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 }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, defaultQueries: { classPropertyName: "defaultQueries", publicName: "defaultQueries", isSignal: true, isRequired: false, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <div class=\"header\">\n\n    @if(embeddedMode())\n    {\n      @if(dataSource && !dataSource.sourceIsEmpty())\n      {\n        <h1 class=\"title\">{{ title() | titlecase }}</h1>\n      }\n    }\n    @else {\n      <h1 class=\"title\">{{ title() | titlecase }}</h1>\n    }\n\n    @if (canCreate() && !embeddedMode()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" \n      [routerLink]=\"['/' + itemService()?.typePlural(), 'create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n\n    @if(!embeddedMode()){\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n    }\n\n    @if(itemDetailTemplate() && !embeddedMode()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\n\n    @if (dataSource.loading()) {\n    <div class=\"spinner-container\">\n      <mat-spinner></mat-spinner>\n    </div>\n    }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n          @if(noSelfItemsMessage())\n          {\n            <p>{{noSelfItemsMessage()}}</p>\n          }\n          @else {\n            <p>You do not have any {{itemType()}}.</p>    \n          }\n        }\n        @else{\n          @if(canCreate()){\n            @if(noItemsCanCreateMessage())\n            {\n              <p>{{noItemsCanCreateMessage()}}</p>\n            }\n            @else{\n              <p>There are currently no {{itemType()}}, click above to add one.</p>\n            }\n          }\n          @else{\n            @if(noItemsMessage())\n            {\n              <p>{{noItemsMessage()}}</p>\n            }\n            @else\n            {\n              <p>There are currently no {{itemType()}}.</p>\n            }\n          }\n        }\n      </div>\n    }\n\n      <div [hidden]=\"dataSource.sourceIsEmpty()\">\n       @if(isTableView()) {\n          <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n          </lib-list-table-view>\n        } \n        @else {\n          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["searchTerm", "pageSize", "dataSource", "listItemTemplate"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$6.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$6.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SearchBarComponent, selector: "lib-search-bar", inputs: ["itemType", "sortFields"], outputs: ["searchChanged"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "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 }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, defaultQueries: { classPropertyName: "defaultQueries", publicName: "defaultQueries", isSignal: true, isRequired: false, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button style=\"position: absolute;\"></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    [sortFields]=\"sortFields()\"\n    (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\n  <div class=\"content_container\" style=\"width:100%\">\n    @if(dataSource)\n    {\n    <div class=\"search_result_container\" style=\"width:350px\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n        <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        }\n        @else {\n        <h2 style=\"margin-bottom:5px; margin-top: 0px; padding: 0px;\">Results: {{dataSource.length()}}</h2>\n        <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\" [dataSource]=\"dataSource\" (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n        }\n      </div>\n    </div>\n    <div class=\"detail-container\" style=\"width:100%; min-width: 400px;\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:10px;padding-right:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.content_container{display:flex;flex-direction:row;justify-content:left;text-align:left;align-items:left}.hide-element{display:none}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["searchTerm", "pageSize", "itemHeight", "dataSource", "listItemTemplate"], 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$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ListHeaderComponent, selector: "lib-list-header", inputs: ["itemType", "canCreate", "showControls", "sortFields"], outputs: ["searchChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -1957,47 +2015,100 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatIconModule,
                         ReactiveFormsModule,
                         RouterModule,
-                        TitleCasePipe,
                         MatInputModule,
                         MatTooltipModule,
                         MatButtonModule,
-                        SearchBarComponent], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <div class=\"header\">\n\n    @if(embeddedMode())\n    {\n      @if(dataSource && !dataSource.sourceIsEmpty())\n      {\n        <h1 class=\"title\">{{ title() | titlecase }}</h1>\n      }\n    }\n    @else {\n      <h1 class=\"title\">{{ title() | titlecase }}</h1>\n    }\n\n    @if (canCreate() && !embeddedMode()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" \n      [routerLink]=\"['/' + itemService()?.typePlural(), 'create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n\n    @if(!embeddedMode()){\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n    }\n\n    @if(itemDetailTemplate() && !embeddedMode()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\n\n    @if (dataSource.loading()) {\n    <div class=\"spinner-container\">\n      <mat-spinner></mat-spinner>\n    </div>\n    }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n          @if(noSelfItemsMessage())\n          {\n            <p>{{noSelfItemsMessage()}}</p>\n          }\n          @else {\n            <p>You do not have any {{itemType()}}.</p>    \n          }\n        }\n        @else{\n          @if(canCreate()){\n            @if(noItemsCanCreateMessage())\n            {\n              <p>{{noItemsCanCreateMessage()}}</p>\n            }\n            @else{\n              <p>There are currently no {{itemType()}}, click above to add one.</p>\n            }\n          }\n          @else{\n            @if(noItemsMessage())\n            {\n              <p>{{noItemsMessage()}}</p>\n            }\n            @else\n            {\n              <p>There are currently no {{itemType()}}.</p>\n            }\n          }\n        }\n      </div>\n    }\n\n      <div [hidden]=\"dataSource.sourceIsEmpty()\">\n       @if(isTableView()) {\n          <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n          </lib-list-table-view>\n        } \n        @else {\n          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\n"] }]
-        }], propDecorators: { viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], itemService: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemService", required: false }] }], itemDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDetailTemplate", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", required: false }] }], noSelfItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelfItemsMessage", required: false }] }], noItemsCanCreateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsCanCreateMessage", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], defaultQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultQueries", required: false }] }], embeddedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "embeddedMode", required: false }] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
+                        ListHeaderComponent,
+                        NgTemplateOutlet], template: "@if(!embeddedMode()){\n<lib-back-button style=\"position: absolute;\"></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    [sortFields]=\"sortFields()\"\n    (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\n  <div class=\"content_container\" style=\"width:100%\">\n    @if(dataSource)\n    {\n    <div class=\"search_result_container\" style=\"width:350px\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n        <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        }\n        @else {\n        <h2 style=\"margin-bottom:5px; margin-top: 0px; padding: 0px;\">Results: {{dataSource.length()}}</h2>\n        <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\" [dataSource]=\"dataSource\" (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n        }\n      </div>\n    </div>\n    <div class=\"detail-container\" style=\"width:100%; min-width: 400px;\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:10px;padding-right:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.content_container{display:flex;flex-direction:row;justify-content:left;text-align:left;align-items:left}.hide-element{display:none}\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 }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", required: false }] }], noSelfItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelfItemsMessage", required: false }] }], noItemsCanCreateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsCanCreateMessage", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], defaultQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultQueries", required: false }] }], embeddedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "embeddedMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
 
-class DetailHeaderComponent {
-    id = input(0, ...(ngDevMode ? [{ debugName: "id" }] : []));
-    text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
-    route = input("", ...(ngDevMode ? [{ debugName: "route" }] : []));
-    canEdit = input(false, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
-    canDelete = input(false, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
-    deleteClicked = output();
-    fullRoute = computed(() => "/" + this.route() + "/edit/", ...(ngDevMode ? [{ debugName: "fullRoute" }] : []));
-    deleteClick() {
-        this.deleteClicked.emit();
+class TopBarComponent {
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    logo = input(...(ngDevMode ? [undefined, { debugName: "logo" }] : []));
+    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
+    user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
+    loginRoute = input("home", ...(ngDevMode ? [{ debugName: "loginRoute" }] : []));
+    userService = inject(UserService);
+    constructor() {
+        this.userService.loggedInUser.subscribe(user => this.user.set(user));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: DetailHeaderComponent, isStandalone: true, selector: "lib-detail-header", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClicked: "deleteClicked" }, ngImport: i0, template: "<div class=\"container\">\n\n  <h1 class=\"header\">{{text()}}</h1>\n\n  <div class=\"controls\">\n  @if(canEdit()){\n  <a mat-mini-fab class=\"control-button\" matTooltip=\"Edit the item\" title=\"Click to edit this item\" aria-label=\"Click to edit this item\"\n    [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n  </a>\n  }\n\n  @if(canDelete()){\n  <button mat-mini-fab class=\"control-button\" (click)=\"deleteClick()\" matTooltip=\"Delete the item\" title=\"Click to delete this item\"\n    aria-label=\"Click to delete this item\">\n    <mat-icon>delete</mat-icon></button>\n  }\n  </div>\n\n</div>", styles: [".container{width:100%;max-width:500px;padding:5px}.header{width:100%;padding:5px;margin:5px}.controls{display:flex;flex-direction:row;align-content:center;justify-content:center}.control-button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    onLogout() {
+        this.userService.logout();
+    }
+    onLogin() {
+        this.userService.login("/" + this.loginRoute);
+    }
+    get initials() {
+        const user = this.user();
+        if (user) {
+            return PortalMember.getInitials(user);
+        }
+        return "";
+    }
+    get backgroundStyle() {
+        if (this.background()) {
+            return "url(" + this.background() + ")";
+        }
+        else {
+            return "none";
+        }
+    }
+    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    <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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DetailHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: TopBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-detail-header', imports: [RouterModule,
+            args: [{ selector: 'lib-top-bar', imports: [RouterModule,
+                        MatToolbarModule,
+                        MatIconModule,
                         MatButtonModule,
-                        MatIconModule, MatTooltipModule], template: "<div class=\"container\">\n\n  <h1 class=\"header\">{{text()}}</h1>\n\n  <div class=\"controls\">\n  @if(canEdit()){\n  <a mat-mini-fab class=\"control-button\" matTooltip=\"Edit the item\" title=\"Click to edit this item\" aria-label=\"Click to edit this item\"\n    [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n  </a>\n  }\n\n  @if(canDelete()){\n  <button mat-mini-fab class=\"control-button\" (click)=\"deleteClick()\" matTooltip=\"Delete the item\" title=\"Click to delete this item\"\n    aria-label=\"Click to delete this item\">\n    <mat-icon>delete</mat-icon></button>\n  }\n  </div>\n\n</div>", styles: [".container{width:100%;max-width:500px;padding:5px}.header{width:100%;padding:5px;margin:5px}.controls{display:flex;flex-direction:row;align-content:center;justify-content:center}.control-button{padding:5px;margin:5px}\n"] }]
-        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], canEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "canEdit", required: false }] }], canDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDelete", required: false }] }], deleteClicked: [{ type: i0.Output, args: ["deleteClicked"] }] } });
+                        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    <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"] }]
+        }], 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 FileRecord {
-    name = "";
-    display_name = "";
-    file_type = "standard";
-    file = null;
-    remote = "";
-    local = "";
-    constructor(params = {}) {
-        Object.assign(this, params);
+class LeftNavComponent {
+    background = input(...(ngDevMode ? [undefined, { debugName: "background" }] : []));
+    _leftNavService = inject(LeftNavService);
+    sideNavContent = viewChild(MatSidenavContent, ...(ngDevMode ? [{ debugName: "sideNavContent" }] : []));
+    getOptions() {
+        return this._leftNavService.activeOptions;
+    }
+    get backgroundStyle() {
+        if (this.background()) {
+            return "url(" + this.background() + ")";
+        }
+        else {
+            return "none";
+        }
     }
+    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  <mat-sidenav mode=\"side\" class=\"leftnav-side\" opened>\n        <mat-nav-list>\n          <ul>\n            @for (option of _leftNavService.activeOptions(); track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\">{{ option.name }}</a>\n              </li>\n            }\n          </ul>\n        </mat-nav-list>\n    </mat-sidenav>\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;width:200px}ul,li{margin:0;padding:0}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$6.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$6.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$6.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: "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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: LeftNavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-left-nav', imports: [MatSidenavModule, MatListModule, RouterOutlet, RouterModule], template: "<mat-sidenav-container class=\"leftnav-container\">\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" opened>\n        <mat-nav-list>\n          <ul>\n            @for (option of _leftNavService.activeOptions(); track option) {\n              <li>\n              <a mat-list-item \n              [routerLink]=\"option.route\" \n              routerLinkActive #rla=\"routerLinkActive\" \n              [activated]=\"rla.isActive\">{{ option.name }}</a>\n              </li>\n            }\n          </ul>\n        </mat-nav-list>\n    </mat-sidenav>\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;width:200px}ul,li{margin:0;padding:0}\n"] }]
+        }], propDecorators: { background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], sideNavContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSidenavContent), { isSignal: true }] }] } });
+
+class FeedbackComponent {
+    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: [""] });
+}
+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" }]
+        }] });
+
+class AvatarComponent {
+    text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: AvatarComponent, isStandalone: true, selector: "lib-avatar", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\"> <span>{{text()}}</span> </div>", styles: [".container{width:36px;height:36px;border-radius:100%;text-align:center;justify-content:center;align-content:center;background-color:#d3d3d3}.container span{line-height:8px;color:#000}\n"] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: AvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-avatar', imports: [], template: "<div class=\"container\"> <span>{{text()}}</span> </div>", styles: [".container{width:36px;height:36px;border-radius:100%;text-align:center;justify-content:center;align-content:center;background-color:#d3d3d3}.container span{line-height:8px;color:#000}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
 
 class UserDetailComponent extends DetailView {
+    showBack = input(true, ...(ngDevMode ? [{ debugName: "showBack" }] : []));
     constructor() {
         super(inject(UserService));
     }
@@ -2014,13 +2125,12 @@ class UserDetailComponent extends DetailView {
         return super.canEdit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserDetailComponent, isStandalone: true, selector: "lib-user-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.username\"\n      [id]=\"item.id\"\n      [route]=\"itemService.typePlural()\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete()\"></lib-detail-header>\n\n    @if(item.profile){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.profile}}\" style=\"height:120px;\">\n    </div>    \n    }\n    \n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>First Name: </b></span>\n      {{item.first_name}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>Last Name: </b></span>\n      {{item.last_name}}\n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserDetailComponent, isStandalone: true, selector: "lib-user-detail", inputs: { showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if(showBack())\n{\n<lib-back-button style=\"position: absolute;\"></lib-back-button>\n}\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.username\"\n      [id]=\"item.id\"\n      [route]=\"itemService.typePlural()\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete()\"></lib-detail-header>\n\n    @if(item.profile){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.profile}}\" style=\"height:120px;\">\n    </div>    \n    }\n    \n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>First Name: </b></span>\n      {{item.first_name}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>Last Name: </b></span>\n      {{item.last_name}}\n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-detail', imports: [BackButtonComponent,
-                        DetailHeaderComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.username\"\n      [id]=\"item.id\"\n      [route]=\"itemService.typePlural()\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete()\"></lib-detail-header>\n\n    @if(item.profile){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.profile}}\" style=\"height:120px;\">\n    </div>    \n    }\n    \n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>First Name: </b></span>\n      {{item.first_name}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>Last Name: </b></span>\n      {{item.last_name}}\n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'lib-user-detail', imports: [BackButtonComponent, DetailHeaderComponent], template: "@if(showBack())\n{\n<lib-back-button style=\"position: absolute;\"></lib-back-button>\n}\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.username\"\n      [id]=\"item.id\"\n      [route]=\"itemService.typePlural()\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete()\"></lib-detail-header>\n\n    @if(item.profile){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.profile}}\" style=\"height:120px;\">\n    </div>    \n    }\n    \n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>First Name: </b></span>\n      {{item.first_name}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>Last Name: </b></span>\n      {{item.last_name}}\n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }] } });
 
 class UserForm {
     fb = inject(FormBuilder);
@@ -2083,7 +2193,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       <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       <lib-file-upload [control]=\"profileControl\"></lib-file-upload>\n\n    <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!form.form.valid\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"button\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column}.checkbox_group{justify-content:left;display:flex;flex-direction:column}.button_group{margin:10px;display:flex;flex-direction:row;justify-content:center}.btn-block{padding:5px}.form_action_button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: 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: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$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: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n       <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       <lib-file-upload [control]=\"profileControl\"></lib-file-upload>\n\n    <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!form.form.valid\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"button\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>                        \n    </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column}.checkbox_group{justify-content:left;display:flex;flex-direction:column}.button_group{margin:10px;display:flex;flex-direction:row;justify-content:center}.btn-block{padding:5px}.form_action_button{padding:5px;margin:5px}\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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["control"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
@@ -2101,28 +2211,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 
 class UserListDetailComponent {
     item = input.required(...(ngDevMode ? [{ debugName: "item" }] : []));
+    even = input(true, ...(ngDevMode ? [{ debugName: "even" }] : []));
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    get title() {
+        if (this.item().first_name && this.item().last_name) {
+            return this.item().first_name + " " + this.item().last_name;
+        }
+        else {
+            return this.item().username;
+        }
+    }
     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 } }, ngImport: i0, template: "<mat-card mat-list-item class=\"item-card\">\n    <mat-card-header>\n        @if(item().profile_thumbnail)\n        {\n            <img mat-card-avatar src=\"{{item().profile_thumbnail}}\" alt=\"User avatar\">\n        }\n        <mat-card-title-group style=\"padding: 5px\">\n        <mat-card-title\n            >{{ item().first_name }} {{ item().last_name }}</mat-card-title\n        >\n        <mat-card-subtitle>{{ item().username }}</mat-card-subtitle>\n        </mat-card-title-group>\n    </mat-card-header>\n\n    <mat-card-content>\n        <p>Email: {{ item().email }}</p>\n    </mat-card-content>\n</mat-card>\n", styles: [":host{flex-grow:1}.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: MatListModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$7.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$7.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i1$7.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$7.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$7.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$7.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i1$7.MatCardTitleGroup, selector: "mat-card-title-group" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: UserListDetailComponent, isStandalone: true, selector: "lib-user-list-detail", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, even: { classPropertyName: "even", publicName: "even", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n    @if(item().profile_thumbnail){\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <img matListItemAvatar \n        alt=\"User Avatar\" \n        src=\"{{item().profile_thumbnail}}\" style=\"height:30px\">\n    </div>    \n    }\n    @else {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>person</mat-icon>\n    </div>\n    }\n    <div class=\"text-container\">\n        <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n        <p matListItemLine>{{item().email}}</p>\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;padding:5px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-low)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-lowest)}.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,
-            args: [{ selector: 'lib-user-list-detail', imports: [MatListModule,
-                        MatCardModule], template: "<mat-card mat-list-item class=\"item-card\">\n    <mat-card-header>\n        @if(item().profile_thumbnail)\n        {\n            <img mat-card-avatar src=\"{{item().profile_thumbnail}}\" alt=\"User avatar\">\n        }\n        <mat-card-title-group style=\"padding: 5px\">\n        <mat-card-title\n            >{{ item().first_name }} {{ item().last_name }}</mat-card-title\n        >\n        <mat-card-subtitle>{{ item().username }}</mat-card-subtitle>\n        </mat-card-title-group>\n    </mat-card-header>\n\n    <mat-card-content>\n        <p>Email: {{ item().email }}</p>\n    </mat-card-content>\n</mat-card>\n", styles: [":host{flex-grow:1}.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"] }]
-        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }] } });
+            args: [{ selector: 'lib-user-list-detail', imports: [MatIconModule, MatListModule], template: "<div mat-list-item class=\"container\" [class.even]=\"even() && !selected()\" [class.selected]=\"selected()\">\n    @if(item().profile_thumbnail){\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <img matListItemAvatar \n        alt=\"User Avatar\" \n        src=\"{{item().profile_thumbnail}}\" style=\"height:30px\">\n    </div>    \n    }\n    @else {\n    <div class=\"image-holder\" style=\"width:35px;\">\n        <mat-icon matListItemIcon>person</mat-icon>\n    </div>\n    }\n    <div class=\"text-container\">\n        <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{title}}</p>\n        <p matListItemLine>{{item().email}}</p>\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{height:60px;padding:5px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-low)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-lowest)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
+        }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], even: [{ type: i0.Input, args: [{ isSignal: true, alias: "even", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }] } });
 
 class UserComponent {
-    viewType = signal("list", ...(ngDevMode ? [{ debugName: "viewType" }] : []));
     itemService = inject(UserService);
-    columns = USER_TABLE_FULL;
+    detailView = viewChild(UserDetailComponent, ...(ngDevMode ? [{ debugName: "detailView" }] : []));
+    onSelected(id) {
+        if (id) {
+            this.detailView()?.onSelection(id);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: UserComponent, isStandalone: true, selector: "lib-user", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [itemDetailTemplate]=\"listItemTemplate\"\n  [columns]=\"columns\"\n  [viewType]=\"viewType()\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\">\n    <lib-user-list-detail [item]=\"item\"\n                          [routerLink]=\"['/' + itemService.typePlural() + '/detail/', item.id]\"\n                          [routerLinkActive]=\"['is-active']\">\n    </lib-user-list-detail>\n  </ng-template>\n</lib-list-view>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "embeddedMode"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: UserComponent, isStandalone: true, selector: "lib-user", viewQueries: [{ propertyName: "detailView", first: true, predicate: UserDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"60\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n    <lib-user-list-detail [item]=\"item\" [even]=\"even\" [selected]=\"selected\"></lib-user-list-detail>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-user-detail [showBack]='false'></lib-user-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item", "even", "selected"] }, { kind: "component", type: UserDetailComponent, selector: "lib-user-detail", inputs: ["showBack"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user', imports: [ListViewComponent, UserListDetailComponent, RouterModule], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [itemDetailTemplate]=\"listItemTemplate\"\n  [columns]=\"columns\"\n  [viewType]=\"viewType()\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\">\n    <lib-user-list-detail [item]=\"item\"\n                          [routerLink]=\"['/' + itemService.typePlural() + '/detail/', item.id]\"\n                          [routerLinkActive]=\"['is-active']\">\n    </lib-user-list-detail>\n  </ng-template>\n</lib-list-view>\n", styles: [":host{flex-grow:1}\n"] }]
-        }] });
+            args: [{ selector: 'lib-user', imports: [ListViewComponent,
+                        UserListDetailComponent,
+                        UserDetailComponent], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"60\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n    <lib-user-list-detail [item]=\"item\" [even]=\"even\" [selected]=\"selected\"></lib-user-list-detail>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-user-detail [showBack]='false'></lib-user-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"] }]
+        }], propDecorators: { detailView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => UserDetailComponent), { isSignal: true }] }] } });
 
 class GroupDetailComponent extends DetailView {
+    showBack = input(true, ...(ngDevMode ? [{ debugName: "showBack" }] : []));
     constructor() {
         super(inject(GroupService));
     }
@@ -2130,30 +2256,35 @@ class GroupDetailComponent extends DetailView {
         this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: GroupDetailComponent, isStandalone: true, selector: "lib-group-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item) {\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"></lib-detail-header>\n    \n    <div class=\"item-field\">{{item.name}}</div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: GroupDetailComponent, isStandalone: true, selector: "lib-group-detail", inputs: { showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if(showBack())\n{\n<lib-back-button style=\"position: absolute;\"></lib-back-button>\n}\n\n<div class=\"content-container\">\n  @if(item(); as item) {\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"></lib-detail-header>\n    \n    <div class=\"item-field\">{{item.name}}</div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-group-detail', imports: [BackButtonComponent,
-                        DetailHeaderComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item) {\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"></lib-detail-header>\n    \n    <div class=\"item-field\">{{item.name}}</div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
-        }], ctorParameters: () => [] });
+                        DetailHeaderComponent], template: "@if(showBack())\n{\n<lib-back-button style=\"position: absolute;\"></lib-back-button>\n}\n\n<div class=\"content-container\">\n  @if(item(); as item) {\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"></lib-detail-header>\n    \n    <div class=\"item-field\">{{item.name}}</div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }] } });
 
 class GroupComponent {
     itemService = inject(GroupService);
-    columns = [{ name: 'name', title: 'Name', element_type: 'string' }];
+    detailView = viewChild(GroupDetailComponent, ...(ngDevMode ? [{ debugName: "detailView" }] : []));
+    onSelected(id) {
+        if (id) {
+            this.detailView()?.onSelection(id);
+        }
+    }
     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: "14.0.0", version: "21.0.3", type: GroupComponent, isStandalone: true, selector: "lib-group", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "embeddedMode"] }] });
+    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]=\"60\"\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:60px;padding:5px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-low)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-lowest)}.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", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "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,
-            args: [{ selector: 'lib-group', imports: [ListViewComponent], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"] }]
-        }] });
+            args: [{ selector: 'lib-group', imports: [ListViewComponent, GroupDetailComponent, MatListModule], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"60\"\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:60px;padding:5px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-low)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-lowest)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
+        }], propDecorators: { detailView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GroupDetailComponent), { isSignal: true }] }] } });
 
 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: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$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$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: 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,
@@ -2227,22 +2358,8 @@ class AddressForm {
     }
 }
 
-class OrganizationComponent {
-    itemService = inject(OrganizationService);
-    columns = [{ name: 'name', title: 'Name', element_type: 'string' },
-        { name: 'website', title: 'Website', element_type: 'url' },
-        { name: 'is_partner', title: 'Is Partner', element_type: 'boolean' }];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "embeddedMode"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-organization', imports: [
-                        ListViewComponent
-                    ], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}\n"] }]
-        }] });
-
 class OrganizationDetailComponent extends DetailView {
+    showBack = input(true, ...(ngDevMode ? [{ debugName: "showBack" }] : []));
     constructor() {
         super(inject(OrganizationService));
     }
@@ -2250,13 +2367,35 @@ class OrganizationDetailComponent extends DetailView {
         this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"\n      (deleteClicked)=\"onDeleteClicked()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      <p style=\"text-align: justify; text-justify: inter-word;\">{{item.description}}</p>\n    </div>\n    \n    <h3>Address</h3>\n    <lib-address-detail [address]=\"item.address\"></lib-address-detail>\n\n    <h3>Website</h3>\n    <div class=\"item-field\">\n      <a href=\"{{item.website}}\" target=\"_blank\" rel=\"noopener noreferrer\">{{item.website}}</a>\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }, { kind: "component", type: AddressDetailComponent, selector: "lib-address-detail", inputs: ["address"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", inputs: { showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: "@if(showBack())\n{\n<lib-back-button style=\"position: absolute;\"></lib-back-button>\n}\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"\n      (deleteClicked)=\"onDeleteClicked()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      <p style=\"text-align: justify; text-justify: inter-word; max-width: 600px;\">{{item.description}}</p>\n    </div>\n    \n    <h3>Address</h3>\n    <lib-address-detail [address]=\"item.address\"></lib-address-detail>\n\n    <h3>Website</h3>\n    <div class=\"item-field\">\n      <a href=\"{{item.website}}\" target=\"_blank\" rel=\"noopener noreferrer\">{{item.website}}</a>\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }, { kind: "component", type: AddressDetailComponent, selector: "lib-address-detail", inputs: ["address"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-organization-detail', imports: [BackButtonComponent,
-                        DetailHeaderComponent, AddressDetailComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"\n      (deleteClicked)=\"onDeleteClicked()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      <p style=\"text-align: justify; text-justify: inter-word;\">{{item.description}}</p>\n    </div>\n    \n    <h3>Address</h3>\n    <lib-address-detail [address]=\"item.address\"></lib-address-detail>\n\n    <h3>Website</h3>\n    <div class=\"item-field\">\n      <a href=\"{{item.website}}\" target=\"_blank\" rel=\"noopener noreferrer\">{{item.website}}</a>\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
-        }], ctorParameters: () => [] });
+                        DetailHeaderComponent, AddressDetailComponent], template: "@if(showBack())\n{\n<lib-back-button style=\"position: absolute;\"></lib-back-button>\n}\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"\n      (deleteClicked)=\"onDeleteClicked()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      <p style=\"text-align: justify; text-justify: inter-word; max-width: 600px;\">{{item.description}}</p>\n    </div>\n    \n    <h3>Address</h3>\n    <lib-address-detail [address]=\"item.address\"></lib-address-detail>\n\n    <h3>Website</h3>\n    <div class=\"item-field\">\n      <a href=\"{{item.website}}\" target=\"_blank\" rel=\"noopener noreferrer\">{{item.website}}</a>\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }] } });
+
+class OrganizationComponent {
+    itemService = inject(OrganizationService);
+    columns = [{ name: 'name', title: 'Name', element_type: 'string' },
+        { name: 'website', title: 'Website', element_type: 'url' },
+        { name: 'is_partner', title: 'Is Partner', element_type: 'boolean' }];
+    detailView = viewChild(OrganizationDetailComponent, ...(ngDevMode ? [{ debugName: "detailView" }] : []));
+    onSelected(id) {
+        if (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.2.0", version: "21.0.3", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", 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]=\"60\"\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      </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:60px;padding:5px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-low)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-lowest)}.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", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: OrganizationDetailComponent, selector: "lib-organization-detail", inputs: ["showBack"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-organization', imports: [
+                        ListViewComponent,
+                        OrganizationDetailComponent
+                    ], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"60\"\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      </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:60px;padding:5px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-low)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-lowest)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
+        }], propDecorators: { detailView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OrganizationDetailComponent), { isSignal: true }] }] } });
 
 class OrganizationForm {
     fb = inject(FormBuilder);
@@ -2333,7 +2472,7 @@ class OrganizationEditComponent extends EditView {
         this.selectionManager.fetchCandidates(this.itemService.typename, 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: "14.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  <div class=\"item-edit-container\" style=\"width:100%\">\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\">\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%\">\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]=\"addressService.countryOptions()\"\n        [form]=\"addressForm()\"\n        ></lib-address-edit>\n        </mat-expansion-panel>\n        </mat-accordion>\n        </div>\n        </mat-tab>\n\n        <mat-tab label=\"Members\" style=\"width:100%;\">\n          <div style=\"padding:10px\">\n        <lib-select-table [selected]=\"selectionManager.selected()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"selectionManager.columns\"\n                         [options]=\"selectionManager.candidates()\"\n                         (itemAdded)=\"selectionManager.onAdded($event)\"\n                         (itemRemoved)=\"selectionManager.onRemoved($event)\"\n                         (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n        </lib-select-table>\n        </div>\n        </mat-tab>\n\n        </mat-tab-group>\n\n          <div class=\"button_group\">\n           <button mat-fab\n                   class=\"form_action_button\"\n                   type=\"submit\"\n                   [disabled]=\"!form.form.valid\">\n             <mat-icon>save</mat-icon>\n           </button>\n           \n           <button mat-fab\n                  type=\"button\"\n                   class=\"form_action_button\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n     </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.checkbox_group{justify-content:left;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4$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: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: 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"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7.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: "14.0.0", version: "21.0.3", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button style=\"position: absolute;\"></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\" style=\"width:100%\">\n    \n    <h1 class=\"item-edit-header\" style=\"padding: 0px; margin-top: 0px; margin-bottom: 5px;\">{{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]=\"addressService.countryOptions()\"\n        [form]=\"addressForm()\"\n        ></lib-address-edit>\n        </mat-expansion-panel>\n        </mat-accordion>\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\n        </mat-tab-group>\n\n          <div class=\"button_group\">\n           <button mat-fab\n                   class=\"form-action-button\"\n                   type=\"submit\"\n                   [disabled]=\"!form.form.valid || !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                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n     </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.checkbox_group{justify-content:left;display:flex;flex-direction:column}\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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: 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: i1$4.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1$4.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1$4.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1$4.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: 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: MatTabsModule }, { kind: "component", type: i7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i7.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,
@@ -2351,7 +2490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         SelectTableComponent,
                         MatTabsModule,
                         TitleCasePipe
-                    ], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\" style=\"width:100%\">\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\">\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%\">\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]=\"addressService.countryOptions()\"\n        [form]=\"addressForm()\"\n        ></lib-address-edit>\n        </mat-expansion-panel>\n        </mat-accordion>\n        </div>\n        </mat-tab>\n\n        <mat-tab label=\"Members\" style=\"width:100%;\">\n          <div style=\"padding:10px\">\n        <lib-select-table [selected]=\"selectionManager.selected()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"selectionManager.columns\"\n                         [options]=\"selectionManager.candidates()\"\n                         (itemAdded)=\"selectionManager.onAdded($event)\"\n                         (itemRemoved)=\"selectionManager.onRemoved($event)\"\n                         (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n        </lib-select-table>\n        </div>\n        </mat-tab>\n\n        </mat-tab-group>\n\n          <div class=\"button_group\">\n           <button mat-fab\n                   class=\"form_action_button\"\n                   type=\"submit\"\n                   [disabled]=\"!form.form.valid\">\n             <mat-icon>save</mat-icon>\n           </button>\n           \n           <button mat-fab\n                  type=\"button\"\n                   class=\"form_action_button\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n     </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.checkbox_group{justify-content:left;display:flex;flex-direction:column}\n"] }]
+                    ], template: "<lib-back-button style=\"position: absolute;\"></lib-back-button>\n\n<div class=\"content-container\">\n\n  <div class=\"item-edit-container\" style=\"width:100%\">\n    \n    <h1 class=\"item-edit-header\" style=\"padding: 0px; margin-top: 0px; margin-bottom: 5px;\">{{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]=\"addressService.countryOptions()\"\n        [form]=\"addressForm()\"\n        ></lib-address-edit>\n        </mat-expansion-panel>\n        </mat-accordion>\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\n        </mat-tab-group>\n\n          <div class=\"button_group\">\n           <button mat-fab\n                   class=\"form-action-button\"\n                   type=\"submit\"\n                   [disabled]=\"!form.form.valid || !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                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n     </form>\n  </div>\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.checkbox_group{justify-content:left;display:flex;flex-direction:column}\n"] }]
         }], ctorParameters: () => [] });
 
 /*
@@ -2362,5 +2501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, AddressService, ApiError, AvatarComponent, BackButtonComponent, DetailHeaderComponent, DetailView, DynamicFormBuilderComponent, DynamicFormComponent, DynamicFormForm, EditView, ErrorCode, FORM_FIELD_CHOICES, FeedbackComponent, FieldType, FileRecord, FileUploadComponent, FormFieldDetailComponent, FormFieldEditComponent, FormFieldValueForm, FormService, Group, GroupComponent, GroupDetailComponent, 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, SelectTableComponent, SelectionManager, TopBarComponent, UserComponent, UserDetailComponent, UserEditComponent, UserService, getFieldTypeFromKey };
+export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, AddressService, ApiError, AvatarComponent, BackButtonComponent, DetailHeaderComponent, DetailView, DynamicFormBuilderComponent, DynamicFormComponent, DynamicFormForm, EditView, ErrorCode, FORM_FIELD_CHOICES, FeedbackComponent, FieldType, FileRecord, FileUploadComponent, FormFieldDetailComponent, FormFieldEditComponent, FormFieldValueForm, FormService, Group, GroupComponent, GroupDetailComponent, 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, SelectTableComponent, SelectionManager, TopBarComponent, UserComponent, UserDetailComponent, UserEditComponent, UserService, getFieldTypeFromKey, getFileFieldIds };
 //# sourceMappingURL=ichec-angular-core.mjs.map