verben-authentication-ui 1.0.37 → 1.1.1

package/fesm2022/verben-authentication-ui-src-lib-components-user-request-approval.mjs

@@ -1,16 +1,69 @@
-import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, signal, computed, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
-import { SearchPropertyValueType, SortDirection, SearchOperator, SearchPropertySign, UserAccessRequestStatus, ErrorResponse } from 'verben-authentication-ui/src/lib/models';
-import * as i4 from 'verben-ng-ui';
-import { DataFilterType, VerbenDialogueModule, DataTableModule, CardModule, SvgModule, DataViewModule, CardDataViewModule, SortTableModule, VisibleColumnModule, TableFilterModule, DataExportModule, DataXportModule, VerbenaInputModule, VerbenaButtonModule, VerbenaBadgeModule, DropDownModule } from 'verben-ng-ui';
-import * as i1 from 'verben-authentication-ui/src/lib/services';
-import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil, lastValueFrom } from 'rxjs';
-import * as i3 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Component, Input, input, EventEmitter, effect, Output, Injectable, inject, DestroyRef, ViewChild, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2 from 'verben-authentication-ui/src/lib/base';
+import { BaseDataPageState, BaseDataPageService, BaseDataPageFacade, SearchHandlerService } from 'verben-authentication-ui/src/lib/base';
+import * as i3 from 'verben-ng-ui';
+import { VerbenaBadgeModule, VerbenaInputModule, VerbenaButtonModule, VerbenaTextareaModule, DropDownModule, VerbenDialogueModule, DataTableModule, SvgModule, DataViewModule, DataColumnsModule, DataFilterModule, DataSortModule, DataXportModule, CardDataViewModule } from 'verben-ng-ui';
+import { UserAccessRequestStatus, ErrorResponse, ObjectState, Status, OAuthType } from 'verben-authentication-ui/src/lib/models';
 import * as i1$1 from '@angular/forms';
-import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import * as i1$2 from 'verben-authentication-ui/src/lib/services';
+
+class UserAccessRequestStatusBadgeComponent {
+    status = UserAccessRequestStatus.Pending;
+    badgeConfig() {
+        switch (this.status) {
+            case UserAccessRequestStatus.Approved:
+                return { bgColor: 'var(--vbn-color-success-bg)', textColor: 'var(--vbn-color-success)', label: 'Approved' };
+            case UserAccessRequestStatus.Declined:
+                return { bgColor: 'var(--vbn-color-error-bg)', textColor: 'var(--vbn-color-error)', label: 'Rejected' };
+            default:
+                return { bgColor: 'var(--vbn-color-text-muted)', textColor: 'var(--vbn-color-border)', label: 'Pending' };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserAccessRequestStatusBadgeComponent, isStandalone: true, selector: "lib-user-access-request-status-badge", inputs: { status: "status" }, ngImport: i0, template: "<verbena-badge\n  borderRadius=\"9px\"\n  [bgColor]=\"badgeConfig().bgColor\"\n  [textColor]=\"badgeConfig().textColor\"\n  fontSize=\"12px\"\n  [text]=\"badgeConfig().label\"\n  [pd]=\"'2px 6px'\"\n></verbena-badge>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: VerbenaBadgeModule }, { kind: "component", type: i3.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestStatusBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-access-request-status-badge', standalone: true, imports: [CommonModule, VerbenaBadgeModule], template: "<verbena-badge\n  borderRadius=\"9px\"\n  [bgColor]=\"badgeConfig().bgColor\"\n  [textColor]=\"badgeConfig().textColor\"\n  fontSize=\"12px\"\n  [text]=\"badgeConfig().label\"\n  [pd]=\"'2px 6px'\"\n></verbena-badge>\n" }]
+        }], propDecorators: { status: [{
+                type: Input
+            }] } });
 
-const columns = [
+/**
+ * Presentational card for a single access request in the card view.
+ */
+class UserRequestApprovalCardComponent {
+    request;
+    selected = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestApprovalCardComponent, isStandalone: true, selector: "lib-user-request-approval-card", inputs: { request: "request", selected: "selected" }, ngImport: i0, template: "<div class=\"flex cursor-pointer w-full bg-secondary rounded-xl\">\n  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n    [ngClass]=\"selected ? 'bg-primary' : 'bg-secondary-200'\"></div>\n  <div class=\"flex-1 flex items-end gap-y-2 gap-x-4 p-4\">\n    <div class=\"flex-1 space-y-2\">\n      <span class=\"font-semibold text-[var(--vbn-color-text)] flex-1 truncate\">\n        {{ request.FirstName }} {{ request.LastName }}\n      </span>\n      <p class=\"flex items-center my-1 gap-1\">\n        <label class=\"text-[10px] font-light\">Medium:</label>\n        <span class=\"text-sm truncate\">{{ request.SignupType }}</span>\n      </p>\n    </div>\n    <div class=\"grid gap-y-1\">\n      <lib-user-access-request-status-badge [status]=\"request.RequestStatus\"></lib-user-access-request-status-badge>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: ["status"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-request-approval-card', standalone: true, imports: [CommonModule, UserAccessRequestStatusBadgeComponent], template: "<div class=\"flex cursor-pointer w-full bg-secondary rounded-xl\">\n  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n    [ngClass]=\"selected ? 'bg-primary' : 'bg-secondary-200'\"></div>\n  <div class=\"flex-1 flex items-end gap-y-2 gap-x-4 p-4\">\n    <div class=\"flex-1 space-y-2\">\n      <span class=\"font-semibold text-[var(--vbn-color-text)] flex-1 truncate\">\n        {{ request.FirstName }} {{ request.LastName }}\n      </span>\n      <p class=\"flex items-center my-1 gap-1\">\n        <label class=\"text-[10px] font-light\">Medium:</label>\n        <span class=\"text-sm truncate\">{{ request.SignupType }}</span>\n      </p>\n    </div>\n    <div class=\"grid gap-y-1\">\n      <lib-user-access-request-status-badge [status]=\"request.RequestStatus\"></lib-user-access-request-status-badge>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { request: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }] } });
+
+const fb = new FormBuilder();
+/**
+ * Column definitions for the access-request table.
+ * Single source of truth for table, filter, sort, and export.
+ */
+const USER_ACCESS_REQUEST_COLUMNS = [
+    {
+        id: 'select',
+        header: '',
+        canExport: false,
+    },
     {
         id: 'createdAt',
         header: 'CREATED',
@@ -29,1030 +82,534 @@ const columns = [
     {
         id: 'role',
         header: 'ROLE',
-        accessorFn: (row) => row.Role?.Name,
+        accessorFn: (row) => row.Role?.Name ?? '',
     },
     {
         id: 'status',
         header: 'STATUS',
         accessorKey: 'RequestStatus',
     },
-    { id: 'actions', header: 'Actions', accessorKey: 'MailAddress' },
+    {
+        id: 'actions',
+        header: 'ACTIONS',
+        canExport: false,
+    },
 ];
-
-const baseStyle = {
-    width: '100%',
-    fontFamily: '"Fraunces", serif',
-    fontSize: '125%',
-    whiteSpace: 'nowrap',
-    margin: '0',
-    border: '1px solid #D4A007',
-    borderRadius: '16px',
-    borderCollapse: 'separate',
-    borderSpacing: '0',
-    // tableLayout: 'fixed',
-    overflow: 'hidden',
-    rows: {
-        even: {
-            backgroundColor: '#FDFDFD',
-        },
-        odd: {
-            backgroundColor: '#F1F4FB',
+/**
+ * Page configuration for access-request approval.
+ * Create/import are disabled — this is an approval workflow, not CRUD create.
+ */
+const USER_ACCESS_REQUEST_CONFIG = {
+    endpoint: 'UserAccessRequest',
+    pageSize: 20,
+    columns: USER_ACCESS_REQUEST_COLUMNS,
+    cardDataMapper: (request) => ({
+        selected: false,
+        title: `${request.FirstName} ${request.LastName}`,
+        data: request,
+        body: [{ title: 'Role', value: request.Role?.Name ?? '' }],
+        children: [],
+    }),
+    searchDebounceTime: 500,
+    formGroupConfig: {
+        controls: {
+            MailAddress: fb.control(''),
+            FirstName: fb.control(''),
+            LastName: fb.control(''),
+            OtherName: fb.control(''),
+            PhoneNumber: fb.control(''),
+            RoleID: fb.control('', [Validators.required]),
         },
-        height: '68px',
-    },
-    cells: {
-        padding: '0.5rem 1rem',
-    },
-    header: {
-        // stickyTop: true,
-        // zIndex: 2,
-        backgroundColor: '#EFF2FB',
-        fontWeight: 'bold',
-        textAlign: 'left',
-        padding: '12px 16px',
-        height: '40px',
-    },
-    footer: {
-        // stickyBottom: true,
-        // zIndex: 2,
-        padding: '3px',
-    },
-    //   body: {
-    //     background: '#fff',
-    //     padding: '4px 5px',
-    //     textAlign: 'center',
-    //   },
-    // firstColumn: {
-    //   stickyLeft: true,
-    //   zIndex: 1,
-    // },
-    lastColumn: {
-    // stickyRight: true,
-    // zIndex: 1,
     },
+    enableCreate: false,
+    enableImport: false,
+    enableExport: true,
+    enableFilter: true,
+    enableSort: true,
+    enableSearch: true,
+    enableCardView: true,
+    enableTableRowEdit: false,
 };
 
-const roles = [
-    { id: 'admin', name: 'Admin' },
-    { id: 'manager', name: 'Manager' },
-    { id: 'staff', name: 'Staff' },
-];
-// export const mockData: UserAccessRequest[] = new Array(10)
-//   .fill(1)
-//   .map((id, i) => ({
-//     FirstName: `First ${id + i}`,
-//     LastName: `Last ${id + i}`,
-//     OtherName: `Other ${id + i}`,
-//     Id: id + i,
-//     id: (id + i).toString(),
-//     MailAddress: `user${id + i}@mail.com`,
-//     PhoneNumber: `+23480000000${id + i}`,
-//     RequestStatus: randomEnum(UserAccessRequestStatus),
-//     RoleID: roles[Math.floor(Math.random() * roles.length)].id,
-//     Password: '1234567',
-//     ExpireOn: new Date(),
-//     IsSeeded: false,
-//     OTPExpireOn: new Date(),
-//     Tenants: [],
-//     SignupType: OAuthType.InApp,
-//     CreatedAt: new Date(),
-//     UpdatedAt: new Date(),
-//     DataState: ObjectState.New,
-//     TenantId: `Tenant${id + i}`,
-//     Code: '',
-//     ServiceName: '',
-//   }));
-function randomEnum(anEnum) {
-    const enumValues = Object.values(anEnum);
-    const randomIndex = Math.floor(Math.random() * enumValues.length);
-    return enumValues[randomIndex];
-}
-function convertDataFilterTypeToSearchPropertyValueType(type) {
-    switch (type) {
-        case DataFilterType.String:
-            return SearchPropertyValueType.String;
-        case DataFilterType.Integer:
-            return SearchPropertyValueType.Int;
-        case DataFilterType.Decimal:
-            return SearchPropertyValueType.Decimal;
-        case DataFilterType.Credit:
-            return SearchPropertyValueType.Float;
-        case DataFilterType.Date:
-            return SearchPropertyValueType.Date;
-        case DataFilterType.Bool:
-            return SearchPropertyValueType.Bool;
-        case DataFilterType.Number:
-            return SearchPropertyValueType.Int;
-    }
-}
-
-class UserAccessRequestService {
-    httpService;
-    constructor(httpService) {
-        this.httpService = httpService;
-    }
-    /**
-     * Get user access requests with pagination and sorting
-     * @param skip Number of records to skip
-     * @param limit Number of records to take
-     * @param sortParam Sort parameter
-     * @param sortOrder Sort order ('asc' or 'desc')
-     * @returns Promise containing the user access requests
-     */
-    getUserAccessRequests(skip, limit, sortParam, sortOrder) {
-        const url = `GetUserAccessRequests/${skip}/${limit}/${sortParam}/${sortOrder}`;
-        return this.httpService.get(url);
-    }
-    getRoles() {
-        const url = `GetRoles/0/0`;
-        return this.httpService.get(url);
-    }
-    getTags() {
-        const url = `GetTags/0/0`;
-        return this.httpService.get(url);
-    }
-    /**
-     * Get user access requests with additional parameter, pagination and sorting
-     * @param param Search parameter
-     * @param skip Number of records to skip
-     * @param limit Number of records to take
-     * @param sortParam Sort parameter
-     * @param sortOrder Sort order ('asc' or 'desc')
-     * @returns Promise containing the filtered user access requests
-     */
-    getUserAccessRequestWithParam(param, skip, limit, sortParam, sortOrder) {
-        const url = `GetUserAccessRequestWithParam/${param}/${skip}/${limit}/${sortParam}/${sortOrder}`;
-        return this.httpService.get(url);
-    }
-    /**
-     * Get user access requests with additional parameter, pagination and sorting
-     * @param params Filter parameters
-     * @param skip Number of records to skip
-     * @param limit Number of records to take
-     * @param sortParam Sort parameter
-     * @param sortOrder Sort order ('asc' or 'desc')
-     * @returns Promise containing the filtered user access requests
-     */
-    getUserAccessRequestByFilterParams(params, skip, limit, sortParam, sortOrder) {
-        const url = `SearchUserAccessRequest/${skip}/${limit}/${sortParam}/${sortOrder}`;
-        return this.httpService.post(url, params);
-    }
-    /**
-     * Save multiple user access requests
-     * @param requests Array of user access requests to save
-     * @returns Promise containing the save operation result
-     */
-    saveUserAccessRequests(requests) {
-        const url = `SaveUserAccessRequests`;
-        return this.httpService.post(url, requests);
-    }
-    /**
-     * Approve or reject multiple user access requests
-     * @param requests Array of user access requests to save
-     * @param isApproval True for approval, false for decline
-     * @returns Promise containing the save operation result
-     */
-    processUserAccessRequests(requests, isApproval) {
-        const url = `UserAccessRequestAction/${isApproval}`;
-        return this.httpService.post(url, requests);
-    }
+/**
+ * Form for approving/rejecting a single access request.
+ * Identity fields are read-only; the role must be chosen before approval.
+ */
+class UserRequestApprovalFormComponent {
+    fb;
+    request = input();
+    roles = input([]);
+    showDelete = input(false);
+    approve = new EventEmitter();
+    reject = new EventEmitter();
+    deleteRequest = new EventEmitter();
+    switchToTable = new EventEmitter();
+    form;
+    showDeleteDialogue = false;
+    showRejectDialogue = false;
     /**
-     * Delete multiple user access requests
-     * @param requestIds Array of request IDs to delete
-     * @returns Observable containing the delete operation result
+     * Rejection reason. Deliberately outside `form` — that group's validity gates
+     * Approve, and a required comment there would gate Approve too.
      */
-    deleteUserAccessRequests(requestIds) {
-        const url = `DeleteUserAccessRequests`;
-        return this.httpService.delete(`${url}?data=${requestIds.join(',')}`);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestService, deps: [{ token: i1.HttpWebRequestService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpWebRequestService }] });
-
-class UserAccessRequestState {
-    updating$ = new BehaviorSubject(false);
-    requests$ = new BehaviorSubject([]);
-    roles$ = new BehaviorSubject([]);
-    searchTerm$ = new BehaviorSubject('');
-    queryParams$ = new BehaviorSubject({
-        skip: 0,
-        limit: 20,
-        sortParam: 'CreatedAt',
-        sortOrder: SortDirection.Asc,
-    });
-    filterParams$ = new BehaviorSubject([]);
-    isUpdating$() {
-        return this.updating$.asObservable();
-    }
-    setUpdating(isUpdating) {
-        this.updating$.next(isUpdating);
-    }
-    getRequests$() {
-        return this.requests$.asObservable();
-    }
-    setRequests(requests) {
-        this.requests$.next(requests);
-    }
-    getFilterParams$() {
-        return this.filterParams$.asObservable();
-    }
-    setFilterParams(params) {
-        this.filterParams$.next(params);
-    }
-    getRoles$() {
-        return this.roles$.asObservable();
-    }
-    setRoles(roles) {
-        this.roles$.next(roles);
-    }
-    appendRequests(newRequests) {
-        const currentRequests = this.requests$.getValue();
-        this.requests$.next([...currentRequests, ...newRequests]);
-    }
-    getSearchTerm$() {
-        return this.searchTerm$.asObservable();
-    }
-    getSearchTermValue() {
-        return this.searchTerm$.getValue();
-    }
-    setSearchTerm(term) {
-        this.searchTerm$.next(term);
-    }
-    getQueryParams$() {
-        return this.queryParams$.asObservable();
-    }
-    getQueryParamsValue() {
-        return this.queryParams$.getValue();
-    }
-    updateQueryParams(params) {
-        this.queryParams$.next({ ...this.queryParams$.getValue(), ...params });
-    }
-    resetPagination() {
-        const currentParams = this.queryParams$.getValue();
-        this.queryParams$.next({ ...currentParams, skip: 0 });
-    }
-    addRequest(request) {
-        const currentValue = this.requests$.getValue();
-        this.requests$.next([...currentValue, request]);
-    }
-    updateRequest(updatedRequest) {
-        const requests = this.requests$.getValue();
-        const index = requests.findIndex((r) => r.Code === updatedRequest.Code);
-        if (index !== -1) {
-            requests[index] = updatedRequest;
-            this.requests$.next([...requests]);
-        }
-    }
-    removeRequest(requestId) {
-        const currentValue = this.requests$.getValue();
-        this.requests$.next(currentValue.filter((r) => r.Id !== requestId));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestState, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestState, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class UserAccessRequestFacade {
-    userAccessRequestService;
-    userAccessRequestState;
-    utilService;
-    searchSubject = new Subject();
-    destroy$ = new Subject();
-    constructor(userAccessRequestService, userAccessRequestState, utilService) {
-        this.userAccessRequestService = userAccessRequestService;
-        this.userAccessRequestState = userAccessRequestState;
-        this.utilService = utilService;
-        // Set up debounced search handling
-        this.searchSubject
-            .pipe(debounceTime(1000), distinctUntilChanged(), takeUntil(this.destroy$))
-            .subscribe((searchTerm) => {
-            this.handleSearch(searchTerm);
-        });
-        this.isUpdating$().subscribe((loading) => {
-            this.utilService.sendBI(loading);
-        });
-        this.getFilterParams$().subscribe((params) => {
-            if (params.length) {
-            }
-            else {
-                this.loadRequests();
+    rejectComment = new FormControl('', [Validators.required]);
+    constructor(fb) {
+        this.fb = fb;
+        this.form = this.fb.group(USER_ACCESS_REQUEST_CONFIG.formGroupConfig.controls);
+        effect(() => {
+            const request = this.request();
+            if (request && this.form) {
+                this.form.patchValue({
+                    MailAddress: request.MailAddress || '',
+                    FirstName: request.FirstName || '',
+                    LastName: request.LastName || '',
+                    OtherName: request.OtherName || '',
+                    PhoneNumber: request.PhoneNumber || '',
+                    RoleID: request.RoleID || '',
+                });
             }
         });
     }
-    destroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
+    isPending() {
+        return this.request()?.RequestStatus === UserAccessRequestStatus.Pending;
     }
-    isUpdating$() {
-        return this.userAccessRequestState.isUpdating$();
+    canProcess() {
+        return this.isPending() && this.form.valid;
     }
-    getRequests$() {
-        return this.userAccessRequestState.getRequests$();
+    canReject() {
+        return this.isPending();
     }
-    getFilterParams$() {
-        return this.userAccessRequestState.getFilterParams$();
-    }
-    getRoles$() {
-        return this.userAccessRequestState.getRoles$();
-    }
-    getQueryParams$() {
-        return this.userAccessRequestState.getQueryParams$();
-    }
-    getSearchTerm$() {
-        return this.userAccessRequestState.getSearchTerm$();
-    }
-    // Search handling
-    search(term) {
-        this.searchSubject.next(term);
-    }
-    async handleSearch(searchTerm) {
-        this.userAccessRequestState.setSearchTerm(searchTerm);
-        this.userAccessRequestState.resetPagination();
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            if (searchTerm.trim()) {
-                await this.loadRequestsWithParam(searchTerm);
-            }
-            else {
-                await this.loadRequests();
-            }
-        }
-        catch (error) {
-            console.error('Search failed:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
-    }
-    async filter(filterParams) {
-        this.userAccessRequestState.resetPagination();
-        this.userAccessRequestState.setFilterParams(filterParams);
-    }
-    // Load more handling
-    async loadMore() {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const currentParams = this.userAccessRequestState.getQueryParamsValue();
-            const searchTerm = this.userAccessRequestState.getSearchTermValue();
-            // Update skip value
-            const newSkip = currentParams.skip + currentParams.limit;
-            this.userAccessRequestState.updateQueryParams({ skip: newSkip });
-            // Load and append data
-            const response = searchTerm
-                ? await this.userAccessRequestService.getUserAccessRequestWithParam(searchTerm, newSkip, currentParams.limit, currentParams.sortParam || 'createdDate', currentParams.sortOrder)
-                : await this.userAccessRequestService.getUserAccessRequests(newSkip, currentParams.limit, currentParams.sortParam || 'createdDate', currentParams.sortOrder);
-            this.userAccessRequestState.appendRequests(response.Result);
-        }
-        catch (error) {
-            console.error('Load more failed:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
-    }
-    async loadRequests() {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const params = this.userAccessRequestState.getQueryParamsValue();
-            const requests = await this.userAccessRequestService.getUserAccessRequests(params.skip, params.limit, params.sortParam || 'createdDate', params.sortOrder);
-            this.userAccessRequestState.setRequests(requests.Result);
-        }
-        catch (error) {
-            console.error('Failed to load requests:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
+    canDelete() {
+        return this.showDelete() && this.isPending();
     }
-    async loadRoles() {
-        try {
-            // this.userAccessRequestState.setUpdating(true);
-            // const params = this.userAccessRequestState.getQueryParamsValue();
-            const requests = await this.userAccessRequestService.getRoles();
-            this.userAccessRequestState.setRoles(requests.Result);
-        }
-        catch (error) {
-            console.error('Failed to load requests:', error);
-            throw error;
-        }
-        finally {
-            // this.userAccessRequestState.setUpdating(false);
+    onApprove() {
+        const request = this.request();
+        if (request && this.canProcess()) {
+            this.approve.emit({ request, roleId: this.form.get('RoleID')?.value });
         }
     }
-    async loadRequestsWithParam(param) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const params = this.userAccessRequestState.getQueryParamsValue();
-            const requests = await this.userAccessRequestService.getUserAccessRequestWithParam(param, params.skip, params.limit, params.sortParam || 'createdDate', params.sortOrder);
-            this.userAccessRequestState.setRequests(requests.Result);
-        }
-        catch (error) {
-            console.error('Failed to load requests with param:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
+    onDelete() {
+        const request = this.request();
+        if (request) {
+            this.deleteRequest.emit(request);
         }
+        this.closeDeleteDialogue();
     }
-    async loadRequestsByFilterParams(filterParams) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const params = this.userAccessRequestState.getQueryParamsValue();
-            const requests = await this.userAccessRequestService.getUserAccessRequestByFilterParams(filterParams.map((filter) => ({
-                PropertyName: filter.name,
-                EntityValue: filter.value,
-                type: convertDataFilterTypeToSearchPropertyValueType(filter.type),
-                Operator: SearchOperator.And,
-                Sign: SearchPropertySign.EQ,
-            })), params.skip, params.limit, params.sortParam || 'createdDate', params.sortOrder);
-            this.userAccessRequestState.setRequests(requests.Result);
-        }
-        catch (error) {
-            console.error('Failed to load requests with param:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
+    toggleDeleteDialogue() {
+        this.showDeleteDialogue = !this.showDeleteDialogue;
     }
-    updateQueryParams(params) {
-        this.userAccessRequestState.updateQueryParams(params);
-        this.loadRequests();
+    closeDeleteDialogue() {
+        this.showDeleteDialogue = false;
     }
-    async addRequest(request) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const newRequest = { ...request };
-            this.userAccessRequestState.addRequest(newRequest);
-            await this.userAccessRequestService.saveUserAccessRequests([newRequest]);
-            await this.loadRequests(); // Reload to get server-side changes
-        }
-        catch (error) {
-            console.error('Failed to add request:', error);
-            this.userAccessRequestState.removeRequest(request.Id);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
+    // ===== Reject (requires a reason) =====
+    openRejectDialogue() {
+        if (!this.canReject())
+            return;
+        this.rejectComment.setValue('');
+        this.rejectComment.markAsUntouched();
+        this.showRejectDialogue = true;
     }
-    async updateRequest(request) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            await this.userAccessRequestService.saveUserAccessRequests([request]);
-            this.userAccessRequestState.updateRequest(request);
-            this.utilService.showSuccess('Request updated successfully');
-        }
-        catch (error) {
-            console.error('Failed to update request:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
+    closeRejectDialogue() {
+        this.showRejectDialogue = false;
     }
-    async deleteRequest(requestId) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            await lastValueFrom(this.userAccessRequestService.deleteUserAccessRequests([requestId]));
-            this.userAccessRequestState.removeRequest(requestId);
-        }
-        catch (error) {
-            console.error('Failed to delete request:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
+    canConfirmReject() {
+        return !!this.rejectComment.value?.trim();
     }
-    async approveRequest(request) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const response = await this.userAccessRequestService.processUserAccessRequests([request], true);
-            // console.log(response);
-            const data = response?.[0];
-            if (data) {
-                this.userAccessRequestState.updateRequest(data);
-                this.utilService.showSuccess('Request approved successfully');
-            }
-        }
-        catch (error) {
-            console.error('Failed to update request:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
+    confirmReject() {
+        const request = this.request();
+        if (!request || !this.canReject() || !this.canConfirmReject())
+            return;
+        this.reject.emit({ request, comment: this.rejectComment.value.trim() });
+        this.closeRejectDialogue();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestFacade, deps: [{ token: UserAccessRequestService }, { token: UserAccessRequestState }, { token: i1.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestFacade, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: UserRequestApprovalFormComponent, isStandalone: true, selector: "lib-user-request-approval-form", inputs: { request: { classPropertyName: "request", publicName: "request", isSignal: true, isRequired: false, transformFunction: null }, roles: { classPropertyName: "roles", publicName: "roles", isSignal: true, isRequired: false, transformFunction: null }, showDelete: { classPropertyName: "showDelete", publicName: "showDelete", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { approve: "approve", reject: "reject", deleteRequest: "deleteRequest", switchToTable: "switchToTable" }, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\">\n  <verbena-input name=\"MailAddress\" label=\"Mail Address:\" formControlName=\"MailAddress\" [readOnly]=\"true\" />\n  <verbena-input label=\"First Name:\" name=\"FirstName\" type=\"text\" formControlName=\"FirstName\" [readOnly]=\"true\" />\n  <verbena-input label=\"Last Name:\" name=\"LastName\" type=\"text\" formControlName=\"LastName\" [readOnly]=\"true\" />\n  <verbena-input label=\"Other Name:\" name=\"OtherName\" type=\"text\" formControlName=\"OtherName\" [readOnly]=\"true\" />\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"true\" [showClear]=\"true\"\n      placeholder=\"\" [options]=\"roles()\" id=\"role\" optionLabel=\"Name\" optionValue=\"Code\" formControlName=\"RoleID\"\n      class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between my-2 overflow-auto\">\n    <div class=\"flex gap-2\">\n      <verbena-button (click)=\"switchToTable.emit()\" text=\"Switch To Table\" styleType=\"ylw-outline\"></verbena-button>\n\n      <verbena-button *ngIf=\"showDelete()\" width=\"114px\" height=\"39px\" (click)=\"toggleDeleteDialogue()\" text=\"Delete\"\n        styleType=\"danger\" borderRadius=\"10px\" [disable]=\"!canDelete()\"></verbena-button>\n    </div>\n\n    <div class=\"flex gap-2\">\n      <verbena-button width=\"114px\" height=\"39px\" text=\"Reject\" styleType=\"danger\" borderRadius=\"10px\"\n        (click)=\"openRejectDialogue()\" [disable]=\"!canReject()\"></verbena-button>\n\n      <verbena-button (click)=\"onApprove()\" text=\"Approve\" bgColor=\"var(--vbn-color-success)\" textColor=\"white\"\n        border=\"1px solid var(--vbn-color-success)\" borderRadius=\"10px\" pd=\"10px 20px\" width=\"114px\" height=\"39px\"\n        [disable]=\"!canProcess()\"></verbena-button>\n    </div>\n  </div>\n</form>\n\n<verben-dialogue [showCloseIcon]=\"false\" [dismissOutsideClick]=\"false\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'dialogue'\" [customClass]=\"'show-revert-dialogue'\" [disableFooter]=\"true\" [isVisible]=\"showDeleteDialogue\"\n  [bodyTemplate]=\"deleteBodyTemplate\" (closeModal)=\"closeDeleteDialogue()\">\n  <ng-template #deleteBodyTemplate>\n    <div class=\"dialog-body flex flex-col gap-4\">\n      <div class=\"header font-bold text-2xl\">Delete User Request</div>\n      <div class=\"form-container-dialogue flex flex-col gap-2\">\n        Are you sure you want to proceed?\n      </div>\n      <div class=\"dialog-button-container flex gap-2\">\n        <div class=\"flex-1\">\n          <verbena-button width=\"100%\" [fontWeight]=\"'bold'\" [bgColor]=\"'var(--vbn-color-surface)'\"\n            [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-text)'\" [border]=\"'1px solid var(--vbn-color-text)'\"\n            [text]=\"'Close'\" (click)=\"closeDeleteDialogue()\">\n          </verbena-button>\n        </div>\n        <div class=\"flex-1\">\n          <verbena-button width=\"100%\" class=\"verben-primary-button\" [text]=\"'Proceed'\" (click)=\"onDelete()\">\n          </verbena-button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n\n<verben-dialogue [showCloseIcon]=\"false\" [dismissOutsideClick]=\"false\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'dialogue'\" [customClass]=\"'show-revert-dialogue'\" [disableFooter]=\"true\" [isVisible]=\"showRejectDialogue\"\n  [bodyTemplate]=\"rejectBodyTemplate\" (closeModal)=\"closeRejectDialogue()\">\n  <ng-template #rejectBodyTemplate>\n    <div class=\"dialog-body flex flex-col gap-4\">\n      <div class=\"header font-bold text-2xl\">Reject User Request</div>\n      <div class=\"form-container-dialogue flex flex-col gap-2\">\n        Please provide a reason for rejecting this request.\n        <verbena-textarea label=\"Reason\" [required]=\"true\" [rows]=\"4\" width=\"100%\" [formControl]=\"rejectComment\"\n          errorMessageColor=\"var(--vbn-color-danger)\">\n        </verbena-textarea>\n      </div>\n      <div class=\"dialog-button-container flex gap-2\">\n        <div class=\"flex-1\">\n          <verbena-button width=\"100%\" [fontWeight]=\"'bold'\" [bgColor]=\"'var(--vbn-color-surface)'\"\n            [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-text)'\" [border]=\"'1px solid var(--vbn-color-text)'\"\n            [text]=\"'Close'\" (click)=\"closeRejectDialogue()\">\n          </verbena-button>\n        </div>\n        <div class=\"flex-1\">\n          <verbena-button width=\"100%\" class=\"verben-primary-button\" [text]=\"'Proceed'\" (click)=\"confirmReject()\"\n            [disable]=\"!canConfirmReject()\">\n          </verbena-button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: VerbenaInputModule }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "ngmodule", type: VerbenaButtonModule }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "ngmodule", type: VerbenaTextareaModule }, { kind: "component", type: i3.VerbenaTextareaComponent, selector: "verbena-textarea", inputs: ["disabled", "label", "required", "rows", "cols", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "value", "errorMessageColor"], outputs: ["valueChange"] }, { kind: "ngmodule", type: DropDownModule }, { kind: "component", type: i3.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "ngmodule", type: VerbenDialogueModule }, { kind: "component", type: i3.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestFacade, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: UserAccessRequestService }, { type: UserAccessRequestState }, { type: i1.UtilService }] });
-var DateFilterTypes;
-(function (DateFilterTypes) {
-    DateFilterTypes["Before"] = "LT";
-    DateFilterTypes["On"] = "EQ";
-    DateFilterTypes["After"] = "GT";
-})(DateFilterTypes || (DateFilterTypes = {}));
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-request-approval-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        VerbenaInputModule,
+                        VerbenaButtonModule,
+                        VerbenaTextareaModule,
+                        DropDownModule,
+                        VerbenDialogueModule,
+                    ], template: "<form [formGroup]=\"form\" class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\">\n  <verbena-input name=\"MailAddress\" label=\"Mail Address:\" formControlName=\"MailAddress\" [readOnly]=\"true\" />\n  <verbena-input label=\"First Name:\" name=\"FirstName\" type=\"text\" formControlName=\"FirstName\" [readOnly]=\"true\" />\n  <verbena-input label=\"Last Name:\" name=\"LastName\" type=\"text\" formControlName=\"LastName\" [readOnly]=\"true\" />\n  <verbena-input label=\"Other Name:\" name=\"OtherName\" type=\"text\" formControlName=\"OtherName\" [readOnly]=\"true\" />\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"true\" [showClear]=\"true\"\n      placeholder=\"\" [options]=\"roles()\" id=\"role\" optionLabel=\"Name\" optionValue=\"Code\" formControlName=\"RoleID\"\n      class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between my-2 overflow-auto\">\n    <div class=\"flex gap-2\">\n      <verbena-button (click)=\"switchToTable.emit()\" text=\"Switch To Table\" styleType=\"ylw-outline\"></verbena-button>\n\n      <verbena-button *ngIf=\"showDelete()\" width=\"114px\" height=\"39px\" (click)=\"toggleDeleteDialogue()\" text=\"Delete\"\n        styleType=\"danger\" borderRadius=\"10px\" [disable]=\"!canDelete()\"></verbena-button>\n    </div>\n\n    <div class=\"flex gap-2\">\n      <verbena-button width=\"114px\" height=\"39px\" text=\"Reject\" styleType=\"danger\" borderRadius=\"10px\"\n        (click)=\"openRejectDialogue()\" [disable]=\"!canReject()\"></verbena-button>\n\n      <verbena-button (click)=\"onApprove()\" text=\"Approve\" bgColor=\"var(--vbn-color-success)\" textColor=\"white\"\n        border=\"1px solid var(--vbn-color-success)\" borderRadius=\"10px\" pd=\"10px 20px\" width=\"114px\" height=\"39px\"\n        [disable]=\"!canProcess()\"></verbena-button>\n    </div>\n  </div>\n</form>\n\n<verben-dialogue [showCloseIcon]=\"false\" [dismissOutsideClick]=\"false\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'dialogue'\" [customClass]=\"'show-revert-dialogue'\" [disableFooter]=\"true\" [isVisible]=\"showDeleteDialogue\"\n  [bodyTemplate]=\"deleteBodyTemplate\" (closeModal)=\"closeDeleteDialogue()\">\n  <ng-template #deleteBodyTemplate>\n    <div class=\"dialog-body flex flex-col gap-4\">\n      <div class=\"header font-bold text-2xl\">Delete User Request</div>\n      <div class=\"form-container-dialogue flex flex-col gap-2\">\n        Are you sure you want to proceed?\n      </div>\n      <div class=\"dialog-button-container flex gap-2\">\n        <div class=\"flex-1\">\n          <verbena-button width=\"100%\" [fontWeight]=\"'bold'\" [bgColor]=\"'var(--vbn-color-surface)'\"\n            [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-text)'\" [border]=\"'1px solid var(--vbn-color-text)'\"\n            [text]=\"'Close'\" (click)=\"closeDeleteDialogue()\">\n          </verbena-button>\n        </div>\n        <div class=\"flex-1\">\n          <verbena-button width=\"100%\" class=\"verben-primary-button\" [text]=\"'Proceed'\" (click)=\"onDelete()\">\n          </verbena-button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n\n<verben-dialogue [showCloseIcon]=\"false\" [dismissOutsideClick]=\"false\" [closeOnEscape]=\"true\" [size]=\"'medium'\"\n  [mode]=\"'dialogue'\" [customClass]=\"'show-revert-dialogue'\" [disableFooter]=\"true\" [isVisible]=\"showRejectDialogue\"\n  [bodyTemplate]=\"rejectBodyTemplate\" (closeModal)=\"closeRejectDialogue()\">\n  <ng-template #rejectBodyTemplate>\n    <div class=\"dialog-body flex flex-col gap-4\">\n      <div class=\"header font-bold text-2xl\">Reject User Request</div>\n      <div class=\"form-container-dialogue flex flex-col gap-2\">\n        Please provide a reason for rejecting this request.\n        <verbena-textarea label=\"Reason\" [required]=\"true\" [rows]=\"4\" width=\"100%\" [formControl]=\"rejectComment\"\n          errorMessageColor=\"var(--vbn-color-danger)\">\n        </verbena-textarea>\n      </div>\n      <div class=\"dialog-button-container flex gap-2\">\n        <div class=\"flex-1\">\n          <verbena-button width=\"100%\" [fontWeight]=\"'bold'\" [bgColor]=\"'var(--vbn-color-surface)'\"\n            [borderRadius]=\"'4px'\" [textColor]=\"'var(--vbn-color-text)'\" [border]=\"'1px solid var(--vbn-color-text)'\"\n            [text]=\"'Close'\" (click)=\"closeRejectDialogue()\">\n          </verbena-button>\n        </div>\n        <div class=\"flex-1\">\n          <verbena-button width=\"100%\" class=\"verben-primary-button\" [text]=\"'Proceed'\" (click)=\"confirmReject()\"\n            [disable]=\"!canConfirmReject()\">\n          </verbena-button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { approve: [{
+                type: Output
+            }], reject: [{
+                type: Output
+            }], deleteRequest: [{
+                type: Output
+            }], switchToTable: [{
+                type: Output
+            }] } });
 
-class UserRequestFormComponent {
-    fb;
-    roles = [];
+/**
+ * Table view for access requests. Row actions open the form (to approve/reject
+ * with a role) or delete the request.
+ */
+class UserRequestApprovalTableComponent {
+    requests = [];
+    columns = [];
+    isLoading = false;
     showDelete = false;
-    get currentData() {
-        return this._currentData;
+    view = new EventEmitter();
+    delete = new EventEmitter();
+    onView(request) {
+        this.view.emit(request);
     }
-    set currentData(value) {
-        this._currentData = value;
-        console.log(value?.data);
-        if (value?.data) {
-            this.form.patchValue({
-                MailAddress: value.data.MailAddress || '',
-                FirstName: value.data.FirstName || '',
-                LastName: value.data.LastName || '',
-                OtherName: value.data.OtherName || '',
-                PhoneNumber: value.data.PhoneNumber || '',
-                RoleID: value.data.RoleID || '',
-            });
-        }
-        else {
-            this.form.reset();
-        }
+    onDelete(request) {
+        this.delete.emit(request);
     }
-    showDialogue = false;
-    _currentData = null;
-    switchView = new EventEmitter();
-    onApproval = new EventEmitter();
-    onDeleteRequest = new EventEmitter();
-    form;
-    // roles: WritableSignal<Role[]> = signal([]);
-    constructor(fb) {
-        this.fb = fb;
-        this.form = this.fb.group({
-            MailAddress: ['', { readonly: true }],
-            FirstName: ['', { readonly: true }],
-            LastName: ['', { readonly: true }],
-            OtherName: ['', { readonly: true }],
-            PhoneNumber: ['', { readonly: true }],
-            RoleID: ['', { validators: [Validators.required] }],
-        });
-    }
-    ngOnInit() {
-        // this.userAccessRequestFacade.getRoles$().subscribe((data) => {
-        //   this.roles.set(data);
-        // });
-        // try {
-        //   this.userAccessRequestFacade.loadRoles();
-        // } catch (error) {
-        //   // Handle error
-        // }
-        console.log(this.currentData?.data);
-    }
-    onSave() {
-        if (this.form.valid) {
-            // Emit save event with form value
-            console.log('Form saved:', this.form.value);
-        }
-    }
-    onDelete() {
-        // Emit delete event
-        this.onDeleteRequest.emit({ email: this.form.get('MailAddress')?.value });
-        this.onModalClose('');
-    }
-    canDelete() {
-        return (this.currentData?.data?.RequestStatus == UserAccessRequestStatus.Pending);
-    }
-    disableProcessing() {
-        return (this.currentData?.data?.RequestStatus !==
-            UserAccessRequestStatus.Pending || !this.form.valid);
-    }
-    toggleModal() {
-        this.showDialogue = !this.showDialogue;
-    }
-    onModalOpen(event) { }
-    onModalClose(event) {
-        this.showDialogue = false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestFormComponent, selector: "lib-user-request-form", inputs: { roles: "roles", showDelete: "showDelete", currentData: "currentData" }, outputs: { switchView: "switchView", onApproval: "onApproval", onDeleteRequest: "onDeleteRequest" }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"Mail Address:\"\n    formControlName=\"MailAddress\"\n    [readOnly]=\"true\"\n  />\n  <verbena-input\n    label=\"First Name:\"\n    name=\"FirstName\"\n    type=\"text\"\n    formControlName=\"FirstName\"\n    [readOnly]=\"true\"\n  />\n  <verbena-input\n    label=\"Last Name:\"\n    name=\"LastName\"\n    type=\"text\"\n    formControlName=\"LastName\"\n    [readOnly]=\"true\"\n  />\n  <verbena-input\n    label=\"OtherName:\"\n    name=\"OtherName\"\n    type=\"text\"\n    formControlName=\"OtherName\"\n    [readOnly]=\"true\"\n  />\n  <!-- <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n    [readOnly]=\"true\"\n  /> -->\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down\n      label=\"Role\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"roles\"\n      id=\"role\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      formControlName=\"RoleID\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between my-2 overflow-auto\">\n    <div class=\"flex gap-2\">\n      <verbena-button\n        (click)=\"switchView.emit()\"\n        text=\"Switch To Table\"\n        styleType=\"ylw-outline\"\n      ></verbena-button>\n\n      <verbena-button\n        *ngIf=\"showDelete\"\n        width=\"114px\"\n        height=\"39px\"\n        (click)=\"toggleModal()\"\n        text=\"Delete\"\n        styleType=\"danger\"\n        borderRadius=\"10px\"\n      ></verbena-button>\n    </div>\n\n    <div class=\"flex gap-2\">\n      <verbena-button\n        width=\"114px\"\n        height=\"39px\"\n        text=\"Reject\"\n        styleType=\"danger\"\n        borderRadius=\"10px\"\n        [disable]=\"disableProcessing()\"\n      ></verbena-button>\n\n      <verbena-button\n        (click)=\"\n          onApproval.emit({\n            email: form.get('MailAddress')?.value,\n            role: form.get('RoleID')?.value,\n          })\n        \"\n        text=\"Approve\"\n        bgColor=\"#28a745\"\n        textColor=\"white\"\n        border=\"1px solid #28a745\"\n        borderRadius=\"10px\"\n        pd=\"10px 20px\"\n        width=\"114px\"\n        height=\"39px\"\n        [disable]=\"disableProcessing()\"\n      ></verbena-button>\n    </div>\n  </div>\n</form>\n\n<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'show-revert-dialogue'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"showDialogue\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body flex flex-col gap-4\">\n      <div class=\"header font-bold text-2xl\">Delete User Request</div>\n      <div class=\"form-container-dialogue flex flex-col gap-2\">\n        Are you sure you want to proceed ?\n      </div>\n      <div class=\"dialog-button-container flex gap-2\">\n        <div class=\"flex-1\">\n          <verbena-button\n            width=\"100%\"\n            [fontWeight]=\"'bold'\"\n            [bgColor]=\"'#ffffff'\"\n            [borderRadius]=\"'4px'\"\n            [textColor]=\"'#000'\"\n            [border]=\"'1px solid #000'\"\n            [text]=\"'Close'\"\n            (click)=\"onModalClose($event)\"\n          >\n          </verbena-button>\n        </div>\n        <div class=\"flex-1\">\n          <verbena-button\n            width=\"100%\"\n            class=\"verben-primary-button\"\n            [text]=\"'Proceed'\"\n            (click)=\"onDelete()\"\n          >\n          </verbena-button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n", styles: [".form-container-dialogue{overflow:auto;max-height:60vh}.dialog-body{padding:15px;height:100%}.dialog-button-container{flex:1 1 0;align-items:end}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.VerbenDialogueComponent, selector: "verben-dialogue", inputs: ["dialogueWidth", "headerTemplate", "bodyTemplate", "footerTemplate", "showCloseIcon", "dismissOutsideClick", "closeOnEscape", "isVisible", "size", "backdropColor", "customClass", "disableFooter", "margin", "padding", "borderRadius", "dialogueBgColor", "width", "closeIconClass", "boxShadow", "enableTransition", "modalData", "mode", "position", "drawerWidth"], outputs: ["openModal", "closeModal"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i4.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i4.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestApprovalTableComponent, isStandalone: true, selector: "lib-user-request-approval-table", inputs: { requests: "requests", columns: "columns", isLoading: "isLoading", showDelete: "showDelete" }, outputs: { view: "view", delete: "delete" }, ngImport: i0, template: "<div class=\"table-container\" [class.loading]=\"isLoading\">\n  <lib-data-table [data]=\"requests\" [columns]=\"columns\" dataKey=\"MailAddress\">\n    <!-- Select -->\n    <ng-container libColumn=\"select\">\n      <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n        <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n      </ng-template>\n    </ng-container>\n\n    <!-- Created -->\n    <ng-container libColumn=\"createdAt\">\n      <ng-template #cell let-value>{{ value | date }}</ng-template>\n    </ng-container>\n\n    <!-- Status -->\n    <ng-container libColumn=\"status\">\n      <ng-template #cell let-value>\n        <lib-user-access-request-status-badge [status]=\"value\"></lib-user-access-request-status-badge>\n      </ng-template>\n    </ng-container>\n\n    <!-- Actions -->\n    <ng-container libColumn=\"actions\">\n      <ng-template #cell let-row=\"row\">\n        <div class=\"flex gap-6\">\n          <verben-svg (click)=\"onView(row)\" icon=\"edit\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n          <verben-svg *ngIf=\"showDelete\" (click)=\"onDelete(row)\" icon=\"delete\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n\n  <div *ngIf=\"requests.length === 0 && !isLoading\" class=\"empty-state\">\n    <p>No access requests found</p>\n  </div>\n</div>\n", styles: [".table-container{width:100%}.table-container.loading{opacity:.6;pointer-events:none}.empty-state{padding:2rem;text-align:center;color:var(--vbn-color-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: DataTableModule }, { kind: "component", type: i3.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i3.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "ngmodule", type: SvgModule }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: ["status"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-request-form', template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"Mail Address:\"\n    formControlName=\"MailAddress\"\n    [readOnly]=\"true\"\n  />\n  <verbena-input\n    label=\"First Name:\"\n    name=\"FirstName\"\n    type=\"text\"\n    formControlName=\"FirstName\"\n    [readOnly]=\"true\"\n  />\n  <verbena-input\n    label=\"Last Name:\"\n    name=\"LastName\"\n    type=\"text\"\n    formControlName=\"LastName\"\n    [readOnly]=\"true\"\n  />\n  <verbena-input\n    label=\"OtherName:\"\n    name=\"OtherName\"\n    type=\"text\"\n    formControlName=\"OtherName\"\n    [readOnly]=\"true\"\n  />\n  <!-- <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n    [readOnly]=\"true\"\n  /> -->\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down\n      label=\"Role\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"roles\"\n      id=\"role\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      formControlName=\"RoleID\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between my-2 overflow-auto\">\n    <div class=\"flex gap-2\">\n      <verbena-button\n        (click)=\"switchView.emit()\"\n        text=\"Switch To Table\"\n        styleType=\"ylw-outline\"\n      ></verbena-button>\n\n      <verbena-button\n        *ngIf=\"showDelete\"\n        width=\"114px\"\n        height=\"39px\"\n        (click)=\"toggleModal()\"\n        text=\"Delete\"\n        styleType=\"danger\"\n        borderRadius=\"10px\"\n      ></verbena-button>\n    </div>\n\n    <div class=\"flex gap-2\">\n      <verbena-button\n        width=\"114px\"\n        height=\"39px\"\n        text=\"Reject\"\n        styleType=\"danger\"\n        borderRadius=\"10px\"\n        [disable]=\"disableProcessing()\"\n      ></verbena-button>\n\n      <verbena-button\n        (click)=\"\n          onApproval.emit({\n            email: form.get('MailAddress')?.value,\n            role: form.get('RoleID')?.value,\n          })\n        \"\n        text=\"Approve\"\n        bgColor=\"#28a745\"\n        textColor=\"white\"\n        border=\"1px solid #28a745\"\n        borderRadius=\"10px\"\n        pd=\"10px 20px\"\n        width=\"114px\"\n        height=\"39px\"\n        [disable]=\"disableProcessing()\"\n      ></verbena-button>\n    </div>\n  </div>\n</form>\n\n<verben-dialogue\n  [showCloseIcon]=\"false\"\n  [dismissOutsideClick]=\"false\"\n  [closeOnEscape]=\"true\"\n  [size]=\"'medium'\"\n  [mode]=\"'dialogue'\"\n  [customClass]=\"'show-revert-dialogue'\"\n  [disableFooter]=\"true\"\n  (openModal)=\"onModalOpen($event)\"\n  [isVisible]=\"showDialogue\"\n  [bodyTemplate]=\"bodyTemplate\"\n  (closeModal)=\"onModalClose($event)\"\n>\n  <ng-template #bodyTemplate>\n    <div class=\"dialog-body flex flex-col gap-4\">\n      <div class=\"header font-bold text-2xl\">Delete User Request</div>\n      <div class=\"form-container-dialogue flex flex-col gap-2\">\n        Are you sure you want to proceed ?\n      </div>\n      <div class=\"dialog-button-container flex gap-2\">\n        <div class=\"flex-1\">\n          <verbena-button\n            width=\"100%\"\n            [fontWeight]=\"'bold'\"\n            [bgColor]=\"'#ffffff'\"\n            [borderRadius]=\"'4px'\"\n            [textColor]=\"'#000'\"\n            [border]=\"'1px solid #000'\"\n            [text]=\"'Close'\"\n            (click)=\"onModalClose($event)\"\n          >\n          </verbena-button>\n        </div>\n        <div class=\"flex-1\">\n          <verbena-button\n            width=\"100%\"\n            class=\"verben-primary-button\"\n            [text]=\"'Proceed'\"\n            (click)=\"onDelete()\"\n          >\n          </verbena-button>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</verben-dialogue>\n", styles: [".form-container-dialogue{overflow:auto;max-height:60vh}.dialog-body{padding:15px;height:100%}.dialog-button-container{flex:1 1 0;align-items:end}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { roles: [{
+            args: [{ selector: 'lib-user-request-approval-table', standalone: true, imports: [CommonModule, DataTableModule, SvgModule, UserAccessRequestStatusBadgeComponent], template: "<div class=\"table-container\" [class.loading]=\"isLoading\">\n  <lib-data-table [data]=\"requests\" [columns]=\"columns\" dataKey=\"MailAddress\">\n    <!-- Select -->\n    <ng-container libColumn=\"select\">\n      <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n        <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n      </ng-template>\n    </ng-container>\n\n    <!-- Created -->\n    <ng-container libColumn=\"createdAt\">\n      <ng-template #cell let-value>{{ value | date }}</ng-template>\n    </ng-container>\n\n    <!-- Status -->\n    <ng-container libColumn=\"status\">\n      <ng-template #cell let-value>\n        <lib-user-access-request-status-badge [status]=\"value\"></lib-user-access-request-status-badge>\n      </ng-template>\n    </ng-container>\n\n    <!-- Actions -->\n    <ng-container libColumn=\"actions\">\n      <ng-template #cell let-row=\"row\">\n        <div class=\"flex gap-6\">\n          <verben-svg (click)=\"onView(row)\" icon=\"edit\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n          <verben-svg *ngIf=\"showDelete\" (click)=\"onDelete(row)\" icon=\"delete\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n\n  <div *ngIf=\"requests.length === 0 && !isLoading\" class=\"empty-state\">\n    <p>No access requests found</p>\n  </div>\n</div>\n", styles: [".table-container{width:100%}.table-container.loading{opacity:.6;pointer-events:none}.empty-state{padding:2rem;text-align:center;color:var(--vbn-color-text-muted)}\n"] }]
+        }], propDecorators: { requests: [{
                 type: Input
-            }], showDelete: [{
+            }], columns: [{
                 type: Input
-            }], currentData: [{
+            }], isLoading: [{
                 type: Input
-            }], switchView: [{
-                type: Output
-            }], onApproval: [{
+            }], showDelete: [{
+                type: Input
+            }], view: [{
                 type: Output
-            }], onDeleteRequest: [{
+            }], delete: [{
                 type: Output
             }] } });
 
-class UserAccessRequestStatusBadgeComponent {
-    status = UserAccessRequestStatus.Pending;
-    badgeConfig() {
-        switch (this.status) {
-            case UserAccessRequestStatus.Approved:
-                return { bgColor: '#CAE1CC', textColor: '#4ABB54', label: 'Approved' };
-            case UserAccessRequestStatus.Declined:
-                return { bgColor: '#FFDFDF', textColor: '#EB5757', label: 'Rejected' };
-            default:
-                return { bgColor: '#827C7C', textColor: '#C3C3C3', label: 'Pending' };
-        }
+/**
+ * State for the access-request approval page.
+ * Adds the roles list used by the form's role dropdown.
+ */
+class UserAccessRequestState extends BaseDataPageState {
+    roles$ = new BehaviorSubject([]);
+    getRoles$() {
+        return this.roles$.asObservable();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: { status: "status" }, ngImport: i0, template: "<verbena-badge\n  borderRadius=\"9px\"\n  [bgColor]=\"badgeConfig().bgColor\"\n  [textColor]=\"badgeConfig().textColor\"\n  fontSize=\"12px\"\n  [text]=\"badgeConfig().label\"\n  [pd]=\"'2px 6px'\"\n></verbena-badge>\n", styles: [""], dependencies: [{ kind: "component", type: i4.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }] });
+    getRolesValue() {
+        return this.roles$.getValue();
+    }
+    setRoles(roles) {
+        this.roles$.next(roles);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestState });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestStatusBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-user-access-request-status-badge', template: "<verbena-badge\n  borderRadius=\"9px\"\n  [bgColor]=\"badgeConfig().bgColor\"\n  [textColor]=\"badgeConfig().textColor\"\n  fontSize=\"12px\"\n  [text]=\"badgeConfig().label\"\n  [pd]=\"'2px 6px'\"\n></verbena-badge>\n" }]
-        }], propDecorators: { status: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestState, decorators: [{
+            type: Injectable
+        }] });
 
-class UserRequestApprovalComponent {
-    cdr;
-    utilService;
-    envService;
-    server;
-    userAccessRequestFacade;
-    showDelete = false;
-    cardDataView;
-    dataView;
-    columns = columns;
-    // visibleColumnDef: WritableSignal<ColumnDefinition<UserAccessRequest>[]> =
-    //   signal(columns);
-    visibleColumnDef = this.columns;
-    data = signal([]);
-    styles = baseStyle;
-    currentData = null;
-    isGridView = true;
-    selected = null;
-    cardData = computed(() => this.data()?.map(({ FirstName, LastName, MailAddress, PhoneNumber, RoleID, RequestStatus, Role, SignupType, }) => ({
-        selected: false,
-        title: `${FirstName} ${LastName}`,
-        data: {
-            FirstName,
-            LastName,
-            MailAddress,
-            PhoneNumber,
-            RoleID,
-            RequestStatus,
-            Role,
-            SignupType,
-        },
-        body: [{ title: 'Role', value: Role?.Name ?? '' }],
-        children: [],
-    })));
-    roles = signal([]);
-    constructor(cdr, 
-    // private service: UserRequestApprovalService,
-    utilService, envService, server, userAccessRequestFacade) {
-        this.cdr = cdr;
-        this.utilService = utilService;
-        this.envService = envService;
-        this.server = server;
-        this.userAccessRequestFacade = userAccessRequestFacade;
+/**
+ * Service for access-request API operations.
+ *
+ * The auth API pluralises names and appends a `/{sortParam}/{sortOrder}` suffix
+ * to every read, so the base URL seams are overridden accordingly. It also
+ * carries an approve/reject workflow and a bespoke delete-by-email endpoint that
+ * have no analog in the generic CRUD base.
+ *
+ * Kept publicly exported under its original name for backward compatibility.
+ */
+class UserAccessRequestService extends BaseDataPageService {
+    defaultSort = 'CreatedAt/Asc';
+    constructor(server, filterHandler, sortHandler) {
+        super(server, filterHandler, sortHandler);
     }
-    async ngOnInit() {
-        // this.data = this.service.getMockUserRequests();
-        this.userAccessRequestFacade.getRequests$().subscribe((data) => {
-            this.data.set(data);
-        });
-        this.userAccessRequestFacade.getRoles$().subscribe((data) => {
-            this.roles.set(data);
-        });
-        try {
-            this.userAccessRequestFacade.loadRequests();
-            this.userAccessRequestFacade.loadRoles();
-        }
-        catch (error) {
-            // Handle error
-        }
+    getEndpoint() {
+        return 'UserAccessRequest';
     }
-    ngOnDestroy() {
-        this.userAccessRequestFacade.destroy();
+    // ===== URL seams =====
+    listUrl(skip, limit) {
+        return `GetUserAccessRequests/${skip}/${limit}/${this.defaultSort}`;
     }
-    handleSearch(event) {
-        this.userAccessRequestFacade.search(event.value);
+    searchTermUrl(term, skip, limit) {
+        return `GetUserAccessRequestWithParam/${term}/${skip}/${limit}/${this.defaultSort}`;
     }
-    async loadMore() {
-        try {
-            await this.userAccessRequestFacade.loadMore();
-        }
-        catch (error) {
-            // Handle error
-        }
+    filterSearchUrl(skip, limit) {
+        return `SearchUserAccessRequest/${skip}/${limit}/${this.defaultSort}`;
     }
-    // To search with parameter:
-    async searchRequests(param) {
-        try {
-            await this.userAccessRequestFacade.loadRequestsWithParam(param);
-        }
-        catch (error) {
-            // Handle error
-        }
+    saveUrl() {
+        return 'SaveUserAccessRequests';
     }
-    async onApprove(approvalData) {
-        const data = this.data().find(({ MailAddress }) => MailAddress === approvalData.email);
-        if (data) {
-            await this.userAccessRequestFacade.approveRequest({
-                ...data,
-                RoleID: approvalData.role,
-            });
-        }
-    }
-    async onDelete(deletionData) {
-        const data = this.data().find(({ MailAddress }) => MailAddress === deletionData.email);
-        this.utilService.sendBI(true);
-        const res = await this.server.get(`DeleteUserRequestWithUser/${deletionData.email}`, this.envService.environment.AuthenticationAPI);
-        this.utilService.sendBI(false);
-        if (res instanceof ErrorResponse) {
-        }
-        else {
-            if (data) {
-                this.data.update((items) => items.filter((x) => x.Code !== data.Code));
+    // ===== Delete (bespoke: by email, also removes the associated signup) =====
+    async deleteItems(emails) {
+        for (const email of emails) {
+            const res = await this.server.get(`DeleteUserRequestWithUser/${email}`, this.baseUrl);
+            if (res instanceof ErrorResponse) {
+                return res;
             }
-            this.cardDataView.clearData();
-        }
-    }
-    openDetailView(mailAddress) {
-        const cardItem = this.getCardDataByMailAddress(mailAddress);
-        if (cardItem && this.cardDataView) {
-            this.dataView.toggleView();
-            // First reset all selections
-            this.cardData().forEach((item) => {
-                item.selected = false;
-                if (item.children) {
-                    item.children.forEach((child) => (child.selected = false));
-                }
-            });
-            // Set the selected item
-            cardItem.selected = true;
-            this.currentData = this.cardDataView.onItemClick(cardItem);
-            // Force change detection if needed
-            // this.changeDetectorRef.detectChanges();
         }
+        return true;
     }
-    getCardDataByMailAddress(mailAddress) {
-        return this.cardData().find(({ data }) => data.MailAddress === mailAddress);
+    // ===== Workflow =====
+    /** Approve (isApproval=true) or reject (false) the given requests. */
+    processRequests(requests, isApproval) {
+        return this.server.post(`UserAccessRequestAction/${isApproval}`, requests);
     }
-    onViewChange(isGridView) {
-        this.isGridView = isGridView;
-        // Reset selection when switching views
-        if (this.currentData) {
-            this.cardDataView?.clearData();
-            this.currentData = null;
-        }
-        console.log('SELECTED', this.selected);
-        if (this.selected) {
-            this.cardDataView.onItemClick(this.selected);
+    // ===== Lookups =====
+    async getRoles() {
+        const res = await this.server.get('GetRoles/0/0');
+        if (res instanceof ErrorResponse) {
+            return [];
         }
+        return res.Result ?? [];
     }
-    openFormView(index) {
-        const item = this.cardData()[index];
-        console.log('ITEM = ', item);
-    }
-    handleExport(exportedData) {
-        console.log('Exported data:', exportedData);
-        this.downloadCSV(exportedData);
-    }
-    /**
-     * @param data Simple csv export for testing
-     */
-    downloadCSV(data) {
-        const headers = Object.keys(data[0]);
-        const csvContent = [
-            headers.join(','),
-            ...data.map((row) => headers.map((header) => row[header]).join(',')),
-        ].join('\n');
-        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-        const link = document.createElement('a');
-        if (link.download !== undefined) {
-            const url = URL.createObjectURL(blob);
-            link.setAttribute('href', url);
-            link.setAttribute('download', 'export.csv');
-            link.style.visibility = 'hidden';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
+    async getTags() {
+        const res = await this.server.get('GetTags/0/0');
+        if (res instanceof ErrorResponse) {
+            return [];
         }
+        return res.Result ?? [];
     }
-    onSelectionChange(selectedRows) {
-        console.log('Selection changed:', selectedRows);
-        // Handle the selection change
-    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestService, deps: [{ token: i1$2.HttpWebRequestService }, { token: i2.FilterHandlerService }, { token: i2.SortHandlerService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$2.HttpWebRequestService }, { type: i2.FilterHandlerService }, { type: i2.SortHandlerService }] });
+
+/**
+ * Facade for the access-request approval page.
+ * Adds the approve/reject workflow on top of the generic base facade.
+ */
+class UserAccessRequestFacade extends BaseDataPageFacade {
+    requestService;
+    blankRequest;
+    constructor(state, service, searchHandler, utilService) {
+        super(state, service, searchHandler, utilService, USER_ACCESS_REQUEST_CONFIG);
+        this.requestService = service;
+    }
+    // ===== Custom observables =====
+    get roles$() {
+        return this.state.getRoles$();
+    }
+    // ===== View management =====
     /**
-     * Copied over from card view doc until I understand usage
+     * Select the request to show in the form. The form template binds to
+     * currentCardData(), so route selection through selectCard (reusing the
+     * matching card from the loaded list when present) rather than a separate
+     * selected-request stream that nothing reads.
      */
-    selectedColumnCount = 0;
-    selectedFilterTableCount = 0;
-    isOPen = true;
-    selectedSortCount = 0;
-    showColumn = false;
-    showSort = false;
-    selectedAll = false;
-    visibleColumns = columns.map((col) => ({
-        checked: true,
-        name: typeof col.header === 'string' ? col.header : col.id,
-        type: DataFilterType.Bool,
-    }));
-    filterArray = [
-        {
-            name: 'Name',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'MailAddress',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'PhoneNumber',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'CreatedAt',
-            type: DataFilterType.Date,
-            checked: false,
-        },
-    ];
-    sortOptions = [
-        {
-            name: 'Name',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'MailAddress',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'PhoneNumber',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'CreatedAt',
-            type: DataFilterType.Date,
-            checked: true,
-        },
-    ];
-    clearData() {
-        this.currentData = {};
-    }
-    onColumnChange(event) {
-        this.showColumn = event;
-    }
-    onSortChange(event) {
-        this.showSort = event;
-        console.log(event);
-    }
-    onColumnsUpdated(updatedColumns) {
-        console.log(updatedColumns);
-        const updatedColumnDef = [];
-        updatedColumns.forEach((col) => {
-            const matchingCol = this.columns.find((column) => column.header === col.name || column.id === col.name);
-            if (matchingCol) {
-                updatedColumnDef.push(matchingCol);
-            }
-        });
-        console.log(updatedColumnDef);
-        this.visibleColumnDef = [...updatedColumnDef];
-        this.cdr.markForCheck();
-        this.onColumnChange(false);
-        this.selectedColumnCount = updatedColumns.length;
+    openForm(request) {
+        if (!request) {
+            this.selectCard(null);
+            return;
+        }
+        const existing = this.cardData().find((card) => card.data?.MailAddress === request.MailAddress);
+        this.selectCard(existing ?? this.getConfig().cardDataMapper(request));
     }
-    onSortUpdated(updatedSorts) {
-        this.onSortChange(false);
-        this.selectedSortCount = updatedSorts.length;
-        console.log(updatedSorts);
+    closeForm() {
+        this.selectCard(null);
     }
-    onStateChange(event) {
-        console.log(`State changed for ${event.key}:`, event.value);
+    handleColumnsUpdated(columns) {
+        this.updateVisibleColumns(columns);
     }
-    onFilterSet(event) {
-        console.log(event);
-        this.userAccessRequestFacade.filter(event);
+    // ===== Roles =====
+    async loadRoles() {
+        const roles = await this.requestService.getRoles();
+        this.state.setRoles(roles);
+    }
+    // ===== Approval workflow =====
+    async approveRequest(request, roleId) {
+        return this.process({ ...request, RoleID: roleId }, true, 'Request approved');
+    }
+    async rejectRequest(request, comment) {
+        return this.process({ ...request, Comment: comment }, false, 'Request rejected');
+    }
+    async process(request, isApproval, successMessage) {
+        this.state.setUpdating(true);
+        const result = await this.requestService.processRequests([request], isApproval);
+        this.state.setUpdating(false);
+        if (result instanceof ErrorResponse) {
+            this.utilService.showError(result.ErrorMsg);
+            return false;
+        }
+        this.utilService.showSuccess(successMessage);
+        const updated = result[0] ?? {
+            ...request,
+            RequestStatus: isApproval
+                ? UserAccessRequestStatus.Approved
+                : UserAccessRequestStatus.Declined,
+        };
+        this.state.updateItem(updated);
+        this.closeForm();
+        return true;
+    }
+    async deleteRequest(request) {
+        // Delete is keyed by email (DeleteUserRequestWithUser/{email}), which does
+        // not match the list's Id/Code key, so call the service directly and let
+        // refresh() reconcile the list rather than the base facade's key-based
+        // removeItem (which would be a no-op for an email).
+        this.state.setUpdating(true);
+        const result = await this.requestService.deleteItems([request.MailAddress]);
+        this.state.setUpdating(false);
+        if (result instanceof ErrorResponse) {
+            this.utilService.showError(result.ErrorMsg);
+            return false;
+        }
+        this.closeForm();
+        await this.refresh();
+        return true;
+    }
+    // ===== Empty placeholder for the form when nothing is selected =====
+    get emptyRequest() {
+        return (this.blankRequest ??= this.createEmptyRequest());
+    }
+    createEmptyRequest() {
+        return {
+            id: Date.now().toString(),
+            Id: '',
+            Code: '',
+            TenantId: '',
+            ServiceName: '',
+            CreatedAt: new Date(),
+            UpdatedAt: new Date(),
+            DataState: ObjectState.New,
+            Password: '',
+            FirstName: '',
+            LastName: '',
+            MailAddress: '',
+            IsSeeded: false,
+            Status: Status.Active,
+            SignupType: OAuthType.InApp,
+            RequestStatus: UserAccessRequestStatus.Pending,
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestFacade, deps: [{ token: UserAccessRequestState }, { token: UserAccessRequestService }, { token: i2.SearchHandlerService }, { token: i1$2.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestFacade });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestFacade, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: UserAccessRequestState }, { type: UserAccessRequestService }, { type: i2.SearchHandlerService }, { type: i1$2.UtilService }] });
+
+/**
+ * Access-request approval page. Lists requests in table/card views and drives
+ * the approve/reject/delete workflow through the facade.
+ */
+class UserRequestApprovalComponent {
+    facade;
+    showDelete = false;
+    vdv;
+    cardDataView;
+    destroyRef = inject(DestroyRef);
+    constructor(facade) {
+        this.facade = facade;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.UtilService }, { token: i1.EnvironmentService }, { token: i1.HttpWebRequestService }, { token: UserAccessRequestFacade }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestApprovalComponent, selector: "lib-user-request-approval", inputs: { showDelete: "showDelete" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-8\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: false,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\"\n  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data()\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"status\">\n          <ng-template #cell let-value>\n            <lib-user-access-request-status-badge\n              [status]=\"value\"\n            ></lib-user-access-request-status-badge>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value let-deleteRow>\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"openDetailView(value)\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n              <!-- <button (click)=\"openDetailView(value)\">Open</button>\n              <button (click)=\"selected = cardData[rowIndex]; vdv.toggleView()\">\n                Switch\n              </button> -->\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n          <!-- <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template> -->\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        (loadMoreClick)=\"loadMore()\"\n        #vdcv\n        dataId=\"MailAddress\"\n        border=\"5px\"\n        [cardDataList]=\"cardData()\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"20px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"cardData()\"\n          >\n            <ng-template #card let-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div\n                  (click)=\"currentData = vdcv.onItemClick(item)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n                >\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"flex-1 flex items-end gap-y-2 gap-x-4 p-4\">\n                    <div class=\"flex-1 space-y-2\">\n                      <span\n                        class=\"font-semibold text-[#404040] flex-1 truncate\"\n                        >{{ item.title }}</span\n                      >\n\n                      <p class=\"flex items-center my-1 gap-1\">\n                        <label for=\"phone\" class=\"text-[10px] font-light\"\n                          >Medium:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.SignupType\n                        }}</span>\n                      </p>\n                    </div>\n\n                    <div class=\"grid gap-y-1\">\n                      <!-- <p class=\"grid\">\n                        <label\n                          for=\"role\"\n                          class=\"text-[10px] font-light text-[#404040]\"\n                          >Medium:</label\n                        >\n                        <span id=\"role\" class=\"text-sm font-medium\">{{\n                          item.data?.SignupType\n                        }}</span>\n                      </p> -->\n\n                      <lib-user-access-request-status-badge\n                        [status]=\"item.data.RequestStatus\"\n                      ></lib-user-access-request-status-badge>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <lib-user-request-form\n              [roles]=\"roles()\"\n              [showDelete]=\"showDelete\"\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onDeleteRequest)=\"onDelete($event)\"\n              (onApproval)=\"onApprove($event)\"\n            ></lib-user-request-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div\n            [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-end': true,\n            }\"\n          >\n            <!-- <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'#8E8D87'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'#fff'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button> -->\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData().length }} records loaded</span\n              >\n              <button\n                (click)=\"loadMore()\"\n                class=\"load-more view-links text-[#3479E9] underline\"\n              >\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (filtersApplied)=\"onFilterSet($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-xport\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data()\"\n        (exportDataEvent)=\"handleExport($event)\"\n      >\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end\">\n    <!-- <div class=\"message-log-button-container flex justify-between\">\n      <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'#8E8D87'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'#fff'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button>\n    </div> -->\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button\n        (click)=\"loadMore()\"\n        class=\"load-more view-links text-[#3479E9] underline\"\n      >\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-\\[100\\%\\]{height:100%}.h-\\[max-content\\]{height:-moz-max-content;height:max-content}.h-full{height:100%}.w-3{width:.75rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity, 1))}.border-secondary-200{border-color:#d7dbe6}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity, 1))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity, 1))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity, 1))}.bg-secondary-200{background-color:#d7dbe6}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.\\!text-\\[10px\\]{font-size:10px!important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\\[10px\\]{font-size:10px}.text-\\[12px\\]{font-size:12px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.lowercase{text-transform:lowercase}.leading-6{line-height:1.5rem}.leading-\\[12\\.1px\\]{line-height:12.1px}.leading-\\[16\\.6px\\]{line-height:16.6px}.leading-\\[19\\.5px\\]{line-height:19.5px}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))}.text-\\[\\#3479E9\\]{--tw-text-opacity: 1;color:rgb(52 121 233 / var(--tw-text-opacity, 1))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.view-links{color:#3479e9;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i4.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i4.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i4.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i4.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "useVirtualScroll", "virtualScrollItemSize", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i4.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i4.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i4.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i4.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i4.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions", "resetSortData"] }, { kind: "component", type: i4.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "closeColumn"], outputs: ["columnsUpdated", "resetFilter"] }, { kind: "component", type: i4.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "component", type: i4.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "component", type: UserRequestFormComponent, selector: "lib-user-request-form", inputs: ["roles", "showDelete", "currentData"], outputs: ["switchView", "onApproval", "onDeleteRequest"] }, { kind: "component", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: ["status"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ngOnInit() {
+        this.facade.cardSelectionCleared$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.clearCardView());
+        this.facade.loadData();
+        this.facade.loadRoles();
+    }
+    clearCardView() {
+        const view = this.cardDataView;
+        if (!view)
+            return;
+        view.clearData();
+        if (view.rightContent) {
+            view.rightContent.parentData = null;
+        }
+    }
+    // ===== Filter / Sort / Search =====
+    onFilterApplied(filters) {
+        this.facade.applyFilters(filters);
+    }
+    onSortApplied(sorts) {
+        this.facade.applySorts(sorts);
+    }
+    onSearch(term) {
+        this.facade.onSearch(term);
+    }
+    onColumnsUpdated(columns) {
+        this.facade.handleColumnsUpdated(columns);
+    }
+    onLoadMore() {
+        this.facade.loadMore();
+    }
+    // ===== Table events =====
+    onViewRequest(request) {
+        this.facade.openForm(request);
+        this.vdv.toggleView();
+    }
+    requestCardClicked(selectedCard) {
+        this.facade.selectCard(selectedCard);
+    }
+    onDeleteFromTable(request) {
+        const name = `${request.FirstName} ${request.LastName}`.trim() || request.MailAddress;
+        if (confirm(`Delete request from ${name}?`)) {
+            this.facade.deleteRequest(request);
+        }
+    }
+    // ===== Form events =====
+    onApprove(event) {
+        this.facade.approveRequest(event.request, event.roleId);
+        this.vdv.toggleView();
+    }
+    onReject(event) {
+        this.facade.rejectRequest(event.request, event.comment);
+        this.vdv.toggleView();
+    }
+    onDeleteRequest(request) {
+        this.facade.deleteRequest(request);
+        this.vdv.toggleView();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalComponent, deps: [{ token: UserAccessRequestFacade }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestApprovalComponent, isStandalone: true, selector: "lib-user-request-approval", inputs: { showDelete: "showDelete" }, providers: [
+            UserAccessRequestFacade,
+            UserAccessRequestState,
+            UserAccessRequestService,
+            SearchHandlerService,
+        ], viewQueries: [{ propertyName: "vdv", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }], ngImport: i0, template: "<div class=\"user-request-approval-page space-y-8\">\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isCreate: false,\n      isToggle: true,\n      isImport: false,\n    }\" [selectedColumnCount]=\"(facade.visibleColumns$ | async)?.length ?? 0\"\n    [selectedSortCount]=\"(facade.sorts$ | async)?.length ?? 0\"\n    [selectedFilterTableCount]=\"(facade.filters$ | async)?.length ?? 0\"\n    (onSearchChange)=\"onSearch($event.value)\">\n\n    <!-- Table View -->\n    <div table-content>\n      <lib-user-request-approval-table [requests]=\"(facade.items$ | async) ?? []\"\n        [columns]=\"(facade.visibleColumns$ | async) ?? []\" [isLoading]=\"(facade.isLoading$ | async) ?? false\"\n        [showDelete]=\"showDelete\" (view)=\"onViewRequest($event)\" (delete)=\"onDeleteFromTable($event)\">\n      </lib-user-request-approval-table>\n    </div>\n\n    <!-- Card View -->\n    <div card-content>\n      <verben-card-data-view #vdcv [cardDataList]=\"facade.cardData()\" borderRadius=\"12px\" dataId=\"MailAddress\"\n        [border]=\"'5px'\" rbgColor=\"var(--vbn-color-surface-alt)\" mg=\"20px\">\n\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"facade.cardData()\">\n            <ng-template #card let-item>\n              <div (click)=\"requestCardClicked(vdcv.onItemClick(item))\" class=\"cursor-pointer h-[max-content]\">\n                <lib-user-request-approval-card [request]=\"item.data\" [selected]=\"item.selected\">\n                </lib-user-request-approval-card>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <lib-user-request-approval-form [request]=\"facade.currentCardData()?.data ?? facade.emptyRequest\"\n              [roles]=\"(facade.roles$ | async) ?? []\" [showDelete]=\"showDelete\" (approve)=\"onApprove($event)\"\n              (reject)=\"onReject($event)\" (deleteRequest)=\"onDeleteRequest($event)\"\n              (switchToTable)=\"vdv.toggleView()\">\n            </lib-user-request-approval-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div class=\"flex gap-2 items-center justify-end\">\n            <div class=\"flex justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ (facade.items$ | async)?.length }} records loaded</span>\n              <button class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\"\n                [disabled]=\"(facade.isLoading$ | async) ?? false\" (click)=\"onLoadMore()\">Load More</button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n\n    <!-- Column Selector -->\n    <div column-content>\n      <lib-data-columns [columns]=\"facade.getColumns()\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n\n    <!-- Filter -->\n    <div filter-content>\n      <lib-data-filter [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"\n        (filterApplied)=\"onFilterApplied($event)\"></lib-data-filter>\n    </div>\n\n    <!-- Sort -->\n    <div sort-content>\n      <lib-data-sort [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"\n        (sortApplied)=\"onSortApplied($event)\"></lib-data-sort>\n    </div>\n\n    <!-- Export -->\n    <div export-content>\n      <lib-data-xport [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"></lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <!-- Table View Load More -->\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end mt-4 px-4\">\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ (facade.items$ | async)?.length }} records loaded</span>\n      <button class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\"\n        [disabled]=\"(facade.isLoading$ | async) ?? false\" (click)=\"onLoadMore()\">Load More</button>\n    </div>\n  </div>\n</div>\n", styles: [".user-request-approval-page{width:100%}.paginator-text{color:var(--vbn-color-text-muted);font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DataViewModule }, { kind: "component", type: i3.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "ngmodule", type: DataColumnsModule }, { kind: "component", type: i3.DataColumnsComponent, selector: "lib-data-columns", inputs: ["columns", "enableDragAndDrop", "maxVisibleItems"], outputs: ["columnsUpdated"] }, { kind: "ngmodule", type: DataFilterModule }, { kind: "component", type: i3.DataFilterComponent, selector: "lib-data-filter", inputs: ["columns", "data"], outputs: ["filterApplied", "resetFilter"] }, { kind: "ngmodule", type: DataSortModule }, { kind: "component", type: i3.DataSortComponent, selector: "lib-data-sort", inputs: ["columns", "data", "enableDragAndDrop"], outputs: ["sortApplied", "resetFilter"] }, { kind: "ngmodule", type: DataXportModule }, { kind: "component", type: i3.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "ngmodule", type: CardDataViewModule }, { kind: "component", type: i3.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "useVirtualScroll", "virtualScrollItemSize", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i3.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i3.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i3.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i3.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: UserRequestApprovalTableComponent, selector: "lib-user-request-approval-table", inputs: ["requests", "columns", "isLoading", "showDelete"], outputs: ["view", "delete"] }, { kind: "component", type: UserRequestApprovalCardComponent, selector: "lib-user-request-approval-card", inputs: ["request", "selected"] }, { kind: "component", type: UserRequestApprovalFormComponent, selector: "lib-user-request-approval-form", inputs: ["request", "roles", "showDelete"], outputs: ["approve", "reject", "deleteRequest", "switchToTable"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-request-approval', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"space-y-8\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: false,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\"\n  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data()\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"status\">\n          <ng-template #cell let-value>\n            <lib-user-access-request-status-badge\n              [status]=\"value\"\n            ></lib-user-access-request-status-badge>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value let-deleteRow>\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"openDetailView(value)\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n              <!-- <button (click)=\"openDetailView(value)\">Open</button>\n              <button (click)=\"selected = cardData[rowIndex]; vdv.toggleView()\">\n                Switch\n              </button> -->\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n          <!-- <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template> -->\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        (loadMoreClick)=\"loadMore()\"\n        #vdcv\n        dataId=\"MailAddress\"\n        border=\"5px\"\n        [cardDataList]=\"cardData()\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"20px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"cardData()\"\n          >\n            <ng-template #card let-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div\n                  (click)=\"currentData = vdcv.onItemClick(item)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n                >\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"flex-1 flex items-end gap-y-2 gap-x-4 p-4\">\n                    <div class=\"flex-1 space-y-2\">\n                      <span\n                        class=\"font-semibold text-[#404040] flex-1 truncate\"\n                        >{{ item.title }}</span\n                      >\n\n                      <p class=\"flex items-center my-1 gap-1\">\n                        <label for=\"phone\" class=\"text-[10px] font-light\"\n                          >Medium:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.SignupType\n                        }}</span>\n                      </p>\n                    </div>\n\n                    <div class=\"grid gap-y-1\">\n                      <!-- <p class=\"grid\">\n                        <label\n                          for=\"role\"\n                          class=\"text-[10px] font-light text-[#404040]\"\n                          >Medium:</label\n                        >\n                        <span id=\"role\" class=\"text-sm font-medium\">{{\n                          item.data?.SignupType\n                        }}</span>\n                      </p> -->\n\n                      <lib-user-access-request-status-badge\n                        [status]=\"item.data.RequestStatus\"\n                      ></lib-user-access-request-status-badge>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <lib-user-request-form\n              [roles]=\"roles()\"\n              [showDelete]=\"showDelete\"\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onDeleteRequest)=\"onDelete($event)\"\n              (onApproval)=\"onApprove($event)\"\n            ></lib-user-request-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div\n            [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-end': true,\n            }\"\n          >\n            <!-- <verbena-button\n              *ngIf=\"!vdcv.hasCurrentItem()\"\n              [fontWeight]=\"'bold'\"\n              [bgColor]=\"'#8E8D87'\"\n              [borderRadius]=\"'4px'\"\n              [textColor]=\"'#fff'\"\n              [pd]=\"'9.79px 37.28px'\"\n              [text]=\"'Delete'\"\n            >\n            </verbena-button> -->\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData().length }} records loaded</span\n              >\n              <button\n                (click)=\"loadMore()\"\n                class=\"load-more view-links text-[#3479E9] underline\"\n              >\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (filtersApplied)=\"onFilterSet($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-xport\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data()\"\n        (exportDataEvent)=\"handleExport($event)\"\n      >\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end\">\n    <!-- <div class=\"message-log-button-container flex justify-between\">\n      <verbena-button\n        [fontWeight]=\"'bold'\"\n        [bgColor]=\"'#8E8D87'\"\n        [borderRadius]=\"'4px'\"\n        [textColor]=\"'#fff'\"\n        [pd]=\"'9.79px 37.28px'\"\n        [text]=\"'Delete'\"\n      >\n      </verbena-button>\n    </div> -->\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData().length }} records loaded</span>\n      <button\n        (click)=\"loadMore()\"\n        class=\"load-more view-links text-[#3479E9] underline\"\n      >\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-\\[100\\%\\]{height:100%}.h-\\[max-content\\]{height:-moz-max-content;height:max-content}.h-full{height:100%}.w-3{width:.75rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity, 1))}.border-secondary-200{border-color:#d7dbe6}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity, 1))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity, 1))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity, 1))}.bg-secondary-200{background-color:#d7dbe6}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.\\!text-\\[10px\\]{font-size:10px!important}.text-2xl{font-size:1.5rem;line-height:2rem}.text-\\[10px\\]{font-size:10px}.text-\\[12px\\]{font-size:12px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.lowercase{text-transform:lowercase}.leading-6{line-height:1.5rem}.leading-\\[12\\.1px\\]{line-height:12.1px}.leading-\\[16\\.6px\\]{line-height:16.6px}.leading-\\[19\\.5px\\]{line-height:19.5px}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))}.text-\\[\\#3479E9\\]{--tw-text-opacity: 1;color:rgb(52 121 233 / var(--tw-text-opacity, 1))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.view-links{color:#3479e9;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.UtilService }, { type: i1.EnvironmentService }, { type: i1.HttpWebRequestService }, { type: UserAccessRequestFacade }], propDecorators: { showDelete: [{
+            args: [{ selector: 'lib-user-request-approval', standalone: true, imports: [
+                        CommonModule,
+                        DataViewModule,
+                        DataColumnsModule,
+                        DataFilterModule,
+                        DataSortModule,
+                        DataXportModule,
+                        CardDataViewModule,
+                        UserRequestApprovalTableComponent,
+                        UserRequestApprovalCardComponent,
+                        UserRequestApprovalFormComponent,
+                    ], providers: [
+                        UserAccessRequestFacade,
+                        UserAccessRequestState,
+                        UserAccessRequestService,
+                        SearchHandlerService,
+                    ], template: "<div class=\"user-request-approval-page space-y-8\">\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isCreate: false,\n      isToggle: true,\n      isImport: false,\n    }\" [selectedColumnCount]=\"(facade.visibleColumns$ | async)?.length ?? 0\"\n    [selectedSortCount]=\"(facade.sorts$ | async)?.length ?? 0\"\n    [selectedFilterTableCount]=\"(facade.filters$ | async)?.length ?? 0\"\n    (onSearchChange)=\"onSearch($event.value)\">\n\n    <!-- Table View -->\n    <div table-content>\n      <lib-user-request-approval-table [requests]=\"(facade.items$ | async) ?? []\"\n        [columns]=\"(facade.visibleColumns$ | async) ?? []\" [isLoading]=\"(facade.isLoading$ | async) ?? false\"\n        [showDelete]=\"showDelete\" (view)=\"onViewRequest($event)\" (delete)=\"onDeleteFromTable($event)\">\n      </lib-user-request-approval-table>\n    </div>\n\n    <!-- Card View -->\n    <div card-content>\n      <verben-card-data-view #vdcv [cardDataList]=\"facade.cardData()\" borderRadius=\"12px\" dataId=\"MailAddress\"\n        [border]=\"'5px'\" rbgColor=\"var(--vbn-color-surface-alt)\" mg=\"20px\">\n\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"facade.cardData()\">\n            <ng-template #card let-item>\n              <div (click)=\"requestCardClicked(vdcv.onItemClick(item))\" class=\"cursor-pointer h-[max-content]\">\n                <lib-user-request-approval-card [request]=\"item.data\" [selected]=\"item.selected\">\n                </lib-user-request-approval-card>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <lib-user-request-approval-form [request]=\"facade.currentCardData()?.data ?? facade.emptyRequest\"\n              [roles]=\"(facade.roles$ | async) ?? []\" [showDelete]=\"showDelete\" (approve)=\"onApprove($event)\"\n              (reject)=\"onReject($event)\" (deleteRequest)=\"onDeleteRequest($event)\"\n              (switchToTable)=\"vdv.toggleView()\">\n            </lib-user-request-approval-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div class=\"flex gap-2 items-center justify-end\">\n            <div class=\"flex justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ (facade.items$ | async)?.length }} records loaded</span>\n              <button class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\"\n                [disabled]=\"(facade.isLoading$ | async) ?? false\" (click)=\"onLoadMore()\">Load More</button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n\n    <!-- Column Selector -->\n    <div column-content>\n      <lib-data-columns [columns]=\"facade.getColumns()\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n\n    <!-- Filter -->\n    <div filter-content>\n      <lib-data-filter [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"\n        (filterApplied)=\"onFilterApplied($event)\"></lib-data-filter>\n    </div>\n\n    <!-- Sort -->\n    <div sort-content>\n      <lib-data-sort [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"\n        (sortApplied)=\"onSortApplied($event)\"></lib-data-sort>\n    </div>\n\n    <!-- Export -->\n    <div export-content>\n      <lib-data-xport [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"></lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <!-- Table View Load More -->\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end mt-4 px-4\">\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ (facade.items$ | async)?.length }} records loaded</span>\n      <button class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\"\n        [disabled]=\"(facade.isLoading$ | async) ?? false\" (click)=\"onLoadMore()\">Load More</button>\n    </div>\n  </div>\n</div>\n", styles: [".user-request-approval-page{width:100%}.paginator-text{color:var(--vbn-color-text-muted);font-size:.875rem}\n"] }]
+        }], ctorParameters: () => [{ type: UserAccessRequestFacade }], propDecorators: { showDelete: [{
                 type: Input
+            }], vdv: [{
+                type: ViewChild,
+                args: ['vdv']
             }], cardDataView: [{
                 type: ViewChild,
                 args: ['vdcv']
-            }], dataView: [{
-                type: ViewChild,
-                args: ['vdv']
             }] } });
 
+/**
+ * Backward-compatibility shim. The components are standalone; this module keeps
+ * the historical `LibUserRequestApprovalModule` name so existing NgModule-based
+ * consumers keep working after the rebuild.
+ */
 class LibUserRequestApprovalModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, declarations: [UserRequestApprovalComponent,
-            UserRequestFormComponent,
-            UserAccessRequestStatusBadgeComponent], imports: [CommonModule,
-            VerbenDialogueModule,
-            DataTableModule,
-            CardModule,
-            SvgModule,
-            DataViewModule,
-            CardDataViewModule,
-            SortTableModule,
-            VisibleColumnModule,
-            TableFilterModule,
-            DataExportModule,
-            DataXportModule,
-            FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            VerbenaBadgeModule,
-            DropDownModule], exports: [UserRequestApprovalComponent,
-            UserAccessRequestStatusBadgeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, imports: [CommonModule,
-            VerbenDialogueModule,
-            DataTableModule,
-            CardModule,
-            SvgModule,
-            DataViewModule,
-            CardDataViewModule,
-            SortTableModule,
-            VisibleColumnModule,
-            TableFilterModule,
-            DataExportModule,
-            DataXportModule,
-            FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            VerbenaBadgeModule,
-            DropDownModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, imports: [UserRequestApprovalComponent, UserAccessRequestStatusBadgeComponent], exports: [UserRequestApprovalComponent, UserAccessRequestStatusBadgeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, imports: [UserRequestApprovalComponent, UserAccessRequestStatusBadgeComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        UserRequestApprovalComponent,
-                        UserRequestFormComponent,
-                        UserAccessRequestStatusBadgeComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        VerbenDialogueModule,
-                        DataTableModule,
-                        CardModule,
-                        SvgModule,
-                        DataViewModule,
-                        CardDataViewModule,
-                        SortTableModule,
-                        VisibleColumnModule,
-                        TableFilterModule,
-                        DataExportModule,
-                        DataXportModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        VerbenaInputModule,
-                        VerbenaButtonModule,
-                        VerbenaBadgeModule,
-                        DropDownModule,
-                    ],
-                    providers: [],
-                    exports: [
-                        UserRequestApprovalComponent,
-                        UserAccessRequestStatusBadgeComponent,
-                    ],
+                    imports: [UserRequestApprovalComponent, UserAccessRequestStatusBadgeComponent],
+                    exports: [UserRequestApprovalComponent, UserAccessRequestStatusBadgeComponent],
                 }]
         }] });