verben-authentication-ui 1.0.13 → 1.0.15

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

@@ -0,0 +1,1021 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, Component, Input, Output, signal, computed, ChangeDetectionStrategy, ViewChild, NgModule } from '@angular/core';
+import * as i3 from 'verben-ng-ui';
+import { DataFilterType, DataTableModule, CardModule, SvgModule, DataViewModule, CardDataViewModule, SortTableModule, VisibleColumnModule, TableFilterModule, DataExportModule, DataXportModule, VerbenaInputModule, VerbenaButtonModule, VerbenaBadgeModule, DropDownModule } from 'verben-ng-ui';
+import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil, lastValueFrom } from 'rxjs';
+import { SearchPropertyValueType, SortDirection, SearchOperator, SearchPropertySign, UserAccessRequestStatus } from 'verben-authentication-ui/src/lib/models';
+import * as i1 from 'verben-authentication-ui/src/lib/services';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i1$1 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+const columns = [
+    {
+        id: 'createdAt',
+        header: 'CREATED',
+        accessorKey: 'CreatedAt',
+    },
+    {
+        id: 'user',
+        header: 'NAME',
+        accessorFn: (row) => `${row.FirstName} ${row.LastName}`,
+    },
+    {
+        id: 'mail',
+        header: 'E-MAIL',
+        accessorKey: 'MailAddress',
+    },
+    {
+        id: 'role',
+        header: 'ROLE',
+        accessorFn: (row) => row.Role?.Name,
+    },
+    {
+        id: 'status',
+        header: 'STATUS',
+        accessorKey: 'RequestStatus',
+    },
+    { id: 'actions', header: 'Actions', accessorKey: 'MailAddress' },
+];
+
+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',
+        },
+        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,
+    },
+};
+
+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;
+    BASE_URL = 'User';
+    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 = `${this.BASE_URL}/GetUserAccessRequests/${skip}/${limit}/${sortParam}/${sortOrder}`;
+        return this.httpService.get(url);
+    }
+    getRoles() {
+        const url = `Role/GetRoles/0/0`;
+        return this.httpService.get(url);
+    }
+    getTags() {
+        const url = `User/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 = `${this.BASE_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 = `${this.BASE_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 = `${this.BASE_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 = `${this.BASE_URL}/UserAccessRequestAction/${isApproval}`;
+        return this.httpService.post(url, requests);
+    }
+    /**
+     * Delete multiple user access requests
+     * @param requestIds Array of request IDs to delete
+     * @returns Observable containing the delete operation result
+     */
+    deleteUserAccessRequests(requestIds) {
+        const url = `${this.BASE_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();
+            }
+        });
+    }
+    destroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    isUpdating$() {
+        return this.userAccessRequestState.isUpdating$();
+    }
+    getRequests$() {
+        return this.userAccessRequestState.getRequests$();
+    }
+    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);
+        }
+    }
+    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);
+        }
+    }
+    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);
+        }
+    }
+    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);
+        }
+    }
+    updateQueryParams(params) {
+        this.userAccessRequestState.updateQueryParams(params);
+        this.loadRequests();
+    }
+    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);
+        }
+    }
+    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);
+        }
+    }
+    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);
+        }
+    }
+    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);
+        }
+    }
+    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' });
+}
+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 = {}));
+
+class UserRequestFormComponent {
+    fb;
+    roles = [];
+    get currentData() {
+        return this._currentData;
+    }
+    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();
+        }
+    }
+    _currentData = null;
+    switchView = new EventEmitter();
+    onApproval = 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
+        console.log('Delete requested');
+    }
+    disableProcessing() {
+        return (this.currentData?.data?.RequestStatus !==
+            UserAccessRequestStatus.Pending || !this.form.valid);
+    }
+    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", currentData: "currentData" }, outputs: { switchView: "switchView", onApproval: "onApproval" }, 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\">\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    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\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</form>\n", styles: [""], dependencies: [{ 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: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["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: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["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: i3.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestFormComponent, 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\">\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    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\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</form>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { roles: [{
+                type: Input
+            }], currentData: [{
+                type: Input
+            }], switchView: [{
+                type: Output
+            }], onApproval: [{
+                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' };
+        }
+    }
+    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: 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', 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
+            }] } });
+
+class UserRequestApprovalComponent {
+    cdr;
+    userAccessRequestFacade;
+    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,
+    userAccessRequestFacade) {
+        this.cdr = cdr;
+        this.userAccessRequestFacade = userAccessRequestFacade;
+    }
+    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
+        }
+    }
+    ngOnDestroy() {
+        this.userAccessRequestFacade.destroy();
+    }
+    handleSearch(event) {
+        this.userAccessRequestFacade.search(event.value);
+    }
+    async loadMore() {
+        try {
+            await this.userAccessRequestFacade.loadMore();
+        }
+        catch (error) {
+            // Handle error
+        }
+    }
+    // To search with parameter:
+    async searchRequests(param) {
+        try {
+            await this.userAccessRequestFacade.loadRequestsWithParam(param);
+        }
+        catch (error) {
+            // Handle error
+        }
+    }
+    async onApprove(approvalData) {
+        const data = this.data().find(({ MailAddress }) => MailAddress === approvalData.email);
+        if (data) {
+            await this.userAccessRequestFacade.approveRequest({
+                ...data,
+                RoleID: approvalData.role,
+            });
+        }
+    }
+    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();
+        }
+    }
+    getCardDataByMailAddress(mailAddress) {
+        return this.cardData().find(({ data }) => data.MailAddress === mailAddress);
+    }
+    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);
+        }
+    }
+    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);
+        }
+    }
+    onSelectionChange(selectedRows) {
+        console.log('Selection changed:', selectedRows);
+        // Handle the selection change
+    }
+    /**
+     * Copied over from card view doc until I understand usage
+     */
+    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;
+    }
+    onSortUpdated(updatedSorts) {
+        this.onSortChange(false);
+        this.selectedSortCount = updatedSorts.length;
+        console.log(updatedSorts);
+    }
+    onStateChange(event) {
+        console.log(`State changed for ${event.key}:`, event.value);
+    }
+    onFilterSet(event) {
+        console.log(event);
+        this.userAccessRequestFacade.filter(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalComponent, deps: [{ token: i0.ChangeDetectorRef }, { 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", 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              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\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))}.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-\\[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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { 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: "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", "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", "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: i3.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: i3.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: i3.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: i3.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", "currentData"], outputs: ["switchView", "onApproval"] }, { kind: "component", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: ["status"] }, { kind: "pipe", type: i2.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+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              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\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))}.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-\\[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: UserAccessRequestFacade }], propDecorators: { cardDataView: [{
+                type: ViewChild,
+                args: ['vdcv']
+            }], dataView: [{
+                type: ViewChild,
+                args: ['vdv']
+            }] } });
+
+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,
+            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,
+            DataTableModule,
+            CardModule,
+            SvgModule,
+            DataViewModule,
+            CardDataViewModule,
+            SortTableModule,
+            VisibleColumnModule,
+            TableFilterModule,
+            DataExportModule,
+            DataXportModule,
+            FormsModule,
+            ReactiveFormsModule,
+            VerbenaInputModule,
+            VerbenaButtonModule,
+            VerbenaBadgeModule,
+            DropDownModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        UserRequestApprovalComponent,
+                        UserRequestFormComponent,
+                        UserAccessRequestStatusBadgeComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        DataTableModule,
+                        CardModule,
+                        SvgModule,
+                        DataViewModule,
+                        CardDataViewModule,
+                        SortTableModule,
+                        VisibleColumnModule,
+                        TableFilterModule,
+                        DataExportModule,
+                        DataXportModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        VerbenaInputModule,
+                        VerbenaButtonModule,
+                        VerbenaBadgeModule,
+                        DropDownModule,
+                    ],
+                    providers: [],
+                    exports: [
+                        UserRequestApprovalComponent,
+                        UserAccessRequestStatusBadgeComponent,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibUserRequestApprovalModule, UserAccessRequestService, UserAccessRequestStatusBadgeComponent, UserRequestApprovalComponent };
+//# sourceMappingURL=verben-authentication-ui-src-lib-components-user-request-approval.mjs.map