ichec-angular-core 0.1.1 → 0.1.2

package/fesm2022/ichec-angular-core.mjs

@@ -1,8 +1,7 @@
-import { map, catchError, tap, mergeMap, throwError, BehaviorSubject, mergeAll, merge, debounceTime, distinctUntilChanged, Subscription, of, finalize } from 'rxjs';
+import { map, catchError, tap, mergeMap, throwError, BehaviorSubject, mergeAll, of, merge, debounceTime, distinctUntilChanged, Subscription, finalize } from 'rxjs';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, Injectable, input, signal, Component, viewChild, computed, output } from '@angular/core';
-import { NgIf, Location, NgTemplateOutlet, TitleCasePipe } from '@angular/common';
 import * as i1 from '@angular/router';
 import { RouterModule, RouterOutlet, Router, ActivatedRoute } from '@angular/router';
 import * as i2 from '@angular/material/toolbar';
@@ -17,6 +16,7 @@ import * as i1$1 from '@angular/material/sidenav';
 import { MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
 import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
+import { NgIf, Location, NgTemplateOutlet, TitleCasePipe } from '@angular/common';
 import * as i1$2 from '@angular/forms';
 import { FormsModule, FormControl, ReactiveFormsModule, FormBuilder } from '@angular/forms';
 import * as i3$2 from '@angular/material/input';
@@ -78,6 +78,21 @@ class PortalMember {
     constructor(params = {}) {
         Object.assign(this, params);
     }
+    static getInitials(member) {
+        let first_initial = "";
+        let second_initial = "";
+        if (member.first_name) {
+            first_initial = member.first_name[0];
+        }
+        else {
+            first_initial = member.username[0];
+        }
+        if (member.first_name) {
+            second_initial = member.last_name[0];
+        }
+        const combined = first_initial + second_initial;
+        return combined.toUpperCase();
+    }
 }
 class Group {
     static typename = "group";
@@ -96,15 +111,14 @@ class Address {
     id = 0;
     url = "";
     line1 = "";
-    line2 = "";
-    line3 = "";
-    city = "";
+    line2 = null;
+    line3 = null;
+    city = null;
     region = "";
-    postcode = "";
+    postcode = null;
     country = "";
     country_name = "";
     country_flag = "";
-    members = [];
     constructor(params = {}) {
         Object.assign(this, params);
     }
@@ -261,7 +275,8 @@ class RestService {
 }
 
 class ItemService extends RestService {
-    itemType = "";
+    typenamePlural = "";
+    typename = "";
     canEdit() {
         return false;
     }
@@ -274,6 +289,9 @@ class ItemService extends RestService {
     canView() {
         return false;
     }
+    typePlural() {
+        return this.typenamePlural ? this.typenamePlural : this.typename + "s";
+    }
     instantiateType(_) {
         throw new Error('Not Implemented');
     }
@@ -294,7 +312,7 @@ class UserService extends ItemService {
     */
     loggedInUser = new BehaviorSubject(null);
     _url = PortalMember.plural;
-    itemType = PortalMember.plural;
+    typename = PortalMember.typename;
     permissions = new Map();
     instantiateType(item) {
         return new PortalMember(item);
@@ -392,9 +410,51 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                 }]
         }] });
 
-class AddressService extends ItemService {
+class ItemWithUserService extends ItemService {
+    userService = inject(UserService);
+    userItems = new BehaviorSubject([]);
+    canCreate() {
+        return this.userService.hasAddPermission(this.permissionName());
+    }
+    canView() {
+        return this.userService.hasViewPermission(this.permissionName());
+    }
+    canEdit() {
+        return this.userService.hasEditPermission(this.permissionName());
+    }
+    canDelete() {
+        return this.userService.hasDeletePermission(this.permissionName());
+    }
+    permissionName() {
+        return this.typename.replace("_", "");
+    }
+    getUserItems() {
+        if (this.userService.loggedInUser.value) {
+            return this.getForUser(this.userService.loggedInUser.value);
+        }
+        return of(new Paginated());
+    }
+    refreshUserItems(user) {
+        if (user) {
+            this.getUserItems().subscribe(items => this.userItems.next(items.results));
+        }
+        else {
+            this.userItems.next([]);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ItemWithUserService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ItemWithUserService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ItemWithUserService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AddressService extends ItemWithUserService {
     _url = Address.plural;
-    itemType = Address.plural;
+    typename = Address.typename;
     instantiateType(item) {
         return new Address(item);
     }
@@ -408,23 +468,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                 }]
         }] });
 
-class GroupService extends ItemService {
-    userService = inject(UserService);
-    userItems = new BehaviorSubject([]);
+class GroupService extends ItemWithUserService {
     _url = Group.plural;
-    itemType = Group.plural;
+    typename = Group.typename;
     constructor() {
         super();
         this.userService.loggedInUser.subscribe(user => this.refreshUserItems(user));
     }
-    refreshUserItems(user) {
-        if (user) {
-            this.getForUser(user).subscribe(items => this.userItems.next(items.results));
-        }
-        else {
-            this.userItems.next([]);
-        }
-    }
     instantiateType(item) {
         return new Group(item);
     }
@@ -438,25 +488,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class OrganizationService extends ItemService {
+class OrganizationService extends ItemWithUserService {
     _url = Organization.plural;
-    itemType = Organization.plural;
-    userService = inject(UserService);
+    typename = Organization.typename;
     instantiateType(item) {
         return new Organization(item);
     }
-    canCreate() {
-        return this.userService.hasAddPermission(Organization.typename);
-    }
-    canView() {
-        return this.userService.hasViewPermission(Organization.typename);
-    }
-    canEdit() {
-        return this.userService.hasEditPermission(Organization.typename);
-    }
-    canDelete() {
-        return this.userService.hasDeletePermission(Organization.typename);
-    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationService, providedIn: 'root' });
 }
@@ -504,6 +541,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+class MockItemService {
+    canEdit() {
+        return false;
+    }
+    canDelete() {
+        return false;
+    }
+    canCreate() {
+        return false;
+    }
+    typePlural() {
+        return "mock_plurals";
+    }
+}
+
 class TopBarComponent {
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
     user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
@@ -517,12 +569,23 @@ class TopBarComponent {
     onLogout() {
         this.userService.logout();
     }
+    getInitials() {
+        const user = this.user();
+        if (user) {
+            return PortalMember.getInitials(user);
+        }
+        return "";
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: TopBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: TopBarComponent, isStandalone: true, selector: "lib-top-bar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n@if(user(); as user){\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 aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n      <mat-icon>person</mat-icon>\n    </button>\n\n    <mat-menu #profile_menu=\"matMenu\">\n      <button mat-menu-item (click)=\"onLogout()\">Log Out</button>\n    </mat-menu>\n</mat-toolbar>\n}\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: i3.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: TopBarComponent, isStandalone: true, selector: "lib-top-bar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n@if(user(); as user){\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}\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: i3.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: "20.1.1", ngImport: i0, type: TopBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-top-bar', imports: [NgIf, RouterModule, MatToolbarModule, MatIconModule, MatButtonModule, MatMenuModule], template: "\n@if(user(); as user){\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 aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n      <mat-icon>person</mat-icon>\n    </button>\n\n    <mat-menu #profile_menu=\"matMenu\">\n      <button mat-menu-item (click)=\"onLogout()\">Log Out</button>\n    </mat-menu>\n</mat-toolbar>\n}\n", styles: [".topbar-spacer{flex:1 1 auto}\n"] }]
+            args: [{ selector: 'lib-top-bar', imports: [RouterModule,
+                        MatToolbarModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatMenuModule], template: "\n@if(user(); as user){\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}\n", styles: [".topbar-spacer{flex:1 1 auto}\n"] }]
         }] });
 
 class LeftNavComponent {
@@ -582,6 +645,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
             args: [{ selector: 'lib-landing', imports: [FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, NgIf], template: "\n  @if(message(); as message){\n    <p>{{message}}</p>\n  }\n  \n  <mat-card style=\"text-align:center;\">\n    <form class=\"base-form\" #loginForm=\"ngForm\" (ngSubmit)=\"login()\">\n      <mat-card-content>\n        <mat-form-field class=\"form-field\">\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 [(ngModel)]=\"loginUser.name\"\n                 name=\"username\"\n                 required>\n        </mat-form-field>\n        <mat-form-field class=\"form-field\">\n          <input matInput\n                 placeholder=\"Password\"\n                 type=\"password\"\n                 [(ngModel)]=\"loginUser.password\"\n                 name=\"password\"\n                 required>\n        </mat-form-field>\n      </mat-card-content>\n      <div *ngIf=\"loginError\" class=\"error\">\n        <mat-icon>error</mat-icon><p>{{loginError()}}</p>\n      </div>\n      <button mat-flat-button\n              type=\"submit\"\n              [disabled]=\"!loginForm.form.valid\">Log In</button>\n    </form>\n  </mat-card>\n\n\n  \n", styles: [":host{display:flex;align-items:center;flex-grow:1;background-color:#a5b3c9;flex-direction:column}.base-form{padding:10px}.form-field{display:flex}\n"] }]
         }] });
 
+class FeedbackComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: FeedbackComponent, isStandalone: true, selector: "lib-feedback", ngImport: i0, template: "<p>feedback works!</p>\n", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", 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: "20.1.1", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.1", 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: "20.1.1", 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"] }]
+        }] });
+
 class DetailView {
     item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
     route = inject(ActivatedRoute);
@@ -593,6 +675,9 @@ class DetailView {
     onInit() {
         this.getItem();
     }
+    title() {
+        return this.itemService.typename.replace("_", " ");
+    }
     onItemAvailable(item) {
         this.item.set(item);
         this.userService.loggedInUser.subscribe(user => { if (user) {
@@ -621,16 +706,15 @@ class DetailView {
 }
 
 class EditView {
-    typename = "";
     createMode = signal(false, ...(ngDevMode ? [{ debugName: "createMode" }] : []));
-    heading = computed(() => { const prefix = this.createMode() ? "New " : "Edit "; return prefix + this.typename; }, ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    heading = computed(() => { const prefix = this.createMode() ? "New " : "Edit "; return prefix + this.getTitle(); }, ...(ngDevMode ? [{ debugName: "heading" }] : []));
     item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
     _route = inject(ActivatedRoute);
     _location = inject(Location);
     _userService = inject(UserService);
-    _restService;
-    constructor(_restService) {
-        this._restService = _restService;
+    itemService;
+    constructor(itemService) {
+        this.itemService = itemService;
     }
     onInit() {
         this.getItem();
@@ -646,6 +730,7 @@ class EditView {
         this._location.back();
     }
     submit() {
+        console.log("submit called");
         if (this.item()) {
             this.save();
         }
@@ -661,8 +746,14 @@ class EditView {
     cancel() {
         this.goBack();
     }
+    getTitle() {
+        if (this.itemService && this.itemService.typename) {
+            return this.itemService.typename.replace("_", " ");
+        }
+        return "";
+    }
     fetchRestOptions() {
-        this._restService.getOptions().subscribe(options => this.onOptions(options));
+        this.itemService.getOptions().subscribe(options => this.onOptions(options));
     }
     onUploadedFileReady(_file) {
     }
@@ -671,13 +762,13 @@ class EditView {
     createItem() {
         const item = this.item();
         if (item) {
-            this._restService.postItem(item).subscribe(item => this.saveFiles(item));
+            this.itemService.postItem(item).subscribe(item => this.saveFiles(item));
         }
     }
     updateItem() {
         const item = this.item();
         if (item) {
-            this._restService.putItem(item).subscribe(item => this.saveFiles(item));
+            this.itemService.putItem(item).subscribe(item => this.saveFiles(item));
         }
     }
     saveFiles(item) {
@@ -703,7 +794,7 @@ class EditView {
         }
         else {
             const id_str = this._route.snapshot.paramMap.get('id');
-            this._restService.getItem(Number(id_str))
+            this.itemService.getItem(Number(id_str))
                 .subscribe(item => {
                 this.item.set(item);
                 this.onItemAvailable();
@@ -726,23 +817,6 @@ class EditView {
     }
 }
 
-class ListView {
-    _route = inject(ActivatedRoute);
-    userService = inject(UserService);
-    user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
-    getUser() {
-        this.userService.loggedInUser.subscribe(user => {
-            if (user) {
-                this.user.set(user);
-            }
-        });
-    }
-    isSelfList() {
-        const url_segments = this._route.snapshot.url;
-        return (url_segments.length == 2) && (url_segments[1].path == "self");
-    }
-}
-
 class SelectTableComponent {
     itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
     selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
@@ -751,7 +825,7 @@ class SelectTableComponent {
     itemAdded = output();
     itemRemoved = output();
     searchChanged = output();
-    columnNames = computed(() => this.columns().map(c => c.name), ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
+    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() {
@@ -765,6 +839,7 @@ class SelectTableComponent {
         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: "20.1.1", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -793,12 +868,6 @@ class ListTableViewComponent {
     columnNames = computed(() => this.columns().map(c => c.name), ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
     sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
     paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
-    ngOnInit() {
-        const data_source = this.dataSource();
-        if (data_source) {
-            data_source.fetch(new ItemQuery({ page_size: this.initialPageSize }));
-        }
-    }
     ngAfterViewInit() {
         const paginator = this.paginator();
         const sort = this.sort();
@@ -855,9 +924,6 @@ class ListScrollViewComponent {
     pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
     dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : []));
     listItemTemplate = input(null, ...(ngDevMode ? [{ debugName: "listItemTemplate" }] : []));
-    ngOnInit() {
-        this.reset();
-    }
     reset() {
         const data_source = this.dataSource();
         if (!data_source) {
@@ -926,6 +992,8 @@ class ListDataSource extends DataSource {
     loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     searchTerm = signal("", ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
     pageSize = signal(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    hasFetched = signal(false, ...(ngDevMode ? [{ debugName: "hasFetched" }] : []));
+    sourceIsEmpty = computed(() => this.length() == 0 && this.hasFetched() && !this.searchTerm(), ...(ngDevMode ? [{ debugName: "sourceIsEmpty" }] : []));
     consumerType;
     items = new BehaviorSubject([]);
     itemService;
@@ -933,6 +1001,7 @@ class ListDataSource extends DataSource {
     fetchedPages = new Set();
     constructor(itemService, consumerType = "table") {
         super();
+        console.log("created");
         this.itemService = itemService;
         this.consumerType = consumerType;
     }
@@ -976,6 +1045,7 @@ class ListDataSource extends DataSource {
     }
     onResponse(response) {
         this.length.set(response.count);
+        this.hasFetched.set(true);
         if (this.hasTableConsumer()) {
             this.items.next(response.results);
         }
@@ -1032,10 +1102,13 @@ class ListViewComponent {
     itemType() {
         const item_service = this.itemService();
         if (item_service) {
-            return item_service.itemType;
+            return item_service.typePlural();
         }
         return "";
     }
+    title() {
+        return this.itemType().replace("_", " ");
+    }
     isTableView() {
         return this.selectedViewType() === "table";
     }
@@ -1061,7 +1134,7 @@ class ListViewComponent {
         return (url_segments.length == 2) && (url_segments[1].path == "self");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ itemType() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  <div class=\"controls\">\n    <lib-search-bar [itemType]=\"itemType()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n\n    @if(itemDetailTemplate()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n    @if (dataSource.loading()) {\n    <div class=\"spinner-container\">\n      <mat-spinner></mat-spinner>\n    </div>\n    }\n    @else{\n      @if(dataSource.length() === 0)\n      {\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        }\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      }\n      @else{\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    }\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}\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$5.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$5.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: i3.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: "20.1.1", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n\n    @if(itemDetailTemplate()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\n\n    @if (dataSource.loading()) {\n    <div class=\"spinner-container\">\n      <mat-spinner></mat-spinner>\n    </div>\n    }\n\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n          @if(noSelfItemsMessage())\n          {\n            <p>{{noSelfItemsMessage()}}</p>\n          }\n          @else {\n            <p>You do not have any {{itemType()}}.</p>    \n          }\n        }\n        @else{\n          @if(canCreate()){\n            @if(noItemsCanCreateMessage())\n            {\n              <p>{{noItemsCanCreateMessage()}}</p>\n            }\n            @else{\n              <p>There are currently no {{itemType()}}, click above to add one.</p>\n            }\n          }\n          @else{\n            @if(noItemsMessage())\n            {\n              <p>{{noItemsMessage()}}</p>\n            }\n            @else\n            {\n              <p>There are currently no {{itemType()}}.</p>\n            }\n          }\n        }\n      </div>\n\n      <div [hidden]=\"dataSource.sourceIsEmpty()\">\n       @if(isTableView()) {\n          <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n          </lib-list-table-view>\n        } \n        @else {\n          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["searchTerm", "pageSize", "dataSource", "listItemTemplate"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$5.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$5.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: i3.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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -1078,7 +1151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatInputModule,
                         MatTooltipModule,
                         MatButtonModule,
-                        SearchBarComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ itemType() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  <div class=\"controls\">\n    <lib-search-bar [itemType]=\"itemType()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n\n    @if(itemDetailTemplate()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n    @if (dataSource.loading()) {\n    <div class=\"spinner-container\">\n      <mat-spinner></mat-spinner>\n    </div>\n    }\n    @else{\n      @if(dataSource.length() === 0)\n      {\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        }\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      }\n      @else{\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    }\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}\n"] }]
+                        SearchBarComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" aria-label=\"Add new item\" matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  @if(dataSource)\n  {\n  <div class=\"controls\" [hidden]=\"dataSource.sourceIsEmpty()\">\n    <lib-search-bar [itemType]=\"title()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n\n    @if(itemDetailTemplate()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n\n      </mat-button-toggle-group>\n    </div>\n    }\n  </div>\n\n    @if (dataSource.loading()) {\n    <div class=\"spinner-container\">\n      <mat-spinner></mat-spinner>\n    </div>\n    }\n\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n          @if(noSelfItemsMessage())\n          {\n            <p>{{noSelfItemsMessage()}}</p>\n          }\n          @else {\n            <p>You do not have any {{itemType()}}.</p>    \n          }\n        }\n        @else{\n          @if(canCreate()){\n            @if(noItemsCanCreateMessage())\n            {\n              <p>{{noItemsCanCreateMessage()}}</p>\n            }\n            @else{\n              <p>There are currently no {{itemType()}}, click above to add one.</p>\n            }\n          }\n          @else{\n            @if(noItemsMessage())\n            {\n              <p>{{noItemsMessage()}}</p>\n            }\n            @else\n            {\n              <p>There are currently no {{itemType()}}.</p>\n            }\n          }\n        }\n      </div>\n\n      <div [hidden]=\"dataSource.sourceIsEmpty()\">\n       @if(isTableView()) {\n          <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n          </lib-list-table-view>\n        } \n        @else {\n          <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n        }\n\n      </div>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.hide-element{display:none}\n"] }]
         }] });
 
 class DetailHeaderComponent {
@@ -1088,7 +1161,7 @@ class DetailHeaderComponent {
     canEdit = input(false, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
     canDelete = input(false, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
     deleteClicked = output();
-    fullRoute = computed(() => "/" + this.route() + "s/edit/", ...(ngDevMode ? [{ debugName: "fullRoute" }] : []));
+    fullRoute = computed(() => "/" + this.route() + "/edit/", ...(ngDevMode ? [{ debugName: "fullRoute" }] : []));
     deleteClick() {
         this.deleteClicked.emit();
     }
@@ -1106,6 +1179,7 @@ class FileUploadComponent {
     files = input([], ...(ngDevMode ? [{ debugName: "files" }] : []));
     previewLoaded = output();
     fileUploaded = output();
+    clearLocal = output();
     onPreviewRead(name, content) {
         this.previewLoaded.emit({ name: name, content: content });
     }
@@ -1133,12 +1207,15 @@ class FileUploadComponent {
             ;
         };
     }
+    onClearLocal() {
+        this.clearLocal.emit();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: FileUploadComponent, isStandalone: true, selector: "lib-file-upload", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewLoaded: "previewLoaded", fileUploaded: "fileUploaded" }, ngImport: i0, template: "<div class=\"container\">\n  @for( file of files(); track file.name)\n  {\n  @if (file.local)\n  {\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.local}}\" style=\"height:120px;\">\n    </div>  \n    }\n    @else\n    {\n    @if (file.remote){\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.remote}}\" style=\"height:120px;\">\n    </div>\n    }\n    @else {\n    <div>\n        <span>Upload a {{file.display_name}}</span>\n    </div>    \n    }\n    \n    }\n\n    <div class=\"button-row\">\n        <button mat-mini-fab (click)=\"fileInput.click()\">\n          <mat-icon>attachment</mat-icon>\n        </button>\n        <input hidden type=\"file\" #fileInput (change)=\"onFileUpload(file.name, $event)\"/>\n    </div>   \n  }     \n</div>\n", 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: i3.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: FileUploadComponent, isStandalone: true, selector: "lib-file-upload", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewLoaded: "previewLoaded", fileUploaded: "fileUploaded", clearLocal: "clearLocal" }, ngImport: i0, template: "<div class=\"container\">\n  @for( file of files(); track file.name)\n  {\n  @if (file.local)\n  {\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.local}}\" style=\"height:120px;\">\n        <button mat-mini-fab (click)=\"onClearLocal()\">\n          <mat-icon>clear</mat-icon>\n        </button>\n    </div>  \n    }\n    @else\n    {\n    @if (file.remote){\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.remote}}\" style=\"height:120px;\">\n    </div>\n    }\n    @else {\n    <div>\n        <span>Upload a {{file.display_name}}</span>\n    </div>    \n    }\n    \n    }\n\n    <div class=\"button-row\">\n        <button mat-mini-fab (click)=\"fileInput.click()\">\n          <mat-icon>attachment</mat-icon>\n        </button>\n        <input hidden type=\"file\" #fileInput (change)=\"onFileUpload(file.name, $event)\"/>\n    </div>   \n  }     \n</div>\n", 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: i3.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-file-upload', imports: [MatIconModule, MatButtonModule], template: "<div class=\"container\">\n  @for( file of files(); track file.name)\n  {\n  @if (file.local)\n  {\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.local}}\" style=\"height:120px;\">\n    </div>  \n    }\n    @else\n    {\n    @if (file.remote){\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.remote}}\" style=\"height:120px;\">\n    </div>\n    }\n    @else {\n    <div>\n        <span>Upload a {{file.display_name}}</span>\n    </div>    \n    }\n    \n    }\n\n    <div class=\"button-row\">\n        <button mat-mini-fab (click)=\"fileInput.click()\">\n          <mat-icon>attachment</mat-icon>\n        </button>\n        <input hidden type=\"file\" #fileInput (change)=\"onFileUpload(file.name, $event)\"/>\n    </div>   \n  }     \n</div>\n", styles: [".container{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"] }]
+            args: [{ selector: 'lib-file-upload', imports: [MatIconModule, MatButtonModule], template: "<div class=\"container\">\n  @for( file of files(); track file.name)\n  {\n  @if (file.local)\n  {\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.local}}\" style=\"height:120px;\">\n        <button mat-mini-fab (click)=\"onClearLocal()\">\n          <mat-icon>clear</mat-icon>\n        </button>\n    </div>  \n    }\n    @else\n    {\n    @if (file.remote){\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.remote}}\" style=\"height:120px;\">\n    </div>\n    }\n    @else {\n    <div>\n        <span>Upload a {{file.display_name}}</span>\n    </div>    \n    }\n    \n    }\n\n    <div class=\"button-row\">\n        <button mat-mini-fab (click)=\"fileInput.click()\">\n          <mat-icon>attachment</mat-icon>\n        </button>\n        <input hidden type=\"file\" #fileInput (change)=\"onFileUpload(file.name, $event)\"/>\n    </div>   \n  }     \n</div>\n", styles: [".container{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"] }]
         }] });
 
 class FileRecord {
@@ -1154,7 +1231,6 @@ class FileRecord {
 }
 
 class UserDetailComponent extends DetailView {
-    typename = "user";
     constructor() {
         super(inject(UserService));
     }
@@ -1162,20 +1238,20 @@ class UserDetailComponent extends DetailView {
         this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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]=\"typename\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete\"></lib-detail-header>\n\n    @if(item.profile_url){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" 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: "20.1.1", 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_url){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" 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: "20.1.1", ngImport: i0, type: UserDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-detail', imports: [NgIf,
-                        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]=\"typename\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete\"></lib-detail-header>\n\n    @if(item.profile_url){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" 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"] }]
+            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_url){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" 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: () => [] });
 
 class UserEditComponent extends EditView {
-    typename = "User";
-    files = signal([new FileRecord({ name: "image",
+    files = signal([new FileRecord({
+            name: "image",
             display_name: "Profile Image",
-            file_type: "image" })], ...(ngDevMode ? [{ debugName: "files" }] : []));
+            file_type: "image"
+        })], ...(ngDevMode ? [{ debugName: "files" }] : []));
     formBuilder = inject(FormBuilder);
     form = this.formBuilder.group({
         username: [''],
@@ -1239,23 +1315,24 @@ class UserEditComponent extends EditView {
     }
     saveFiles(item) {
         this.files().forEach(record => { if (record.file) {
-            this._restService.postFile(item.id, record.name, record.file).subscribe(item => this.onItemUpdated(item));
+            this.itemService.postFile(item.id, record.name, record.file).subscribe(item => this.onItemUpdated(item));
         } ; });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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  @if(item(); as item){\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading()}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"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 [files]=\"files()\"\n                        (previewLoaded)=\"onPreviewLoaded($event)\"\n                        (fileUploaded)=\"onFileUploaded($event)\"></lib-file-upload>\n    \n     <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!form.valid\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form_action_button\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>\n               \n    </form>\n  </div>\n  }\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],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$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$2.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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["files"], outputs: ["previewLoaded", "fileUploaded"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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  @if(item(); as item){\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"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 [files]=\"files()\"\n                        (previewLoaded)=\"onPreviewLoaded($event)\"\n                        (fileUploaded)=\"onFileUploaded($event)\"></lib-file-upload>\n    </form>\n\n    <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!form.valid\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form_action_button\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>\n  </div>\n  }\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],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$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$2.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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["files"], outputs: ["previewLoaded", "fileUploaded", "clearLocal"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-edit', imports: [NgIf,
+            args: [{ selector: 'lib-user-edit', imports: [
                         ReactiveFormsModule,
                         MatButtonModule,
                         BackButtonComponent,
                         MatInputModule,
                         MatFormFieldModule,
                         MatIconModule,
-                        FileUploadComponent
-                    ], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading()}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"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 [files]=\"files()\"\n                        (previewLoaded)=\"onPreviewLoaded($event)\"\n                        (fileUploaded)=\"onFileUploaded($event)\"></lib-file-upload>\n    \n     <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!form.valid\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form_action_button\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>\n               \n    </form>\n  </div>\n  }\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"] }]
+                        FileUploadComponent,
+                        TitleCasePipe
+                    ], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"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 [files]=\"files()\"\n                        (previewLoaded)=\"onPreviewLoaded($event)\"\n                        (fileUploaded)=\"onFileUploaded($event)\"></lib-file-upload>\n    </form>\n\n    <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!form.valid\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form_action_button\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>\n  </div>\n  }\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"] }]
         }], ctorParameters: () => [] });
 
 class UserListDetailComponent {
@@ -1269,20 +1346,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatCardModule], template: "<mat-card mat-list-item class=\"item-card\">\n    @if(item(); as item){\n    <mat-card-header>\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    }\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"] }]
         }] });
 
+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 UserComponent {
     viewType = signal("list", ...(ngDevMode ? [{ debugName: "viewType" }] : []));
     itemService = inject(UserService);
-    columns = [{ name: 'username', title: 'Name', element_type: 'string' }];
+    columns = USER_TABLE_FULL;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: UserComponent, isStandalone: true, selector: "lib-user", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [itemDetailTemplate]=\"listItemTemplate\"\n  [columns]=\"columns\"\n  [viewType]=\"viewType()\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\">\n    <lib-user-list-detail [item]=\"item\"\n                          [routerLink]=\"['/' + itemService.itemType + '/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"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: UserComponent, isStandalone: true, selector: "lib-user", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [itemDetailTemplate]=\"listItemTemplate\"\n  [columns]=\"columns\"\n  [viewType]=\"viewType()\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\">\n    <lib-user-list-detail [item]=\"item\"\n                          [routerLink]=\"['/' + itemService.typePlural() + '/detail/', item.id]\"\n                          [routerLinkActive]=\"['is-active']\">\n    </lib-user-list-detail>\n  </ng-template>\n</lib-list-view>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserComponent, decorators: [{
             type: Component,
-            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.itemType + '/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, 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"] }]
         }] });
 
 class GroupDetailComponent extends DetailView {
-    typename = "group";
     constructor() {
         super(inject(GroupService));
     }
@@ -1290,13 +1373,12 @@ class GroupDetailComponent extends DetailView {
         this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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      [route]=\"typename\"></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: "20.1.1", 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-group-detail', imports: [NgIf,
-                        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      [route]=\"typename\"></lib-detail-header>\n    \n    <div class=\"item-field\">{{item.name}}</div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
+            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: () => [] });
 
 class GroupComponent {
@@ -1314,7 +1396,7 @@ class AddressEditComponent {
     countryOptions = input([], ...(ngDevMode ? [{ debugName: "countryOptions" }] : []));
     form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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\" required>\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\" required>\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\" required>\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\" required>\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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$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$2.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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", 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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$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$2.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],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: "20.1.1", ngImport: i0, type: AddressEditComponent, decorators: [{
             type: Component,
@@ -1322,7 +1404,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatSelectModule,
                         MatInputModule,
                         ReactiveFormsModule
-                    ], 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\" required>\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\" required>\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\" required>\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\" required>\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}" }]
+                    ], 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}" }]
         }] });
 
 class AddressDetailComponent {
@@ -1349,22 +1431,22 @@ class AddressForm {
     setValue(item) {
         this.form.setValue({
             line1: item.line1,
-            line2: item.line2,
-            line3: item.line3,
-            city: item.city,
+            line2: item.line2 || "",
+            line3: item.line3 || "",
+            city: item.city || "",
             region: item.region,
-            postcode: item.postcode,
+            postcode: item.postcode || "",
             country: item.country
         });
     }
     updateItem(item) {
         const value = this.form.value;
         item.line1 = value.line1 || "";
-        item.line2 = value.line2 || "";
-        item.line3 = value.line3 || "";
-        item.city = value.city || "";
+        item.line2 = value.line2 || null;
+        item.line3 = value.line3 || null;
+        item.city = value.city || null;
         item.region = value.region || "";
-        item.postcode = value.postcode || "";
+        item.postcode = value.postcode || null;
         item.country = value.country || "";
         return item;
     }
@@ -1386,7 +1468,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
         }] });
 
 class OrganizationDetailComponent extends DetailView {
-    typename = "organization";
     address = signal(null, ...(ngDevMode ? [{ debugName: "address" }] : []));
     addressService = inject(AddressService);
     constructor() {
@@ -1399,14 +1480,51 @@ class OrganizationDetailComponent extends DetailView {
         this.addressService.getUrl(item.address).subscribe(address => this.address.set(address));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"typename\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    @if(address(); as address)\n    {\n      <h3>Address</h3>\n      <lib-address-detail [address]=\"address\"></lib-address-detail>\n    }\n    <div class=\"item-field\">\n      <h3>Website</h3>{{item.website}}\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.padded_button{padding:5px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }, { kind: "component", type: AddressDetailComponent, selector: "lib-address-detail", inputs: ["address"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    @if(address(); as address)\n    {\n      <h3>Address</h3>\n      <lib-address-detail [address]=\"address\"></lib-address-detail>\n    }\n    <div class=\"item-field\">\n      <h3>Website</h3>{{item.website}}\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.padded_button{padding:5px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }, { kind: "component", type: AddressDetailComponent, selector: "lib-address-detail", inputs: ["address"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-organization-detail', imports: [BackButtonComponent,
-                        DetailHeaderComponent, AddressDetailComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"typename\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    @if(address(); as address)\n    {\n      <h3>Address</h3>\n      <lib-address-detail [address]=\"address\"></lib-address-detail>\n    }\n    <div class=\"item-field\">\n      <h3>Website</h3>{{item.website}}\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.padded_button{padding:5px}\n"] }]
+                        DetailHeaderComponent, AddressDetailComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"itemService.typePlural()\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    @if(address(); as address)\n    {\n      <h3>Address</h3>\n      <lib-address-detail [address]=\"address\"></lib-address-detail>\n    }\n    <div class=\"item-field\">\n      <h3>Website</h3>{{item.website}}\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.padded_button{padding:5px}\n"] }]
         }], ctorParameters: () => [] });
 
+class SelectionManager {
+    candidates = signal([], ...(ngDevMode ? [{ debugName: "candidates" }] : []));
+    selected = signal([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    columns = USER_TABLE_FULL;
+    userService = inject(UserService);
+    fetchCandidates(item, id) {
+        const queries = new Map([[item, id.toString()]]);
+        const query = new ItemQuery({ queries: queries });
+        this.userService.get(query).subscribe(users => this.selected.set(users.results));
+        this.userService.get().subscribe(users => this.updateCandidates(users));
+    }
+    updateCandidates(users) {
+        this.candidates.set(users.results.map(user => { return { title: user.username, item: user }; }));
+    }
+    onRemoved(id) {
+        const url = this.selected().find(m => m.id == id).url;
+        this.selected.update(members => members.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 => m.username == title).url;
+    }
+    onSearchChanged(searchTerm) {
+        if (searchTerm) {
+            this.userService.get(new ItemQuery({ filter: searchTerm })).subscribe(users => this.updateCandidates(users));
+        }
+        else {
+            this.userService.get().subscribe(users => this.updateCandidates(users));
+        }
+    }
+}
+
 class OrganizationForm {
     formBuilder = inject(FormBuilder);
     form;
@@ -1439,14 +1557,8 @@ class OrganizationForm {
 }
 
 class OrganizationEditComponent extends EditView {
-    typename = "Organization";
     countryOptions = signal([], ...(ngDevMode ? [{ debugName: "countryOptions" }] : []));
-    candidateMembers = signal([], ...(ngDevMode ? [{ debugName: "candidateMembers" }] : []));
-    selectedMembers = signal([], ...(ngDevMode ? [{ debugName: "selectedMembers" }] : []));
-    columns = [{ 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: 'string' }];
+    selectionManager = new SelectionManager();
     form = new OrganizationForm();
     address = new Address();
     addressService = inject(AddressService);
@@ -1462,15 +1574,9 @@ class OrganizationEditComponent extends EditView {
         if (item) {
             this.fetchAddress(item.address);
             this.form.updateFromItem(item);
-            const queries = new Map([["organization", item.id.toString()]]);
-            const query = new ItemQuery({ queries: queries });
-            this._userService.get(query).subscribe(users => this.selectedMembers.set(users.results));
-            this._userService.get().subscribe(users => this.updateCandidates(users));
+            this.selectionManager.fetchCandidates(this.itemService.typename, item.id);
         }
     }
-    updateCandidates(users) {
-        this.candidateMembers.set(users.results.map(user => { return { title: user.username, item: user }; }));
-    }
     submit() {
         this.syncFromForm();
         if (this.createMode()) {
@@ -1519,35 +1625,24 @@ class OrganizationEditComponent extends EditView {
     onCountryChoices(choices) {
         this.countryOptions.update(() => choices.map(c => { return { name: c.display_name, code: c.value, flag: "" }; }));
     }
-    onMemberRemoved(id) {
-        const url = this.selectedMembers().find(m => m.id == id).url;
-        this.selectedMembers.update(members => members.filter(m => m.id != id));
+    addMember(url) {
         this.item.update(item => { if (item) {
-            item.members.filter(m => m != url);
+            item.members.push(url);
         } return item; });
     }
-    onMemberAdded(title) {
-        const selected = this.candidateMembers().find(m => m.title == title);
-        if (selected) {
-            this.selectedMembers.update(members => { members.push(selected.item); return members; });
-        }
-        this.candidateMembers.update(members => members.filter(m => m.title != title));
-        const url = this.selectedMembers().find(m => m.username == title).url;
+    removeMember(url) {
         this.item.update(item => { if (item) {
-            item.members.push(url);
+            item.members.filter(m => m != url);
         } return item; });
     }
-    onSearchChanged(searchTerm) {
-        console.log("Batch requested");
-        if (searchTerm) {
-            this._userService.get(new ItemQuery({ filter: searchTerm })).subscribe(users => this.updateCandidates(users));
-        }
-        else {
-            this._userService.get().subscribe(users => this.updateCandidates(users));
-        }
+    onMemberRemoved(id) {
+        this.removeMember(this.selectionManager.onRemoved(id));
+    }
+    onMemberAdded(title) {
+        this.addMember(this.selectionManager.onAdded(title));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading()}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <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        <h3>Address</h3>\n        <lib-address-edit \n        [countryOptions]=\"countryOptions()\"\n        [form]=\"form.address.form\"\n        ></lib-address-edit>\n\n        <h3>Members</h3>\n        <lib-select-table [selected]=\"selectedMembers()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"columns\"\n                         [options]=\"candidateMembers()\"\n                         (itemAdded)=\"onMemberAdded($event)\"\n                         (itemRemoved)=\"onMemberRemoved($event)\"\n                         (searchChanged)=\"onSearchChanged($event)\">\n        </lib-select-table>\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                   class=\"form_action_button\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n         \n     </form>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.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],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$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$2.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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <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        <h3>Address</h3>\n        <lib-address-edit \n        [countryOptions]=\"countryOptions()\"\n        [form]=\"form.address.form\"\n        ></lib-address-edit>\n\n        <h3>Members</h3>\n        <lib-select-table [selected]=\"selectionManager.selected()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"selectionManager.columns\"\n                         [options]=\"selectionManager.candidates()\"\n                         (itemAdded)=\"onMemberAdded($event)\"\n                         (itemRemoved)=\"onMemberRemoved($event)\"\n                         (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n        </lib-select-table>\n\n     </form>\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                   class=\"form_action_button\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.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],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$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$2.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: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { 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: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationEditComponent, decorators: [{
             type: Component,
@@ -1561,8 +1656,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatCheckboxModule,
                         BackButtonComponent,
                         AddressEditComponent,
-                        SelectTableComponent
-                    ], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading()}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <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        <h3>Address</h3>\n        <lib-address-edit \n        [countryOptions]=\"countryOptions()\"\n        [form]=\"form.address.form\"\n        ></lib-address-edit>\n\n        <h3>Members</h3>\n        <lib-select-table [selected]=\"selectedMembers()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"columns\"\n                         [options]=\"candidateMembers()\"\n                         (itemAdded)=\"onMemberAdded($event)\"\n                         (itemRemoved)=\"onMemberRemoved($event)\"\n                         (searchChanged)=\"onSearchChanged($event)\">\n        </lib-select-table>\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                   class=\"form_action_button\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n         \n     </form>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.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"] }]
+                        SelectTableComponent,
+                        TitleCasePipe
+                    ], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading() | titlecase}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <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        <h3>Address</h3>\n        <lib-address-edit \n        [countryOptions]=\"countryOptions()\"\n        [form]=\"form.address.form\"\n        ></lib-address-edit>\n\n        <h3>Members</h3>\n        <lib-select-table [selected]=\"selectionManager.selected()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"selectionManager.columns\"\n                         [options]=\"selectionManager.candidates()\"\n                         (itemAdded)=\"onMemberAdded($event)\"\n                         (itemRemoved)=\"onMemberRemoved($event)\"\n                         (searchChanged)=\"selectionManager.onSearchChanged($event)\">\n        </lib-select-table>\n\n     </form>\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                   class=\"form_action_button\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.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"] }]
         }], ctorParameters: () => [] });
 
 /*
@@ -1573,5 +1669,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, AddressService, ApiError, BackButtonComponent, DetailHeaderComponent, DetailView, ENDPOINT_URL, EditView, ErrorCode, FileRecord, FileUploadComponent, Group, GroupComponent, GroupDetailComponent, GroupService, ItemQuery, ItemService, LOGIN_USER, LandingComponent, LeftNavComponent, LeftNavService, ListTableViewComponent, ListView, ListViewComponent, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, Paginated, Permission, PortalMember, ResolvedPermission, RestService, SearchBarComponent, SelectTableComponent, TopBarComponent, UserComponent, UserDetailComponent, UserEditComponent, UserService };
+export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, AddressService, ApiError, AvatarComponent, BackButtonComponent, DetailHeaderComponent, DetailView, ENDPOINT_URL, EditView, ErrorCode, FeedbackComponent, FileRecord, FileUploadComponent, Group, GroupComponent, GroupDetailComponent, GroupService, ItemQuery, ItemService, ItemWithUserService, LOGIN_USER, LandingComponent, LeftNavComponent, LeftNavService, ListTableViewComponent, ListViewComponent, MockItemService, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, Paginated, Permission, PortalMember, ResolvedPermission, RestService, SearchBarComponent, SelectTableComponent, TopBarComponent, UserComponent, UserDetailComponent, UserEditComponent, UserService };
 //# sourceMappingURL=ichec-angular-core.mjs.map