ichec-angular-core 0.0.7 → 0.0.9

package/fesm2022/ichec-angular-core.mjs

@@ -19,9 +19,9 @@ 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 * as i4 from '@angular/material/input';
+import * as i4$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i3$2 from '@angular/material/form-field';
+import * as i4 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import * as i2$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
@@ -37,6 +37,7 @@ class PortalMember {
     last_name = "";
     phone = "";
     organization = "";
+    profile_url = "";
 }
 class Group {
     name = "";
@@ -99,6 +100,16 @@ class RestService {
         });
         return this._http.patch(this.getMediaUrl() + id + "/", form, { headers: headers }).pipe(mergeMap(_ => this.getItem(id)), catchError(this.handleError));
     }
+    postFile(id, field, file) {
+        const token = "Token " + localStorage.getItem("api_token");
+        const headers = new HttpHeaders({
+            'Authorization': token,
+            'Accept': 'application/json'
+        });
+        const form = new FormData();
+        form.append("file", file);
+        return this._http.post(this.getBaseUrl() + id + "/" + field, form, { headers: headers }).pipe(mergeMap(_ => this.getItem(id)), catchError(this.handleError));
+    }
     patchItem(item, include_keys, exclude_keys) {
         // eslint-disable-next-line  @typescript-eslint/no-explicit-any
         function replacer(key, value) {
@@ -185,11 +196,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
         }], ctorParameters: () => [] });
 
 class GroupService extends RestService {
-    userService;
+    userService = inject(UserService);
     userItems = new BehaviorSubject([]);
     constructor() {
         super("groups", inject(ENDPOINT_URL), inject(HttpClient));
-        this.userService = inject(UserService);
         this.userService.loggedInUser.subscribe(user => this.refreshUserItems(user));
     }
     refreshUserItems(user) {
@@ -225,34 +235,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
         }], ctorParameters: () => [] });
 
 class LeftNavService {
-    userService;
-    groupService;
-    groups = [];
-    options = [];
+    activeOptions = new Set();
+    _groups = [];
+    _defaultOptions = [];
+    _groupService = inject(GroupService);
     constructor() {
-        this.userService = inject(UserService);
-        this.groupService = inject(GroupService);
-        this.groupService.userItems.subscribe(groups => this.onGroupsUpdated(groups));
+        this._groupService.userItems.subscribe(groups => this.onGroupsUpdated(groups));
     }
     onGroupsUpdated(groups) {
-        this.groups = groups;
-        this.updateOptions();
-    }
-    isConsortiumAdmin() {
-        return this.groups.some(g => g.name == "ConsortiumAdmins");
-    }
-    updateOptions() {
-        if (this.isConsortiumAdmin()) {
-            this.options = [
-                { name: "Home", route: "home" },
-                { name: "Facilities", route: "facilities" },
-                { name: "Access Calls", route: "access_calls" },
-                { name: "Users", route: "users" },
-            ];
-        }
-        else {
-            this.options = [];
-        }
+        this.activeOptions = new Set();
+        this._defaultOptions.forEach(e => this.activeOptions.add(e));
+        groups.forEach(g => this._groups.forEach(n => {
+            if (n.name == g.name) {
+                this.addNavGroup(n);
+            }
+            ;
+        }));
+    }
+    addNavGroup(group) {
+        group.options.forEach(o => this.activeOptions.add(o));
+    }
+    setDefaultOptions(options) {
+        this._defaultOptions = options;
+    }
+    setGroups(groups) {
+        this._groups = groups;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: LeftNavService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: LeftNavService, providedIn: 'root' });
@@ -292,37 +299,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
             }] } });
 
 class LeftNavComponent {
-    leftNavService;
-    constructor() {
-        this.leftNavService = inject(LeftNavService);
-    }
+    _leftNavService = inject(LeftNavService);
     getOptions() {
-        return this.leftNavService.options;
+        return this._leftNavService.activeOptions;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: LeftNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: LeftNavComponent, isStandalone: true, selector: "lib-left-nav", ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n  <mat-sidenav\n    mode=\"side\"\n    opened\n    style=\"padding: 5px; width: 160px\">\n        <mat-nav-list>\n            @for (option of getOptions(); track option) {\n              <a mat-list-item [routerLink]=\"option.route\" [routerLinkActive]=\"['is-active']\">{{ option.name }}</a>\n            }\n        </mat-nav-list>\n    </mat-sidenav>\n    <mat-sidenav-content style=\"display:flex; flex-grow: 1; height:90vh\"> \n        <router-outlet/>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.is-active{background-color:#d3d3d3}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: 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: LeftNavComponent, isStandalone: true, selector: "lib-left-nav", ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" opened>\n        <mat-nav-list>\n            @for (option of getOptions(); track option) {\n              <a mat-list-item [routerLink]=\"option.route\" [routerLinkActive]=\"['is-active']\">{{ option.name }}</a>\n            }\n        </mat-nav-list>\n    </mat-sidenav>\n    <mat-sidenav-content class=\"leftnav-content\"> \n        <router-outlet/>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh}.leftnav-side{padding:5px;width:160px}.is-active{background-color:#d3d3d3}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: 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: LeftNavComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-left-nav', imports: [MatSidenavModule, MatListModule, RouterOutlet, RouterModule,], template: "<mat-sidenav-container class=\"leftnav-container\">\n  <mat-sidenav\n    mode=\"side\"\n    opened\n    style=\"padding: 5px; width: 160px\">\n        <mat-nav-list>\n            @for (option of getOptions(); track option) {\n              <a mat-list-item [routerLink]=\"option.route\" [routerLinkActive]=\"['is-active']\">{{ option.name }}</a>\n            }\n        </mat-nav-list>\n    </mat-sidenav>\n    <mat-sidenav-content style=\"display:flex; flex-grow: 1; height:90vh\"> \n        <router-outlet/>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.is-active{background-color:#d3d3d3}\n"] }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'lib-left-nav', imports: [MatSidenavModule, MatListModule, RouterOutlet, RouterModule], template: "<mat-sidenav-container class=\"leftnav-container\">\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" opened>\n        <mat-nav-list>\n            @for (option of getOptions(); track option) {\n              <a mat-list-item [routerLink]=\"option.route\" [routerLinkActive]=\"['is-active']\">{{ option.name }}</a>\n            }\n        </mat-nav-list>\n    </mat-sidenav>\n    <mat-sidenav-content class=\"leftnav-content\"> \n        <router-outlet/>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh}.leftnav-side{padding:5px;width:160px}.is-active{background-color:#d3d3d3}\n"] }]
+        }] });
 
 const LOGIN_USER = new InjectionToken("Default login user - used for testing");
 class LandingComponent {
-    loginUser;
+    loginUser = inject(LOGIN_USER);
     loginError = "";
-    userService;
-    router;
-    constructor() {
-        this.userService = inject(UserService);
-        this.loginUser = inject(LOGIN_USER);
-        this.router = inject(Router);
-    }
+    message = "";
+    userService = inject(UserService);
+    router = inject(Router);
     ngOnInit() {
         // This is a development version hack to 'autologin' to make it
         // easier to play around. The name will be empty at init time
         // for the production version.
         if (this.loginUser.name) {
+            console.log("Have development login user");
             this.login();
         }
     }
@@ -342,26 +343,28 @@ class LandingComponent {
         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", ngImport: i0, template: "\n  <p>Welcome to the Marinerg test facility access portal</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: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: "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: i4$1.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>Welcome to the Marinerg test facility access portal</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"] }]
-        }], ctorParameters: () => [] });
+            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
+            }] } });
 
-class DetailViewComponent {
+class DetailView {
     item;
     _route;
     _location;
     _userService;
     _restService;
-    constructor() {
-        this._route = inject(ActivatedRoute);
-        this._location = inject(Location);
-        this._userService = inject(UserService);
-        this._restService = inject((RestService));
+    constructor(_route, _location, _userService, _restService) {
+        this._route = _route;
+        this._location = _location;
+        this._userService = _userService;
+        this._restService = _restService;
     }
-    ngOnInit() {
+    onInit() {
         this.getItem();
     }
     onItemAvailable() {
@@ -387,28 +390,22 @@ class DetailViewComponent {
         }
         this._restService.putItem(this.item).subscribe(item => this.item = item);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DetailViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: DetailViewComponent, isStandalone: true, selector: "lib-detail-view", ngImport: i0, template: "", 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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: DetailViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-detail-view', imports: [], template: "", 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"] }]
-        }], ctorParameters: () => [] });
 
-class EditViewComponent {
+class EditView {
     item;
     createMode = false;
     _route;
     _location;
     _userService;
     _restService;
-    constructor() {
-        this._route = inject(ActivatedRoute);
-        this._location = inject(Location);
-        this._userService = inject(UserService);
-        this._restService = inject((RestService));
+    constructor(_route, _location, _userService, _restServce) {
+        this._route = _route;
+        this._location = _location;
+        this._userService = _userService;
+        this._restService = _restServce;
     }
-    ngOnInit() {
+    onInit() {
         this.getItem();
     }
     onItemAvailable() {
@@ -472,15 +469,9 @@ class EditViewComponent {
         this.item = item;
         this.goBack();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: EditViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: EditViewComponent, isStandalone: true, selector: "lib-edit-view", ngImport: i0, template: "", 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"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: EditViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-edit-view', imports: [], template: "", 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"] }]
-        }], ctorParameters: () => [] });
 
-class ListViewComponent {
+class ListView {
     user;
     items = [];
     displayedColumns = [];
@@ -488,13 +479,13 @@ class ListViewComponent {
     _location;
     _userService;
     _restService;
-    constructor() {
-        this._route = inject(ActivatedRoute);
-        this._location = inject(Location);
-        this._userService = inject(UserService);
-        this._restService = inject((RestService));
+    constructor(_route, _location, _userService, _restService) {
+        this._route = _route;
+        this._location = _location;
+        this._userService = _userService;
+        this._restService = _restService;
     }
-    ngOnInit() {
+    onInit() {
         this.getItems();
     }
     getItems() {
@@ -525,35 +516,73 @@ class ListViewComponent {
     goBack() {
         this._location.back();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: ListViewComponent, isStandalone: true, selector: "lib-table-view", 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-table-view', imports: [MatTableModule,
-                        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"] }]
-        }], ctorParameters: () => [] });
 
-class UserDetailComponent extends DetailViewComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserDetailComponent, deps: null, 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=\"btn-block\"\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    <div>\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 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:left;align-items:left;flex-direction:column;padding:5px}.item_heading{display:inline}.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"] }] });
+class UserDetailComponent extends DetailView {
+    constructor() {
+        super(inject(ActivatedRoute), inject(Location), inject(UserService), 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"] }] });
 }
 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=\"btn-block\"\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    <div>\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 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:left;align-items:left;flex-direction:column;padding:5px}.item_heading{display:inline}.item_field,.padded_button{padding:5px}\n"] }]
-        }] });
+                        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"] }]
+        }], ctorParameters: () => [] });
 
-class UserEditComponent extends EditViewComponent {
+class UserEditComponent extends EditView {
+    image = null;
+    temporaryImageUrl = "";
+    constructor() {
+        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(UserService));
+    }
+    ngOnInit() {
+        this.onInit();
+    }
     getTemplateItem() {
         return new PortalMember();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserEditComponent, deps: null, 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 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     <form class=\"example-form\">\n        <mat-form-field class=\"form_field\">\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\">\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         <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          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n        \n    </form>\n     \n     <div style=\"margin:10px; padding:10px;display: flex; flex-direction: row\">\n       <button mat-fab class=\"btn-block\" (click)=\"save()\" style=\"padding:10px\"><mat-icon>save</mat-icon></button>\n       <button mat-fab class=\"btn-block\" (click)=\"cancel()\" style=\"padding:10px\"><mat-icon>cancel</mat-icon></button>\n     </div>\n   </div>\n   \n</div>\n", styles: [".container{display:flex;flex-direction:column;padding:10px}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column;padding:10px}.form_field{padding:5px}.btn_block{padding:10px}\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.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: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { 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"] }] });
+    save() {
+        if (!this.item) {
+            return;
+        }
+        this._restService.putItem(this.item).subscribe(item => { this.saveFiles(item); });
+    }
+    saveFiles(item) {
+        if (this.image) {
+            this._restService.postFile(item.id, "image", this.image).subscribe(item => this.onItemUpdated(item));
+        }
+        else {
+            this.onItemUpdated(item);
+        }
+    }
+    submit() {
+        if (this.item) {
+            this.save();
+        }
+    }
+    onFileUpload(event) {
+        console.log(event);
+        if (event.target) {
+            const input_element = event.target;
+            if (input_element.files && input_element.files.length > 0) {
+                this.image = input_element.files[0];
+                const reader = new FileReader();
+                reader.readAsDataURL(this.image);
+                reader.onload = () => { if (reader.result) {
+                    this.temporaryImageUrl = reader.result;
+                } ; };
+            }
+        }
+    }
+    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: i4$1.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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
@@ -565,11 +594,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         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     <form class=\"example-form\">\n        <mat-form-field class=\"form_field\">\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\">\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         <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          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 [(ngModel)]=\"item.last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n        \n    </form>\n     \n     <div style=\"margin:10px; padding:10px;display: flex; flex-direction: row\">\n       <button mat-fab class=\"btn-block\" (click)=\"save()\" style=\"padding:10px\"><mat-icon>save</mat-icon></button>\n       <button mat-fab class=\"btn-block\" (click)=\"cancel()\" style=\"padding:10px\"><mat-icon>cancel</mat-icon></button>\n     </div>\n   </div>\n   \n</div>\n", styles: [".container{display:flex;flex-direction:column;padding:10px}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column;padding:10px}.form_field{padding:5px}.btn_block{padding:10px}\n"] }]
-        }] });
+                    ], 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"] }]
+        }], ctorParameters: () => [] });
 
-class UserComponent extends ListViewComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+class UserComponent extends ListView {
+    constructor() {
+        super(inject(ActivatedRoute), inject(Location), inject(UserService), 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserComponent, decorators: [{
@@ -578,10 +613,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         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"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class GroupDetailComponent extends DetailViewComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+class GroupDetailComponent extends DetailView {
+    constructor() {
+        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(GroupService));
+    }
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupDetailComponent, decorators: [{
@@ -594,12 +632,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         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"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class GroupComponent extends ListViewComponent {
+class GroupComponent extends ListView {
     displayedColumns = ['name'];
     constructor() {
-        super();
+        super(inject(ActivatedRoute), inject(Location), inject(UserService), 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"] }] });
@@ -614,9 +655,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                     ], 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"] }]
         }], ctorParameters: () => [] });
 
-class OrganizationComponent extends ListViewComponent {
+class OrganizationComponent extends ListView {
     displayedColumns = ['name', 'website', 'is_partner'];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    constructor() {
+        super(inject(ActivatedRoute), inject(Location), inject(UserService), 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationComponent, decorators: [{
@@ -627,10 +674,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         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"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
-class OrganizationDetailComponent extends DetailViewComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+class OrganizationDetailComponent extends DetailView {
+    constructor() {
+        super(inject(ActivatedRoute), inject(Location), inject(UserService), inject(OrganizationService));
+    }
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, decorators: [{
@@ -643,7 +693,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         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"] }]
-        }] });
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of ichec-angular-core
@@ -653,5 +703,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApiError, DetailViewComponent, ENDPOINT_URL, EditViewComponent, ErrorCode, Group, GroupComponent, GroupDetailComponent, GroupService, LOGIN_USER, LandingComponent, LeftNavComponent, LeftNavService, ListViewComponent, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationService, PortalMember, RestService, TopBarComponent, UserComponent, UserDetailComponent, UserEditComponent, UserService };
+export { ApiError, DetailView, ENDPOINT_URL, EditView, ErrorCode, Group, GroupComponent, GroupDetailComponent, GroupService, LOGIN_USER, LandingComponent, LeftNavComponent, LeftNavService, ListView, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationService, PortalMember, RestService, TopBarComponent, UserComponent, UserDetailComponent, UserEditComponent, UserService };
 //# sourceMappingURL=ichec-angular-core.mjs.map