ichec-angular-core 0.0.11 → 0.0.12

package/fesm2022/ichec-angular-core.mjs

@@ -1,7 +1,7 @@
 import { map, catchError, mergeMap, throwError, BehaviorSubject, mergeAll, tap } from 'rxjs';
 import { HttpHeaders, HttpClient } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Input, Component, ViewChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, input, signal, Component, computed, output, viewChild } from '@angular/core';
 import { NgIf, Location, NgFor } from '@angular/common';
 import * as i3 from '@angular/router';
 import { RouterModule, RouterOutlet, Router, ActivatedRoute } from '@angular/router';
@@ -18,7 +18,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
 import * as i1$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { FormsModule, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import * as i3$2 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i4 from '@angular/material/form-field';
@@ -26,7 +26,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i2$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
 import * as i1$2 from '@angular/material/table';
-import { MatTableModule, MatTable } from '@angular/material/table';
+import { MatTable, MatTableModule } from '@angular/material/table';
 import * as i4$1 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -41,6 +41,9 @@ class PortalMember {
     phone = "";
     organization = "";
     profile_url = "";
+    constructor(params = {}) {
+        Object.assign(this, params);
+    }
 }
 class Group {
     name = "";
@@ -57,6 +60,9 @@ class Organization {
     website = "";
     country = "";
     members = [];
+    constructor(params = {}) {
+        Object.assign(this, params);
+    }
 }
 
 var ErrorCode;
@@ -279,31 +285,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
         }], ctorParameters: () => [] });
 
 class TopBarComponent {
-    user = null;
-    title = "";
-    userService;
-    leftNavService;
-    constructor() {
-        this.userService = inject(UserService);
-        this.leftNavService = inject(LeftNavService);
-    }
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    user = signal(null, ...(ngDevMode ? [{ debugName: "user" }] : []));
+    userService = inject(UserService);
+    leftNavService = inject(LeftNavService);
     ngOnInit() {
         this.userService.loggedInUser.subscribe(user => {
-            this.user = user;
+            this.user.set(user);
         });
     }
     onLogout() {
         this.userService.logout();
     }
     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: "14.0.0", version: "20.1.1", type: TopBarComponent, isStandalone: true, selector: "lib-top-bar", inputs: { title: "title" }, ngImport: i0, template: "\n    <mat-toolbar *ngIf=\"user\" style=\"height:60px\">\n      <a mat-icon-button class=\"example-icon\" [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      <button mat-icon-button class=\"example-icon\" aria-label=\"User profile\" [matMenuTriggerFor]=\"profile_menu\">\n        <mat-icon>person</mat-icon>\n      </button>\n      <mat-menu #profile_menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onLogout()\"> Log Out</button>\n      </mat-menu>\n    </mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
+    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: i3.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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: TopBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-top-bar', imports: [NgIf, RouterModule, MatToolbarModule, MatIconModule, MatButtonModule, MatMenuModule], template: "\n    <mat-toolbar *ngIf=\"user\" style=\"height:60px\">\n      <a mat-icon-button class=\"example-icon\" [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      <button mat-icon-button class=\"example-icon\" aria-label=\"User profile\" [matMenuTriggerFor]=\"profile_menu\">\n        <mat-icon>person</mat-icon>\n      </button>\n      <mat-menu #profile_menu=\"matMenu\">\n        <button mat-menu-item (click)=\"onLogout()\"> Log Out</button>\n      </mat-menu>\n    </mat-toolbar>\n", styles: [".topbar-spacer{flex:1 1 auto}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { title: [{
-                type: Input
-            }] } });
+            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"] }]
+        }] });
 
 class LeftNavComponent {
     _leftNavService = inject(LeftNavService);
@@ -321,8 +321,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
 const LOGIN_USER = new InjectionToken("Default login user - used for testing");
 class LandingComponent {
     loginUser = inject(LOGIN_USER);
-    loginError = "";
-    message = "";
+    loginError = signal("", ...(ngDevMode ? [{ debugName: "loginError" }] : []));
+    message = input(...(ngDevMode ? [undefined, { debugName: "message" }] : []));
     userService = inject(UserService);
     router = inject(Router);
     ngOnInit() {
@@ -335,81 +335,68 @@ class LandingComponent {
         }
     }
     login() {
-        this.loginError = "";
+        this.loginError.set("");
         return this.userService.login(this.loginUser.name, this.loginUser.password).subscribe({
             next: () => this.onLoggedIn(),
             error: (error) => this.onLoginError(error)
         });
     }
     onLoginError(error) {
-        console.log("Got login error");
-        console.log(error);
-        this.loginError = "There was an error logging in";
+        console.log("Got login error:", error);
+        if (error.statusText == "Unknown Error") {
+            this.loginError.set("There was an error logging in - server not reachable.");
+        }
+        else {
+            this.loginError.set("There was an error logging in.");
+        }
     }
     onLoggedIn() {
         this.router.navigateByUrl("/home");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: LandingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: LandingComponent, isStandalone: true, selector: "lib-landing", inputs: { message: "message" }, ngImport: i0, template: "\n  <p *ngIf=\"message\">{{message}}</p>\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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: LandingComponent, isStandalone: true, selector: "lib-landing", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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: MatButtonModule }, { kind: "component", type: i2$1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: LandingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-landing', imports: [FormsModule, MatCardModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, NgIf], template: "\n  <p *ngIf=\"message\">{{message}}</p>\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"] }]
-        }], propDecorators: { message: [{
-                type: Input
-            }] } });
+            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 DetailView {
-    item;
-    _route;
-    _location;
-    _userService;
-    _restService;
-    constructor(_route, _location, _userService, _restService) {
-        this._route = _route;
-        this._location = _location;
-        this._userService = _userService;
-        this._restService = _restService;
+    item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
+    route = inject(ActivatedRoute);
+    userService = inject(UserService);
+    restService;
+    constructor(restService) {
+        this.restService = restService;
     }
     onInit() {
         this.getItem();
     }
     onItemAvailable() {
-        this._userService.loggedInUser.subscribe(user => { if (user) {
+        this.userService.loggedInUser.subscribe(user => { if (user) {
             this.onItemAndUserAvailable(user);
         } });
     }
     onItemAndUserAvailable(_) { }
-    goBack() {
-        this._location.back();
-    }
     getItem() {
-        const id = Number(this._route.snapshot.paramMap.get('id'));
-        this._restService.getItem(id)
-            .subscribe(item => {
-            this.item = item;
+        const id = Number(this.route.snapshot.paramMap.get('id'));
+        this.restService.getItem(id).subscribe(item => {
+            this.item.set(item);
             this.onItemAvailable();
         });
     }
-    update() {
-        if (!this.item) {
-            return;
-        }
-        this._restService.putItem(this.item).subscribe(item => this.item = item);
-    }
 }
 
 class EditView {
-    item;
-    createMode = false;
-    _route;
-    _location;
-    _userService;
+    typename = "";
+    createMode = signal(false, ...(ngDevMode ? [{ debugName: "createMode" }] : []));
+    heading = computed(() => { const prefix = this.createMode() ? "New " : "Edit "; return prefix + this.typename; }, ...(ngDevMode ? [{ debugName: "heading" }] : []));
+    item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
+    _route = inject(ActivatedRoute);
+    _location = inject(Location);
+    _userService = inject(UserService);
     _restService;
-    constructor(_route, _location, _userService, _restServce) {
-        this._route = _route;
-        this._location = _location;
-        this._userService = _userService;
+    constructor(_restServce) {
         this._restService = _restServce;
     }
     onInit() {
@@ -426,12 +413,12 @@ class EditView {
         this._location.back();
     }
     submit() {
-        if (this.item) {
+        if (this.item()) {
             this.save();
         }
     }
     save() {
-        if (this.createMode) {
+        if (this.createMode()) {
             this.createItem();
         }
         else {
@@ -444,37 +431,21 @@ class EditView {
     fetchRestOptions() {
         this._restService.getOptions().subscribe(options => this.onOptions(options));
     }
-    onFileUpload(event) {
-        if (!event.target) {
-            return;
-        }
-        const input_element = event.target;
-        if (input_element.files && input_element.files.length > 0) {
-            this.onUploadedFileReady(input_element.files[0]);
-        }
-    }
-    readFile(file) {
-        const reader = new FileReader();
-        reader.readAsDataURL(file);
-        reader.onload = () => { if (reader.result) {
-            this.onFileRead(reader.result);
-        } ; };
-    }
     onUploadedFileReady(_file) {
     }
     onFileRead(_content) {
     }
     createItem() {
-        if (!this.item) {
-            return;
+        const item = this.item();
+        if (item) {
+            this._restService.postItem(item).subscribe(item => this.saveFiles(item));
         }
-        this._restService.postItem(this.item).subscribe(item => this.saveFiles(item));
     }
     updateItem() {
-        if (!this.item) {
-            return;
+        const item = this.item();
+        if (item) {
+            this._restService.putItem(item).subscribe(item => this.saveFiles(item));
         }
-        this._restService.putItem(this.item).subscribe(item => this.saveFiles(item));
     }
     saveFiles(item) {
         this.onItemUpdated(item);
@@ -493,21 +464,21 @@ class EditView {
     }
     getItem() {
         if (this.isCreateRoute()) {
-            this.item = this.getTemplateItem();
-            this.createMode = true;
+            this.item.set(this.getTemplateItem());
+            this.createMode.set(true);
             this.onItemAvailable();
         }
         else {
             const id_str = this._route.snapshot.paramMap.get('id');
             this._restService.getItem(Number(id_str))
                 .subscribe(item => {
-                this.item = item;
+                this.item.set(item);
                 this.onItemAvailable();
             });
         }
     }
     onItemUpdated(item) {
-        this.item = item;
+        this.item.set(item);
         this.goBack();
     }
     onOptions(options) {
@@ -524,16 +495,13 @@ class EditView {
 
 class ListView {
     user;
-    items = [];
+    items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     displayedColumns = [];
-    _route;
-    _location;
-    _userService;
+    _route = inject(ActivatedRoute);
+    _location = inject(Location);
+    _userService = inject(UserService);
     _restService;
-    constructor(_route, _location, _userService, _restService) {
-        this._route = _route;
-        this._location = _location;
-        this._userService = _userService;
+    constructor(_restService) {
         this._restService = _restService;
     }
     onInit() {
@@ -548,12 +516,12 @@ class ListView {
             });
         }
         else {
-            this._restService.get().subscribe(items => this.items = items);
+            this._restService.get().subscribe(items => this.items.set(items));
         }
     }
     onUserChange(user) {
         this.user = user;
-        this._restService.getForUser(this.user).subscribe(items => this.items = items);
+        this._restService.getForUser(this.user).subscribe(items => this.items.set(items));
     }
     isSelfList() {
         const url_segments = this._route.snapshot.url;
@@ -569,104 +537,226 @@ class ListView {
     }
 }
 
+class BackButtonComponent {
+    location = inject(Location);
+    goBack() {
+        this.location.back();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: BackButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: BackButtonComponent, isStandalone: true, selector: "lib-back-button", ngImport: i0, template: "<a mat-icon-button class=\"padded-button\"\n    (click)=\"goBack()\"\n    (keydown)=\"goBack()\"\n    tabindex=\"0\"\n    role=\"button\">\n<mat-icon>arrow_back</mat-icon>\n</a>\n\n", styles: [".padded-button{padding:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: BackButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-back-button', imports: [MatIconModule, MatButtonModule], template: "<a mat-icon-button class=\"padded-button\"\n    (click)=\"goBack()\"\n    (keydown)=\"goBack()\"\n    tabindex=\"0\"\n    role=\"button\">\n<mat-icon>arrow_back</mat-icon>\n</a>\n\n", styles: [".padded-button{padding:5px}\n"] }]
+        }] });
+
+class DetailHeaderComponent {
+    id = input(0, ...(ngDevMode ? [{ debugName: "id" }] : []));
+    text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
+    route = input("", ...(ngDevMode ? [{ debugName: "route" }] : []));
+    fullRoute = computed(() => "/" + this.route() + "s/edit/", ...(ngDevMode ? [{ debugName: "fullRoute" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DetailHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.1", type: DetailHeaderComponent, isStandalone: true, selector: "lib-detail-header", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n    <h3 class=\"header\">{{text()}}</h3>\n    <a mat-mini-fab class=\"button\"\n        [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n    </a>\n</div>\n", styles: [".container{width:100%;max-width:500px}.header{display:inline;width:100%;max-width:100px}.button{padding:10px}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DetailHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-detail-header', imports: [RouterModule,
+                        MatButtonModule,
+                        MatIconModule], template: "<div class=\"container\">\n    <h3 class=\"header\">{{text()}}</h3>\n    <a mat-mini-fab class=\"button\"\n        [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n    </a>\n</div>\n", styles: [".container{width:100%;max-width:500px}.header{display:inline;width:100%;max-width:100px}.button{padding:10px}\n"] }]
+        }] });
+
 class UserDetailComponent extends DetailView {
+    typename = "user";
     constructor() {
-        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(UserService));
+        super(inject(UserService));
     }
     ngOnInit() {
         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: "14.0.0", version: "20.1.1", type: UserDetailComponent, isStandalone: true, selector: "lib-user-detail", usesInheritance: true, ngImport: i0, template: "<div>\n  <a mat-icon-button class=\"padded_button\"\n     (click)=\"goBack()\"\n     (keydown)=\"goBack()\"\n       tabindex=\"0\"\n       role=\"button\">\n    <mat-icon>arrow_back</mat-icon>\n  </a>\n</div>\n \n<div class=\"container\">\n  <div *ngIf=\"item\" class=\"item_view\">\n    \n    <div style=\"width:100%; max-width:500px\">\n      <h3 class=\"item_heading\">{{item.username}} </h3>\n      <a mat-mini-fab\n         class=\"btn-block\"\n         [routerLink]=\"['/users/edit/', item.id]\">\n        <mat-icon>edit</mat-icon>\n      </a>\n    </div>\n\n    <div *ngIf=\"item.profile_url\" class=\"image_holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" style=\"height:120px;\">\n    </div>    \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</div>\n", styles: [":host{flex-grow:1}.container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px}.item_view{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:5px}.image_holder{display:flex;justify-content:center;align-items:center;overflow:hidden;padding:5px}.item_heading{display:inline;width:100%;max-width:100px}.item_field,.padded_button{padding:5px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    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\"></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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-user-detail', imports: [NgIf,
-                        RouterModule,
-                        MatButtonModule,
-                        MatIconModule], template: "<div>\n  <a mat-icon-button class=\"padded_button\"\n     (click)=\"goBack()\"\n     (keydown)=\"goBack()\"\n       tabindex=\"0\"\n       role=\"button\">\n    <mat-icon>arrow_back</mat-icon>\n  </a>\n</div>\n \n<div class=\"container\">\n  <div *ngIf=\"item\" class=\"item_view\">\n    \n    <div style=\"width:100%; max-width:500px\">\n      <h3 class=\"item_heading\">{{item.username}} </h3>\n      <a mat-mini-fab\n         class=\"btn-block\"\n         [routerLink]=\"['/users/edit/', item.id]\">\n        <mat-icon>edit</mat-icon>\n      </a>\n    </div>\n\n    <div *ngIf=\"item.profile_url\" class=\"image_holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" style=\"height:120px;\">\n    </div>    \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</div>\n", styles: [":host{flex-grow:1}.container{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:5px}.item_view{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:5px}.image_holder{display:flex;justify-content:center;align-items:center;overflow:hidden;padding:5px}.item_heading{display:inline;width:100%;max-width:100px}.item_field,.padded_button{padding:5px}\n"] }]
+                        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\"></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 FileUploadComponent {
+    files = input([], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    previewLoaded = output();
+    fileUploaded = output();
+    onPreviewRead(name, content) {
+        this.previewLoaded.emit({ name: name, content: content });
+    }
+    onFileUpload(name, event) {
+        if (!event.target) {
+            return;
+        }
+        const input_element = event.target;
+        if (input_element.files && input_element.files.length > 0) {
+            const file = input_element.files[0];
+            this.fileUploaded.emit({ name: name, file: file });
+            const record = this.files().find(f => f.name == name);
+            if (record && record.file_type == "image") {
+                this.readFile(name, file);
+            }
+        }
+    }
+    readFile(name, file) {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            if (reader.result) {
+                this.previewLoaded.emit({ name: name, content: reader.result });
+            }
+            ;
+        };
+    }
+    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$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }] });
+}
+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"] }]
+        }] });
+
+class FileRecord {
+    name = "";
+    display_name = "";
+    file_type = "standard";
+    file = null;
+    remote = "";
+    local = "";
+    constructor(params = {}) {
+        Object.assign(this, params);
+    }
+}
+
 class UserEditComponent extends EditView {
-    image = null;
-    temporaryImageUrl = "";
+    typename = "User";
+    files = signal([new FileRecord({ name: "image",
+            display_name: "Profile Image",
+            file_type: "image" })], ...(ngDevMode ? [{ debugName: "files" }] : []));
+    formBuilder = inject(FormBuilder);
+    form = this.formBuilder.group({
+        username: [''],
+        email: [''],
+        first_name: [''],
+        last_name: [''],
+        phone: ['']
+    });
     constructor() {
-        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(UserService));
+        super(inject(UserService));
     }
     ngOnInit() {
         this.onInit();
     }
+    onItemAvailable() {
+        const item = this.item();
+        if (!item) {
+            return;
+        }
+        this.form.setValue({
+            username: item.username,
+            email: item.email,
+            first_name: item.first_name,
+            last_name: item.last_name,
+            phone: item.phone
+        });
+        if (item.profile_url) {
+            this.files.update(files => { const file = files.find(f => f.name === "image"); if (file) {
+                file.remote = item.url + item.profile_url;
+            } ; return files; });
+        }
+        super.onItemAvailable();
+    }
+    submit() {
+        this.item.update((item) => { if (item) {
+            item = this.updateFromForm(item);
+        } return item; });
+        console.log(this.item());
+        super.submit();
+    }
+    updateFromForm(item) {
+        item.username = this.form.value.username || "";
+        item.email = this.form.value.email || "";
+        item.first_name = this.form.value.first_name || "";
+        item.last_name = this.form.value.last_name || "";
+        item.phone = this.form.value.phone || "";
+        return item;
+    }
     getTemplateItem() {
         return new PortalMember();
     }
-    onUploadedFileReady(file) {
-        this.image = file;
+    onPreviewLoaded(preview) {
+        this.files.update(files => { const file = files.find(f => f.name === preview.name); if (file) {
+            file.local = preview.content;
+        } ; return files; });
     }
-    onFileRead(content) {
-        this.temporaryImageUrl = content;
+    onFileUploaded(upload) {
+        this.files.update(files => { const file = files.find(f => f.name === upload.name); if (file) {
+            file.file = upload.file;
+        } ; return files; });
     }
     saveFiles(item) {
-        if (this.image) {
-            this._restService.postFile(item.id, "image", this.image).subscribe(item => this.onItemUpdated(item));
-        }
-        else {
-            this.onItemUpdated(item);
-        }
+        this.files().forEach(record => { if (record.file) {
+            this._restService.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: "14.0.0", version: "20.1.1", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<div>\n  <a mat-icon-button class=\"btn-block\"\n    (click)=\"goBack()\"\n    (keydown)=\"goBack()\"\n    tabindex=\"0\"\n    role=\"button\"><mat-icon>arrow_back</mat-icon></a>\n</div>\n\n<div class=\"container\">\n  <div *ngIf=\"item\" class=\"item_view\" style=\"width:100%;max-width:500px\">\n    <h1 *ngIf=\"createMode\" style=\"display:inline\">New User</h1>\n    <h1 *ngIf=\"!createMode\" style=\"display:inline\">Edit User</h1>\n    \n     <form class=\"form_card\" #createForm=\"ngForm\" (ngSubmit)=\"save()\">\n       <mat-form-field class=\"form_field\" style=\"width:100%\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form_field\" style=\"width:100%\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.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                [(ngModel)]=\"item.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                 [(ngModel)]=\"item.last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n       <div class=\"document_upload\">\n           <div *ngIf=\"temporaryImageUrl\" class=\"image_holder\">\n             <p>Update profile image</p>\n             <img alt=\"User Profile Image\" src=\"{{temporaryImageUrl}}\" style=\"height:120px;\">\n           </div>\n           <div *ngIf=\"!temporaryImageUrl && item.profile_url\" class=\"image_holder\">\n             <p>Update profile image</p>\n             <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" style=\"height:120px;\">\n           </div>\n           <div *ngIf=\"!temporaryImageUrl && !item.profile_url\">\n             <span>Upload a profile image</span>\n            </div>\n \n            <div class=\"button-row\">\n              <button mat-mini-fab\n                      (click)=\"imgFileInput.click()\">\n                <mat-icon>attachment</mat-icon>\n              </button>\n              <input hidden type=\"file\"\n                     #imgFileInput\n                     (change)=\"onFileUpload($event)\"/>\n            </div>            \n         </div>\n     \n     <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!createForm.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</div>\n", styles: [":host{flex-grow:1}.container{display:flex;justify-content:center;align-items:center;flex-direction:column}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column}.form_card{justify-content:center;align-items:center;flex-direction:column;display:flex}.form_field{padding:5px}.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}.document_upload{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}.image_holder{display:flex;justify-content:center;align-items:center;overflow:hidden;padding:5px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    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$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-user-edit', imports: [NgIf,
-                        FormsModule,
-                        RouterModule,
+                        ReactiveFormsModule,
                         MatButtonModule,
-                        MatCardModule,
+                        BackButtonComponent,
                         MatInputModule,
                         MatFormFieldModule,
                         MatIconModule,
-                    ], template: "<div>\n  <a mat-icon-button class=\"btn-block\"\n    (click)=\"goBack()\"\n    (keydown)=\"goBack()\"\n    tabindex=\"0\"\n    role=\"button\"><mat-icon>arrow_back</mat-icon></a>\n</div>\n\n<div class=\"container\">\n  <div *ngIf=\"item\" class=\"item_view\" style=\"width:100%;max-width:500px\">\n    <h1 *ngIf=\"createMode\" style=\"display:inline\">New User</h1>\n    <h1 *ngIf=\"!createMode\" style=\"display:inline\">Edit User</h1>\n    \n     <form class=\"form_card\" #createForm=\"ngForm\" (ngSubmit)=\"save()\">\n       <mat-form-field class=\"form_field\" style=\"width:100%\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form_field\" style=\"width:100%\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.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                [(ngModel)]=\"item.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                 [(ngModel)]=\"item.last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n       <div class=\"document_upload\">\n           <div *ngIf=\"temporaryImageUrl\" class=\"image_holder\">\n             <p>Update profile image</p>\n             <img alt=\"User Profile Image\" src=\"{{temporaryImageUrl}}\" style=\"height:120px;\">\n           </div>\n           <div *ngIf=\"!temporaryImageUrl && item.profile_url\" class=\"image_holder\">\n             <p>Update profile image</p>\n             <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" style=\"height:120px;\">\n           </div>\n           <div *ngIf=\"!temporaryImageUrl && !item.profile_url\">\n             <span>Upload a profile image</span>\n            </div>\n \n            <div class=\"button-row\">\n              <button mat-mini-fab\n                      (click)=\"imgFileInput.click()\">\n                <mat-icon>attachment</mat-icon>\n              </button>\n              <input hidden type=\"file\"\n                     #imgFileInput\n                     (change)=\"onFileUpload($event)\"/>\n            </div>            \n         </div>\n     \n     <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!createForm.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</div>\n", styles: [":host{flex-grow:1}.container{display:flex;justify-content:center;align-items:center;flex-direction:column}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column}.form_card{justify-content:center;align-items:center;flex-direction:column;display:flex}.form_field{padding:5px}.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}.document_upload{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}.image_holder{display:flex;justify-content:center;align-items:center;overflow:hidden;padding:5px}\n"] }]
+                        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"] }]
         }], ctorParameters: () => [] });
 
 class UserComponent extends ListView {
     constructor() {
-        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(UserService));
+        super(inject(UserService));
     }
     ngOnInit() {
         this.onInit();
     }
     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: "17.0.0", version: "20.1.1", type: UserComponent, isStandalone: true, selector: "lib-user", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n    <mat-nav-list>\n      @for (item of items; track item){\n      <mat-card mat-list-item class=\"item-card\"  [routerLink]=\"['/users/detail/', item.id]\" [routerLinkActive]=\"['is-active']\">\n        <mat-card-header>\n              <mat-card-title-group style=\"padding:5px\">\n                <mat-card-title>{{item.first_name}} {{item.last_name}}</mat-card-title>\n                <mat-card-subtitle>{{item.username}}</mat-card-subtitle>\n                \n            </mat-card-title-group>\n        </mat-card-header>\n        <mat-card-content>\n           <p>Email: {{item.email}} </p>\n        </mat-card-content>\n        </mat-card>\n      }\n    </mat-nav-list>\n\n</div>\n", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;align-items:center}.button_container{padding:10px}.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}.item-card{margin-bottom:8px;height:100%;width:100%;max-width:600px}.item-card:hover{background-color:#d3d3d3}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: UserComponent, isStandalone: true, selector: "lib-user", usesInheritance: true, ngImport: i0, template: "<div class=\"content-container\">\n    <mat-nav-list>\n      @for (item of items(); track item.id){\n      <mat-card mat-list-item class=\"item-card\" [routerLink]=\"['/users/detail/', item.id]\" [routerLinkActive]=\"['is-active']\">\n        <mat-card-header>\n              <mat-card-title-group style=\"padding:5px\">\n                <mat-card-title>{{item.first_name}} {{item.last_name}}</mat-card-title>\n                <mat-card-subtitle>{{item.username}}</mat-card-subtitle> \n            </mat-card-title-group>\n        </mat-card-header>\n        \n        <mat-card-content>\n           <p>Email: {{item.email}} </p>\n        </mat-card-content>\n        </mat-card>\n      }\n    </mat-nav-list>\n\n</div>\n", styles: [":host{flex-grow:1}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i2$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i2$3.MatCardTitleGroup, selector: "mat-card-title-group" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.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: [MatListModule, MatCardModule,
                         MatButtonModule,
                         MatIconModule,
-                        RouterModule], template: "<div class=\"container\">\n    <mat-nav-list>\n      @for (item of items; track item){\n      <mat-card mat-list-item class=\"item-card\"  [routerLink]=\"['/users/detail/', item.id]\" [routerLinkActive]=\"['is-active']\">\n        <mat-card-header>\n              <mat-card-title-group style=\"padding:5px\">\n                <mat-card-title>{{item.first_name}} {{item.last_name}}</mat-card-title>\n                <mat-card-subtitle>{{item.username}}</mat-card-subtitle>\n                \n            </mat-card-title-group>\n        </mat-card-header>\n        <mat-card-content>\n           <p>Email: {{item.email}} </p>\n        </mat-card-content>\n        </mat-card>\n      }\n    </mat-nav-list>\n\n</div>\n", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;align-items:center}.button_container{padding:10px}.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}.item-card{margin-bottom:8px;height:100%;width:100%;max-width:600px}.item-card:hover{background-color:#d3d3d3}\n"] }]
+                        RouterModule], template: "<div class=\"content-container\">\n    <mat-nav-list>\n      @for (item of items(); track item.id){\n      <mat-card mat-list-item class=\"item-card\" [routerLink]=\"['/users/detail/', item.id]\" [routerLinkActive]=\"['is-active']\">\n        <mat-card-header>\n              <mat-card-title-group style=\"padding:5px\">\n                <mat-card-title>{{item.first_name}} {{item.last_name}}</mat-card-title>\n                <mat-card-subtitle>{{item.username}}</mat-card-subtitle> \n            </mat-card-title-group>\n        </mat-card-header>\n        \n        <mat-card-content>\n           <p>Email: {{item.email}} </p>\n        </mat-card-content>\n        </mat-card>\n      }\n    </mat-nav-list>\n\n</div>\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"] }]
         }], ctorParameters: () => [] });
 
 class UserSelectComponent {
-    toAdd = null;
-    items = [];
-    candidates = [];
-    table;
+    toAdd = signal(0, ...(ngDevMode ? [{ debugName: "toAdd" }] : []));
+    selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    itemAdded = output();
+    itemRemoved = output();
+    table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "table" }] : []));
     tableColumns = ["first_name", "last_name", "email", "remove"];
-    remove(to_remove) {
-        this.items = this.items.filter(item => item.url != to_remove.url);
-        this.table.renderRows();
+    remove(id) {
+        this.itemRemoved.emit(id);
+        this.table()?.renderRows();
     }
     add() {
-        if (!this.toAdd) {
-            return;
-        }
-        this.items.push(this.toAdd);
-        this.toAdd = null;
-        this.table.renderRows();
+        this.itemAdded.emit(this.toAdd());
+        this.table()?.renderRows();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: UserSelectComponent, isStandalone: true, selector: "lib-user-select", inputs: { items: "items", candidates: "candidates" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true }], ngImport: i0, template: "<div style=\"display:flex; text-align: center; justify-content: center; flex-direction: column\">\n  <p style=\"padding:5px\">\n    <b>Members\n    </b>\n  </p>\n  \n    <div>\n        <mat-form-field>\n          <mat-label>Add Member\n          </mat-label>\n          <mat-select [(ngModel)]=\"toAdd\" name=\"to_add\">\n            <mat-option *ngFor=\"let user of candidates\" [value]=\"user\">{{user.username}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        \n        <button mat-mini-fab\n                type=\"button\"\n                class=\"form_action_button\"\n                (click)=\"add()\">\n          <mat-icon>add\n          </mat-icon>\n        </button>\n    </div>\n\n    <div *ngIf=\"items.length > 0\">\n    <table mat-table\n            [dataSource]=\"items\"\n            class=\"mat-elevation-z8\">\n\n    <ng-container matColumnDef=\"first_name\">\n      <th mat-header-cell *matHeaderCellDef>First Name\n      </th>\n        <td mat-cell *matCellDef=\"let element\">\n        {{element.first_name}}\n        </td>\n    </ng-container>\n\n        <ng-container matColumnDef=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>\n            Last Name\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n            {{element.last_name}}\n        </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef>\n            Email\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n            {{element.email}}\n        </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"remove\">\n          <th mat-header-cell *matHeaderCellDef>Remove\n          </th>\n        <td mat-cell *matCellDef=\"let element\">\n            <button mat-icon-button\n                    color=\"primary\"\n                    aria-label=\"Remove a user\"\n                    (click)=\"remove(element)\">\n              <mat-icon>remove\n              </mat-icon>\n            </button>\n        </td>\n        </ng-container>\n\n    <tr mat-header-row\n        *matHeaderRowDef=\"tableColumns\">\n    </tr>\n    <tr mat-row\n        *matRowDef=\"let row; columns: tableColumns;\">\n    </tr>\n    </table>\n    </div>\n</div>\n", styles: [".table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: UserSelectComponent, isStandalone: true, selector: "lib-user-select", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemAdded: "itemAdded", itemRemoved: "itemRemoved" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<div class='select-container'>\n  <p style=\"padding:5px\">\n    <b>Members</b>\n  </p>\n  \n    <div>\n        <mat-form-field>\n          <mat-label>Add Member</mat-label>\n          <mat-select [(ngModel)]=\"toAdd\" name=\"to_add\">\n            @for(item of options(); track item.id){\n            <mat-option [value]=\"item.id\">{{item.username}}\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        \n        <button mat-mini-fab\n                type=\"button\"\n                class=\"form_action_button\"\n                (click)=\"add()\">\n          <mat-icon>add\n          </mat-icon>\n        </button>\n    </div>\n\n    @if(selected().length > 0){\n    <table mat-table [dataSource]=\"selected()\" class=\"mat-elevation-z8\">\n\n    <ng-container matColumnDef=\"first_name\">\n      <th mat-header-cell *matHeaderCellDef>First Name\n      </th>\n        <td mat-cell *matCellDef=\"let element\">\n        {{element.first_name}}\n        </td>\n    </ng-container>\n\n        <ng-container matColumnDef=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>\n            Last Name\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n            {{element.last_name}}\n        </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef>\n            Email\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n            {{element.email}}\n        </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"remove\">\n          <th mat-header-cell *matHeaderCellDef>Remove\n          </th>\n        <td mat-cell *matCellDef=\"let element\">\n            <button mat-icon-button\n                    color=\"primary\"\n                    aria-label=\"Remove an item\"\n                    (click)=\"remove(element.id)\">\n              <mat-icon>remove\n              </mat-icon>\n            </button>\n        </td>\n        </ng-container>\n\n    <tr mat-header-row\n        *matHeaderRowDef=\"tableColumns\">\n    </tr>\n    <tr mat-row\n        *matRowDef=\"let row; columns: tableColumns;\">\n    </tr>\n    </table>\n    }\n</div>\n", styles: [".select-container,.table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserSelectComponent, decorators: [{
             type: Component,
@@ -675,45 +765,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatButtonModule,
                         MatSelectModule,
                         MatIconModule,
-                        FormsModule], template: "<div style=\"display:flex; text-align: center; justify-content: center; flex-direction: column\">\n  <p style=\"padding:5px\">\n    <b>Members\n    </b>\n  </p>\n  \n    <div>\n        <mat-form-field>\n          <mat-label>Add Member\n          </mat-label>\n          <mat-select [(ngModel)]=\"toAdd\" name=\"to_add\">\n            <mat-option *ngFor=\"let user of candidates\" [value]=\"user\">{{user.username}}\n            </mat-option>\n          </mat-select>\n        </mat-form-field>\n        \n        <button mat-mini-fab\n                type=\"button\"\n                class=\"form_action_button\"\n                (click)=\"add()\">\n          <mat-icon>add\n          </mat-icon>\n        </button>\n    </div>\n\n    <div *ngIf=\"items.length > 0\">\n    <table mat-table\n            [dataSource]=\"items\"\n            class=\"mat-elevation-z8\">\n\n    <ng-container matColumnDef=\"first_name\">\n      <th mat-header-cell *matHeaderCellDef>First Name\n      </th>\n        <td mat-cell *matCellDef=\"let element\">\n        {{element.first_name}}\n        </td>\n    </ng-container>\n\n        <ng-container matColumnDef=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>\n            Last Name\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n            {{element.last_name}}\n        </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef>\n            Email\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n            {{element.email}}\n        </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"remove\">\n          <th mat-header-cell *matHeaderCellDef>Remove\n          </th>\n        <td mat-cell *matCellDef=\"let element\">\n            <button mat-icon-button\n                    color=\"primary\"\n                    aria-label=\"Remove a user\"\n                    (click)=\"remove(element)\">\n              <mat-icon>remove\n              </mat-icon>\n            </button>\n        </td>\n        </ng-container>\n\n    <tr mat-header-row\n        *matHeaderRowDef=\"tableColumns\">\n    </tr>\n    <tr mat-row\n        *matRowDef=\"let row; columns: tableColumns;\">\n    </tr>\n    </table>\n    </div>\n</div>\n", styles: [".table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\n"] }]
-        }], propDecorators: { items: [{
-                type: Input
-            }], candidates: [{
-                type: Input
-            }], table: [{
-                type: ViewChild,
-                args: [MatTable]
-            }] } });
+                        FormsModule], template: "<div class='select-container'>\n  <p style=\"padding:5px\">\n    <b>Members</b>\n  </p>\n  \n    <div>\n        <mat-form-field>\n          <mat-label>Add Member</mat-label>\n          <mat-select [(ngModel)]=\"toAdd\" name=\"to_add\">\n            @for(item of options(); track item.id){\n            <mat-option [value]=\"item.id\">{{item.username}}\n            </mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n        \n        <button mat-mini-fab\n                type=\"button\"\n                class=\"form_action_button\"\n                (click)=\"add()\">\n          <mat-icon>add\n          </mat-icon>\n        </button>\n    </div>\n\n    @if(selected().length > 0){\n    <table mat-table [dataSource]=\"selected()\" class=\"mat-elevation-z8\">\n\n    <ng-container matColumnDef=\"first_name\">\n      <th mat-header-cell *matHeaderCellDef>First Name\n      </th>\n        <td mat-cell *matCellDef=\"let element\">\n        {{element.first_name}}\n        </td>\n    </ng-container>\n\n        <ng-container matColumnDef=\"last_name\">\n        <th mat-header-cell *matHeaderCellDef>\n            Last Name\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n            {{element.last_name}}\n        </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef>\n            Email\n        </th>\n        <td mat-cell *matCellDef=\"let element\">\n            {{element.email}}\n        </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"remove\">\n          <th mat-header-cell *matHeaderCellDef>Remove\n          </th>\n        <td mat-cell *matCellDef=\"let element\">\n            <button mat-icon-button\n                    color=\"primary\"\n                    aria-label=\"Remove an item\"\n                    (click)=\"remove(element.id)\">\n              <mat-icon>remove\n              </mat-icon>\n            </button>\n        </td>\n        </ng-container>\n\n    <tr mat-header-row\n        *matHeaderRowDef=\"tableColumns\">\n    </tr>\n    <tr mat-row\n        *matRowDef=\"let row; columns: tableColumns;\">\n    </tr>\n    </table>\n    }\n</div>\n", styles: [".select-container,.table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\n"] }]
+        }] });
 
 class GroupDetailComponent extends DetailView {
+    typename = "group";
     constructor() {
-        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(GroupService));
+        super(inject(GroupService));
+    }
+    ngOnInit() {
+        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: "14.0.0", version: "20.1.1", type: GroupDetailComponent, isStandalone: true, selector: "lib-group-detail", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <div>\n    <a mat-icon-button class=\"btn-block\"\n       (click)=\"goBack()\"\n       (keydown)=\"goBack()\"\n       tabindex=\"0\"\n       role=\"button\"><mat-icon>arrow_back</mat-icon></a>\n  </div>\n  \n  <div *ngIf=\"item\" class=\"item_view\">\n    <div>\n      <h1 class=\"mat-display-1\" style=\"display:inline\"> {{item.name}} </h1>\n      <a mat-mini-fab class=\"btn-block\" [routerLink]=\"['/groups/edit/', item.id]\">\n        <mat-icon>edit</mat-icon>\n      </a> \n   </div>\n    <div class=\"form_field\">{{item.name}}</div>\n </div>\n    \n</div>\n", styles: [".container{display:flex;flex-direction:column;padding:10px}.item_view{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px}.form_field,.btn-block{padding:10px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-group-detail', imports: [NgIf,
-                        FormsModule,
-                        RouterModule,
-                        MatButtonModule,
-                        MatCardModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        MatIconModule], template: "<div class=\"container\">\n  <div>\n    <a mat-icon-button class=\"btn-block\"\n       (click)=\"goBack()\"\n       (keydown)=\"goBack()\"\n       tabindex=\"0\"\n       role=\"button\"><mat-icon>arrow_back</mat-icon></a>\n  </div>\n  \n  <div *ngIf=\"item\" class=\"item_view\">\n    <div>\n      <h1 class=\"mat-display-1\" style=\"display:inline\"> {{item.name}} </h1>\n      <a mat-mini-fab class=\"btn-block\" [routerLink]=\"['/groups/edit/', item.id]\">\n        <mat-icon>edit</mat-icon>\n      </a> \n   </div>\n    <div class=\"form_field\">{{item.name}}</div>\n </div>\n    \n</div>\n", styles: [".container{display:flex;flex-direction:column;padding:10px}.item_view{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px}.form_field,.btn-block{padding:10px}\n"] }]
+                        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"] }]
         }], ctorParameters: () => [] });
 
 class GroupComponent extends ListView {
     displayedColumns = ['name'];
     constructor() {
-        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(GroupService));
+        super(inject(GroupService));
     }
     ngOnInit() {
         this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: GroupComponent, isStandalone: true, selector: "lib-group", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n        <div>\n        <table mat-table [dataSource]=\"items\" class=\"mat-elevation-z8\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef>Name</th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n              [routerLink]=\"row.id\"\n              [routerLinkActive]=\"['is-active']\"\n              ></tr>\n\n        </table>\n        </div>\n</div>\n", styles: [".container{height:100%;width:100%;display:flex;padding:10px;margin:10px}.button_container{padding:10px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: GroupComponent, isStandalone: true, selector: "lib-group", usesInheritance: true, ngImport: i0, template: "<div class=\"tabular-list-container\">\n  <div>\n    <table mat-table [dataSource]=\"items()\" class=\"mat-elevation-z8\">\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef>Name</th>\n        <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [routerLink]=\"['/groups/detail/', row.id]\"\n          [routerLinkActive]=\"['is-active']\"\n          ></tr>\n        </table>\n  </div>\n</div>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupComponent, decorators: [{
             type: Component,
@@ -722,19 +804,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         RouterModule
-                    ], template: "<div class=\"container\">\n        <div>\n        <table mat-table [dataSource]=\"items\" class=\"mat-elevation-z8\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef>Name</th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n              [routerLink]=\"row.id\"\n              [routerLinkActive]=\"['is-active']\"\n              ></tr>\n\n        </table>\n        </div>\n</div>\n", styles: [".container{height:100%;width:100%;display:flex;padding:10px;margin:10px}.button_container{padding:10px}.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"] }]
+                    ], template: "<div class=\"tabular-list-container\">\n  <div>\n    <table mat-table [dataSource]=\"items()\" class=\"mat-elevation-z8\">\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef>Name</th>\n        <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [routerLink]=\"['/groups/detail/', row.id]\"\n          [routerLinkActive]=\"['is-active']\"\n          ></tr>\n        </table>\n  </div>\n</div>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"] }]
         }], ctorParameters: () => [] });
 
 class OrganizationComponent extends ListView {
     displayedColumns = ['name', 'website', 'is_partner'];
     constructor() {
-        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(OrganizationService));
+        super(inject(OrganizationService));
     }
     ngOnInit() {
         this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n        <div>\n        <table mat-table [dataSource]=\"items\" class=\"mat-elevation-z8\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef>Name</th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"website\">\n            <th mat-header-cell *matHeaderCellDef> Website </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.website}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"is_partner\">\n            <th mat-header-cell *matHeaderCellDef> Is Partner </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.is_partner}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n              [routerLink]=\"row.id\"\n              [routerLinkActive]=\"['is-active']\"\n              ></tr>\n\n        </table>\n        </div>\n        <div class=\"button_container\">\n        <a mat-fab class=\"btn-block\" [routerLink]=\"['create']\">\n          <mat-icon>add</mat-icon></a>\n        </div>\n</div>\n", styles: [".container{height:100%;width:100%;display:flex;padding:10px;margin:10px}.button_container{padding:10px}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", usesInheritance: true, ngImport: i0, template: "<div class=\"tabular-list-container\">\n    <div>\n    <table mat-table [dataSource]=\"items()\" class=\"mat-elevation-z8\">\n        <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef>Name</th>\n        <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"website\">\n        <th mat-header-cell *matHeaderCellDef> Website </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element.website}} </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"is_partner\">\n        <th mat-header-cell *matHeaderCellDef> Is Partner </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element.is_partner}} </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n            [routerLink]=\"['/organizations/detail/', row.id]\"\n            [routerLinkActive]=\"['is-active']\"\n            ></tr>\n\n    </table>\n    </div>\n    \n    <div class=\"button-container\">\n    <a mat-fab class=\"padded-button\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n</div>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$2.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$2.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$2.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$2.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$2.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$2.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$2.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$2.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$2.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$2.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { 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: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
@@ -743,37 +825,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatButtonModule,
                         MatIconModule,
                         RouterModule
-                    ], template: "<div class=\"container\">\n        <div>\n        <table mat-table [dataSource]=\"items\" class=\"mat-elevation-z8\">\n          <ng-container matColumnDef=\"name\">\n            <th mat-header-cell *matHeaderCellDef>Name</th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"website\">\n            <th mat-header-cell *matHeaderCellDef> Website </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.website}} </td>\n          </ng-container>\n\n          <ng-container matColumnDef=\"is_partner\">\n            <th mat-header-cell *matHeaderCellDef> Is Partner </th>\n            <td mat-cell *matCellDef=\"let element\"> {{element.is_partner}} </td>\n          </ng-container>\n\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n          <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n              [routerLink]=\"row.id\"\n              [routerLinkActive]=\"['is-active']\"\n              ></tr>\n\n        </table>\n        </div>\n        <div class=\"button_container\">\n        <a mat-fab class=\"btn-block\" [routerLink]=\"['create']\">\n          <mat-icon>add</mat-icon></a>\n        </div>\n</div>\n", styles: [".container{height:100%;width:100%;display:flex;padding:10px;margin:10px}.button_container{padding:10px}.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"] }]
+                    ], template: "<div class=\"tabular-list-container\">\n    <div>\n    <table mat-table [dataSource]=\"items()\" class=\"mat-elevation-z8\">\n        <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef>Name</th>\n        <td mat-cell *matCellDef=\"let element\"> {{element.name}} </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"website\">\n        <th mat-header-cell *matHeaderCellDef> Website </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element.website}} </td>\n        </ng-container>\n\n        <ng-container matColumnDef=\"is_partner\">\n        <th mat-header-cell *matHeaderCellDef> Is Partner </th>\n        <td mat-cell *matCellDef=\"let element\"> {{element.is_partner}} </td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n        <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n            [routerLink]=\"['/organizations/detail/', row.id]\"\n            [routerLinkActive]=\"['is-active']\"\n            ></tr>\n\n    </table>\n    </div>\n    \n    <div class=\"button-container\">\n    <a mat-fab class=\"padded-button\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n</div>\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"] }]
         }], ctorParameters: () => [] });
 
 class OrganizationDetailComponent extends DetailView {
+    typename = "organization";
     constructor() {
-        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(OrganizationService));
+        super(inject(OrganizationService));
+    }
+    ngOnInit() {
+        this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\n  <div>\n    <a mat-icon-button class=\"btn-block\"\n       (click)=\"goBack()\"\n       (keydown)=\"goBack()\"\n       tabindex=\"0\"\n       role=\"button\"><mat-icon>arrow_back</mat-icon></a>\n  </div>\n  \n  <div *ngIf=\"item\" class=\"item_view\">\n    <div>\n      <h3 class=\"mat-display-1\" style=\"display:inline\"> {{item.name}} </h3> \n      <a mat-mini-fab class=\"btn-block\" [routerLink]=\"['/organizations/edit/', item.id]\">\n        <mat-icon>edit</mat-icon>\n      </a>\n   </div>\n    <div class=\"form_field\">{{item.description}}</div>\n    <div class=\"form_field\"><h3>Address</h3>{{item.address}}</div>\n    <div class=\"form_field\"><h3>Website</h3>{{item.website}}</div>\n  </div>\n  \n</div>\n", styles: [".container{display:flex;flex-direction:column;padding:10px}.item_view{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px}.form_field,.btn-block{padding:10px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
+    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      [route]=\"typename\"></lib-detail-header>\n\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    <div class=\"item-field\">\n      <h3>Address</h3>{{item.address}}\n    </div>\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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-organization-detail', imports: [NgIf,
-                        FormsModule,
-                        RouterModule,
-                        MatButtonModule,
-                        MatCardModule,
-                        MatInputModule,
-                        MatFormFieldModule,
-                        MatIconModule], template: "<div class=\"container\">\n  <div>\n    <a mat-icon-button class=\"btn-block\"\n       (click)=\"goBack()\"\n       (keydown)=\"goBack()\"\n       tabindex=\"0\"\n       role=\"button\"><mat-icon>arrow_back</mat-icon></a>\n  </div>\n  \n  <div *ngIf=\"item\" class=\"item_view\">\n    <div>\n      <h3 class=\"mat-display-1\" style=\"display:inline\"> {{item.name}} </h3> \n      <a mat-mini-fab class=\"btn-block\" [routerLink]=\"['/organizations/edit/', item.id]\">\n        <mat-icon>edit</mat-icon>\n      </a>\n   </div>\n    <div class=\"form_field\">{{item.description}}</div>\n    <div class=\"form_field\"><h3>Address</h3>{{item.address}}</div>\n    <div class=\"form_field\"><h3>Website</h3>{{item.website}}</div>\n  </div>\n  \n</div>\n", styles: [".container{display:flex;flex-direction:column;padding:10px}.item_view{display:flex;justify-content:center;align-items:center;flex-direction:column;padding:10px}.form_field,.btn-block{padding:10px}\n"] }]
+                        BackButtonComponent,
+                        DetailHeaderComponent], 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      [route]=\"typename\"></lib-detail-header>\n\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    <div class=\"item-field\">\n      <h3>Address</h3>{{item.address}}\n    </div>\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 OrganizationEditComponent extends EditView {
-    countryOptions = [];
+    countryOptions = signal([], ...(ngDevMode ? [{ debugName: "countryOptions" }] : []));
+    candidateMembers = signal([], ...(ngDevMode ? [{ debugName: "candidateMembers" }] : []));
+    selectedMembers = signal([], ...(ngDevMode ? [{ debugName: "selectedMembers" }] : []));
+    typename = "Organization";
+    formBuilder = inject(FormBuilder);
+    form = this.formBuilder.group({ name: [''],
+        acronym: [''],
+        description: [''],
+        address: [''],
+        website: [''],
+        country: [''] });
     constructor() {
-        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(OrganizationService));
+        super(inject(OrganizationService));
     }
     ngOnInit() {
         this.onInit();
         this.fetchRestOptions();
     }
+    onItemAndUserAvailable(_) {
+        const item = this.item();
+        if (item) {
+            this.form.setValue({ name: item.name,
+                acronym: item.acronym,
+                description: item.description,
+                address: item.address,
+                website: item.website,
+                country: item.country
+            });
+            this._userService.get("?organization=" + item.id).subscribe(users => this.selectedMembers.set(users));
+            this._userService.get().subscribe(users => this.candidateMembers.set(users));
+        }
+    }
+    submit() {
+        this.item.update((item) => { if (item) {
+            item = this.updateFromForm(item);
+        } return item; });
+        super.submit();
+    }
+    updateFromForm(item) {
+        item.name = this.form.value.name || "";
+        item.acronym = this.form.value.acronym || "";
+        item.description = this.form.value.description || "";
+        item.address = this.form.value.address || "";
+        item.website = this.form.value.website || "";
+        item.country = this.form.value.country || "";
+        return item;
+    }
     getTemplateItem() {
         return new Organization();
     }
@@ -783,22 +903,41 @@ class OrganizationEditComponent extends EditView {
         }
     }
     onCountryChoices(choices) {
-        this.countryOptions = [];
-        choices.forEach(c => this.countryOptions.push(c.display_name));
+        this.countryOptions.update(() => choices.map(c => c.display_name));
+    }
+    onMemberRemoved(id) {
+        const url = this.selectedMembers().find(m => m.id == id).url;
+        this.selectedMembers.update(members => members.filter(m => m.id != id));
+        this.item.update(item => { if (item) {
+            item.members.filter(m => m != url);
+        } return item; });
+    }
+    onMemberAdded(id) {
+        const selected = this.candidateMembers().find(m => m.id == id);
+        if (selected) {
+            this.selectedMembers.update(members => { members.push(selected); return members; });
+        }
+        this.candidateMembers.update(members => members.filter(m => m.id != id));
+        const url = this.selectedMembers().find(m => m.id == id).url;
+        this.item.update(item => { if (item) {
+            item.members.push(url);
+        } return item; });
     }
     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: "14.0.0", version: "20.1.1", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<div>\n  <a mat-icon-button class=\"btn-block\" (click)=\"goBack()\"\n     (keydown)=\"goBack()\"\n       tabindex=\"0\"\n       role=\"button\">\n    <mat-icon>arrow_back</mat-icon>\n  </a>\n</div>\n \n<div class=\"container\"> \n  <div *ngIf=\"item\" class=\"item_view\" style=\"width:100%;max-width:500px\">\n    <h1 *ngIf=\"createMode\" style=\"display:inline\">New Organization</h1>\n    <h1 *ngIf=\"!createMode\" style=\"display:inline\">Edit Organization</h1>\n\n    <form class=\"form_card\" #createForm=\"ngForm\" (ngSubmit)=\"save()\">\n\n      <mat-form-field class=\"form_field\" style=\"width:100%\">\n          <mat-label *ngIf=\"!createMode\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <mat-form-field class=\"form_field\">\n          <mat-label *ngIf=\"!createMode\">Acronym</mat-label> \n          <input matInput placeholder=\"Acronym\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.acronym\"\n                 name=\"acronym\">\n        </mat-form-field>\n \n        <mat-form-field class=\"form_field\" style=\"width:100%\">\n          <mat-label *ngIf=\"!createMode\">Description</mat-label>\n          <textarea matInput placeholder=\"Description\"\n                    type=\"text\"\n                    [(ngModel)]=\"item.description\"\n                    name=\"description\"\n                    style=\"min-height:150px\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-form-field class=\"form_field\">\n          <mat-label *ngIf=\"!createMode\">Address</mat-label>\n          <textarea matInput placeholder=\"Address\"\n                    type=\"text\"\n                    [(ngModel)]=\"item.address\"\n                    name=\"description\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Country</mat-label>\n          <mat-select [(ngModel)]=\"item.country\" name=\"country\" required>\n            <mat-option\n              *ngFor=\"let country of countryOptions\"\n              [value]=\"country\">{{country}}\n            </mat-option>\n          </mat-select>\n       </mat-form-field>\n\n         <div class=\"button_group\">\n           <button mat-fab\n                   class=\"form_action_button\"\n                   type=\"submit\"\n                   [disabled]=\"!createForm.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</div>\n", styles: [":host{flex-grow:1}.container{display:flex;justify-content:center;align-items:center;flex-direction:column}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column}.form_card{justify-content:center;align-items:center;flex-direction:column;display:flex}.form_field{padding:5px}.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}.document_upload{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: 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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }] });
+    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\" (ngSubmit)=\"submit()\">\n\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label *ngIf=\"!createMode()\" 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 *ngIf=\"!createMode()\" 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 *ngIf=\"!createMode()\" for=\"description\">Description</mat-label>\n          <textarea matInput placeholder=\"Description\"\n                    type=\"text\"\n                    id=\"description\"\n                    formControlName=\"description\"\n                    name=\"description\"\n                    class=\"medium-textarea\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-form-field class=\"form-field-wide\">\n          <mat-label *ngIf=\"!createMode()\" for=\"address\">Address</mat-label>\n          <textarea matInput placeholder=\"Address\"\n                    type=\"text\"\n                    id=\"address\"\n                    formControlName=\"address\"\n                    name=\"address\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-form-field class=\"form-field\">\n          <mat-label *ngIf=\"!createMode()\" 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\">{{country}}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n\n        <lib-user-select [selected]=\"selectedMembers()\"\n                         [options]=\"candidateMembers()\"\n                         (itemAdded)=\"onMemberAdded($event)\"\n                         (itemRemoved)=\"onMemberRemoved($event)\">\n        </lib-user-select>\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>\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: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UserSelectComponent, selector: "lib-user-select", inputs: ["selected", "options"], outputs: ["itemAdded", "itemRemoved"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$1.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: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-organization-edit', imports: [NgIf, NgFor,
-                        FormsModule,
+                        UserSelectComponent,
+                        ReactiveFormsModule,
                         MatButtonModule,
                         MatInputModule,
                         MatSelectModule,
                         MatFormFieldModule,
                         MatIconModule,
-                        MatCheckboxModule], template: "<div>\n  <a mat-icon-button class=\"btn-block\" (click)=\"goBack()\"\n     (keydown)=\"goBack()\"\n       tabindex=\"0\"\n       role=\"button\">\n    <mat-icon>arrow_back</mat-icon>\n  </a>\n</div>\n \n<div class=\"container\"> \n  <div *ngIf=\"item\" class=\"item_view\" style=\"width:100%;max-width:500px\">\n    <h1 *ngIf=\"createMode\" style=\"display:inline\">New Organization</h1>\n    <h1 *ngIf=\"!createMode\" style=\"display:inline\">Edit Organization</h1>\n\n    <form class=\"form_card\" #createForm=\"ngForm\" (ngSubmit)=\"save()\">\n\n      <mat-form-field class=\"form_field\" style=\"width:100%\">\n          <mat-label *ngIf=\"!createMode\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <mat-form-field class=\"form_field\">\n          <mat-label *ngIf=\"!createMode\">Acronym</mat-label> \n          <input matInput placeholder=\"Acronym\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.acronym\"\n                 name=\"acronym\">\n        </mat-form-field>\n \n        <mat-form-field class=\"form_field\" style=\"width:100%\">\n          <mat-label *ngIf=\"!createMode\">Description</mat-label>\n          <textarea matInput placeholder=\"Description\"\n                    type=\"text\"\n                    [(ngModel)]=\"item.description\"\n                    name=\"description\"\n                    style=\"min-height:150px\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-form-field class=\"form_field\">\n          <mat-label *ngIf=\"!createMode\">Address</mat-label>\n          <textarea matInput placeholder=\"Address\"\n                    type=\"text\"\n                    [(ngModel)]=\"item.address\"\n                    name=\"description\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-form-field>\n          <mat-label>Country</mat-label>\n          <mat-select [(ngModel)]=\"item.country\" name=\"country\" required>\n            <mat-option\n              *ngFor=\"let country of countryOptions\"\n              [value]=\"country\">{{country}}\n            </mat-option>\n          </mat-select>\n       </mat-form-field>\n\n         <div class=\"button_group\">\n           <button mat-fab\n                   class=\"form_action_button\"\n                   type=\"submit\"\n                   [disabled]=\"!createForm.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</div>\n", styles: [":host{flex-grow:1}.container{display:flex;justify-content:center;align-items:center;flex-direction:column}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column}.form_card{justify-content:center;align-items:center;flex-direction:column;display:flex}.form_field{padding:5px}.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}.document_upload{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"] }]
+                        MatCheckboxModule,
+                        BackButtonComponent], 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\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label *ngIf=\"!createMode()\" 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 *ngIf=\"!createMode()\" 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 *ngIf=\"!createMode()\" for=\"description\">Description</mat-label>\n          <textarea matInput placeholder=\"Description\"\n                    type=\"text\"\n                    id=\"description\"\n                    formControlName=\"description\"\n                    name=\"description\"\n                    class=\"medium-textarea\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-form-field class=\"form-field-wide\">\n          <mat-label *ngIf=\"!createMode()\" for=\"address\">Address</mat-label>\n          <textarea matInput placeholder=\"Address\"\n                    type=\"text\"\n                    id=\"address\"\n                    formControlName=\"address\"\n                    name=\"address\"\n                    required></textarea>\n        </mat-form-field>\n\n        <mat-form-field class=\"form-field\">\n          <mat-label *ngIf=\"!createMode()\" 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\">{{country}}</mat-option>\n            }\n          </mat-select>\n        </mat-form-field>\n\n        <lib-user-select [selected]=\"selectedMembers()\"\n                         [options]=\"candidateMembers()\"\n                         (itemAdded)=\"onMemberAdded($event)\"\n                         (itemRemoved)=\"onMemberRemoved($event)\">\n        </lib-user-select>\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>\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"] }]
         }], ctorParameters: () => [] });
 
 /*