ichec-angular-core 0.3.9 → 0.3.11

package/fesm2022/ichec-angular-core.mjs

@@ -1,4 +1,4 @@
-import { BehaviorSubject, map, catchError, mergeMap, throwError, tap, of, debounceTime, distinctUntilChanged, merge, Subscription, finalize } from 'rxjs';
+import { BehaviorSubject, map, catchError, mergeMap, throwError, tap, of, Subscription, finalize, merge, debounceTime, distinctUntilChanged } from 'rxjs';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, DOCUMENT, Injectable, signal, Component, computed, input, output, viewChild } from '@angular/core';
@@ -39,11 +39,11 @@ import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i1$4 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { DataSource } from '@angular/cdk/collections';
 import * as i2$2 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i2$3 from '@angular/cdk/scrolling';
 import { ScrollingModule } from '@angular/cdk/scrolling';
-import { DataSource } from '@angular/cdk/collections';
 import * as i2$4 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import * as i5$1 from '@angular/material/menu';
@@ -107,7 +107,6 @@ class ItemQuery {
     page_size = 0;
     sort_field = "";
     sort_order = "";
-    filter_field = "";
     filter = "";
     constructor(params = {}) {
         Object.assign(this, params);
@@ -167,6 +166,26 @@ function getFileFieldIds(form) {
     }));
     return ids;
 }
+class SearchFields {
+    filter = { rows: [] };
+    sortFields = [];
+    defaultQueries = [];
+    pageSize = 20;
+    pageSizeOptions = [20, 50, 100];
+    constructor(params = {}) {
+        Object.assign(this, params);
+    }
+}
+function getFilter(filters, key) {
+    for (const row of filters.rows) {
+        for (const filter of row.filters) {
+            if (filter.key === key) {
+                return filter;
+            }
+        }
+    }
+    return null;
+}
 
 class FileRecord {
     name = "";
@@ -219,9 +238,6 @@ class RestService {
             }
             params.set('ordering', sort_field);
         }
-        if (query.filter_field) {
-            params.set('search_field', query.filter_field);
-        }
         if (query.filter) {
             params.set('search', query.filter);
         }
@@ -530,7 +546,7 @@ class ItemWithUserService extends ItemService {
         return this.userService.hasDeletePermission(this.permissionName());
     }
     permissionName() {
-        return this.typename.replace("_", "");
+        return this.typename.replaceAll("_", "");
     }
     getUserItems() {
         if (this.userService.loggedInUser.value) {
@@ -843,7 +859,7 @@ class DetailView {
     }
     title() {
         if (this.itemService.typename) {
-            return this.itemService.typename.replace("_", " ");
+            return this.itemService.typename.replaceAll("_", " ");
         }
         return "";
     }
@@ -940,7 +956,7 @@ class EditView {
     }
     getTitle() {
         if (this.itemService && this.itemService.typename) {
-            return this.itemService.typename.replace("_", " ");
+            return this.itemService.typename.replaceAll("_", " ");
         }
         return "";
     }
@@ -1176,47 +1192,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 
 class SearchBarComponent {
     itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
-    sortFields = input([], ...(ngDevMode ? [{ debugName: "sortFields" }] : []));
-    sortAscending = signal(true, ...(ngDevMode ? [{ debugName: "sortAscending" }] : []));
-    filters = input(null, ...(ngDevMode ? [{ debugName: "filters" }] : []));
-    searchChanged = output();
-    searchFilter = new FormControl();
     showFilters = signal(false, ...(ngDevMode ? [{ debugName: "showFilters" }] : []));
-    fb = inject(FormBuilder);
-    filterForm = null;
-    ngOnInit() {
-        const filters = this.filters();
-        if (!filters) {
-            return;
-        }
-        this.filterForm = this.fb.group({});
-        for (const row of filters.rows) {
-            for (const filter of row.filters) {
-                if (filter.type == "boolean") {
-                    this.filterForm.addControl(filter.key, this.fb.control(filter.default === "true"));
-                }
-                else if (filter.type == "selection") {
-                    this.filterForm.addControl(filter.key, this.fb.control(filter.default));
-                }
-            }
-        }
+    form = input.required(...(ngDevMode ? [{ debugName: "form" }] : []));
+    get searchControl() {
+        return this.form().form.controls['search'];
     }
-    ngAfterViewInit() {
-        this.searchFilter.valueChanges.pipe(debounceTime(150), distinctUntilChanged(), tap(() => {
-            this.searchEntered();
-        })).subscribe();
+    get sortControl() {
+        return this.form().form.controls['sortAscending'];
+    }
+    clearFilters() {
+        this.form().resetFilters();
     }
     toggleFilterVisibility() {
         this.showFilters.update(value => !value);
     }
     clearSearch() {
-        this.searchFilter.setValue("");
+        this.searchControl.setValue("");
     }
-    searchEntered() {
-        this.searchChanged.emit(this.searchFilter.value);
+    toggleSortOrder() {
+        this.sortControl.setValue(!this.sortControl.value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"container\">\n    <div class=\"search-row\">\n    <mat-form-field class=\"search\" style=\"margin: 5px;width:70%\">\n        <mat-label>{{'Search for ' + itemType() | titlecase}}</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(filters(); as filters)\n    {\n        @if(showFilters())\n        {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>close</mat-icon>Hide Filters</button>\n        }\n        @else {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Filters</button>\n        }\n    }\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>\n\n    <div class=\"filter-container\" style=\"width:100%\">\n    @if(filters(); as filters)\n    {\n        @if(showFilters())\n        {\n            <div style=\"display: flex; flex-direction: row;\">\n            @for(row of filters.rows; track row)\n            {\n                @for(filter of row.filters; track filter)\n                {\n                    @if(filter.type === \"boolean\")\n                    {\n                        <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n                    }\n                }\n            }\n            </div>\n        }\n    }\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{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: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SearchBarComponent, isStandalone: true, selector: "lib-search-bar", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n    <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n    <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n    <div class=\"search-row\">\n    <mat-form-field class=\"search\" style=\"width:70%\">\n        <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchControl.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(form().searchFields.sortFields.length > 0){\n    <div>\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select formControlName=\"sortField\">\n            @for(field of form().searchFields.sortFields; track field)\n            {\n            <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n        @if(sortControl.value){\n        <mat-icon>arrow_upward</mat-icon>\n        }\n        @else{\n            <mat-icon>arrow_downward</mat-icon>\n        }\n    </button>\n    </div>\n    }\n    </div>\n\n    @if(form().searchFields.filter.rows.length > 0)\n    {\n        @if(showFilters())\n        {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>hide</mat-icon>Hide Filters</button>\n\n            <button mat-button=\"tonal\" (click)=\"clearFilters()\"><mat-icon>collapse_all</mat-icon>Clear Filters</button>\n        }\n        @else {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n        }\n    }\n\n    </div>\n\n    <div class=\"filter-container\">\n    @if(showFilters() && form().searchFields.filter.rows.length > 0)\n    {\n        <div style=\"display: flex; flex-direction: row;\">\n        <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n        @for(row of form().searchFields.filter.rows; track row)\n        {\n            @for(filter of row.filters; track filter)\n            {\n                @if(filter.type === \"boolean\")\n                {\n                    <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n                }\n                @else if (filter.type === \"selection\") {\n                    <mat-form-field>\n                        <mat-label>{{filter.display_name}}</mat-label>\n                        <mat-select [formControlName]=\"filter.key\">\n                            @for(choice of filter.choices; track choice){\n                            <mat-option [value]=\"choice.value\">\n                                {{choice.display_name}}\n                            </mat-option>\n                        }\n                        </mat-select>\n                    </mat-form-field>\n                }\n            }\n        }\n        </form>\n        </div>\n    }\n    </div>\n    </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SearchBarComponent, decorators: [{
             type: Component,
@@ -1227,8 +1224,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatSelectModule,
                         MatSlideToggleModule,
                         MatIconModule,
-                        TitleCasePipe], template: "<div class=\"container\">\n    <div class=\"search-row\">\n    <mat-form-field class=\"search\" style=\"margin: 5px;width:70%\">\n        <mat-label>{{'Search for ' + itemType() | titlecase}}</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(filters(); as filters)\n    {\n        @if(showFilters())\n        {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>close</mat-icon>Hide Filters</button>\n        }\n        @else {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Filters</button>\n        }\n    }\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>\n\n    <div class=\"filter-container\" style=\"width:100%\">\n    @if(filters(); as filters)\n    {\n        @if(showFilters())\n        {\n            <div style=\"display: flex; flex-direction: row;\">\n            @for(row of filters.rows; track row)\n            {\n                @for(filter of row.filters; track filter)\n                {\n                    @if(filter.type === \"boolean\")\n                    {\n                        <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n                    }\n                }\n            }\n            </div>\n        }\n    }\n    </div>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}\n"] }]
-        }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }] } });
+                        TitleCasePipe], template: "<div class=\"container\">\n    <form [formGroup]=\"form().form\" style=\"width: 100%;max-width:1200px\">\n    <div style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;\">\n    <div class=\"search-row\">\n    <mat-form-field class=\"search\" style=\"width:70%\">\n        <mat-label>{{'Search for ' + itemType() | titlecase}}</mat-label>\n        <input matInput formControlName=\"search\" placeholder=\"Search {{ itemType() | titlecase }}\" />\n\n        @if(searchControl.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(form().searchFields.sortFields.length > 0){\n    <div>\n    <mat-form-field style=\"margin: 10px\">\n        <mat-label>Sort By</mat-label>\n        <mat-select formControlName=\"sortField\">\n            @for(field of form().searchFields.sortFields; track field)\n            {\n            <mat-option [value]=\"field.value\">{{field.display_name}}</mat-option>\n            }\n        </mat-select>\n    </mat-form-field>\n\n    <button mat-icon-button aria-label=\"Sort Order\" matTooltip=\"Toggle sort order\" (click)=\"toggleSortOrder()\">\n        @if(sortControl.value){\n        <mat-icon>arrow_upward</mat-icon>\n        }\n        @else{\n            <mat-icon>arrow_downward</mat-icon>\n        }\n    </button>\n    </div>\n    }\n    </div>\n\n    @if(form().searchFields.filter.rows.length > 0)\n    {\n        @if(showFilters())\n        {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>hide</mat-icon>Hide Filters</button>\n\n            <button mat-button=\"tonal\" (click)=\"clearFilters()\"><mat-icon>collapse_all</mat-icon>Clear Filters</button>\n        }\n        @else {\n            <button mat-button=\"tonal\" (click)=\"toggleFilterVisibility()\"><mat-icon>tune</mat-icon>Show Filters</button>\n        }\n    }\n\n    </div>\n\n    <div class=\"filter-container\">\n    @if(showFilters() && form().searchFields.filter.rows.length > 0)\n    {\n        <div style=\"display: flex; flex-direction: row;\">\n        <form [formGroup]=\"form().form.controls['filters']\" style=\"width: 100%;\">\n        @for(row of form().searchFields.filter.rows; track row)\n        {\n            @for(filter of row.filters; track filter)\n            {\n                @if(filter.type === \"boolean\")\n                {\n                    <mat-slide-toggle [formControlName]=\"filter.key\">{{filter.display_name}}</mat-slide-toggle>\n                }\n                @else if (filter.type === \"selection\") {\n                    <mat-form-field>\n                        <mat-label>{{filter.display_name}}</mat-label>\n                        <mat-select [formControlName]=\"filter.key\">\n                            @for(choice of filter.choices; track choice){\n                            <mat-option [value]=\"choice.value\">\n                                {{choice.display_name}}\n                            </mat-option>\n                        }\n                        </mat-select>\n                    </mat-form-field>\n                }\n            }\n        }\n        </form>\n        </div>\n    }\n    </div>\n    </form>\n</div>", styles: [":host{flex-grow:1}.container{width:100%;display:flex;flex-wrap:wrap;flex-direction:column;align-items:center;justify-content:center}.search-row{width:100%;display:flex;flex-wrap:wrap;flex-direction:row;align-items:center;justify-content:center}.filter-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}\n"] }]
+        }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
 
 class FileUploadComponent {
     control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
@@ -2023,6 +2020,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             args: [{ selector: 'lib-populated-form', imports: [MatIconModule, MatButtonModule], template: "@for(value of form().values; track value.id)\n{\n@if(value.field.field_type === \"TEXT\" || value.field.field_type === \"RICH_TEXT\")\n{\n    <div class=\"item-field\">\n        <h3 style=\"margin-right: 10px\">{{value.field.label}}</h3>\n        <p>{{value.value}}</p>\n    </div>\n}\n@else if(value.field.field_type === \"CHAR\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <span>{{value.value}}</span>\n    </div>\n}\n@else if(value.field.field_type === \"BOOLEAN\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        @if(value.value === \"true\")\n        {\n            <mat-icon>check</mat-icon>\n        }\n        @else {\n            <mat-icon>close_small</mat-icon>\n        }\n    </div>\n}\n@else if(value.field.field_type === \"SELECTION\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <span>{{value.value}}</span>\n    </div>\n}\n@else if(value.field.field_type === \"INTEGER\")\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <span>{{value.value}}</span>\n    </div>\n}\n@else if(value.field.field_type === \"FILE\" && value.asset)\n{\n    <div class=\"item-field\">\n        <span style=\"margin-right: 10px\"><b>{{value.field.label}}:</b></span>\n        <a matFab href=\"value.asset\">\n            <mat-icon>download</mat-icon>\n        </a>\n    </div>\n}\n}" }]
         }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }] } });
 
+class ListDataSource extends DataSource {
+    length = signal(0, ...(ngDevMode ? [{ debugName: "length" }] : []));
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    activeQuery = signal(new ItemQuery(), ...(ngDevMode ? [{ debugName: "activeQuery" }] : []));
+    hasFetched = signal(false, ...(ngDevMode ? [{ debugName: "hasFetched" }] : []));
+    sourceIsEmpty = computed(() => this.length() == 0 && this.hasFetched() && !this.activeQuery().filter, ...(ngDevMode ? [{ debugName: "sourceIsEmpty" }] : []));
+    consumerType;
+    items = new BehaviorSubject([]);
+    itemService;
+    subscription = new Subscription();
+    fetchedPages = new Set();
+    defaultQueries = [];
+    constructor(itemService, consumerType = "table", defaultQueries = []) {
+        super();
+        this.itemService = itemService;
+        this.consumerType = consumerType;
+        this.defaultQueries = defaultQueries;
+    }
+    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.activeQuery().page_size);
+        const end_page = Math.floor(range.end / this.activeQuery().page_size);
+        for (let idx = start_page; idx <= end_page; idx++) {
+            this.fetchPage(idx);
+        }
+    }
+    reset(query) {
+        this.fetchedPages = new Set();
+        this.length.set(0);
+        this.activeQuery.set(query);
+        this.loading.set(true);
+        this.items.next([]);
+        this.fetchPage(0);
+    }
+    fetchPage(idx) {
+        if (this.fetchedPages.has(idx)) {
+            return;
+        }
+        this.fetchedPages.add(idx);
+        let queries = new Map([]);
+        this.defaultQueries.forEach(q => queries.set(q.key, q.value));
+        queries = new Map([...this.activeQuery().queries, ...queries]);
+        this.fetch(new ItemQuery({ page: idx + 1,
+            page_size: this.activeQuery().page_size,
+            queries: queries,
+            sort_field: this.activeQuery().sort_field,
+            sort_order: this.activeQuery().sort_order,
+            filter: this.activeQuery().filter }));
+    }
+    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);
+        this.hasFetched.set(true);
+        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 ListHeaderComponent {
+    itemType = input.required(...(ngDevMode ? [{ debugName: "itemType" }] : []));
+    canCreate = input.required(...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    showControls = input.required(...(ngDevMode ? [{ debugName: "showControls" }] : []));
+    embedded = input(false, ...(ngDevMode ? [{ debugName: "embedded" }] : []));
+    searchForm = input.required(...(ngDevMode ? [{ debugName: "searchForm" }] : []));
+    title() {
+        return this.itemType().replaceAll("_", " ");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListHeaderComponent, isStandalone: true, selector: "lib-list-header", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: true, transformFunction: null }, canCreate: { classPropertyName: "canCreate", publicName: "canCreate", isSignal: true, isRequired: true, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: true, transformFunction: null }, embedded: { classPropertyName: "embedded", publicName: "embedded", isSignal: true, isRequired: false, transformFunction: null }, searchForm: { classPropertyName: "searchForm", publicName: "searchForm", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"container\">\n\n  @if(!embedded()){\n  <div class=\"title-container\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-mini-fab aria-label=\"Add new item\" [matTooltip]=\"'Add new ' + title()\"\n        [routerLink]=\"['/' + itemType(), 'create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n}\n\n  <div class=\"controls\" [hidden]=\"!showControls()\">\n    <lib-search-bar style=\"width:70%\" [itemType]=\"title()\" [form]=\"searchForm()\"></lib-search-bar>\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;flex-direction:column;align-items:center;justify-content:center}.title-container{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:5px;margin:0}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchBarComponent, selector: "lib-search-bar", inputs: ["itemType", "form"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-list-header', imports: [TitleCasePipe,
+                        RouterModule,
+                        MatIconModule,
+                        MatButtonModule,
+                        MatTooltipModule,
+                        SearchBarComponent], template: "<div class=\"container\">\n\n  @if(!embedded()){\n  <div class=\"title-container\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-mini-fab aria-label=\"Add new item\" [matTooltip]=\"'Add new ' + title()\"\n        [routerLink]=\"['/' + itemType(), 'create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n}\n\n  <div class=\"controls\" [hidden]=\"!showControls()\">\n    <lib-search-bar style=\"width:70%\" [itemType]=\"title()\" [form]=\"searchForm()\"></lib-search-bar>\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;flex-direction:column;align-items:center;justify-content:center}.title-container{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:5px;margin:0}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}\n"] }]
+        }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: true }] }], canCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreate", required: true }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: true }] }], embedded: [{ type: i0.Input, args: [{ isSignal: true, alias: "embedded", required: false }] }], searchForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchForm", required: true }] }] } });
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ListTableViewComponent {
     itemType = input("", ...(ngDevMode ? [{ debugName: "itemType" }] : []));
@@ -2088,8 +2186,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 // Datasource needs any
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class ListScrollViewComponent {
-    searchTerm = input("", ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
-    pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
     itemHeight = input(100, ...(ngDevMode ? [{ debugName: "itemHeight" }] : []));
     itemWidth = input("200", ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
     dataSource = input(...(ngDevMode ? [undefined, { debugName: "dataSource" }] : []));
@@ -2097,133 +2193,77 @@ class ListScrollViewComponent {
     routerMode = input(false, ...(ngDevMode ? [{ debugName: "routerMode" }] : []));
     selection = signal(null, ...(ngDevMode ? [{ debugName: "selection" }] : []));
     selected = output();
-    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());
-    }
     onSelected(id) {
         this.selection.set(id);
         this.selected.emit(id);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListScrollViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListScrollViewComponent, isStandalone: true, selector: "lib-list-scroll-view", inputs: { searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", 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 }, routerMode: { classPropertyName: "routerMode", publicName: "routerMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<mat-nav-list class=\"scrollable-container\">\n  <cdk-virtual-scroll-viewport\n    itemSize=\"itemHeight()\"\n    class=\"scrollable-list\"\n    style=\"width: 100%;\">\n    <ng-container *cdkVirtualFor=\"let item of dataSource(); let even = even;\">\n      @if(routerMode())\n      {\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>\n      }\n      @else \n      {\n      <div\n      (click)=\"onSelected(item.id)\"     \n      (keydown)=\"onSelected(item.id)\"\n      tabindex=\"0\"\n      style=\"width: 100%; margin-right: 5px; margin-bottom: 2px;\"\n      role=\"button\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>    \n      </div>   \n      }\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.scrollable-container{padding:0;display:flex;justify-content:center}.scrollable-list{height:540px;padding:5px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListScrollViewComponent, isStandalone: true, selector: "lib-list-scroll-view", inputs: { itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", 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 }, routerMode: { classPropertyName: "routerMode", publicName: "routerMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, ngImport: i0, template: "<mat-nav-list class=\"scrollable-container\">\n  <cdk-virtual-scroll-viewport\n    itemSize=\"itemHeight()\"\n    class=\"scrollable-list\"\n    style=\"width: 100%;\">\n    <ng-container *cdkVirtualFor=\"let item of dataSource(); let even = even;\">\n      @if(routerMode())\n      {\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>\n      }\n      @else \n      {\n      <div\n      (click)=\"onSelected(item.id)\"     \n      (keydown)=\"onSelected(item.id)\"\n      tabindex=\"0\"\n      style=\"width: 100%; margin-right: 5px; margin-bottom: 2px;\"\n      role=\"button\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>    \n      </div>   \n      }\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.scrollable-container{padding:0;display:flex;justify-content:center}.scrollable-list{height:540px;padding:5px;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatListModule }, { kind: "component", type: i2$1.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$3.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$3.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$3.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListScrollViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-list-scroll-view', imports: [MatListModule,
                         NgTemplateOutlet,
                         ScrollingModule], template: "<mat-nav-list class=\"scrollable-container\">\n  <cdk-virtual-scroll-viewport\n    itemSize=\"itemHeight()\"\n    class=\"scrollable-list\"\n    style=\"width: 100%;\">\n    <ng-container *cdkVirtualFor=\"let item of dataSource(); let even = even;\">\n      @if(routerMode())\n      {\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>\n      }\n      @else \n      {\n      <div\n      (click)=\"onSelected(item.id)\"     \n      (keydown)=\"onSelected(item.id)\"\n      tabindex=\"0\"\n      style=\"width: 100%; margin-right: 5px; margin-bottom: 2px;\"\n      role=\"button\">\n      <ng-container\n        *ngTemplateOutlet=\"listItemTemplate(); context: { item: item, even: even, selected: item.id === selection()}\" \n      >\n      </ng-container>    \n      </div>   \n      }\n    </ng-container>\n  </cdk-virtual-scroll-viewport>\n</mat-nav-list>\n", styles: [":host{flex-grow:1}.scrollable-container{padding:0;display:flex;justify-content:center}.scrollable-list{height:540px;padding:5px;width:100%}\n"] }]
-        }], propDecorators: { searchTerm: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchTerm", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], routerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
+        }], propDecorators: { itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], routerMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 
-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" }] : []));
-    hasFetched = signal(false, ...(ngDevMode ? [{ debugName: "hasFetched" }] : []));
-    sourceIsEmpty = computed(() => this.length() == 0 && this.hasFetched() && !this.searchTerm(), ...(ngDevMode ? [{ debugName: "sourceIsEmpty" }] : []));
-    consumerType;
-    items = new BehaviorSubject([]);
-    itemService;
-    subscription = new Subscription();
-    fetchedPages = new Set();
-    defaultQueries = [];
-    constructor(itemService, consumerType = "table", defaultQueries = []) {
-        super();
-        this.itemService = itemService;
-        this.consumerType = consumerType;
-        this.defaultQueries = defaultQueries;
-    }
-    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;
+class SearchForm {
+    form;
+    searchFields;
+    constructor(searchFields, fb) {
+        this.searchFields = searchFields;
+        const filter_group = fb.group({});
+        for (const row of this.searchFields.filter.rows) {
+            for (const filter of row.filters) {
+                if (filter.type == "boolean") {
+                    filter_group.addControl(filter.key, fb.control(filter.default === "true"));
+                }
+                else if (filter.type == "selection") {
+                    filter_group.addControl(filter.key, fb.control(filter.default || ""));
+                }
+            }
         }
-        this.fetchedPages.add(idx);
-        const queries = new Map([]);
-        this.defaultQueries.forEach(q => queries.set(q.key, q.value));
-        this.fetch(new ItemQuery({ page: idx + 1,
-            page_size: this.pageSize(),
-            queries: queries,
-            filter: this.searchTerm() }));
+        this.form = fb.group({
+            sortAscending: fb.control(true),
+            sortField: fb.control(''),
+            search: fb.control(''),
+            pageSize: fb.control(this.searchFields.pageSize),
+            filters: filter_group
+        });
     }
-    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));
+    get filterControls() {
+        return this.form.controls['filters'].controls;
     }
-    onResponse(response) {
-        this.length.set(response.count);
-        this.hasFetched.set(true);
-        if (this.hasTableConsumer()) {
-            this.items.next(response.results);
-        }
-        else {
-            this.items.next([...this.items.value, ...response.results]);
+    resetFilters() {
+        for (const control_name of Object.keys(this.filterControls)) {
+            this.filterControls[control_name].reset("");
         }
     }
-    disconnect() {
-        this.items.complete();
-        if (this.subscription) {
-            this.subscription.unsubscribe();
+    toQuery() {
+        const value = this.form.value;
+        const query = new ItemQuery({ sort_field: value.sortField || "",
+            sort_order: value.sortAscending ? "asc" : "desc",
+            filter: value.search || "",
+            page_size: value.pageSize || 20
+        });
+        if (value.filters) {
+            for (const control_name of Object.keys(value.filters)) {
+                let control_value = value.filters[control_name];
+                const filter = getFilter(this.searchFields.filter, control_name);
+                if (!filter) {
+                    continue;
+                }
+                const valid_default = filter.default != null && filter.default != "";
+                if ((control_value === null || control_value === undefined) && valid_default) {
+                    control_value = filter.default;
+                }
+                query.queries.set(control_name, control_value);
+            }
         }
+        return query;
     }
 }
 
-class ListHeaderComponent {
-    itemType = input.required(...(ngDevMode ? [{ debugName: "itemType" }] : []));
-    canCreate = input.required(...(ngDevMode ? [{ debugName: "canCreate" }] : []));
-    showControls = input.required(...(ngDevMode ? [{ debugName: "showControls" }] : []));
-    sortFields = input.required(...(ngDevMode ? [{ debugName: "sortFields" }] : []));
-    filters = input(null, ...(ngDevMode ? [{ debugName: "filters" }] : []));
-    searchChanged = output();
-    title() {
-        return this.itemType().replace("_", " ");
-    }
-    onSearchChange(value) {
-        this.searchChanged.emit(value);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListHeaderComponent, isStandalone: true, selector: "lib-list-header", inputs: { itemType: { classPropertyName: "itemType", publicName: "itemType", isSignal: true, isRequired: true, transformFunction: null }, canCreate: { classPropertyName: "canCreate", publicName: "canCreate", isSignal: true, isRequired: true, transformFunction: null }, showControls: { classPropertyName: "showControls", publicName: "showControls", isSignal: true, isRequired: true, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: true, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchChanged: "searchChanged" }, ngImport: i0, template: "<div class=\"container\">\n\n  <div class=\"title-container\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-mini-fab aria-label=\"Add new item\" [matTooltip]=\"'Add new ' + title()\"\n        [routerLink]=\"['/' + itemType(), 'create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  <div class=\"controls\" [hidden]=\"!showControls()\">\n    <lib-search-bar style=\"width:70%\" [itemType]=\"title()\" [filters]=\"filters()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;flex-direction:column;align-items:center;justify-content:center}.title-container{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:5px;margin:0}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: SearchBarComponent, selector: "lib-search-bar", inputs: ["itemType", "sortFields", "filters"], outputs: ["searchChanged"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-list-header', imports: [TitleCasePipe,
-                        RouterModule,
-                        MatIconModule,
-                        MatButtonModule,
-                        MatTooltipModule,
-                        SearchBarComponent], template: "<div class=\"container\">\n\n  <div class=\"title-container\">\n    <h1 class=\"title\">{{ title() | titlecase }}</h1>\n\n    @if (canCreate()) {\n    <div class=\"button-container\">\n      <a mat-mini-fab aria-label=\"Add new item\" [matTooltip]=\"'Add new ' + title()\"\n        [routerLink]=\"['/' + itemType(), 'create']\">\n        <mat-icon>add</mat-icon></a>\n    </div>\n    }\n  </div>\n\n  <div class=\"controls\" [hidden]=\"!showControls()\">\n    <lib-search-bar style=\"width:70%\" [itemType]=\"title()\" [filters]=\"filters()\" [sortFields]=\"sortFields()\"\n      (searchChanged)=\"onSearchChange($event)\"></lib-search-bar>\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;flex-direction:column;align-items:center;justify-content:center}.title-container{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center}.title{text-align:center;padding:5px;margin:0}.controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;width:100%}\n"] }]
-        }], propDecorators: { itemType: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemType", required: true }] }], canCreate: [{ type: i0.Input, args: [{ isSignal: true, alias: "canCreate", required: true }] }], showControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "showControls", required: true }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", required: true }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], searchChanged: [{ type: i0.Output, args: ["searchChanged"] }] } });
-
 class ListViewComponent {
     viewType = input("table", ...(ngDevMode ? [{ debugName: "viewType" }] : []));
     itemService = input(...(ngDevMode ? [undefined, { debugName: "itemService" }] : []));
@@ -2232,22 +2272,19 @@ class ListViewComponent {
     itemHeight = input(100, ...(ngDevMode ? [{ debugName: "itemHeight" }] : []));
     itemWidth = input(300, ...(ngDevMode ? [{ debugName: "itemWidth" }] : []));
     columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : []));
-    sortFields = input([], ...(ngDevMode ? [{ debugName: "sortFields" }] : []));
     noSelfItemsMessage = input(...(ngDevMode ? [undefined, { debugName: "noSelfItemsMessage" }] : []));
     noItemsCanCreateMessage = input(...(ngDevMode ? [undefined, { debugName: "noItemsCanCreateMessage" }] : []));
     noItemsMessage = input(...(ngDevMode ? [undefined, { debugName: "noItemsMessage" }] : []));
-    defaultQueries = input([], ...(ngDevMode ? [{ debugName: "defaultQueries" }] : []));
-    filters = input(null, ...(ngDevMode ? [{ debugName: "filters" }] : []));
+    searchFields = input.required(...(ngDevMode ? [{ debugName: "searchFields" }] : []));
     embeddedMode = input(false, ...(ngDevMode ? [{ debugName: "embeddedMode" }] : []));
     selectedViewType = signal("table", ...(ngDevMode ? [{ debugName: "selectedViewType" }] : []));
     selected = output();
-    pageSize = 20;
-    pageSizeOptions = [20, 50, 100];
     route = inject(ActivatedRoute);
     dataSource = undefined;
     sort = viewChild(MatSort, ...(ngDevMode ? [{ debugName: "sort" }] : []));
     columnNames = computed(() => this.columns().map(c => c.name), ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
-    searchTerm = "";
+    fb = inject(FormBuilder);
+    searchForm = signal(new SearchForm(new SearchFields(), this.fb), ...(ngDevMode ? [{ debugName: "searchForm" }] : []));
     get resolvedItemWidth() {
         if (this.itemDetailTemplate() && this.dataSource !== undefined && !this.dataSource.sourceIsEmpty()) {
             return (this.itemWidth() + 50).toString() + "px";
@@ -2258,6 +2295,7 @@ class ListViewComponent {
     }
     ngOnInit() {
         this.selectedViewType.set(this.viewType());
+        this.searchForm.set(new SearchForm(this.searchFields(), this.fb));
         this.resetDataSource();
     }
     ngAfterViewInit() {
@@ -2265,14 +2303,13 @@ class ListViewComponent {
         if (sort) {
             sort.sortChange.pipe(tap(() => this.reset())).subscribe();
         }
+        this.searchForm().form.valueChanges.pipe(debounceTime(150), distinctUntilChanged(), tap(() => {
+            this.reset();
+        })).subscribe();
     }
     showControls() {
         return this.dataSource != undefined && !this.dataSource.sourceIsEmpty();
     }
-    onSearchChange(value) {
-        this.searchTerm = value;
-        this.reset();
-    }
     canCreate() {
         const item_service = this.itemService();
         if (item_service) {
@@ -2288,7 +2325,7 @@ class ListViewComponent {
         return "";
     }
     title() {
-        return this.itemType().replace("_", " ");
+        return this.itemType().replaceAll("_", " ");
     }
     isTableView() {
         return this.selectedViewType() === "table";
@@ -2296,13 +2333,13 @@ class ListViewComponent {
     resetDataSource() {
         const item_service = this.itemService();
         if (item_service) {
-            this.dataSource = new ListDataSource(item_service, this.selectedViewType(), this.defaultQueries());
+            this.dataSource = new ListDataSource(item_service, this.selectedViewType(), this.searchFields().defaultQueries);
         }
         this.reset();
     }
     reset() {
         if (this.dataSource) {
-            this.dataSource.reset(this.searchTerm, this.pageSize);
+            this.dataSource.reset(this.searchForm().toQuery());
         }
     }
     viewChanged(event) {
@@ -2320,7 +2357,7 @@ class ListViewComponent {
         return (url_segments.length == 2) && (url_segments[1].path == "self");
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, sortFields: { classPropertyName: "sortFields", publicName: "sortFields", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, defaultQueries: { classPropertyName: "defaultQueries", publicName: "defaultQueries", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n    [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"], dependencies: [{ kind: "component", type: ListTableViewComponent, selector: "lib-list-table-view", inputs: ["itemType", "columns", "dataSource", "searchFilter"] }, { kind: "component", type: ListScrollViewComponent, selector: "lib-list-scroll-view", inputs: ["searchTerm", "pageSize", "itemHeight", "itemWidth", "dataSource", "listItemTemplate", "routerMode"], outputs: ["selected"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ListHeaderComponent, selector: "lib-list-header", inputs: ["itemType", "canCreate", "showControls", "sortFields", "filters"], outputs: ["searchChanged"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: ListViewComponent, isStandalone: true, selector: "lib-list-view", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, itemService: { classPropertyName: "itemService", publicName: "itemService", isSignal: true, isRequired: false, transformFunction: null }, listItemTemplate: { classPropertyName: "listItemTemplate", publicName: "listItemTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemDetailTemplate: { classPropertyName: "itemDetailTemplate", publicName: "itemDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, noSelfItemsMessage: { classPropertyName: "noSelfItemsMessage", publicName: "noSelfItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsCanCreateMessage: { classPropertyName: "noItemsCanCreateMessage", publicName: "noItemsCanCreateMessage", isSignal: true, isRequired: false, transformFunction: null }, noItemsMessage: { classPropertyName: "noItemsMessage", publicName: "noItemsMessage", isSignal: true, isRequired: false, transformFunction: null }, searchFields: { classPropertyName: "searchFields", publicName: "searchFields", isSignal: true, isRequired: true, transformFunction: null }, embeddedMode: { classPropertyName: "embeddedMode", publicName: "embeddedMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, isSignal: true }], ngImport: i0, template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" \n  [itemType]=\"itemType()\" \n  [canCreate]=\"canCreate()\" \n  [showControls]=\"showControls()\" \n  [searchForm]=\"searchForm()\"\n  [embedded]=\"embeddedMode()\"></lib-list-header>\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\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: ["itemHeight", "itemWidth", "dataSource", "listItemTemplate", "routerMode"], outputs: ["selected"] }, { kind: "component", type: BackButtonComponent, selector: "lib-back-button" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$4.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: ListHeaderComponent, selector: "lib-list-header", inputs: ["itemType", "canCreate", "showControls", "embedded", "searchForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: ListViewComponent, decorators: [{
             type: Component,
@@ -2337,8 +2374,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                         MatTooltipModule,
                         MatButtonModule,
                         ListHeaderComponent,
-                        NgTemplateOutlet], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" [itemType]=\"itemType()\" [canCreate]=\"canCreate()\" [showControls]=\"showControls()\" [filters]=\"filters()\"\n    [sortFields]=\"sortFields()\" (searchChanged)=\"onSearchChange($event)\"></lib-list-header>\n\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"] }]
-        }], propDecorators: { viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], itemService: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemService", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], itemDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDetailTemplate", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], sortFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortFields", required: false }] }], noSelfItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelfItemsMessage", required: false }] }], noItemsCanCreateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsCanCreateMessage", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], defaultQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultQueries", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }], embeddedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "embeddedMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
+                        NgTemplateOutlet], template: "@if(!embeddedMode()){\n<lib-back-button></lib-back-button>\n}\n\n<div class=\"container\">\n  <lib-list-header style=\"width:100%\" \n  [itemType]=\"itemType()\" \n  [canCreate]=\"canCreate()\" \n  [showControls]=\"showControls()\" \n  [searchForm]=\"searchForm()\"\n  [embedded]=\"embeddedMode()\"></lib-list-header>\n  <div class=\"content-container\" style=\"padding: 0px\">\n    @if(dataSource)\n    {\n    <div class=\"result-container\" [style.width]=\"resolvedItemWidth\">\n\n      @if (dataSource.loading()) {\n      <div class=\"spinner-container\">\n        <mat-spinner></mat-spinner>\n      </div>\n      }\n\n      @if(!embeddedMode()){\n      <div [hidden]=\"!dataSource.sourceIsEmpty()\">\n        @if(isSelfList())\n        {\n        @if(noSelfItemsMessage())\n        {\n        <p>{{noSelfItemsMessage()}}</p>\n        }\n        @else {\n        <p>You do not have any {{itemType()}}.</p>\n        }\n        }\n        @else{\n        @if(canCreate()){\n        @if(noItemsCanCreateMessage())\n        {\n        <p>{{noItemsCanCreateMessage()}}</p>\n        }\n        @else{\n        <p>There are currently no {{itemType()}}, click above to add one.</p>\n        }\n        }\n        @else{\n        @if(noItemsMessage())\n        {\n        <p>{{noItemsMessage()}}</p>\n        }\n        @else\n        {\n        <p>There are currently no {{itemType()}}.</p>\n        }\n        }\n        }\n      </div>\n      }\n\n      <div style=\"width: 100%\" [hidden]=\"dataSource.sourceIsEmpty()\">\n        @if(isTableView()) {\n          <div style=\"width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center;\">\n        <lib-list-table-view style=\"width:100%; max-width:800px; display: block;\" [itemType]=\"itemType()\" [columns]=\"columns()\" [dataSource]=\"dataSource\">\n        </lib-list-table-view>\n        </div>\n        }\n        @else {\n          <div class=\"scroll-container\">\n            <h3>Results: {{dataSource.length()}}</h3>\n            <lib-list-scroll-view [listItemTemplate]=\"listItemTemplate()\" [itemHeight]=\"itemHeight()\"\n              [itemWidth]=\"itemWidth().toString()\" [dataSource]=\"dataSource\"\n              (selected)=\"onSelection($event)\"></lib-list-scroll-view>\n          </div>\n        }\n      </div>\n    </div>\n    @if(itemDetailTemplate()){\n    <div class=\"detail-container\">\n      <ng-container *ngTemplateOutlet=\"itemDetailTemplate()\">\n      </ng-container>\n    </div>\n    }\n    }\n  </div>\n</div>", styles: [":host{flex-grow:1}.container{display:flex;padding-left:5px;padding-right:5px;flex-direction:column;justify-content:center;text-align:left;align-items:center}.content-container{display:flex;flex-direction:row;justify-content:left;align-items:start;width:100%}.hide-element{display:none}h3{margin-bottom:5px;margin-top:0;padding:0;text-align:center}.scroll-container{display:flex;flex-direction:column;width:100%}.detail-container{width:100%;display:flex;flex-grow:1;height:100%;min-width:400px}\n"] }]
+        }], propDecorators: { viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], itemService: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemService", required: false }] }], listItemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "listItemTemplate", required: false }] }], itemDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemDetailTemplate", required: false }] }], itemHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemHeight", required: false }] }], itemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemWidth", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], noSelfItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noSelfItemsMessage", required: false }] }], noItemsCanCreateMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsCanCreateMessage", required: false }] }], noItemsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noItemsMessage", required: false }] }], searchFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchFields", required: true }] }], embeddedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "embeddedMode", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], sort: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatSort), { isSignal: true }] }] } });
 
 class TopBarComponent {
     title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
@@ -2631,19 +2668,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 class UserComponent {
     itemService = inject(UserService);
     detailView = viewChild(UserDetailComponent, ...(ngDevMode ? [{ debugName: "detailView" }] : []));
+    searchFields = new SearchFields({
+        filter: {
+            rows: [{
+                    filters: [{
+                            display_name: "Status",
+                            key: "verified",
+                            type: "selection",
+                            tooltip: "Is this user verified?",
+                            choices: [{ display_name: "Verified", value: 'true' },
+                                { display_name: "Invited", value: 'false' }
+                            ],
+                            default: "",
+                            include_if_null: false
+                        }]
+                }]
+        },
+        sortFields: [{ display_name: "Join Date", value: "created_at" },
+            { display_name: "User Name", value: "username" },
+            { display_name: "Email", value: "email" }
+        ]
+    });
     onSelected(id) {
         if (id) {
             this.detailView()?.onSelection(id);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: UserComponent, isStandalone: true, selector: "lib-user", viewQueries: [{ propertyName: "detailView", first: true, predicate: UserDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"62\"\n  [itemWidth]=\"400\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n    <lib-user-list-detail [item]=\"item\" [even]=\"even\" [selected]=\"selected\"></lib-user-list-detail>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-user-detail [showBack]='false'></lib-user-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "filters", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item", "even", "selected"] }, { kind: "component", type: UserDetailComponent, selector: "lib-user-detail", inputs: ["showBack"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: UserComponent, isStandalone: true, selector: "lib-user", viewQueries: [{ propertyName: "detailView", first: true, predicate: UserDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [searchFields]=\"searchFields\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"62\"\n  [itemWidth]=\"400\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n    <lib-user-list-detail [item]=\"item\" [even]=\"even\" [selected]=\"selected\"></lib-user-list-detail>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-user-detail [showBack]='false'></lib-user-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: UserListDetailComponent, selector: "lib-user-list-detail", inputs: ["item", "even", "selected"] }, { kind: "component", type: UserDetailComponent, selector: "lib-user-detail", inputs: ["showBack"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: UserComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-user', imports: [ListViewComponent,
                         UserListDetailComponent,
-                        UserDetailComponent], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"62\"\n  [itemWidth]=\"400\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n    <lib-user-list-detail [item]=\"item\" [even]=\"even\" [selected]=\"selected\"></lib-user-list-detail>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-user-detail [showBack]='false'></lib-user-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"] }]
+                        UserDetailComponent], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [searchFields]=\"searchFields\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"62\"\n  [itemWidth]=\"400\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n    <lib-user-list-detail [item]=\"item\" [even]=\"even\" [selected]=\"selected\"></lib-user-list-detail>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-user-detail [showBack]='false'></lib-user-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}\n"] }]
         }], propDecorators: { detailView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => UserDetailComponent), { isSignal: true }] }] } });
 
 class GroupDetailComponent extends DetailView {
@@ -2734,17 +2792,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
 class GroupComponent {
     itemService = inject(GroupService);
     detailView = viewChild(GroupDetailComponent, ...(ngDevMode ? [{ debugName: "detailView" }] : []));
+    searchFields = new SearchFields();
     onSelected(id) {
         if (id) {
             this.detailView()?.onSelection(id);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: GroupComponent, isStandalone: true, selector: "lib-group", viewQueries: [{ propertyName: "detailView", first: true, predicate: GroupDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"42\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n      </div>\n  </div>\n\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-group-detail [showBack]='false'></lib-group-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}.container{height:40px;padding-top:5px;padding-left:5px;width:100%;display:flex;flex-direction:row;border-radius:6px;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "filters", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: GroupDetailComponent, selector: "lib-group-detail", inputs: ["showBack"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$1.MatListItemTitle, selector: "[matListItemTitle]" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.3", type: GroupComponent, isStandalone: true, selector: "lib-group", viewQueries: [{ propertyName: "detailView", first: true, predicate: GroupDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"42\"\n  [searchFields]=\"searchFields\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n      </div>\n  </div>\n\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-group-detail [showBack]='false'></lib-group-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}.container{height:40px;padding-top:5px;padding-left:5px;width:100%;display:flex;flex-direction:row;border-radius:6px;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: GroupDetailComponent, selector: "lib-group-detail", inputs: ["showBack"] }, { kind: "ngmodule", type: MatListModule }, { kind: "directive", type: i2$1.MatListItemTitle, selector: "[matListItemTitle]" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: GroupComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-group', imports: [ListViewComponent, GroupDetailComponent, MatListModule], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"42\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n      </div>\n  </div>\n\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-group-detail [showBack]='false'></lib-group-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}.container{height:40px;padding-top:5px;padding-left:5px;width:100%;display:flex;flex-direction:row;border-radius:6px;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
+            args: [{ selector: 'lib-group', imports: [ListViewComponent, GroupDetailComponent, MatListModule], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"42\"\n  [searchFields]=\"searchFields\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n      </div>\n  </div>\n\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-group-detail [showBack]='false'></lib-group-detail>\n  </ng-template>\n\n</lib-list-view>\n\n", styles: [":host{flex-grow:1}.container{height:40px;padding-top:5px;padding-left:5px;width:100%;display:flex;flex-direction:row;border-radius:6px;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
         }], propDecorators: { detailView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => GroupDetailComponent), { isSignal: true }] }] } });
 
 class AddressEditComponent {
@@ -2847,7 +2906,25 @@ class OrganizationComponent {
     columns = [{ name: 'name', title: 'Name', element_type: 'string' },
         { name: 'website', title: 'Website', element_type: 'url' },
         { name: 'is_partner', title: 'Is Partner', element_type: 'boolean' }];
-    filters = null;
+    searchFields = new SearchFields({
+        filter: {
+            rows: [{
+                    filters: [{
+                            display_name: "Country",
+                            key: "country_name",
+                            type: "selection",
+                            tooltip: "",
+                            choices: [],
+                            default: "",
+                            include_if_null: false
+                        }]
+                }]
+        },
+        sortFields: [{ display_name: "Age", value: "created_at" },
+            { display_name: "Last Updated", value: "updated_at" },
+            { display_name: "Name", value: "name" }
+        ]
+    });
     detailView = viewChild(OrganizationDetailComponent, ...(ngDevMode ? [{ debugName: "detailView" }] : []));
     onSelected(id) {
         if (id) {
@@ -2855,14 +2932,14 @@ class OrganizationComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", viewQueries: [{ propertyName: "detailView", first: true, predicate: OrganizationDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"82\"\n  [itemWidth]=\"400\"\n  [filters]=\"filters\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n          @if(item.address.region && item.address.country_name){\n          <p matListItemLine style=\"margin-bottom: 0px; margin-top: 0px\">\n            {{item.address.region}}, {{item.address.country_name}}\n          </p>\n        }\n      </div>\n  </div>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-organization-detail [showBack]='false'></lib-organization-detail>\n  </ng-template>\n\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}.container{height:80px;padding-left:5px;padding-top:5px;border-radius:12px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "sortFields", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "defaultQueries", "filters", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: OrganizationDetailComponent, selector: "lib-organization-detail", inputs: ["showBack"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: OrganizationComponent, isStandalone: true, selector: "lib-organization", viewQueries: [{ propertyName: "detailView", first: true, predicate: OrganizationDetailComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"82\"\n  [itemWidth]=\"400\"\n  [searchFields]=\"searchFields\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n          @if(item.address.region && item.address.country_name){\n          <p matListItemLine style=\"margin-bottom: 0px; margin-top: 0px\">\n            {{item.address.region}}, {{item.address.country_name}}\n          </p>\n        }\n      </div>\n  </div>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-organization-detail [showBack]='false'></lib-organization-detail>\n  </ng-template>\n\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}.container{height:80px;padding-left:5px;padding-top:5px;border-radius:12px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"], dependencies: [{ kind: "component", type: ListViewComponent, selector: "lib-list-view", inputs: ["viewType", "itemService", "listItemTemplate", "itemDetailTemplate", "itemHeight", "itemWidth", "columns", "noSelfItemsMessage", "noItemsCanCreateMessage", "noItemsMessage", "searchFields", "embeddedMode"], outputs: ["selected"] }, { kind: "component", type: OrganizationDetailComponent, selector: "lib-organization-detail", inputs: ["showBack"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: OrganizationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-organization', imports: [
                         ListViewComponent,
                         OrganizationDetailComponent
-                    ], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"82\"\n  [itemWidth]=\"400\"\n  [filters]=\"filters\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n          @if(item.address.region && item.address.country_name){\n          <p matListItemLine style=\"margin-bottom: 0px; margin-top: 0px\">\n            {{item.address.region}}, {{item.address.country_name}}\n          </p>\n        }\n      </div>\n  </div>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-organization-detail [showBack]='false'></lib-organization-detail>\n  </ng-template>\n\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}.container{height:80px;padding-left:5px;padding-top:5px;border-radius:12px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
+                    ], template: "<lib-list-view\n  [itemService]=\"itemService\"\n  [listItemTemplate]=\"listItemTemplate\"\n  [itemDetailTemplate]=\"itemDetailTemplate\"\n  [viewType]=\"'list'\"\n  [itemHeight]=\"82\"\n  [itemWidth]=\"400\"\n  [searchFields]=\"searchFields\"\n  (selected)=\"onSelected($event)\"\n  >\n  <ng-template #listItemTemplate let-item=\"item\" let-even=\"even\" let-selected=\"selected\">\n  <div mat-list-item class=\"container\" [class.even]=\"even && !selected\" [class.selected]=\"selected\">\n      <div class=\"text-container\">\n          <p matListItemTitle style=\"margin-bottom: 0px; margin-top: 0px\">{{item.name}}</p>\n          @if(item.address.region && item.address.country_name){\n          <p matListItemLine style=\"margin-bottom: 0px; margin-top: 0px\">\n            {{item.address.region}}, {{item.address.country_name}}\n          </p>\n        }\n      </div>\n  </div>\n  </ng-template>\n\n  <ng-template #itemDetailTemplate>\n    <lib-organization-detail [showBack]='false'></lib-organization-detail>\n  </ng-template>\n\n</lib-list-view>\n\n\n\n", styles: [":host{flex-grow:1}.container{height:80px;padding-left:5px;padding-top:5px;border-radius:12px;width:100%;display:flex;flex-direction:row;background-color:var(--mat-sys-surface-container-lowest)}.container:hover{background-color:var(--mat-sys-surface-container-high);cursor:pointer}.even{background-color:var(--mat-sys-surface-container-low)}.selected{background-color:var(--mat-sys-primary-container);color:var(--mat-sys-on-primary-container)}\n"] }]
         }], propDecorators: { detailView: [{ type: i0.ViewChild, args: [i0.forwardRef(() => OrganizationDetailComponent), { isSignal: true }] }] } });
 
 class OrganizationForm {
@@ -2981,5 +3058,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, ApiError, AvatarComponent, BackButtonComponent, DetailHeaderComponent, DetailView, DynamicFormBuilderComponent, DynamicFormComponent, DynamicFormForm, EditView, ErrorCode, FORM_FIELD_CHOICES, FeedbackComponent, FieldType, FileRecord, FileUploadComponent, FormFieldDetailComponent, FormFieldEditComponent, FormFieldValueForm, FormService, Group, GroupComponent, GroupDetailComponent, GroupEditComponent, GroupService, ItemQuery, ItemService, ItemWithUserService, LeftNavComponent, LeftNavService, ListTableViewComponent, ListViewComponent, MemberSelectionManager, MockItemService, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, Paginated, Permission, PopulatedFormComponent, PopulatedFormForm, PortalMember, REST_SERVICE_CONFIG, ResolvedPermission, RestService, SearchBarComponent, SelectTableComponent, SelectionManager, TopBarComponent, UserComponent, UserCreateComponent, UserDetailComponent, UserEditComponent, UserService, getFieldTypeFromKey, getFileFieldIds };
+export { Address, AddressDetailComponent, AddressEditComponent, AddressForm, ApiError, AvatarComponent, BackButtonComponent, DetailHeaderComponent, DetailView, DynamicFormBuilderComponent, DynamicFormComponent, DynamicFormForm, EditView, ErrorCode, FORM_FIELD_CHOICES, FeedbackComponent, FieldType, FileRecord, FileUploadComponent, FormFieldDetailComponent, FormFieldEditComponent, FormFieldValueForm, FormService, Group, GroupComponent, GroupDetailComponent, GroupEditComponent, GroupService, ItemQuery, ItemService, ItemWithUserService, LeftNavComponent, LeftNavService, ListTableViewComponent, ListViewComponent, MemberSelectionManager, MockItemService, Organization, OrganizationComponent, OrganizationDetailComponent, OrganizationEditComponent, OrganizationService, Paginated, Permission, PopulatedFormComponent, PopulatedFormForm, PortalMember, REST_SERVICE_CONFIG, ResolvedPermission, RestService, SearchBarComponent, SearchFields, SelectTableComponent, SelectionManager, TopBarComponent, UserComponent, UserCreateComponent, UserCreateForm, UserDetailComponent, UserEditComponent, UserService, getFieldTypeFromKey, getFileFieldIds, getFilter };
 //# sourceMappingURL=ichec-angular-core.mjs.map