@fhss-web-team/frontend-utils 1.7.3 → 1.7.5

package/fesm2022/fhss-web-team-frontend-utils.mjs

@@ -1,27 +1,24 @@
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, inject, Injector, signal, afterNextRender, effect, computed, Injectable, input, untracked, ViewChild, model, linkedSignal } from '@angular/core';
+import { Component, InjectionToken, inject, Injector, signal, afterNextRender, effect, computed, Injectable, input, model, linkedSignal, untracked } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, RouterModule, RedirectCommand } from '@angular/router';
 import { KEYCLOAK_EVENT_SIGNAL, KeycloakEventType, typeEventArgs } from 'keycloak-angular';
 import Keycloak from 'keycloak-js';
+import { isTRPCClientError } from '@trpc/client';
 import * as i1$1 from '@angular/material/table';
 import { MatTableModule } from '@angular/material/table';
+import * as i2 from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i3 from '@angular/material/paginator';
-import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
-import * as i2 from '@angular/material/sort';
-import { MatSortModule, MatSort } from '@angular/material/sort';
-import { DatePipe } from '@angular/common';
-import * as i4 from '@angular/forms';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import * as i5 from '@angular/material/input';
-import { MatInputModule, MatFormField } from '@angular/material/input';
-import * as i6 from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import { isTRPCClientError } from '@trpc/client';
-import * as i2$1 from '@angular/material/progress-spinner';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i7 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
 import * as i8 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i9 from '@angular/material/core';
@@ -263,290 +260,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ selector: 'byu-header', imports: [RouterModule], template: "<header>\n  <div class=\"top\" >\n    <img class=\"logo\" src=\"/BYU_monogram_white@2x.png\" alt=\"BYU\">\n    <div class=\"titles\"> \n      <div class=\"breadcrumbs\">\n        @for (breadcrumb of config()?.breadcrumbs; track breadcrumb.text){\n          <a [href]=\"breadcrumb.path\" >{{ breadcrumb.text }}</a>\n        }\n      </div>\n        <a [routerLink]=\"config()?.title?.path\" class=\"title\">{{ config()?.title?.text }}</a>\n        <a [routerLink]=\"config()?.subtitle?.path\" class=\"subtitle\">{{ config()?.subtitle?.text }}</a>\n    </div>\n    <div class=\"signin\">\n      <p>{{ this.auth.tokenParsed()?.['given_name'] ?? '' }}</p>\n      <svg class=\"signin-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\">\n        <path fill=\"currentcolor\" d=\"M50 95c-26 0-34-18-34-18 3-12 8-18 17-18 5 5 10 7 17 7s12-2 17-7c9 0 14 6 17 18 0 0-7 18-34 18z\"></path>\n        <circle cx=\"50\" cy=\"50\" r=\"45\" fill=\"none\" stroke=\"currentcolor\" stroke-width=\"10\"></circle>\n        <circle fill=\"currentcolor\" cx=\"50\" cy=\"40\" r=\"20\"></circle>\n      </svg>\n      @if (auth.authenticated()) {\n        <a class=\"signin-link\" (click)=\"auth.logout()\">Sign Out</a>\n      } @else {\n        <a class=\"signin-link\" (click)=\"auth.login()\">Sign In</a>\n      }\n    </div>\n  </div>\n  <div class=\"bottom\">\n    <nav>\n      @for (menuItem of config()?.menu; track menuItem.text){\n        @if (isHeaderLink(menuItem)) {\n          <li class = \"nav-item\">\n            <a class=\"nav-item-content\" [routerLink]=\"menuItem.path\">{{ menuItem.text }}</a>\n          </li>\n        } @else {\n          <li class=\"nav-item dropdown\" (click)=\"toggleDropdown(menuItem.text)\">\n            <div class=\"nav-item-content\" >{{ menuItem.text }}</div>\n            @if (openDropdownText === menuItem.text) {\n              <ul class = \"dropdown-item-menu\"> \n              @for(dropItem of menuItem.items; track dropItem.text){\n                <li class = \"dropdown-item\">\n                  <a class=\"dropdown-item-content\" [routerLink]=\"dropItem.path\">{{ dropItem.text }}</a>\n                </li>\n              }\n              </ul>\n            }\n          </li>\n        }\n      }\n    </nav>\n  </div>\n</header>\n", styles: ["header{font-family:HCo Ringside Narrow SSm,Open Sans,Helvetica,Arial,sans-serif;color:#fff}header .top{background-color:#002e5d;display:flex;align-items:center;padding:13px 16px;gap:16px}header .top .logo{width:100px}header .top .titles{display:flex;flex-direction:column;gap:8px;padding-left:30px;border-left:1px solid rgba(255,255,255,.25)}header .top .titles .breadcrumbs{display:flex;flex-direction:row}header .top .titles .breadcrumbs a{color:#a6abb1;text-decoration:none;font-size:16px}header .top .titles .breadcrumbs a:not(:first-child){padding-left:10px}header .top .titles .breadcrumbs a:not(:last-child){padding-right:10px;border-right:1px solid rgba(255,255,255,.25)}header .top .titles .breadcrumbs a:hover{color:#fff}header .top .titles .title{color:inherit;font-size:24px;font-weight:500;text-decoration:none}header .top .titles .subtitle{color:inherit;font-size:16px;font-weight:500;text-decoration:none}header .top .signin{display:flex;align-items:center;gap:10px;font-size:16px;margin-left:auto}header .top .signin .signin-icon{display:flex;margin-left:auto;margin-right:0;align-items:center;height:20px;width:20px}header .top .signin .signin-link{color:#fff;text-decoration:none;cursor:pointer}header .bottom{box-shadow:0 3px 10px #ccc5c580}header .bottom nav{display:flex;flex-direction:row;padding-left:124px}header .bottom nav .nav-item{display:block;list-style:none;transition:all .25s;text-decoration:none}header .bottom nav .nav-item:hover{box-shadow:inset 0 -5px #002e5d;background-color:#f1f1f1}header .bottom nav .nav-item .nav-item-content{margin:5px;display:inline-block;padding:11px 22px;text-decoration:none;color:#002e5d}header .bottom nav .nav-item.dropdown{position:relative}header .bottom nav .nav-item.dropdown .dropdown-item-menu{position:absolute;background:#fff;z-index:1000;top:100%;width:min-content;margin:-5px;padding:0;box-shadow:0 3px 3px #ccc5c5bf}header .bottom nav .nav-item.dropdown .dropdown-item-menu .dropdown-item:hover{background-color:#f1f1f1}header .bottom nav .nav-item.dropdown .dropdown-item-menu .dropdown-item .dropdown-item-content{margin:10px;display:inline-block;text-decoration:none;text-wrap:nowrap;color:#002e5d;padding:11px 22px}\n"] }]
         }] });
 
-const debounced = (inputSignal, wait = 400) => {
-    const debouncedSignal = signal(inputSignal());
-    const setSignal = debounce((value) => debouncedSignal.set(value), wait);
-    effect(() => {
-        setSignal(inputSignal());
-    });
-    return debouncedSignal;
-};
-const debounce = (callback, wait) => {
-    let timeoutId;
-    return (...args) => {
-        window.clearTimeout(timeoutId);
-        timeoutId = window.setTimeout(() => {
-            callback(...args);
-        }, wait);
-    };
-};
-
-/**
- * Creates a reactive fetch signal.
- *
- * The request function can include Signals for properties. These are unwrapped in the refresh function.
- */
-function createFetchSignal(request, method, transform, options) {
-    // Use a computed signal so that any changes to Signals in the request object trigger updates.
-    const currentRequest = computed(request);
-    const value = signal(options?.defaultValue, { equal: options?.equal });
-    const errorResponse = signal(undefined);
-    const isLoading = signal(false);
-    const statusCode = signal(undefined);
-    const headers = signal(undefined);
-    const status = signal('idle');
-    const error = signal(undefined);
-    const injector = inject(Injector);
-    let effectRef = undefined;
-    if (options?.autoRefresh) {
-        effectRef = effect((onCleanup) => {
-            // pass abort signal to refresh on cleanup of effect
-            const controller = new AbortController();
-            onCleanup(() => controller.abort());
-            // call refresh with this abort controller
-            refresh(controller.signal, true);
-        }, { injector: options?.injector || injector });
-    }
-    const refresh = async (abortSignal, keepLoadingThroughAbort) => {
-        // if the fetchSignal has been destroyed, do nothing
-        if (untracked(status) === 'destroyed')
-            return;
-        // Reset signals for a fresh request.
-        isLoading.set(true);
-        errorResponse.set(undefined);
-        statusCode.set(undefined);
-        headers.set(undefined);
-        status.set('loading');
-        error.set(undefined);
-        // Unwrap the current request.
-        const req = currentRequest();
-        const url = req.url;
-        const params = req.params;
-        const requestHeaders = req.headers;
-        const body = req.body;
-        // Build URL with query parameters.
-        let uri = url;
-        if (params) {
-            const searchParams = new URLSearchParams();
-            for (const key in params) {
-                if (params[key] !== undefined)
-                    searchParams.append(key, String(params[key]));
-            }
-            uri += (uri.includes('?') ? '&' : '?') + searchParams.toString();
-        }
-        // Filter out undefined header values
-        const filteredHeaders = requestHeaders
-            ? Object.fromEntries(Object.entries(requestHeaders).filter(([, value]) => value !== undefined))
-            : undefined;
-        try {
-            // send the request
-            const response = await fetch(uri, {
-                method,
-                headers: filteredHeaders,
-                // Only include a body if one is provided.
-                body: body,
-                signal: abortSignal,
-            });
-            // set the status code
-            statusCode.set(response.status);
-            // Extract response headers.
-            const headersObj = {};
-            response.headers.forEach((val, key) => {
-                headersObj[key] = val;
-            });
-            headers.set(headersObj);
-            // if the response is ok, transform the body
-            if (response.ok) {
-                value.set(await transform(response));
-                status.set('resolved');
-            }
-            else {
-                // try to parse the error as json
-                try {
-                    errorResponse.set(await response.json());
-                    value.set(undefined);
-                    status.set('resolved');
-                }
-                catch {
-                    throw new Error('Unable to parse error response.');
-                }
-            }
-        }
-        catch (err) {
-            if (err instanceof Error) {
-                // if the fetch request was aborted
-                // we check if we would like to continue loading (the next request)
-                // if so then we just leave this refresh in an undefined state
-                // else we error as usual
-                if (err.name === 'AbortError' && keepLoadingThroughAbort) {
-                    return;
-                }
-                error.set(err);
-            }
-            else {
-                // Fallback for non-Error values
-                error.set(new Error(String(err)));
-            }
-            value.set(undefined);
-            status.set('error');
-        }
-        isLoading.set(false);
-    };
-    const destroy = () => {
-        // if the fetchSignal has been destroyed, do nothing
-        if (status() === 'destroyed')
-            return;
-        if (effectRef) {
-            effectRef.destroy();
-        }
-        status.set('destroyed');
-        value.set(undefined);
-        errorResponse.set(undefined);
-        isLoading.set(false);
-        statusCode.set(undefined);
-        headers.set(undefined);
-        error.set(undefined);
-    };
-    return {
-        value,
-        errorResponse,
-        isLoading,
-        statusCode,
-        headers,
-        status,
-        error,
-        refresh,
-        destroy
-    };
-}
-//
-// Helpers for attaching response transforms.
-//
-const createHelper = (method, transform) => (request, options) => createFetchSignal(request, method, transform, options);
-// Transforms
-const jsonTransformer = (response) => response.json();
-const textTransformer = (response) => response.text();
-const blobTransformer = (response) => response.blob();
-const arrayBufferTransformer = (response) => response.arrayBuffer();
-//
-// Build the defaults - GET chain
-//
-const fetchSignal = createHelper('GET', jsonTransformer);
-fetchSignal.json = createHelper('GET', jsonTransformer);
-fetchSignal.text = createHelper('GET', textTransformer);
-fetchSignal.blob = createHelper('GET', blobTransformer);
-fetchSignal.arrayBuffer = createHelper('GET', arrayBufferTransformer);
-//
-// Build the GET chain
-//
-fetchSignal.get = createHelper('GET', jsonTransformer);
-fetchSignal.get.json = createHelper('GET', jsonTransformer);
-fetchSignal.get.text = createHelper('GET', textTransformer);
-fetchSignal.get.blob = createHelper('GET', blobTransformer);
-fetchSignal.get.arrayBuffer = createHelper('GET', arrayBufferTransformer);
-//
-// Build the POST chain.
-//
-fetchSignal.post = createHelper('POST', jsonTransformer);
-fetchSignal.post.json = createHelper('POST', jsonTransformer);
-fetchSignal.post.text = createHelper('POST', textTransformer);
-fetchSignal.post.blob = createHelper('POST', blobTransformer);
-fetchSignal.post.arrayBuffer = createHelper('POST', arrayBufferTransformer);
-//
-// Build the PUT chain.
-//
-fetchSignal.put = createHelper('PUT', jsonTransformer);
-fetchSignal.put.json = createHelper('PUT', jsonTransformer);
-fetchSignal.put.text = createHelper('PUT', textTransformer);
-fetchSignal.put.blob = createHelper('PUT', blobTransformer);
-fetchSignal.put.arrayBuffer = createHelper('PUT', arrayBufferTransformer);
-//
-// Build the PATCH chain.
-//
-fetchSignal.patch = createHelper('PATCH', jsonTransformer);
-fetchSignal.patch.json = createHelper('PATCH', jsonTransformer);
-fetchSignal.patch.text = createHelper('PATCH', textTransformer);
-fetchSignal.patch.blob = createHelper('PATCH', blobTransformer);
-fetchSignal.patch.arrayBuffer = createHelper('PATCH', arrayBufferTransformer);
-//
-// Build the DELETE chain
-//
-fetchSignal.delete = createHelper('DELETE', jsonTransformer);
-fetchSignal.delete.json = createHelper('DELETE', jsonTransformer);
-fetchSignal.delete.text = createHelper('DELETE', textTransformer);
-fetchSignal.delete.blob = createHelper('DELETE', blobTransformer);
-fetchSignal.delete.arrayBuffer = createHelper('DELETE', arrayBufferTransformer);
-
-class UserManagementService {
-    auth = inject(AuthService);
-    getUsers(search, accountTypes, sortBy, sortDirection, pageCount, pageOffset, createdAfter, createdBefore) {
-        return fetchSignal(() => ({
-            url: '/api/user-management',
-            params: {
-                search: search(),
-                account_types: accountTypes().join(','),
-                sort_by: sortBy(),
-                sort_direction: sortDirection(),
-                page_count: pageCount(),
-                page_offset: pageOffset(),
-                created_after: createdAfter && createdAfter().toISOString(),
-                created_before: createdBefore && createdBefore().toISOString(),
-            },
-            headers: {
-                Authorization: this.auth.bearerToken()
-            }
-        }), { autoRefresh: true });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserManagementService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserManagementService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-
-class UserManagementComponent {
-    api = inject(UserManagementService);
-    displayedColumns = ['netId', 'preferredFirstName', 'preferredLastName', 'roles', 'accountType', 'created'];
-    accountTypeOptions = ['NonBYU', 'Student', 'Employee'];
-    paginator;
-    sort;
-    search = signal('');
-    accountTypes = signal(['NonBYU', 'Student', 'Employee']);
-    sortBy = signal('netId');
-    sortDirection = signal('asc');
-    pageCount = signal(5);
-    pageOffset = signal(0);
-    getUsers = this.api.getUsers(debounced(this.search), this.accountTypes, this.sortBy, this.sortDirection, this.pageCount, this.pageOffset);
-    ngAfterViewInit() {
-        // write the observables from the sort and the paging to the signals
-        this.sort.sortChange.subscribe(({ active, direction }) => {
-            this.sortBy.set(active);
-            this.sortDirection.set(direction);
-            this.pageOffset.set(0);
-            this.paginator.pageIndex = 0;
-        });
-        this.paginator.page.subscribe(({ pageIndex, pageSize }) => {
-            this.pageOffset.set(pageIndex * pageSize);
-            this.pageCount.set(pageSize);
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: UserManagementComponent, isStandalone: true, selector: "app-user-management", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  <mat-label>Search for User</mat-label>\n  <input matInput [(ngModel)]=\"search\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>Account Type</mat-label>\n  <mat-select multiple [(ngModel)]=\"accountTypes\">\n    @for (accountType of accountTypeOptions; track accountType) {\n      <mat-option [value]=\"accountType\">{{accountType}}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n\n<table mat-table [dataSource]=\"getUsers.value()?.data ?? []\" matSort matSortActive=\"netId\" matSortDisableClear matSortDirection=\"asc\">\n  <!-- NetID Column -->\n  <ng-container matColumnDef=\"netId\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>NetID</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.netId}}</td>\n  </ng-container>\n\n  <!-- First Name Column -->\n  <ng-container matColumnDef=\"preferredFirstName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredFirstName}}</td>\n  </ng-container>\n\n  <!-- Last Name Column -->\n  <ng-container matColumnDef=\"preferredLastName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredLastName}}</td>\n  </ng-container>\n\n  <!-- Roles Column -->\n  <ng-container matColumnDef=\"roles\">\n    <th mat-header-cell *matHeaderCellDef>Roles</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.roles.join(', ')}}</td>\n  </ng-container>\n\n  <!-- Account Type Column -->\n  <ng-container matColumnDef=\"accountType\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Account Type</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.accountType}}</td>\n  </ng-container>\n\n  <!-- Created Column -->\n  <ng-container matColumnDef=\"created\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>\n      Created\n    </th>\n    <td mat-cell *matCellDef=\"let user\">{{user.created | date}}</td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<mat-paginator [length]=\"getUsers.value()?.totalCount\" [pageSize]=\"pageCount()\" [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons></mat-paginator>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: "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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: UserManagementComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-user-management', imports: [MatTableModule, MatSortModule, MatPaginatorModule, DatePipe, FormsModule, MatInputModule, MatSelectModule], template: "<mat-form-field>\n  <mat-label>Search for User</mat-label>\n  <input matInput [(ngModel)]=\"search\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>Account Type</mat-label>\n  <mat-select multiple [(ngModel)]=\"accountTypes\">\n    @for (accountType of accountTypeOptions; track accountType) {\n      <mat-option [value]=\"accountType\">{{accountType}}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n\n<table mat-table [dataSource]=\"getUsers.value()?.data ?? []\" matSort matSortActive=\"netId\" matSortDisableClear matSortDirection=\"asc\">\n  <!-- NetID Column -->\n  <ng-container matColumnDef=\"netId\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>NetID</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.netId}}</td>\n  </ng-container>\n\n  <!-- First Name Column -->\n  <ng-container matColumnDef=\"preferredFirstName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredFirstName}}</td>\n  </ng-container>\n\n  <!-- Last Name Column -->\n  <ng-container matColumnDef=\"preferredLastName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredLastName}}</td>\n  </ng-container>\n\n  <!-- Roles Column -->\n  <ng-container matColumnDef=\"roles\">\n    <th mat-header-cell *matHeaderCellDef>Roles</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.roles.join(', ')}}</td>\n  </ng-container>\n\n  <!-- Account Type Column -->\n  <ng-container matColumnDef=\"accountType\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Account Type</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.accountType}}</td>\n  </ng-container>\n\n  <!-- Created Column -->\n  <ng-container matColumnDef=\"created\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>\n      Created\n    </th>\n    <td mat-cell *matCellDef=\"let user\">{{user.created | date}}</td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<mat-paginator [length]=\"getUsers.value()?.totalCount\" [pageSize]=\"pageCount()\" [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons></mat-paginator>\n" }]
-        }], propDecorators: { paginator: [{
-                type: ViewChild,
-                args: [MatPaginator]
-            }], sort: [{
-                type: ViewChild,
-                args: [MatSort]
-            }] } });
-
 function trpcResource(procedure, input, options) {
     const currentInput = computed(input);
     const value = signal(options?.defaultValue, { equal: options?.equal });
@@ -606,26 +319,44 @@ function debugTrpcResource(_trpcResource) {
     };
 }
 
+const debounced = (inputSignal, wait = 400) => {
+    const debouncedSignal = signal(inputSignal());
+    const setSignal = debounce((value) => debouncedSignal.set(value), wait);
+    effect(() => {
+        setSignal(inputSignal());
+    });
+    return debouncedSignal;
+};
+const debounce = (callback, wait) => {
+    let timeoutId;
+    return (...args) => {
+        window.clearTimeout(timeoutId);
+        timeoutId = window.setTimeout(() => {
+            callback(...args);
+        }, wait);
+    };
+};
+
 const makeTableConfig = (config) => config;
 
 class FhssTableComponent {
     injector = inject(Injector);
     config = input.required();
     miscParams = input({});
-    columnKeys = computed(() => {
-        const keys = Object.keys(this.config().columns);
-        if (this.config().displayIdColumn) {
-            return keys;
-        }
-        return keys.filter((k) => k !== 'id');
-    });
+    columnKeys = [];
+    columnsToDisplay = [];
     selection;
     selectedValues = model([]);
     dataResource;
     ngOnInit() {
-        const interaction = this.config().interaction;
-        if (interaction?.type === 'select') {
-            this.selection = new SelectionModel(interaction.multi, undefined, undefined, (o1, o2) => o1.id === o2.id);
+        const cfg = this.config();
+        this.columnKeys = Object.keys(cfg.columns);
+        this.columnsToDisplay = cfg.displayIdColumn
+            ? this.columnKeys
+            : this.columnKeys.filter((k) => k !== 'id');
+        if (cfg.interaction?.type === 'select') {
+            this.columnsToDisplay.unshift('table-checkbox-column');
+            this.selection = new SelectionModel(cfg.interaction.multi, undefined, undefined, (o1, o2) => o1.id === o2.id);
         }
         this.dataResource = trpcResource(this.config().procedure, () => ({
             search: this.debouncedSearch(),
@@ -649,7 +380,7 @@ class FhssTableComponent {
     filters = signal({});
     debouncedFilters = debounced(this.filters);
     sortBy = linkedSignal(() => this.config().sorting.defaultSortBy);
-    sortDirection = linkedSignal(() => this.config().sorting.defaultSortDirection);
+    sortDirection = linkedSignal(() => this.config().sorting.defaultSortDirection ?? 'asc');
     pageIndex = linkedSignal(() => {
         this.search();
         return 0;
@@ -662,7 +393,7 @@ class FhssTableComponent {
     }
     onSortChange(sort) {
         this.sortBy.set(sort.active || this.config().sorting.defaultSortBy);
-        this.sortDirection.set(sort.direction || this.config().sorting.defaultSortDirection);
+        this.sortDirection.set(sort.direction || this.config().sorting.defaultSortDirection || 'asc');
         this.pageIndex.set(0);
     }
     onSelectionChange() {
@@ -707,7 +438,7 @@ class FhssTableComponent {
         return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FhssTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FhssTableComponent, isStandalone: true, selector: "fhss-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, miscParams: { classPropertyName: "miscParams", publicName: "miscParams", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValues: "selectedValuesChange" }, ngImport: i0, template: "@if (dataResource.isLoading()) {\n  <div class=\"shade\">\n    <mat-spinner />\n  </div>\n}\n@if (dataResource.error()) {\n  <div class=\"shade\">\n    <div class=\"error-msg\">There was an error retrieving this data</div>\n    <button mat-button (click)=\"this.dataResource.refresh()\">Retry</button>\n  </div>\n}\n\n@if (config().showSearch) {\n  <mat-form-field>\n    <input matInput [(ngModel)]=\"search\" placeholder=\"Find...\" />\n    @if (search()) {\n      <button\n        matSuffix\n        mat-icon-button\n        aria-label=\"Clear\"\n        (click)=\"search.set('')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n  </mat-form-field>\n}\n\n<table\n  mat-table\n  [dataSource]=\"dataResource.value()?.data ?? []\"\n  matSort\n  [matSortActive]=\"sortBy()\"\n  [matSortDirection]=\"sortDirection()\"\n  (matSortChange)=\"onSortChange($event)\"\n  matSortDisableClear\n>\n  @if (selection) {\n    <ng-container matColumnDef=\"select\">\n      <th mat-header-cell *matHeaderCellDef>\n        @if (selection.isMultipleSelection()) {\n          <mat-checkbox\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          />\n        }\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <mat-checkbox\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? onRowClick(row) : null\"\n          [checked]=\"selection.isSelected(row)\"\n          [aria-label]=\"checkboxLabel(row)\"\n        />\n      </td>\n    </ng-container>\n  }\n\n  @for (key of columnKeys(); track key) {\n    <ng-container [matColumnDef]=\"key\">\n      <mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        [disabled]=\"!config().columns[key].allowSort\"\n      >\n        {{ config().columns[key].header }}\n        @if (config().columns[key].individualFilter) {\n          <mat-form-field>\n            <input\n              matInput\n              [ngModel]=\"filters()[key] || ''\"\n              (ngModelChange)=\"onFilterChange(key, $event)\"\n              placeholder=\"Filter...\"\n            />\n            @if (filters()[key]) {\n              <button\n                matSuffix\n                mat-icon-button\n                aria-label=\"Clear\"\n                (click)=\"onFilterChange(key, '')\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </mat-form-field>\n        }\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\">\n        {{ row[key] }}\n      </mat-cell>\n    </ng-container>\n  }\n\n  <mat-header-row *matHeaderRowDef=\"columnKeys()\"></mat-header-row>\n  @if (config().interaction) {\n    <mat-row\n      matRipple\n      (click)=\"onRowClick(row)\"\n      *matRowDef=\"let row; columns: columnKeys()\"\n    ></mat-row>\n  } @else {\n    <mat-row *matRowDef=\"let row; columns: columnKeys()\"></mat-row>\n  }\n\n  <mat-row *matNoDataRow>\n    <mat-cell colspan=\"4\">No data found</mat-cell>\n    <button mat-button (click)=\"this.dataResource.refresh()\">Retry</button>\n  </mat-row>\n</table>\n\n@if (!config().pagination.hideControls) {\n  <mat-paginator\n    [length]=\"dataResource.value()?.totalCount\"\n    [showFirstLastButtons]=\"true\"\n    [pageSize]=\"config().pagination.pageSize\"\n    [hidePageSize]=\"true\"\n    [pageIndex]=\"pageIndex()\"\n    [disabled]=\"dataResource.isLoading()\"\n    (page)=\"onPaginationChange($event)\"\n  />\n}\n", styles: [".shade{position:absolute;inset:0 0 56px;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2$1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.14", type: FhssTableComponent, isStandalone: true, selector: "fhss-table", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, miscParams: { classPropertyName: "miscParams", publicName: "miscParams", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedValues: "selectedValuesChange" }, ngImport: i0, template: "<div class=\"table-container\">\n  @if (dataResource.isLoading() || dataResource.error()) {\n    <div class=\"shade\">\n      @if (dataResource.isLoading()) {\n        <mat-spinner />\n      }\n      @if (dataResource.error()) {\n        <div class=\"msg-bkgd\">\n          <div class=\"error-msg\">There was an error retrieving this data</div>\n          <button mat-button (click)=\"this.dataResource.refresh()\">\n            Retry\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (config().showSearch) {\n    <mat-form-field class=\"search\">\n      <input matInput [(ngModel)]=\"search\" placeholder=\"Find...\" />\n      @if (search()) {\n        <button\n          matSuffix\n          mat-icon-button\n          aria-label=\"Clear\"\n          (click)=\"search.set('')\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n  }\n\n  <div class=\"other-controls\">\n    <ng-content />\n  </div>\n\n  <table\n    mat-table\n    [dataSource]=\"dataResource.value()?.data ?? []\"\n    matSort\n    [matSortActive]=\"sortBy()\"\n    [matSortDirection]=\"sortDirection()\"\n    (matSortChange)=\"onSortChange($event)\"\n    matSortDisableClear\n  >\n    @if (selection) {\n      <ng-container matColumnDef=\"table-checkbox-column\">\n        <mat-header-cell *matHeaderCellDef>\n          @if (selection.isMultipleSelection()) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              [aria-label]=\"checkboxLabel()\"\n            />\n          }\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\">\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? onRowClick(row) : null\"\n            [checked]=\"selection.isSelected(row)\"\n            [aria-label]=\"checkboxLabel(row)\"\n          />\n        </mat-cell>\n      </ng-container>\n    }\n\n    @for (key of columnKeys; track key) {\n      <ng-container [matColumnDef]=\"key\">\n        <mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!config().columns[key].allowSort\"\n        >\n        <div class=\"header\">\n          {{ config().columns[key].header }}\n          @if (config().columns[key].individualFilter) {\n            <mat-form-field subscriptSizing=\"dynamic\">\n              <input\n                matInput\n                (click)=\"$event.stopPropagation()\"\n                [ngModel]=\"filters()[key] || ''\"\n                (ngModelChange)=\"onFilterChange(key, $event)\"\n                placeholder=\"Filter...\"\n              />\n              @if (filters()[key]) {\n                <button\n                  matSuffix\n                  mat-icon-button\n                  aria-label=\"Clear\"\n                  (click)=\"onFilterChange(key, '')\"\n                >\n                  <mat-icon>close</mat-icon>\n                </button>\n              }\n            </mat-form-field>\n          }\n          </div>\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\">\n          {{ row[key] }}\n        </mat-cell>\n      </ng-container>\n    }\n\n    <mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></mat-header-row>\n    @if (config().interaction) {\n      <mat-row\n        matRipple\n        (click)=\"onRowClick(row)\"\n        *matRowDef=\"let row; columns: columnsToDisplay\"\n      ></mat-row>\n    } @else {\n      <mat-row *matRowDef=\"let row; columns: columnsToDisplay\"></mat-row>\n    }\n\n    <tr class=\"mat-row\" *matNoDataRow>\n      <td class=\"mat-cell\">\n        <div class=\"no-data\">\n          No data found\n          <button mat-button (click)=\"this.dataResource.refresh()\">\n            Retry\n          </button>\n        </div>\n      </td>\n    </tr>\n  </table>\n\n  @if (!config().pagination.hideControls) {\n    <mat-paginator\n      [length]=\"dataResource.value()?.totalCount\"\n      [showFirstLastButtons]=\"true\"\n      [pageSize]=\"config().pagination.pageSize\"\n      [hidePageSize]=\"true\"\n      [pageIndex]=\"pageIndex()\"\n      [disabled]=\"dataResource.isLoading()\"\n      (page)=\"onPaginationChange($event)\"\n    />\n  }\n</div>\n", styles: [".table-container{position:relative}.shade{position:absolute;inset:0;background:#00000026;z-index:99;display:flex;align-items:center;justify-content:center}.msg-bkgd{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 15px 5px}.search{background:#faf9fd;width:100%}.other-controls:not(:empty){background:#faf9fd}.mat-column-table-checkbox-column{background:#686868}.no-data{width:fit-content;margin:auto}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i1$1.MatNoDataRow, selector: "ng-template[matNoDataRow]" }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i7.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i9.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i10.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: FhssTableComponent, decorators: [{
             type: Component,
@@ -721,9 +452,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
                         MatSortModule,
                         MatIconModule,
                         MatRippleModule,
-                        MatFormField,
                         MatCheckboxModule,
-                    ], template: "@if (dataResource.isLoading()) {\n  <div class=\"shade\">\n    <mat-spinner />\n  </div>\n}\n@if (dataResource.error()) {\n  <div class=\"shade\">\n    <div class=\"error-msg\">There was an error retrieving this data</div>\n    <button mat-button (click)=\"this.dataResource.refresh()\">Retry</button>\n  </div>\n}\n\n@if (config().showSearch) {\n  <mat-form-field>\n    <input matInput [(ngModel)]=\"search\" placeholder=\"Find...\" />\n    @if (search()) {\n      <button\n        matSuffix\n        mat-icon-button\n        aria-label=\"Clear\"\n        (click)=\"search.set('')\"\n      >\n        <mat-icon>close</mat-icon>\n      </button>\n    }\n  </mat-form-field>\n}\n\n<table\n  mat-table\n  [dataSource]=\"dataResource.value()?.data ?? []\"\n  matSort\n  [matSortActive]=\"sortBy()\"\n  [matSortDirection]=\"sortDirection()\"\n  (matSortChange)=\"onSortChange($event)\"\n  matSortDisableClear\n>\n  @if (selection) {\n    <ng-container matColumnDef=\"select\">\n      <th mat-header-cell *matHeaderCellDef>\n        @if (selection.isMultipleSelection()) {\n          <mat-checkbox\n            (change)=\"$event ? toggleAllRows() : null\"\n            [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n            [aria-label]=\"checkboxLabel()\"\n          />\n        }\n      </th>\n      <td mat-cell *matCellDef=\"let row\">\n        <mat-checkbox\n          (click)=\"$event.stopPropagation()\"\n          (change)=\"$event ? onRowClick(row) : null\"\n          [checked]=\"selection.isSelected(row)\"\n          [aria-label]=\"checkboxLabel(row)\"\n        />\n      </td>\n    </ng-container>\n  }\n\n  @for (key of columnKeys(); track key) {\n    <ng-container [matColumnDef]=\"key\">\n      <mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header\n        [disabled]=\"!config().columns[key].allowSort\"\n      >\n        {{ config().columns[key].header }}\n        @if (config().columns[key].individualFilter) {\n          <mat-form-field>\n            <input\n              matInput\n              [ngModel]=\"filters()[key] || ''\"\n              (ngModelChange)=\"onFilterChange(key, $event)\"\n              placeholder=\"Filter...\"\n            />\n            @if (filters()[key]) {\n              <button\n                matSuffix\n                mat-icon-button\n                aria-label=\"Clear\"\n                (click)=\"onFilterChange(key, '')\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            }\n          </mat-form-field>\n        }\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\">\n        {{ row[key] }}\n      </mat-cell>\n    </ng-container>\n  }\n\n  <mat-header-row *matHeaderRowDef=\"columnKeys()\"></mat-header-row>\n  @if (config().interaction) {\n    <mat-row\n      matRipple\n      (click)=\"onRowClick(row)\"\n      *matRowDef=\"let row; columns: columnKeys()\"\n    ></mat-row>\n  } @else {\n    <mat-row *matRowDef=\"let row; columns: columnKeys()\"></mat-row>\n  }\n\n  <mat-row *matNoDataRow>\n    <mat-cell colspan=\"4\">No data found</mat-cell>\n    <button mat-button (click)=\"this.dataResource.refresh()\">Retry</button>\n  </mat-row>\n</table>\n\n@if (!config().pagination.hideControls) {\n  <mat-paginator\n    [length]=\"dataResource.value()?.totalCount\"\n    [showFirstLastButtons]=\"true\"\n    [pageSize]=\"config().pagination.pageSize\"\n    [hidePageSize]=\"true\"\n    [pageIndex]=\"pageIndex()\"\n    [disabled]=\"dataResource.isLoading()\"\n    (page)=\"onPaginationChange($event)\"\n  />\n}\n", styles: [".shade{position:absolute;inset:0 0 56px;background:#00000026;z-index:1;display:flex;align-items:center;justify-content:center}\n"] }]
+                    ], template: "<div class=\"table-container\">\n  @if (dataResource.isLoading() || dataResource.error()) {\n    <div class=\"shade\">\n      @if (dataResource.isLoading()) {\n        <mat-spinner />\n      }\n      @if (dataResource.error()) {\n        <div class=\"msg-bkgd\">\n          <div class=\"error-msg\">There was an error retrieving this data</div>\n          <button mat-button (click)=\"this.dataResource.refresh()\">\n            Retry\n          </button>\n        </div>\n      }\n    </div>\n  }\n\n  @if (config().showSearch) {\n    <mat-form-field class=\"search\">\n      <input matInput [(ngModel)]=\"search\" placeholder=\"Find...\" />\n      @if (search()) {\n        <button\n          matSuffix\n          mat-icon-button\n          aria-label=\"Clear\"\n          (click)=\"search.set('')\"\n        >\n          <mat-icon>close</mat-icon>\n        </button>\n      }\n    </mat-form-field>\n  }\n\n  <div class=\"other-controls\">\n    <ng-content />\n  </div>\n\n  <table\n    mat-table\n    [dataSource]=\"dataResource.value()?.data ?? []\"\n    matSort\n    [matSortActive]=\"sortBy()\"\n    [matSortDirection]=\"sortDirection()\"\n    (matSortChange)=\"onSortChange($event)\"\n    matSortDisableClear\n  >\n    @if (selection) {\n      <ng-container matColumnDef=\"table-checkbox-column\">\n        <mat-header-cell *matHeaderCellDef>\n          @if (selection.isMultipleSelection()) {\n            <mat-checkbox\n              (change)=\"$event ? toggleAllRows() : null\"\n              [checked]=\"selection.hasValue() && isAllSelected()\"\n              [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n              [aria-label]=\"checkboxLabel()\"\n            />\n          }\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\">\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? onRowClick(row) : null\"\n            [checked]=\"selection.isSelected(row)\"\n            [aria-label]=\"checkboxLabel(row)\"\n          />\n        </mat-cell>\n      </ng-container>\n    }\n\n    @for (key of columnKeys; track key) {\n      <ng-container [matColumnDef]=\"key\">\n        <mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header\n          [disabled]=\"!config().columns[key].allowSort\"\n        >\n        <div class=\"header\">\n          {{ config().columns[key].header }}\n          @if (config().columns[key].individualFilter) {\n            <mat-form-field subscriptSizing=\"dynamic\">\n              <input\n                matInput\n                (click)=\"$event.stopPropagation()\"\n                [ngModel]=\"filters()[key] || ''\"\n                (ngModelChange)=\"onFilterChange(key, $event)\"\n                placeholder=\"Filter...\"\n              />\n              @if (filters()[key]) {\n                <button\n                  matSuffix\n                  mat-icon-button\n                  aria-label=\"Clear\"\n                  (click)=\"onFilterChange(key, '')\"\n                >\n                  <mat-icon>close</mat-icon>\n                </button>\n              }\n            </mat-form-field>\n          }\n          </div>\n        </mat-header-cell>\n        <mat-cell *matCellDef=\"let row\">\n          {{ row[key] }}\n        </mat-cell>\n      </ng-container>\n    }\n\n    <mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></mat-header-row>\n    @if (config().interaction) {\n      <mat-row\n        matRipple\n        (click)=\"onRowClick(row)\"\n        *matRowDef=\"let row; columns: columnsToDisplay\"\n      ></mat-row>\n    } @else {\n      <mat-row *matRowDef=\"let row; columns: columnsToDisplay\"></mat-row>\n    }\n\n    <tr class=\"mat-row\" *matNoDataRow>\n      <td class=\"mat-cell\">\n        <div class=\"no-data\">\n          No data found\n          <button mat-button (click)=\"this.dataResource.refresh()\">\n            Retry\n          </button>\n        </div>\n      </td>\n    </tr>\n  </table>\n\n  @if (!config().pagination.hideControls) {\n    <mat-paginator\n      [length]=\"dataResource.value()?.totalCount\"\n      [showFirstLastButtons]=\"true\"\n      [pageSize]=\"config().pagination.pageSize\"\n      [hidePageSize]=\"true\"\n      [pageIndex]=\"pageIndex()\"\n      [disabled]=\"dataResource.isLoading()\"\n      (page)=\"onPaginationChange($event)\"\n    />\n  }\n</div>\n", styles: [".table-container{position:relative}.shade{position:absolute;inset:0;background:#00000026;z-index:99;display:flex;align-items:center;justify-content:center}.msg-bkgd{background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15px 15px 5px}.search{background:#faf9fd;width:100%}.other-controls:not(:empty){background:#faf9fd}.mat-column-table-checkbox-column{background:#686868}.no-data{width:fit-content;margin:auto}\n"] }]
         }] });
 
 const provideFhss = (config) => ({
@@ -811,6 +541,202 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             args: [{ selector: 'fhss-not-found', imports: [MatButtonModule, ByuHeaderComponent, ByuFooterComponent], template: "<byu-header />\n\n<div class=\"container\">\n  <div class=\"not-found\">\n    <img src=\"/confused-duck.png\" alt=\"\" />\n    <h1>404 - Page not found</h1>\n    <p>The page you are looking for doesn't exist or it may have moved.</p>\n    <a mat-flat-button href=\"/\">Go back to home</a>\n  </div>\n</div>\n\n<byu-footer />\n", styles: [":host{height:100vh;display:flex;flex-direction:column}.container{flex:1;display:flex;align-items:center;justify-content:center}.container .not-found{text-align:center;padding-bottom:3em}\n"] }]
         }] });
 
+/**
+ * Creates a reactive fetch signal.
+ *
+ * The request function can include Signals for properties. These are unwrapped in the refresh function.
+ */
+function createFetchSignal(request, method, transform, options) {
+    // Use a computed signal so that any changes to Signals in the request object trigger updates.
+    const currentRequest = computed(request);
+    const value = signal(options?.defaultValue, { equal: options?.equal });
+    const errorResponse = signal(undefined);
+    const isLoading = signal(false);
+    const statusCode = signal(undefined);
+    const headers = signal(undefined);
+    const status = signal('idle');
+    const error = signal(undefined);
+    const injector = inject(Injector);
+    let effectRef = undefined;
+    if (options?.autoRefresh) {
+        effectRef = effect((onCleanup) => {
+            // pass abort signal to refresh on cleanup of effect
+            const controller = new AbortController();
+            onCleanup(() => controller.abort());
+            // call refresh with this abort controller
+            refresh(controller.signal, true);
+        }, { injector: options?.injector || injector });
+    }
+    const refresh = async (abortSignal, keepLoadingThroughAbort) => {
+        // if the fetchSignal has been destroyed, do nothing
+        if (untracked(status) === 'destroyed')
+            return;
+        // Reset signals for a fresh request.
+        isLoading.set(true);
+        errorResponse.set(undefined);
+        statusCode.set(undefined);
+        headers.set(undefined);
+        status.set('loading');
+        error.set(undefined);
+        // Unwrap the current request.
+        const req = currentRequest();
+        const url = req.url;
+        const params = req.params;
+        const requestHeaders = req.headers;
+        const body = req.body;
+        // Build URL with query parameters.
+        let uri = url;
+        if (params) {
+            const searchParams = new URLSearchParams();
+            for (const key in params) {
+                if (params[key] !== undefined)
+                    searchParams.append(key, String(params[key]));
+            }
+            uri += (uri.includes('?') ? '&' : '?') + searchParams.toString();
+        }
+        // Filter out undefined header values
+        const filteredHeaders = requestHeaders
+            ? Object.fromEntries(Object.entries(requestHeaders).filter(([, value]) => value !== undefined))
+            : undefined;
+        try {
+            // send the request
+            const response = await fetch(uri, {
+                method,
+                headers: filteredHeaders,
+                // Only include a body if one is provided.
+                body: body,
+                signal: abortSignal,
+            });
+            // set the status code
+            statusCode.set(response.status);
+            // Extract response headers.
+            const headersObj = {};
+            response.headers.forEach((val, key) => {
+                headersObj[key] = val;
+            });
+            headers.set(headersObj);
+            // if the response is ok, transform the body
+            if (response.ok) {
+                value.set(await transform(response));
+                status.set('resolved');
+            }
+            else {
+                // try to parse the error as json
+                try {
+                    errorResponse.set(await response.json());
+                    value.set(undefined);
+                    status.set('resolved');
+                }
+                catch {
+                    throw new Error('Unable to parse error response.');
+                }
+            }
+        }
+        catch (err) {
+            if (err instanceof Error) {
+                // if the fetch request was aborted
+                // we check if we would like to continue loading (the next request)
+                // if so then we just leave this refresh in an undefined state
+                // else we error as usual
+                if (err.name === 'AbortError' && keepLoadingThroughAbort) {
+                    return;
+                }
+                error.set(err);
+            }
+            else {
+                // Fallback for non-Error values
+                error.set(new Error(String(err)));
+            }
+            value.set(undefined);
+            status.set('error');
+        }
+        isLoading.set(false);
+    };
+    const destroy = () => {
+        // if the fetchSignal has been destroyed, do nothing
+        if (status() === 'destroyed')
+            return;
+        if (effectRef) {
+            effectRef.destroy();
+        }
+        status.set('destroyed');
+        value.set(undefined);
+        errorResponse.set(undefined);
+        isLoading.set(false);
+        statusCode.set(undefined);
+        headers.set(undefined);
+        error.set(undefined);
+    };
+    return {
+        value,
+        errorResponse,
+        isLoading,
+        statusCode,
+        headers,
+        status,
+        error,
+        refresh,
+        destroy
+    };
+}
+//
+// Helpers for attaching response transforms.
+//
+const createHelper = (method, transform) => (request, options) => createFetchSignal(request, method, transform, options);
+// Transforms
+const jsonTransformer = (response) => response.json();
+const textTransformer = (response) => response.text();
+const blobTransformer = (response) => response.blob();
+const arrayBufferTransformer = (response) => response.arrayBuffer();
+//
+// Build the defaults - GET chain
+//
+const fetchSignal = createHelper('GET', jsonTransformer);
+fetchSignal.json = createHelper('GET', jsonTransformer);
+fetchSignal.text = createHelper('GET', textTransformer);
+fetchSignal.blob = createHelper('GET', blobTransformer);
+fetchSignal.arrayBuffer = createHelper('GET', arrayBufferTransformer);
+//
+// Build the GET chain
+//
+fetchSignal.get = createHelper('GET', jsonTransformer);
+fetchSignal.get.json = createHelper('GET', jsonTransformer);
+fetchSignal.get.text = createHelper('GET', textTransformer);
+fetchSignal.get.blob = createHelper('GET', blobTransformer);
+fetchSignal.get.arrayBuffer = createHelper('GET', arrayBufferTransformer);
+//
+// Build the POST chain.
+//
+fetchSignal.post = createHelper('POST', jsonTransformer);
+fetchSignal.post.json = createHelper('POST', jsonTransformer);
+fetchSignal.post.text = createHelper('POST', textTransformer);
+fetchSignal.post.blob = createHelper('POST', blobTransformer);
+fetchSignal.post.arrayBuffer = createHelper('POST', arrayBufferTransformer);
+//
+// Build the PUT chain.
+//
+fetchSignal.put = createHelper('PUT', jsonTransformer);
+fetchSignal.put.json = createHelper('PUT', jsonTransformer);
+fetchSignal.put.text = createHelper('PUT', textTransformer);
+fetchSignal.put.blob = createHelper('PUT', blobTransformer);
+fetchSignal.put.arrayBuffer = createHelper('PUT', arrayBufferTransformer);
+//
+// Build the PATCH chain.
+//
+fetchSignal.patch = createHelper('PATCH', jsonTransformer);
+fetchSignal.patch.json = createHelper('PATCH', jsonTransformer);
+fetchSignal.patch.text = createHelper('PATCH', textTransformer);
+fetchSignal.patch.blob = createHelper('PATCH', blobTransformer);
+fetchSignal.patch.arrayBuffer = createHelper('PATCH', arrayBufferTransformer);
+//
+// Build the DELETE chain
+//
+fetchSignal.delete = createHelper('DELETE', jsonTransformer);
+fetchSignal.delete.json = createHelper('DELETE', jsonTransformer);
+fetchSignal.delete.text = createHelper('DELETE', textTransformer);
+fetchSignal.delete.blob = createHelper('DELETE', blobTransformer);
+fetchSignal.delete.arrayBuffer = createHelper('DELETE', arrayBufferTransformer);
+
 /**
  * Components
  */
@@ -819,5 +745,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AuthCallbackPage, AuthErrorPage, AuthService, ByuFooterComponent, ByuHeaderComponent, FHSS_CONFIG, FhssTableComponent, ForbiddenPage, NotFoundPage, UserManagementComponent, authGuard, debounced, debugTrpcResource, fetchSignal, makeTableConfig, provideFhss, roleGuardFactory, trpcResource };
+export { AuthCallbackPage, AuthErrorPage, AuthService, ByuFooterComponent, ByuHeaderComponent, FHSS_CONFIG, FhssTableComponent, ForbiddenPage, NotFoundPage, authGuard, debounced, debugTrpcResource, fetchSignal, makeTableConfig, provideFhss, roleGuardFactory, trpcResource };
 //# sourceMappingURL=fhss-web-team-frontend-utils.mjs.map