ichec-angular-core 0.0.13 → 0.1.0

package/fesm2022/ichec-angular-core.mjs

@@ -1,37 +1,70 @@
-import { map, catchError, mergeMap, throwError, BehaviorSubject, mergeAll, tap } from 'rxjs';
-import { HttpHeaders, HttpClient } from '@angular/common/http';
+import { map, catchError, tap, mergeMap, throwError, BehaviorSubject, mergeAll, merge, debounceTime, distinctUntilChanged, Subscription, of, finalize } from 'rxjs';
+import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import * as i0 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 { InjectionToken, inject, Injectable, input, signal, Component, viewChild, computed, output } from '@angular/core';
+import { NgIf, Location, NgTemplateOutlet, TitleCasePipe } from '@angular/common';
+import * as i1 from '@angular/router';
 import { RouterModule, RouterOutlet, Router, ActivatedRoute } from '@angular/router';
 import * as i2 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import * as i3$1 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2$1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i5 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
-import * as i1 from '@angular/material/sidenav';
-import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i1$1 from '@angular/material/sidenav';
+import { MatSidenavContent, MatSidenavModule } from '@angular/material/sidenav';
 import * as i2$2 from '@angular/material/list';
 import { MatListModule } from '@angular/material/list';
-import * as i1$1 from '@angular/forms';
-import { FormsModule, FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import * as i1$2 from '@angular/forms';
+import { FormsModule, FormControl, ReactiveFormsModule, FormBuilder } 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';
+import * as i3$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i2$3 from '@angular/material/card';
+import * as i1$3 from '@angular/material/card';
 import { MatCardModule } from '@angular/material/card';
-import * as i1$2 from '@angular/material/table';
+import * as i1$4 from '@angular/material/table';
 import { MatTable, MatTableModule } from '@angular/material/table';
-import * as i4$1 from '@angular/material/select';
+import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
+import * as i6$1 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i4 from '@angular/material/tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i3$3 from '@angular/material/sort';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import * as i1$5 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import * as i2$5 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i2$3 from '@angular/material/paginator';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import * as i2$4 from '@angular/cdk/scrolling';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+import { DataSource } from '@angular/cdk/collections';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 
+class Paginated {
+    count = 0;
+    next = null;
+    previous = null;
+    results = [];
+}
+class Permission {
+    id = 0;
+    url = "";
+    codename = "";
+    static typename = "permission";
+    static plural = "permissions";
+    constructor(params = {}) {
+        Object.assign(this, params);
+    }
+}
 class PortalMember {
+    static typename = "member";
+    static plural = "members";
     id = 0;
     url = "";
     username = "";
@@ -41,30 +74,34 @@ class PortalMember {
     phone = "";
     organization = "";
     profile_url = "";
+    all_permissions = [];
     constructor(params = {}) {
         Object.assign(this, params);
     }
 }
 class Group {
+    static typename = "group";
+    static plural = "groups";
     name = "";
     url = "";
     id = 0;
-}
-class Organization {
-    id = 0;
-    url = "";
-    name = "";
-    acronym = "";
-    description = "";
-    address = "";
-    website = "";
-    country = "";
-    members = [];
     constructor(params = {}) {
         Object.assign(this, params);
     }
 }
 
+class ItemQuery {
+    queries = new Map();
+    page = 0;
+    page_size = 0;
+    sort_field = "";
+    sort_order = "";
+    filter_field = "";
+    filter = "";
+    constructor(params = {}) {
+        Object.assign(this, params);
+    }
+}
 var ErrorCode;
 (function (ErrorCode) {
     ErrorCode[ErrorCode["UnknownError"] = 1] = "UnknownError";
@@ -76,22 +113,42 @@ class ApiError {
 
 const ENDPOINT_URL = new InjectionToken("Default endpoint url");
 class RestService {
-    _url;
-    _endpoint_url;
-    _http;
-    constructor(_url, _endpoint_url, _http) {
-        this._url = _url;
-        this._endpoint_url = _endpoint_url;
-        this._http = _http;
-    }
+    _url = "";
+    _endpoint_url = inject(ENDPOINT_URL);
+    _http = inject(HttpClient);
     deleteItem(id) {
         return this._http.delete(this.getBaseUrl() + id + "/", { headers: this.getHeaders() }).pipe(map(_response => { return void (0); }), catchError(this.handleError));
     }
-    getForUser(user) {
-        return this.get("?user=" + user.id);
+    getForUser(user, query = new ItemQuery()) {
+        query.queries.set('user', user.id.toString());
+        return this.get(query);
     }
-    get(query = "") {
-        return this._http.get(this.getBaseUrl() + query, { headers: this.getHeaders() }).pipe(catchError(this.handleError));
+    get(query = new ItemQuery()) {
+        const params = query.queries;
+        if (query.page > 0) {
+            params.set('page', query.page.toString());
+        }
+        if (query.page_size > 0) {
+            params.set('page_size', query.page_size.toString());
+        }
+        if (query.sort_field) {
+            let sort_field = query.sort_field;
+            if (query.sort_order === "desc") {
+                sort_field = "-" + sort_field;
+            }
+            params.set('ordering', sort_field);
+        }
+        if (query.filter_field) {
+            params.set('search_field', query.filter_field);
+        }
+        if (query.filter) {
+            params.set('search', query.filter);
+        }
+        console.log(params);
+        return this._http.get(this.getBaseUrl(), {
+            headers: this.getHeaders(),
+            params: new HttpParams({ fromObject: Object.fromEntries(params) })
+        }).pipe(tap(response => console.log(response)), catchError(this.handleError));
     }
     getItem(id) {
         return this._http.get(this.getBaseUrl() + id, { headers: this.getHeaders() }).pipe(catchError(this.handleError));
@@ -99,6 +156,9 @@ class RestService {
     getUrl(url) {
         return this._http.get(url, { headers: this.getHeaders() }).pipe(catchError(this.handleError));
     }
+    getPaginatedUrl(url) {
+        return this._http.get(url, { headers: this.getHeaders() }).pipe(catchError(this.handleError));
+    }
     getOptions() {
         return this._http.options(this.getBaseUrl(), { headers: this.getHeaders() }).pipe(catchError(this.handleError));
     }
@@ -165,12 +225,44 @@ class RestService {
     }
 }
 
-class UserService extends RestService {
-    /** Service to handle IPortalMember via REST and also handle logins.
+class ItemService extends RestService {
+    itemType = "";
+    canEdit() {
+        return false;
+    }
+    canCreate() {
+        return false;
+    }
+    canDelete() {
+        return false;
+    }
+    canView() {
+        return false;
+    }
+    instantiateType(_) {
+        throw new Error('Not Implemented');
+    }
+    getItem(id) {
+        return super.getItem(id).pipe(map(x => this.instantiateType(x)));
+    }
+}
+
+class ResolvedPermission {
+    canEdit = false;
+    canAdd = false;
+    canView = false;
+    canDelete = false;
+}
+class UserService extends ItemService {
+    /**
+       Service to handle IPortalMember via REST and also handle logins.
     */
     loggedInUser = new BehaviorSubject(null);
-    constructor() {
-        super('members', inject(ENDPOINT_URL), inject(HttpClient));
+    _url = PortalMember.plural;
+    itemType = PortalMember.plural;
+    permissions = new Map();
+    instantiateType(item) {
+        return new PortalMember(item);
     }
     login(username, password) {
         console.log("Attempting login");
@@ -181,6 +273,34 @@ class UserService extends RestService {
         const api_auth_endpoint = this._endpoint_url + "/api-token-auth/";
         return this._http.post(api_auth_endpoint, body.toString(), { headers: headers }).pipe(map(token => this.onLoginToken(token)), mergeAll(), catchError(this.handleError));
     }
+    hasAddPermission(feature) {
+        const perm = this.permissions.get(feature);
+        if (!perm) {
+            return false;
+        }
+        return perm.canAdd;
+    }
+    hasDeletePermission(feature) {
+        const perm = this.permissions.get(feature);
+        if (!perm) {
+            return false;
+        }
+        return perm.canDelete;
+    }
+    hasEditPermission(feature) {
+        const perm = this.permissions.get(feature);
+        if (!perm) {
+            return false;
+        }
+        return perm.canEdit;
+    }
+    hasViewPermission(feature) {
+        const perm = this.permissions.get(feature);
+        if (!perm) {
+            return false;
+        }
+        return perm.canView;
+    }
     logout() {
         if (this.loggedInUser === null) {
             return;
@@ -195,10 +315,39 @@ class UserService extends RestService {
         return this.getItem(Number(token_response.user_id)).pipe(tap(user => this.onLoggedIn(user)), map(_response => { return void (0); }), catchError(this.handleError));
     }
     onLoggedIn(user) {
-        console.log("Log in succesful for user: " + user.username);
+        console.log("Log in successful for user: " + user.username);
         this.loggedInUser.next(user);
+        this.processPermissions();
+    }
+    parsePermission(p) {
+        const split_module = p.split(".");
+        const split_cap = split_module[split_module.length - 1].split("_");
+        return { feature: split_cap[1], capability: split_cap[0] };
+    }
+    processPermissions() {
+        const user = this.loggedInUser.value;
+        if (!user) {
+            return;
+        }
+        user.all_permissions.forEach(p => this.permissions.set(this.parsePermission(p).feature, new ResolvedPermission()));
+        user.all_permissions.forEach(p => {
+            const permission = this.parsePermission(p);
+            if (permission.capability === "view") {
+                this.permissions.get(permission.feature).canView = true;
+            }
+            else if (permission.capability === "delete") {
+                this.permissions.get(permission.feature).canDelete = true;
+            }
+            else if (permission.capability === "change") {
+                this.permissions.get(permission.feature).canEdit = true;
+            }
+            else if (permission.capability === "add") {
+                this.permissions.get(permission.feature).canAdd = true;
+            }
+        });
+        console.log("Got permissions:", this.permissions);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserService, decorators: [{
@@ -206,23 +355,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
-class GroupService extends RestService {
+class GroupService extends ItemService {
     userService = inject(UserService);
     userItems = new BehaviorSubject([]);
+    _url = Group.plural;
+    itemType = Group.plural;
     constructor() {
-        super("groups", inject(ENDPOINT_URL), inject(HttpClient));
+        super();
         this.userService.loggedInUser.subscribe(user => this.refreshUserItems(user));
     }
     refreshUserItems(user) {
         if (user) {
-            this.getForUser(user).subscribe(items => this.userItems.next(items));
+            this.getForUser(user).subscribe(items => this.userItems.next(items.results));
         }
         else {
             this.userItems.next([]);
         }
     }
+    instantiateType(item) {
+        return new Group(item);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupService, providedIn: 'root' });
 }
@@ -233,11 +387,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class OrganizationService extends RestService {
-    constructor() {
-        super("organizations", inject(ENDPOINT_URL), inject(HttpClient));
+class Address {
+    static typename = "address";
+    static plural = "addresses";
+    id = 0;
+    url = "";
+    line1 = "";
+    line2 = "";
+    line3 = "";
+    city = "";
+    region = "";
+    postcode = "";
+    country = "";
+    country_name = "";
+    country_flag = "";
+    members = [];
+    constructor(params = {}) {
+        Object.assign(this, params);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+}
+class Organization {
+    static typename = "organization";
+    static plural = "organizations";
+    id = 0;
+    url = "";
+    name = "";
+    acronym = "";
+    description = "";
+    address = "";
+    website = "";
+    members = [];
+    constructor(params = {}) {
+        Object.assign(this, params);
+    }
+}
+
+class OrganizationService extends ItemService {
+    _url = Organization.plural;
+    itemType = Organization.plural;
+    userService = inject(UserService);
+    instantiateType(item) {
+        return new Organization(item);
+    }
+    canCreate() {
+        return this.userService.hasAddPermission(Organization.typename);
+    }
+    canView() {
+        return this.userService.hasViewPermission(Organization.typename);
+    }
+    canEdit() {
+        return this.userService.hasEditPermission(Organization.typename);
+    }
+    canDelete() {
+        return this.userService.hasDeletePermission(Organization.typename);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationService, decorators: [{
@@ -245,7 +449,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 class LeftNavService {
     activeOptions = new Set();
@@ -298,7 +502,7 @@ class TopBarComponent {
         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: "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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: TopBarComponent, isStandalone: true, selector: "lib-top-bar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "\n@if(user(); as user){\n<mat-toolbar style=\"height:60px\">\n    <a mat-icon-button aria-label=\"Home\" [routerLink]=\"['home']\">\n      <mat-icon>home</mat-icon>\n    </a>\n    <span>{{title()}}</span>\n    <span class=\"topbar-spacer\"></span>\n    <span>{{user.username}}</span>\n    \n    <button mat-icon-button aria-label=\"User Profile\" [matMenuTriggerFor]=\"profile_menu\">\n      <mat-icon>person</mat-icon>\n    </button>\n\n    <mat-menu #profile_menu=\"matMenu\">\n      <button mat-menu-item (click)=\"onLogout()\">Log Out</button>\n    </mat-menu>\n</mat-toolbar>\n}\n", styles: [".topbar-spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: TopBarComponent, decorators: [{
             type: Component,
@@ -307,15 +511,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
 
 class LeftNavComponent {
     _leftNavService = inject(LeftNavService);
+    sideNavContent = viewChild(MatSidenavContent, ...(ngDevMode ? [{ debugName: "sideNavContent" }] : []));
     getOptions() {
         return this._leftNavService.activeOptions;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: LeftNavComponent, isStandalone: true, selector: "lib-left-nav", viewQueries: [{ propertyName: "sideNavContent", first: true, predicate: MatSidenavContent, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-sidenav-container class=\"leftnav-container\">\n  <mat-sidenav mode=\"side\" class=\"leftnav-side\" opened>\n        <mat-nav-list>\n            @for (option of getOptions(); track option) {\n              <a mat-list-item [routerLink]=\"option.route\" [routerLinkActive]=\"['is-active']\">{{ option.name }}</a>\n            }\n        </mat-nav-list>\n    </mat-sidenav>\n    <mat-sidenav-content class=\"leftnav-content\"> \n        <router-outlet />\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [":host{display:flex;flex-direction:column}.leftnav-container{flex-grow:1;display:flex}.leftnav-content{display:flex;flex-grow:1;height:90vh}.leftnav-side{padding:5px;width:160px}.is-active{background-color:#d3d3d3}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$1.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$1.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$1.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i2$2.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "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 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"] }]
+            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");
@@ -354,7 +559,7 @@ 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: "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"] }] });
+    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$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.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.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,
@@ -365,26 +570,38 @@ class DetailView {
     item = signal(null, ...(ngDevMode ? [{ debugName: "item" }] : []));
     route = inject(ActivatedRoute);
     userService = inject(UserService);
-    restService;
-    constructor(restService) {
-        this.restService = restService;
+    itemService;
+    constructor(itemService) {
+        this.itemService = itemService;
     }
     onInit() {
         this.getItem();
     }
-    onItemAvailable() {
+    onItemAvailable(item) {
+        this.item.set(item);
         this.userService.loggedInUser.subscribe(user => { if (user) {
-            this.onItemAndUserAvailable(user);
+            this.onItemAndUserAvailable(item, user);
         } });
     }
-    onItemAndUserAvailable(_) { }
+    onItemAndUserAvailable(_item, _user) { }
     getItem() {
         const id = Number(this.route.snapshot.paramMap.get('id'));
-        this.restService.getItem(id).subscribe(item => {
-            this.item.set(item);
-            this.onItemAvailable();
+        this.itemService.getItem(id).subscribe(item => {
+            this.onItemAvailable(item);
         });
     }
+    onDelete() {
+        const item = this.item();
+        if (item) {
+            this.itemService.deleteItem(item.id);
+        }
+    }
+    canEdit() {
+        return this.itemService.canEdit();
+    }
+    canDelete() {
+        return this.itemService.canDelete();
+    }
 }
 
 class EditView {
@@ -396,8 +613,8 @@ class EditView {
     _location = inject(Location);
     _userService = inject(UserService);
     _restService;
-    constructor(_restServce) {
-        this._restService = _restServce;
+    constructor(_restService) {
+        this._restService = _restService;
     }
     onInit() {
         this.getItem();
@@ -494,75 +711,116 @@ class EditView {
 }
 
 class ListView {
-    user;
+    count = signal(0, ...(ngDevMode ? [{ debugName: "count" }] : []));
     items = signal([], ...(ngDevMode ? [{ debugName: "items" }] : []));
-    displayedColumns = [];
+    next_url = null;
     _route = inject(ActivatedRoute);
     _location = inject(Location);
     _userService = inject(UserService);
-    _restService;
-    constructor(_restService) {
-        this._restService = _restService;
-    }
-    onInit() {
-        this.getItems();
+    _itemService;
+    constructor(_itemService) {
+        this._itemService = _itemService;
     }
-    getItems() {
+    getItems(query = new ItemQuery()) {
         if (this.isSelfList()) {
             this._userService.loggedInUser.subscribe(user => {
                 if (user) {
-                    this.onUserChange(user);
+                    this.onUserAvailable(user, query);
                 }
             });
         }
         else {
-            this._restService.get().subscribe(items => this.items.set(items));
+            this._itemService.get(query).subscribe(items => this.onItems(items));
         }
     }
-    onUserChange(user) {
-        this.user = user;
-        this._restService.getForUser(this.user).subscribe(items => this.items.set(items));
+    onItems(paginated) {
+        this.count.set(paginated.count);
+        this.items.set(paginated.results);
+        this.next_url = paginated.next;
+    }
+    onUserAvailable(user, query) {
+        this._itemService.getForUser(user, query).subscribe(items => this.onItems(items));
     }
     isSelfList() {
         const url_segments = this._route.snapshot.url;
-        if (url_segments.length == 2) {
-            if (url_segments[1].path == "self") {
-                return true;
-            }
-        }
-        return false;
+        return (url_segments.length == 2) && (url_segments[1].path == "self");
     }
     goBack() {
         this._location.back();
     }
 }
 
+class SelectTableComponent {
+    itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
+    selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    itemAdded = output();
+    itemRemoved = output();
+    searchChanged = output();
+    columnNames = computed(() => this.columns().map(c => c.name), ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
+    searchControl = new FormControl('');
+    table = viewChild(MatTable, ...(ngDevMode ? [{ debugName: "table" }] : []));
+    ngOnInit() {
+        this.searchControl.valueChanges.subscribe(value => this.searchChanged.emit(value));
+    }
+    remove(id) {
+        this.itemRemoved.emit(id);
+        this.table()?.renderRows();
+    }
+    add() {
+        if (this.searchControl.value) {
+            this.itemAdded.emit(this.searchControl.value);
+        }
+        this.table()?.renderRows();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: SelectTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: SelectTableComponent, isStandalone: true, selector: "lib-select-table", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemAdded: "itemAdded", itemRemoved: "itemRemoved", searchChanged: "searchChanged" }, viewQueries: [{ propertyName: "table", first: true, predicate: MatTable, descendants: true, isSignal: true }], ngImport: i0, template: "<div class='select-container'>\n  <div>\n    <mat-form-field>\n      <mat-label>Add {{itemType()}}</mat-label>\n      <input \n          type=\"text\"\n           aria-label=\"Selected item\"\n           matInput\n           [formControl]=\"searchControl\" \n           [matAutocomplete]=\"auto\">\n\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        @for(item of options(); track item.item.id){\n        <mat-option [value]=\"item.title\">{{item.title}}\n        </mat-option>\n        }\n    </mat-autocomplete>\n    </mat-form-field>\n\n    <button mat-mini-fab type=\"button\" class=\"form_action_button\" (click)=\"add()\">\n      <mat-icon>add\n      </mat-icon>\n    </button>\n  </div>\n\n  @if(selected().length > 0){\n  <table mat-table [dataSource]=\"selected()\" class=\"mat-elevation-z8\">\n    @for (column of columns(); track column.name) {\n    <ng-container matColumnDef=\"{{ column.name }}\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>\n        {{ column.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[column.name] }}</td>\n    </ng-container>\n    }\n\n    <ng-container matColumnDef=\"remove\">\n          <th mat-header-cell *matHeaderCellDef>Remove\n          </th>\n        <td mat-cell *matCellDef=\"let element\">\n            <button mat-icon-button\n                    color=\"primary\"\n                    aria-label=\"Remove an item\"\n                    (click)=\"remove(element.id)\">\n              <mat-icon>remove\n              </mat-icon>\n            </button>\n        </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\">\n    </tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnNames();\">\n    </tr>\n  </table>\n  }\n</div>", styles: [".select-container,.table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: i6$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: SelectTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-select-table', imports: [MatTableModule,
+                        MatFormFieldModule,
+                        MatButtonModule,
+                        MatSelectModule,
+                        MatIconModule,
+                        MatAutocompleteModule,
+                        ReactiveFormsModule,
+                        MatInputModule], template: "<div class='select-container'>\n  <div>\n    <mat-form-field>\n      <mat-label>Add {{itemType()}}</mat-label>\n      <input \n          type=\"text\"\n           aria-label=\"Selected item\"\n           matInput\n           [formControl]=\"searchControl\" \n           [matAutocomplete]=\"auto\">\n\n      <mat-autocomplete #auto=\"matAutocomplete\">\n        @for(item of options(); track item.item.id){\n        <mat-option [value]=\"item.title\">{{item.title}}\n        </mat-option>\n        }\n    </mat-autocomplete>\n    </mat-form-field>\n\n    <button mat-mini-fab type=\"button\" class=\"form_action_button\" (click)=\"add()\">\n      <mat-icon>add\n      </mat-icon>\n    </button>\n  </div>\n\n  @if(selected().length > 0){\n  <table mat-table [dataSource]=\"selected()\" class=\"mat-elevation-z8\">\n    @for (column of columns(); track column.name) {\n    <ng-container matColumnDef=\"{{ column.name }}\">\n      <th mat-header-cell mat-sort-header *matHeaderCellDef>\n        {{ column.title }}\n      </th>\n      <td mat-cell *matCellDef=\"let element\">{{ element[column.name] }}</td>\n    </ng-container>\n    }\n\n    <ng-container matColumnDef=\"remove\">\n          <th mat-header-cell *matHeaderCellDef>Remove\n          </th>\n        <td mat-cell *matCellDef=\"let element\">\n            <button mat-icon-button\n                    color=\"primary\"\n                    aria-label=\"Remove an item\"\n                    (click)=\"remove(element.id)\">\n              <mat-icon>remove\n              </mat-icon>\n            </button>\n        </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\">\n    </tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnNames();\">\n    </tr>\n  </table>\n  }\n</div>", styles: [".select-container,.table_container{display:flex;text-align:center;justify-content:center;flex-direction:column}.form_action_button{padding:5px;margin:5px}\n"] }]
+        }] });
+
 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"] }] });
+    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{margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.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"] }]
+            args: [{ selector: 'lib-back-button', imports: [MatIconModule, MatButtonModule], template: "<a mat-icon-button class=\"padded-button\"\n    (click)=\"goBack()\"\n    (keydown)=\"goBack()\"\n    tabindex=\"0\"\n    role=\"button\">\n<mat-icon>arrow_back</mat-icon>\n</a>\n\n", styles: [".padded-button{margin:5px}\n"] }]
         }] });
 
 class DetailHeaderComponent {
     id = input(0, ...(ngDevMode ? [{ debugName: "id" }] : []));
     text = input("", ...(ngDevMode ? [{ debugName: "text" }] : []));
     route = input("", ...(ngDevMode ? [{ debugName: "route" }] : []));
+    canEdit = input(false, ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canDelete = input(false, ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
+    deleteClicked = output();
     fullRoute = computed(() => "/" + this.route() + "s/edit/", ...(ngDevMode ? [{ debugName: "fullRoute" }] : []));
+    deleteClick() {
+        this.deleteClicked.emit();
+    }
     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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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 }, canEdit: { classPropertyName: "canEdit", publicName: "canEdit", isSignal: true, isRequired: false, transformFunction: null }, canDelete: { classPropertyName: "canDelete", publicName: "canDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteClicked: "deleteClicked" }, ngImport: i0, template: "<div class=\"container\">\n\n  <h1 class=\"header\">{{text()}}</h1>\n\n  <div class=\"controls\">\n  @if(canEdit()){\n  <a mat-mini-fab class=\"control-button\" matTooltip=\"Edit the item\" title=\"Click to edit this item\" aria-label=\"Click to edit this item\"\n    [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n  </a>\n  }\n\n  @if(canDelete()){\n  <button mat-mini-fab class=\"control-button\" (click)=\"deleteClick()\" matTooltip=\"Delete the item\" title=\"Click to delete this item\"\n    aria-label=\"Click to delete this item\">\n    <mat-icon>delete</mat-icon></button>\n  }\n  </div>\n\n</div>", styles: [".container{width:100%;max-width:500px;padding:5px}.header{width:100%;padding:5px;margin:5px}.controls{display:flex;flex-direction:row;align-content:center;justify-content:center}.control-button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 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"] }]
+                        MatIconModule, MatTooltipModule], template: "<div class=\"container\">\n\n  <h1 class=\"header\">{{text()}}</h1>\n\n  <div class=\"controls\">\n  @if(canEdit()){\n  <a mat-mini-fab class=\"control-button\" matTooltip=\"Edit the item\" title=\"Click to edit this item\" aria-label=\"Click to edit this item\"\n    [routerLink]=\"[fullRoute(), id()]\">\n    <mat-icon>edit</mat-icon>\n  </a>\n  }\n\n  @if(canDelete()){\n  <button mat-mini-fab class=\"control-button\" (click)=\"deleteClick()\" matTooltip=\"Delete the item\" title=\"Click to delete this item\"\n    aria-label=\"Click to delete this item\">\n    <mat-icon>delete</mat-icon></button>\n  }\n  </div>\n\n</div>", styles: [".container{width:100%;max-width:500px;padding:5px}.header{width:100%;padding:5px;margin:5px}.controls{display:flex;flex-direction:row;align-content:center;justify-content:center}.control-button{padding:5px;margin:5px}\n"] }]
         }] });
 
 class FileUploadComponent {
@@ -597,7 +855,7 @@ class FileUploadComponent {
         };
     }
     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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: FileUploadComponent, isStandalone: true, selector: "lib-file-upload", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewLoaded: "previewLoaded", fileUploaded: "fileUploaded" }, ngImport: i0, template: "<div class=\"container\">\n  @for( file of files(); track file.name)\n  {\n  @if (file.local)\n  {\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.local}}\" style=\"height:120px;\">\n    </div>  \n    }\n    @else\n    {\n    @if (file.remote){\n    <div class=\"image_holder\">\n        <p>Update {{file.display_name}}</p>\n        <img alt=\"{{file.display_name}}\" src=\"{{file.remote}}\" style=\"height:120px;\">\n    </div>\n    }\n    @else {\n    <div>\n        <span>Upload a {{file.display_name}}</span>\n    </div>    \n    }\n    \n    }\n\n    <div class=\"button-row\">\n        <button mat-mini-fab (click)=\"fileInput.click()\">\n          <mat-icon>attachment</mat-icon>\n        </button>\n        <input hidden type=\"file\" #fileInput (change)=\"onFileUpload(file.name, $event)\"/>\n    </div>   \n  }     \n</div>\n", styles: [".container{padding:10px;display:flex;justify-content:center;text-align:center;flex-direction:column;max-width:300px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: FileUploadComponent, decorators: [{
             type: Component,
@@ -625,13 +883,13 @@ class UserDetailComponent extends DetailView {
         this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: UserDetailComponent, isStandalone: true, selector: "lib-user-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.username\"\n      [id]=\"item.id\"\n      [route]=\"typename\"></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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: UserDetailComponent, isStandalone: true, selector: "lib-user-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.username\"\n      [id]=\"item.id\"\n      [route]=\"typename\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete\"></lib-detail-header>\n\n    @if(item.profile_url){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" style=\"height:120px;\">\n    </div>    \n    }\n    \n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>First Name: </b></span>\n      {{item.first_name}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>Last Name: </b></span>\n      {{item.last_name}}\n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserDetailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-user-detail', imports: [NgIf,
                         BackButtonComponent,
-                        DetailHeaderComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.username\"\n      [id]=\"item.id\"\n      [route]=\"typename\"></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"] }]
+                        DetailHeaderComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.username\"\n      [id]=\"item.id\"\n      [route]=\"typename\"\n      [canEdit]=\"canEdit()\"\n      [canDelete]=\"canDelete()\"\n      (onDelete)=\"onDelete\"></lib-detail-header>\n\n    @if(item.profile_url){\n    <div class=\"image-holder\">\n      <img alt=\"User Profile Image\" src=\"{{item.url}}{{item.profile_url}}\" style=\"height:120px;\">\n    </div>    \n    }\n    \n    <div class=\"item-field\">\n      <span><b>Email: </b></span>\n      {{item.email}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>First Name: </b></span>\n      {{item.first_name}}\n    </div>\n    \n    <div class=\"item-field\">\n      <span><b>Last Name: </b></span>\n      {{item.last_name}}\n    </div>\n    \n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"] }]
         }], ctorParameters: () => [] });
 
 class UserEditComponent extends EditView {
@@ -706,7 +964,7 @@ class UserEditComponent extends EditView {
         } ; });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading()}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 formControlName=\"username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"email\"\n                 name=\"email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"first_name\"\n                name=\"first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n       <lib-file-upload [files]=\"files()\"\n                        (previewLoaded)=\"onPreviewLoaded($event)\"\n                        (fileUploaded)=\"onFileUploaded($event)\"></lib-file-upload>\n    \n     <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!form.valid\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form_action_button\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>\n               \n    </form>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column}.checkbox_group{justify-content:left;display:flex;flex-direction:column}.button_group{margin:10px;display:flex;flex-direction:row;justify-content:center}.btn-block{padding:5px}.form_action_button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: UserEditComponent, isStandalone: true, selector: "lib-user-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n\n    <h1 class=\"item-edit-header\">{{heading()}}</h1>\n\n     <form class=\"form-card\" [formGroup]=\"form\" (ngSubmit)=\"submit()\">\n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Username</mat-label>\n          <input matInput\n                 placeholder=\"Username\"\n                 type=\"text\"\n                 formControlName=\"username\"\n                 name=\"username\">\n        </mat-form-field>\n        \n       <mat-form-field class=\"form-field-wide\">\n          <mat-label>Email</mat-label>\n          <input matInput\n                 placeholder=\"Email\"\n                 type=\"text\"\n                 formControlName=\"email\"\n                 name=\"email\">\n        </mat-form-field>\n\n       <mat-form-field class=\"form-field\">\n         <mat-label>First Name</mat-label>\n         <input matInput\n                placeholder=\"First Name\"\n                type=\"text\"\n                formControlName=\"first_name\"\n                name=\"first_name\">\n        </mat-form-field>\n  \n       <mat-form-field class=\"form-field\">\n          <mat-label>Last Name</mat-label>\n          <input matInput\n                 placeholder=\"Last Name\"\n                 type=\"text\"\n                 formControlName=\"last_name\"\n                 name=\"last_name\">\n        </mat-form-field>\n\n       <lib-file-upload [files]=\"files()\"\n                        (previewLoaded)=\"onPreviewLoaded($event)\"\n                        (fileUploaded)=\"onFileUploaded($event)\"></lib-file-upload>\n    \n     <div class=\"button_group\">\n       <button mat-fab\n               class=\"form_action_button\"\n               type=\"submit\"\n               [disabled]=\"!form.valid\">\n         <mat-icon>save</mat-icon></button>\n       \n       <button mat-fab\n               class=\"form_action_button\"\n               (click)=\"cancel()\">\n         <mat-icon>cancel</mat-icon></button>\n     </div>\n               \n    </form>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.item_view{display:flex;justify-content:left;align-items:left;flex-direction:column}.checkbox_group{justify-content:left;display:flex;flex-direction:column}.button_group{margin:10px;display:flex;flex-direction:row;justify-content:center}.btn-block{padding:5px}.form_action_button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: FileUploadComponent, selector: "lib-file-upload", inputs: ["files"], outputs: ["previewLoaded", "fileUploaded"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserEditComponent, decorators: [{
             type: Component,
@@ -721,51 +979,305 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                     ], 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(UserService));
-    }
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class ListTableViewComponent {
+    itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : []));
+    searchFilter = input("", ...(ngDevMode ? [{ debugName: "searchFilter" }] : []));
+    pageSizeOptions = [20, 50, 100];
+    initialPageSize = 20;
+    columnNames = computed(() => this.columns().map(c => c.name), ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
+    sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    paginator = viewChild(MatPaginator, ...(ngDevMode ? [{ debugName: "paginator" }] : []));
     ngOnInit() {
-        this.onInit();
+        const data_source = this.dataSource();
+        if (data_source) {
+            data_source.fetch(new ItemQuery({ page_size: this.initialPageSize }));
+        }
     }
-    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=\"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"] }] });
+    ngAfterViewInit() {
+        const paginator = this.paginator();
+        const sort = this.sort();
+        if (!paginator || !sort) {
+            return;
+        }
+        sort.sortChange.subscribe(() => this.reset());
+        merge(sort.sortChange, paginator.page)
+            .pipe(tap(() => this.fetch()))
+            .subscribe();
+    }
+    reset() {
+        const paginator = this.paginator();
+        if (!paginator) {
+            return;
+        }
+        paginator.pageIndex = 0;
+    }
+    fetch() {
+        const paginator = this.paginator();
+        const sort = this.sort();
+        const data_source = this.dataSource();
+        if (!paginator || !sort || !data_source) {
+            return;
+        }
+        data_source.fetch(new ItemQuery({
+            page: paginator.pageIndex + 1,
+            page_size: paginator.pageSize,
+            sort_order: sort.direction,
+            sort_field: sort.active,
+            filter: this.searchFilter()
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: ListTableViewComponent, isStandalone: true, selector: "lib-list-table-view", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, searchFilter: { classPropertyName: "searchFilter", publicName: "searchFilter", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }, { propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, isSignal: true }], ngImport: i0, template: "@if (dataSource(); as dataSource) {\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    matSortActive=\"name\"\n    matSortDisableClear\n    matSortDirection=\"desc\"\n    class=\"mat-elevation-z8\"\n  >\n    @for (column of columns(); track column.name) {\n      <ng-container matColumnDef=\"{{ column.name }}\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          {{ column.title }}\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[column.name] }}</td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: columnNames()\"\n      [routerLink]=\"['/' + itemType() + '/detail/', row.id]\"\n      [routerLinkActive]=\"['is-active']\"\n    ></tr>\n  </table>\n\n  <mat-paginator\n    [length]=\"dataSource.length()\"\n    [pageSize]=\"20\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    aria-label=\"Select page\"\n  >\n  </mat-paginator>\n}\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListTableViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user', imports: [MatListModule, MatCardModule,
+            args: [{ selector: 'lib-list-table-view', imports: [MatTableModule,
+                        ReactiveFormsModule,
                         MatButtonModule,
+                        MatInputModule,
                         MatIconModule,
-                        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: () => [] });
+                        MatPaginatorModule,
+                        MatSortModule,
+                        RouterModule
+                    ], template: "@if (dataSource(); as dataSource) {\n  <table\n    mat-table\n    [dataSource]=\"dataSource\"\n    matSort\n    matSortActive=\"name\"\n    matSortDisableClear\n    matSortDirection=\"desc\"\n    class=\"mat-elevation-z8\"\n  >\n    @for (column of columns(); track column.name) {\n      <ng-container matColumnDef=\"{{ column.name }}\">\n        <th mat-header-cell mat-sort-header *matHeaderCellDef>\n          {{ column.title }}\n        </th>\n        <td mat-cell *matCellDef=\"let element\">{{ element[column.name] }}</td>\n      </ng-container>\n    }\n\n    <tr mat-header-row *matHeaderRowDef=\"columnNames()\"></tr>\n    <tr\n      mat-row\n      *matRowDef=\"let row; columns: columnNames()\"\n      [routerLink]=\"['/' + itemType() + '/detail/', row.id]\"\n      [routerLinkActive]=\"['is-active']\"\n    ></tr>\n  </table>\n\n  <mat-paginator\n    [length]=\"dataSource.length()\"\n    [pageSize]=\"20\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    aria-label=\"Select page\"\n  >\n  </mat-paginator>\n}\n", styles: [".mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"] }]
+        }] });
 
-class UserSelectComponent {
-    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(id) {
-        this.itemRemoved.emit(id);
-        this.table()?.renderRows();
+// Datasource needs any
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class ListScrollViewComponent {
+    searchTerm = input("", ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : []));
+    listItemTemplate = input(null, ...(ngDevMode ? [{ debugName: "listItemTemplate" }] : []));
+    ngOnInit() {
+        this.reset();
     }
-    add() {
-        this.itemAdded.emit(this.toAdd());
-        this.table()?.renderRows();
+    reset() {
+        const data_source = this.dataSource();
+        if (!data_source) {
+            return;
+        }
+        //            sort_order: this.sort!.direction,
+        //            sort_field: this.sort!.active,        
+        data_source.reset(this.searchTerm(), this.pageSize());
     }
-    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: "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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListScrollViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.1", type: ListScrollViewComponent, isStandalone: true, selector: "lib-list-scroll-view", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-nav-list>\n  <cdk-virtual-scroll-viewport\n    itemSize=\"150\"\n    class=\"scrollable-list\"\n    style=\"height: 600px; width: 500px\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of dataSource()\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item }\"\n      >\n      </ng-container>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$2.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$4.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$4.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$4.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListScrollViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-select', imports: [NgFor, NgIf, MatTableModule,
-                        MatFormFieldModule,
+            args: [{ selector: 'lib-list-scroll-view', imports: [MatListModule,
+                        NgTemplateOutlet,
+                        ScrollingModule], template: "<mat-nav-list>\n  <cdk-virtual-scroll-viewport\n    itemSize=\"150\"\n    class=\"scrollable-list\"\n    style=\"height: 600px; width: 500px\"\n  >\n    <ng-container *cdkVirtualFor=\"let item of dataSource()\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item }\"\n      >\n      </ng-container>\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"] }]
+        }] });
+
+class SearchBarComponent {
+    itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
+    sortFields = input([], ...(ngDevMode ? [{ debugName: "sortFields" }] : []));
+    sortAscending = signal(true, ...(ngDevMode ? [{ debugName: "sortAscending" }] : []));
+    searchChanged = output();
+    searchFilter = new FormControl();
+    ngAfterViewInit() {
+        this.searchFilter.valueChanges.pipe(debounceTime(150), distinctUntilChanged(), tap(() => {
+            this.searchEntered();
+        })).subscribe();
+    }
+    clearSearch() {
+        this.searchFilter.setValue("");
+    }
+    searchEntered() {
+        this.searchChanged.emit(this.searchFilter.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"container\">\n    <mat-form-field class=\"search\" style=\"margin: 10px;\">\n        <mat-label>Search</mat-label>\n        <input matInput [formControl]=\"searchFilter\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchFilter.value){\n        <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n        @else(){\n        <button matSuffix mat-icon-button aria-label=\"Search\">\n            <mat-icon>search</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n\n    @if(sortFields().length > 0){\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select>\n            @for(field of sortFields(); track field)\n            {\n            <mat-option>{{field}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\">\n        <mat-icon>sort</mat-icon>\n    </button>\n    }\n</div>", styles: [".container{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: SearchBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-search-bar', imports: [ReactiveFormsModule,
+                        MatInputModule,
+                        MatTooltipModule,
                         MatButtonModule,
                         MatSelectModule,
                         MatIconModule,
-                        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"] }]
+                        TitleCasePipe], template: "<div class=\"container\">\n    <mat-form-field class=\"search\" style=\"margin: 10px;\">\n        <mat-label>Search</mat-label>\n        <input matInput [formControl]=\"searchFilter\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchFilter.value){\n        <button matSuffix mat-icon-button aria-label=\"Cancel\" (click)=\"clearSearch()\">\n            <mat-icon>cancel</mat-icon>\n        </button>\n        }\n        @else(){\n        <button matSuffix mat-icon-button aria-label=\"Search\">\n            <mat-icon>search</mat-icon>\n        </button>\n        }\n    </mat-form-field>\n\n    @if(sortFields().length > 0){\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select>\n            @for(field of sortFields(); track field)\n            {\n            <mat-option>{{field}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\">\n        <mat-icon>sort</mat-icon>\n    </button>\n    }\n</div>", styles: [".container{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}\n"] }]
+        }] });
+
+class ListDataSource extends DataSource {
+    length = signal(0, ...(ngDevMode ? [{ debugName: "length" }] : []));
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    searchTerm = signal("", ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+    pageSize = signal(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    consumerType;
+    items = new BehaviorSubject([]);
+    itemService;
+    subscription = new Subscription();
+    fetchedPages = new Set();
+    constructor(itemService, consumerType = "table") {
+        super();
+        this.itemService = itemService;
+        this.consumerType = consumerType;
+    }
+    connect(collectionViewer) {
+        if (!this.hasTableConsumer()) {
+            this.subscription.add(collectionViewer.viewChange.subscribe((range) => this.onRange(range)));
+        }
+        return this.items.asObservable();
+    }
+    hasTableConsumer() {
+        return this.consumerType === "table";
+    }
+    onRange(range) {
+        const start_page = Math.floor(range.start / this.pageSize());
+        const end_page = Math.floor(range.end / this.pageSize());
+        for (let idx = start_page; idx <= end_page; idx++) {
+            this.fetchPage(idx);
+        }
+    }
+    reset(searchTerm = "", pageSize = 20) {
+        this.fetchedPages = new Set();
+        this.length.set(0);
+        this.searchTerm.set(searchTerm);
+        this.pageSize.set(pageSize);
+        this.loading.set(true);
+        this.items.next([]);
+        this.fetchPage(0);
+    }
+    fetchPage(idx) {
+        if (this.fetchedPages.has(idx)) {
+            return;
+        }
+        this.fetchedPages.add(idx);
+        this.fetch(new ItemQuery({ page: idx + 1,
+            page_size: this.pageSize(),
+            filter: this.searchTerm() }));
+    }
+    fetch(query) {
+        this.loading.set(true);
+        this.itemService.get(query).pipe(catchError(() => of(new Paginated())), finalize(() => this.loading.set(false))).subscribe(response => this.onResponse(response));
+    }
+    onResponse(response) {
+        this.length.set(response.count);
+        if (this.hasTableConsumer()) {
+            this.items.next(response.results);
+        }
+        else {
+            this.items.next([...this.items.value, ...response.results]);
+        }
+    }
+    disconnect() {
+        this.items.complete();
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+}
+
+class ListViewComponent {
+    viewType = input("table", ...(ngDevMode ? [{ debugName: "viewType" }] : []));
+    itemService = input(...(ngDevMode ? [undefined, { debugName: "itemService" }] : []));
+    itemDetailTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemDetailTemplate" }] : []));
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    sortFields = input([], ...(ngDevMode ? [{ debugName: "sortFields" }] : []));
+    selectedViewType = signal("table", ...(ngDevMode ? [{ debugName: "selectedViewType" }] : []));
+    pageSize = 20;
+    pageSizeOptions = [20, 50, 100];
+    dataSource = undefined;
+    sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
+    columnNames = computed(() => this.columns().map(c => c.name), ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
+    searchTerm = "";
+    ngOnInit() {
+        this.selectedViewType.set(this.viewType());
+        this.resetDataSource();
+    }
+    ngAfterViewInit() {
+        const sort = this.sort();
+        if (sort) {
+            sort.sortChange.pipe(tap(() => this.reset())).subscribe();
+        }
+    }
+    onSearchChange(value) {
+        this.searchTerm = value;
+        this.reset();
+    }
+    canCreate() {
+        const item_service = this.itemService();
+        if (item_service) {
+            return item_service.canCreate();
+        }
+        return false;
+    }
+    itemType() {
+        const item_service = this.itemService();
+        if (item_service) {
+            return item_service.itemType;
+        }
+        return "";
+    }
+    isTableView() {
+        return this.selectedViewType() === "table";
+    }
+    resetDataSource() {
+        const item_service = this.itemService();
+        if (item_service) {
+            this.dataSource = new ListDataSource(item_service, this.selectedViewType());
+        }
+        this.reset();
+    }
+    reset() {
+        if (this.dataSource) {
+            this.dataSource.reset(this.searchTerm, this.pageSize);
+        }
+    }
+    viewChanged(event) {
+        this.selectedViewType.set(event.value);
+        console.log(this.selectedViewType());
+        this.resetDataSource();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ itemType() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" \n      aria-label=\"Add new item\" \n      matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  <div class=\"controls\">\n    <lib-search-bar \n    [itemType]=\"itemType()\"\n    [sortFields]=\"sortFields()\"\n    (searchChanged)=\"onSearchChange($event)\"\n    ></lib-search-bar>\n\n    @if(itemDetailTemplate()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n          }\n  </div>\n\n  @if (dataSource && dataSource.loading()) {\n  <div class=\"spinner-container\">\n    <mat-spinner></mat-spinner>\n  </div>\n  }\n\n  @if(isTableView()) {\n  <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n  </lib-list-table-view>\n  }\n  @else {\n  <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["searchTerm", "pageSize", "dataSource", "listItemTemplate"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SearchBarComponent, selector: "lib-search-bar", inputs: ["itemType", "sortFields"], outputs: ["searchChanged"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: ListViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-view', imports: [ListTableViewComponent,
+                        ListScrollViewComponent,
+                        BackButtonComponent,
+                        MatFormFieldModule,
+                        MatButtonToggleModule,
+                        MatProgressSpinnerModule,
+                        MatIconModule,
+                        ReactiveFormsModule,
+                        RouterModule,
+                        TitleCasePipe,
+                        MatInputModule,
+                        MatTooltipModule,
+                        MatButtonModule,
+                        SearchBarComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"container\">\n  <div class=\"header\">\n    <h1 class=\"title\">{{ itemType() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-fab class=\"padded-button\" \n      aria-label=\"Add new item\" \n      matTooltip=\"Add new item\" [routerLink]=\"['create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  <div class=\"controls\">\n    <lib-search-bar \n    [itemType]=\"itemType()\"\n    [sortFields]=\"sortFields()\"\n    (searchChanged)=\"onSearchChange($event)\"\n    ></lib-search-bar>\n\n    @if(itemDetailTemplate()){\n    <div style=\"margin: 10px\">\n      <mat-button-toggle-group name=\"viewType\" aria-label=\"View Type\" [value]=\"selectedViewType()\"\n        (change)=\"viewChanged($event)\">\n        <mat-button-toggle value=\"table\" matTooltip=\"Show as table\">\n          <mat-icon>table_view</mat-icon>\n        </mat-button-toggle>\n        <mat-button-toggle value=\"scroll\" matTooltip=\"Show as list\">\n          <mat-icon>list</mat-icon>\n        </mat-button-toggle>\n      </mat-button-toggle-group>\n    </div>\n          }\n  </div>\n\n  @if (dataSource && dataSource.loading()) {\n  <div class=\"spinner-container\">\n    <mat-spinner></mat-spinner>\n  </div>\n  }\n\n  @if(isTableView()) {\n  <lib-list-table-view [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n  </lib-list-table-view>\n  }\n  @else {\n  <lib-list-scroll-view [listItemTemplate]=\"itemDetailTemplate()\" [dataSource]=\"dataSource\"></lib-list-scroll-view>\n  }\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding:10px;flex-direction:column;justify-content:center;text-align:center;align-items:center}.header{display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:10px}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}\n"] }]
+        }] });
+
+class UserListDetailComponent {
+    item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserListDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: UserListDetailComponent, isStandalone: true, selector: "lib-user-list-detail", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card mat-list-item class=\"item-card\">\n    @if(item(); as item){\n    <mat-card-header>\n        <mat-card-title-group style=\"padding: 5px\">\n        <mat-card-title\n            >{{ item.first_name }} {{ item.last_name }}</mat-card-title\n        >\n        <mat-card-subtitle>{{ item.username }}</mat-card-subtitle>\n        </mat-card-title-group>\n    </mat-card-header>\n\n    <mat-card-content>\n        <p>Email: {{ item.email }}</p>\n    </mat-card-content>\n    }\n</mat-card>\n", styles: [":host{flex-grow:1}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$3.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$3.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$3.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$3.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$3.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i1$3.MatCardTitleGroup, selector: "mat-card-title-group" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserListDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-list-detail', imports: [MatListModule,
+                        MatCardModule], template: "<mat-card mat-list-item class=\"item-card\">\n    @if(item(); as item){\n    <mat-card-header>\n        <mat-card-title-group style=\"padding: 5px\">\n        <mat-card-title\n            >{{ item.first_name }} {{ item.last_name }}</mat-card-title\n        >\n        <mat-card-subtitle>{{ item.username }}</mat-card-subtitle>\n        </mat-card-title-group>\n    </mat-card-header>\n\n    <mat-card-content>\n        <p>Email: {{ item.email }}</p>\n    </mat-card-content>\n    }\n</mat-card>\n", styles: [":host{flex-grow:1}.mat-mdc-row .mat-mdc-cell{border-bottom:1px solid transparent;border-top:1px solid transparent;cursor:pointer}.mat-mdc-row:hover .mat-mdc-cell{border-color:currentColor}.is-active{font-weight:700}\n"] }]
+        }] });
+
+class UserComponent {
+    viewType = signal("list", ...(ngDevMode ? [{ debugName: "viewType" }] : []));
+    itemService = inject(UserService);
+    columns = [{ name: 'username', title: 'Name', element_type: 'string' }];
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: UserComponent, isStandalone: true, selector: "lib-user", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [itemDetailTemplate]=\"listItemTemplate\"\n  [columns]=\"columns\"\n  [viewType]=\"viewType()\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\">\n    <lib-user-list-detail [item]=\"item\"\n                          [routerLink]=\"['/' + itemService.itemType + '/detail/', item.id]\"\n                          [routerLinkActive]=\"['is-active']\">\n    </lib-user-list-detail>\n  </ng-template>\n</lib-list-view>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: UserComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user', imports: [ListViewComponent, UserListDetailComponent, RouterModule], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [itemDetailTemplate]=\"listItemTemplate\"\n  [columns]=\"columns\"\n  [viewType]=\"viewType()\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\">\n    <lib-user-list-detail [item]=\"item\"\n                          [routerLink]=\"['/' + itemService.itemType + '/detail/', item.id]\"\n                          [routerLinkActive]=\"['is-active']\">\n    </lib-user-list-detail>\n  </ng-template>\n</lib-list-view>\n", styles: [":host{flex-grow:1}\n"] }]
         }] });
 
 class GroupDetailComponent extends DetailView {
@@ -777,7 +1289,7 @@ class GroupDetailComponent extends DetailView {
         this.onInit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: GroupDetailComponent, isStandalone: true, selector: "lib-group-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item) {\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [route]=\"typename\"></lib-detail-header>\n    \n    <div class=\"item-field\">{{item.name}}</div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: GroupDetailComponent, isStandalone: true, selector: "lib-group-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n  @if(item(); as item) {\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [route]=\"typename\"></lib-detail-header>\n    \n    <div class=\"item-field\">{{item.name}}</div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupDetailComponent, decorators: [{
             type: Component,
@@ -786,113 +1298,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         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(GroupService));
-    }
-    ngOnInit() {
-        this.onInit();
-    }
+class GroupComponent {
+    itemService = inject(GroupService);
+    columns = [{ name: 'name', title: 'Name', element_type: 'string' }];
     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=\"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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: GroupComponent, isStandalone: true, selector: "lib-group", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: GroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-group', imports: [
-                        MatTableModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        RouterModule
-                    ], 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: () => [] });
+            args: [{ selector: 'lib-group', imports: [ListViewComponent], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"] }]
+        }] });
 
-class OrganizationComponent extends ListView {
-    displayedColumns = ['name', 'website', 'is_partner'];
-    constructor() {
-        super(inject(OrganizationService));
-    }
-    ngOnInit() {
-        this.onInit();
-    }
+class OrganizationComponent {
+    itemService = inject(OrganizationService);
+    columns = [{ name: 'name', title: 'Name', element_type: 'string' },
+        { name: 'website', title: 'Website', element_type: 'url' },
+        { name: 'is_partner', title: 'Is Partner', element_type: 'boolean' }];
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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=\"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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.1", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "itemDetailTemplate", "columns", "sortFields"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-organization', imports: [
-                        MatTableModule,
-                        MatButtonModule,
-                        MatIconModule,
-                        RouterModule
-                    ], 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: () => [] });
+                        ListViewComponent
+                    ], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [columns]=\"columns\"\n  >\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}\n"] }]
+        }] });
+
+class AddressService extends ItemService {
+    _url = Address.plural;
+    itemType = Address.plural;
+    instantiateType(item) {
+        return new Address(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AddressDetailComponent {
+    address = input(...(ngDevMode ? [undefined, { debugName: "address" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: AddressDetailComponent, isStandalone: true, selector: "lib-address-detail", inputs: { address: { classPropertyName: "address", publicName: "address", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(address(); as address){\n<div class=\"item-field\" style=\"display:flex;flex-wrap: wrap;justify-content: center;align-content: center;\">\n    <span style=\"margin-left: 3px;\">{{address.line1}}, </span>\n    <span style=\"margin-left: 3px;\">{{address.line2}},</span>\n    @if(address.line3){\n    <span style=\"margin-left: 3px;\">{{address.line3}},</span>\n    }\n    @if(address.city){\n    <span style=\"margin-left: 3px;\">{{address.city}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.region}},</span>\n    @if(address.postcode){    \n    <span style=\"margin-left: 3px;\">{{address.postcode}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.country_name}}</span>\n</div>\n}", styles: [""] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-address-detail', imports: [], template: "@if(address(); as address){\n<div class=\"item-field\" style=\"display:flex;flex-wrap: wrap;justify-content: center;align-content: center;\">\n    <span style=\"margin-left: 3px;\">{{address.line1}}, </span>\n    <span style=\"margin-left: 3px;\">{{address.line2}},</span>\n    @if(address.line3){\n    <span style=\"margin-left: 3px;\">{{address.line3}},</span>\n    }\n    @if(address.city){\n    <span style=\"margin-left: 3px;\">{{address.city}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.region}},</span>\n    @if(address.postcode){    \n    <span style=\"margin-left: 3px;\">{{address.postcode}},</span>\n    }\n    <span style=\"margin-left: 3px;\">{{address.country_name}}</span>\n</div>\n}" }]
+        }] });
 
 class OrganizationDetailComponent extends DetailView {
     typename = "organization";
+    address = signal(null, ...(ngDevMode ? [{ debugName: "address" }] : []));
+    addressService = inject(AddressService);
     constructor() {
         super(inject(OrganizationService));
     }
     ngOnInit() {
         this.onInit();
     }
+    onItemAndUserAvailable(item, _user) {
+        this.addressService.getUrl(item.address).subscribe(address => this.address.set(address));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationDetailComponent, isStandalone: true, selector: "lib-organization-detail", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"typename\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    @if(address(); as address)\n    {\n      <h3>Address</h3>\n      <lib-address-detail [address]=\"address\"></lib-address-detail>\n    }\n    <div class=\"item-field\">\n      <h3>Website</h3>{{item.website}}\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.padded_button{padding:5px}\n"], dependencies: [{ kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: DetailHeaderComponent, selector: "lib-detail-header", inputs: ["id", "text", "route", "canEdit", "canDelete"], outputs: ["deleteClicked"] }, { kind: "component", type: AddressDetailComponent, selector: "lib-address-detail", inputs: ["address"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-organization-detail', imports: [NgIf,
-                        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"] }]
+            args: [{ selector: 'lib-organization-detail', imports: [BackButtonComponent,
+                        DetailHeaderComponent, AddressDetailComponent], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-detail-container\">\n\n    <lib-detail-header\n      [text]=\"item.name\"\n      [id]=\"item.id\"\n      [canEdit]=\"itemService.canEdit()\"\n      [canDelete]=\"itemService.canDelete()\"\n      [route]=\"typename\"></lib-detail-header>\n\n    <div class=\"item-field\">\n      {{item.description}}\n    </div>\n    \n    @if(address(); as address)\n    {\n      <h3>Address</h3>\n      <lib-address-detail [address]=\"address\"></lib-address-detail>\n    }\n    <div class=\"item-field\">\n      <h3>Website</h3>{{item.website}}\n    </div>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.padded_button{padding:5px}\n"] }]
         }], ctorParameters: () => [] });
 
+class AddressEditComponent {
+    countryOptions = input([], ...(ngDevMode ? [{ debugName: "countryOptions" }] : []));
+    form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: AddressEditComponent, isStandalone: true, selector: "lib-address-edit", inputs: { countryOptions: { classPropertyName: "countryOptions", publicName: "countryOptions", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if(form(); as form){\n<div [formGroup]=\"form\" style=\"display: flex; flex-direction: column; width:100%\">\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line1\">Line 1</mat-label>\n        <input matInput placeholder=\"Address Line 1\" type=\"text\" id=\"line1\" formControlName=\"line1\" name=\"line1\"\n            required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line2\">Line 2</mat-label>\n        <input matInput placeholder=\"Address Line 2\" type=\"text\" id=\"line2\" formControlName=\"line2\" name=\"line1\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line3\">Line 3</mat-label>\n        <input matInput placeholder=\"Address Line 3\" type=\"text\" id=\"line3\" formControlName=\"line3\" name=\"line3\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"city\">City</mat-label>\n        <input matInput placeholder=\"City\" type=\"text\" id=\"city\" formControlName=\"city\" name=\"city\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"region\">Region</mat-label>\n        <input matInput placeholder=\"Region\" type=\"text\" id=\"region\" formControlName=\"region\" name=\"region\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"line1\">Post Code</mat-label>\n        <input matInput placeholder=\"Post Code\" type=\"text\" id=\"postcode\" formControlName=\"postcode\" name=\"postcode\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"country\">Country</mat-label>\n        <mat-select formControlName=\"country\" name=\"country\" id=\"country\" required>\n            @for(country of countryOptions(); track $index){\n            <mat-option [value]=\"country.code\">{{country.name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n</div>\n}", styles: [""], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: AddressEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-address-edit', imports: [MatFormFieldModule,
+                        MatSelectModule,
+                        MatInputModule,
+                        ReactiveFormsModule
+                    ], template: "@if(form(); as form){\n<div [formGroup]=\"form\" style=\"display: flex; flex-direction: column; width:100%\">\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line1\">Line 1</mat-label>\n        <input matInput placeholder=\"Address Line 1\" type=\"text\" id=\"line1\" formControlName=\"line1\" name=\"line1\"\n            required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line2\">Line 2</mat-label>\n        <input matInput placeholder=\"Address Line 2\" type=\"text\" id=\"line2\" formControlName=\"line2\" name=\"line1\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field-wide\">\n        <mat-label for=\"line3\">Line 3</mat-label>\n        <input matInput placeholder=\"Address Line 3\" type=\"text\" id=\"line3\" formControlName=\"line3\" name=\"line3\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"city\">City</mat-label>\n        <input matInput placeholder=\"City\" type=\"text\" id=\"city\" formControlName=\"city\" name=\"city\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"region\">Region</mat-label>\n        <input matInput placeholder=\"Region\" type=\"text\" id=\"region\" formControlName=\"region\" name=\"region\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"line1\">Post Code</mat-label>\n        <input matInput placeholder=\"Post Code\" type=\"text\" id=\"postcode\" formControlName=\"postcode\" name=\"postcode\" required>\n    </mat-form-field>\n\n    <mat-form-field class=\"form-field\">\n        <mat-label for=\"country\">Country</mat-label>\n        <mat-select formControlName=\"country\" name=\"country\" id=\"country\" required>\n            @for(country of countryOptions(); track $index){\n            <mat-option [value]=\"country.code\">{{country.name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n</div>\n}" }]
+        }] });
+
+class AddressForm {
+    formBuilder = inject(FormBuilder);
+    form = this.formBuilder.group({
+        line1: [''],
+        line2: [''],
+        line3: [''],
+        city: [''],
+        region: [''],
+        postcode: [''],
+        country: ['']
+    });
+    setValue(item) {
+        this.form.setValue({
+            line1: item.line1,
+            line2: item.line2,
+            line3: item.line3,
+            city: item.city,
+            region: item.region,
+            postcode: item.postcode,
+            country: item.country
+        });
+    }
+    updateItem(item) {
+        const value = this.form.value;
+        item.line1 = value.line1 || "";
+        item.line2 = value.line2 || "";
+        item.line3 = value.line3 || "";
+        item.city = value.city || "";
+        item.region = value.region || "";
+        item.postcode = value.postcode || "";
+        item.country = value.country || "";
+        return item;
+    }
+}
+
+class OrganizationForm {
+    formBuilder = inject(FormBuilder);
+    form;
+    address = new AddressForm();
+    constructor() {
+        this.form = this.formBuilder.group({
+            name: [''],
+            acronym: [''],
+            description: [''],
+            website: [''],
+            address: [this.address.form]
+        });
+    }
+    updateFromItem(item) {
+        this.form.setValue({
+            name: item.name,
+            acronym: item.acronym,
+            description: item.description,
+            website: item.website,
+            address: this.address.form
+        });
+    }
+    updateItem(item) {
+        item.name = this.form.value.name || "";
+        item.acronym = this.form.value.acronym || "";
+        item.description = this.form.value.description || "";
+        item.website = this.form.value.website || "";
+        return item;
+    }
+}
+
 class OrganizationEditComponent extends EditView {
+    typename = "Organization";
     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: [''] });
+    columns = [{ name: 'first_name', title: 'First Name', element_type: 'string' },
+        { name: 'last_name', title: 'Surname', element_type: 'string' },
+        { name: 'username', title: 'Username', element_type: 'string' },
+        { name: 'email', title: 'Email', element_type: 'string' }];
+    form = new OrganizationForm();
+    address = new Address();
+    addressService = inject(AddressService);
     constructor() {
         super(inject(OrganizationService));
     }
     ngOnInit() {
         this.onInit();
-        this.fetchRestOptions();
+        this.addressService.getOptions().subscribe(options => this.onOptions(options));
     }
     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));
+            this.fetchAddress(item.address);
+            this.form.updateFromItem(item);
+            const queries = new Map([["organization", item.id.toString()]]);
+            const query = new ItemQuery({ queries: queries });
+            this._userService.get(query).subscribe(users => this.selectedMembers.set(users.results));
+            this._userService.get().subscribe(users => this.updateCandidates(users));
         }
     }
+    updateCandidates(users) {
+        this.candidateMembers.set(users.results.map(user => { return { title: user.username, item: user }; }));
+    }
     submit() {
-        this.item.update((item) => { if (item) {
-            item = this.updateFromForm(item);
+        this.syncFromForm();
+        if (this.createMode()) {
+            this.createAddress().subscribe(_ => super.submit());
+        }
+        else {
+            this.updateAddress();
+            super.submit();
+        }
+    }
+    fetchAddress(url) {
+        if (url) {
+            this.addressService.getUrl(url).subscribe(address => this.onAddressUpdated(address));
+        }
+    }
+    updateAddress() {
+        this.addressService.putItem(this.address).subscribe(address => this.onAddressUpdated(address));
+    }
+    createAddress() {
+        return this.addressService.postItem(this.address).pipe(tap(address => { this.onAddressCreated(address); }));
+    }
+    onAddressUpdated(address) {
+        this.address = address;
+        this.form.address.setValue(this.address);
+    }
+    onAddressCreated(address) {
+        this.onAddressUpdated(address);
+        this.item.update(item => { if (item) {
+            item.address = address.url;
         } 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;
+    syncFromForm() {
+        this.address = this.form.address.updateItem(this.address);
+        this.item.update((item) => { if (item) {
+            item = this.form.updateItem(item);
+        } return item; });
     }
     getTemplateItem() {
         return new Organization();
@@ -903,7 +1532,7 @@ class OrganizationEditComponent extends EditView {
         }
     }
     onCountryChoices(choices) {
-        this.countryOptions.update(() => choices.map(c => c.display_name));
+        this.countryOptions.update(() => choices.map(c => { return { name: c.display_name, code: c.value, flag: "" }; }));
     }
     onMemberRemoved(id) {
         const url = this.selectedMembers().find(m => m.id == id).url;
@@ -912,24 +1541,32 @@ class OrganizationEditComponent extends EditView {
             item.members.filter(m => m != url);
         } return item; });
     }
-    onMemberAdded(id) {
-        const selected = this.candidateMembers().find(m => m.id == id);
+    onMemberAdded(title) {
+        const selected = this.candidateMembers().find(m => m.title == title);
         if (selected) {
-            this.selectedMembers.update(members => { members.push(selected); return members; });
+            this.selectedMembers.update(members => { members.push(selected.item); return members; });
         }
-        this.candidateMembers.update(members => members.filter(m => m.id != id));
-        const url = this.selectedMembers().find(m => m.id == id).url;
+        this.candidateMembers.update(members => members.filter(m => m.title != title));
+        const url = this.selectedMembers().find(m => m.username == title).url;
         this.item.update(item => { if (item) {
             item.members.push(url);
         } return item; });
     }
+    onSearchChanged(searchTerm) {
+        console.log("Batch requested");
+        if (searchTerm) {
+            this._userService.get(new ItemQuery({ filter: searchTerm })).subscribe(users => this.updateCandidates(users));
+        }
+        else {
+            this._userService.get().subscribe(users => this.updateCandidates(users));
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.1", ngImport: i0, type: OrganizationEditComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading()}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form\" (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" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.1", type: OrganizationEditComponent, isStandalone: true, selector: "lib-organization-edit", usesInheritance: true, ngImport: i0, template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading()}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <mat-form-field class=\"form-field\">\n          <mat-label for=\"acronym\">Acronym</mat-label> \n          <input matInput placeholder=\"Acronym\"\n                 type=\"text\"\n                 id=\"acronym\"\n                 formControlName=\"acronym\"\n                 name=\"acronym\">\n        </mat-form-field>\n \n        <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"description\">Description</mat-label>\n          <textarea matInput placeholder=\"Description\"\n                    type=\"text\"\n                    id=\"description\"\n                    formControlName=\"description\"\n                    name=\"description\"\n                    class=\"medium-textarea\"\n                    required></textarea>\n        </mat-form-field>\n\n        <h3>Address</h3>\n        <lib-address-edit \n        [countryOptions]=\"countryOptions()\"\n        [form]=\"form.address.form\"\n        ></lib-address-edit>\n\n        <h3>Members</h3>\n        <lib-select-table [selected]=\"selectedMembers()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"columns\"\n                         [options]=\"candidateMembers()\"\n                         (itemAdded)=\"onMemberAdded($event)\"\n                         (itemRemoved)=\"onMemberRemoved($event)\"\n                         (searchChanged)=\"onSearchChanged($event)\">\n        </lib-select-table>\n\n         <div class=\"button_group\">\n           <button mat-fab\n                   class=\"form_action_button\"\n                   type=\"submit\"\n                   [disabled]=\"!form.form.valid\">\n             <mat-icon>save</mat-icon>\n           </button>\n           \n           <button mat-fab\n                   class=\"form_action_button\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n         \n     </form>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.checkbox_group{justify-content:left;display:flex;flex-direction:column}.button_group{margin:10px;display:flex;flex-direction:row;justify-content:center}.btn-block{padding:5px}.form_action_button{padding:5px;margin:5px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "component", type: AddressEditComponent, selector: "lib-address-edit", inputs: ["countryOptions", "form"] }, { kind: "component", type: SelectTableComponent, selector: "lib-select-table", inputs: ["itemType", "selected", "options", "columns"], outputs: ["itemAdded", "itemRemoved", "searchChanged"] }] });
 }
 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,
-                        UserSelectComponent,
+            args: [{ selector: 'lib-organization-edit', imports: [
                         ReactiveFormsModule,
                         MatButtonModule,
                         MatInputModule,
@@ -937,7 +1574,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
                         MatFormFieldModule,
                         MatIconModule,
                         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"] }]
+                        BackButtonComponent,
+                        AddressEditComponent,
+                        SelectTableComponent
+                    ], template: "<lib-back-button></lib-back-button>\n\n<div class=\"content-container\">\n\n  @if(item(); as item){\n  <div class=\"item-edit-container\">\n    \n    <h1 class=\"item-edit-header\">{{heading()}}</h1>\n\n    <form class=\"form-card\" [formGroup]=\"form.form\" (ngSubmit)=\"submit()\">\n\n      <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"name\">Name</mat-label>\n          <input matInput placeholder=\"Name\"\n                 type=\"text\"\n                 id=\"name\"\n                 formControlName=\"name\"\n                 name=\"name\"\n                 required>\n        </mat-form-field>\n        \n        <mat-form-field class=\"form-field\">\n          <mat-label for=\"acronym\">Acronym</mat-label> \n          <input matInput placeholder=\"Acronym\"\n                 type=\"text\"\n                 id=\"acronym\"\n                 formControlName=\"acronym\"\n                 name=\"acronym\">\n        </mat-form-field>\n \n        <mat-form-field class=\"form-field-wide\">\n          <mat-label for=\"description\">Description</mat-label>\n          <textarea matInput placeholder=\"Description\"\n                    type=\"text\"\n                    id=\"description\"\n                    formControlName=\"description\"\n                    name=\"description\"\n                    class=\"medium-textarea\"\n                    required></textarea>\n        </mat-form-field>\n\n        <h3>Address</h3>\n        <lib-address-edit \n        [countryOptions]=\"countryOptions()\"\n        [form]=\"form.address.form\"\n        ></lib-address-edit>\n\n        <h3>Members</h3>\n        <lib-select-table [selected]=\"selectedMembers()\"\n                          [itemType]=\"'Members'\"\n                          [columns]=\"columns\"\n                         [options]=\"candidateMembers()\"\n                         (itemAdded)=\"onMemberAdded($event)\"\n                         (itemRemoved)=\"onMemberRemoved($event)\"\n                         (searchChanged)=\"onSearchChanged($event)\">\n        </lib-select-table>\n\n         <div class=\"button_group\">\n           <button mat-fab\n                   class=\"form_action_button\"\n                   type=\"submit\"\n                   [disabled]=\"!form.form.valid\">\n             <mat-icon>save</mat-icon>\n           </button>\n           \n           <button mat-fab\n                   class=\"form_action_button\"\n                   (click)=\"cancel()\">\n             <mat-icon>cancel</mat-icon>\n           </button>\n         </div>\n         \n     </form>\n  </div>\n  }\n</div>\n", styles: [":host{flex-grow:1}.medium-textarea{min-height:150px}.checkbox_group{justify-content:left;display:flex;flex-direction:column}.button_group{margin:10px;display:flex;flex-direction:row;justify-content:center}.btn-block{padding:5px}.form_action_button{padding:5px;margin:5px}\n"] }]
         }], ctorParameters: () => [] });
 
 /*
@@ -948,5 +1588,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ApiError, BackButtonComponent, DetailHeaderComponent, DetailView, ENDPOINT_URL, EditView, ErrorCode, FileRecord, FileUploadComponent, Group, GroupComponent, GroupDetailComponent, GroupService, LOGIN_USER, LandingComponent, LeftNavComponent, LeftNavService, ListView, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, PortalMember, RestService, TopBarComponent, UserComponent, UserDetailComponent, UserEditComponent, UserSelectComponent, UserService };
+export { ApiError, BackButtonComponent, DetailHeaderComponent, DetailView, ENDPOINT_URL, EditView, ErrorCode, FileRecord, FileUploadComponent, Group, GroupComponent, GroupDetailComponent, GroupService, ItemQuery, LOGIN_USER, LandingComponent, LeftNavComponent, LeftNavService, ListView, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, Paginated, Permission, PortalMember, ResolvedPermission, RestService, SelectTableComponent, TopBarComponent, UserComponent, UserDetailComponent, UserEditComponent, UserService };
 //# sourceMappingURL=ichec-angular-core.mjs.map