verben-authentication-ui 1.0.13 → 1.0.15

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

@@ -0,0 +1,894 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, Injectable, signal, ViewChild, NgModule } from '@angular/core';
+import { Status, ErrorResponse, ObjectState, ConditionOptions } from 'verben-authentication-ui/src/lib/models';
+import * as i7 from 'verben-ng-ui';
+import { DataFilterType, ConditionalOptions, DataTableModule, CardModule, SvgModule, DataViewModule, CardDataViewModule, SortTableModule, VisibleColumnModule, TableFilterModule, DataExportModule, DataXportModule, VerbenaInputModule, VerbenaButtonModule, VerbenaBadgeModule, DropDownModule, VerbenaSwitchModule } from 'verben-ng-ui';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Subject } from 'rxjs';
+import * as i1$1 from '@angular/router';
+import * as i4 from 'verben-authentication-ui/src/lib/services';
+import * as i3 from 'verben-authentication-ui/src/lib/components/user-request-approval';
+import { LibUserRequestApprovalModule } from 'verben-authentication-ui/src/lib/components/user-request-approval';
+import * as i6 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+
+const columns = [
+    {
+        id: 'select',
+        header: '',
+    },
+    {
+        id: 'createdAt',
+        header: 'CREATED',
+        accessorKey: 'CreatedAt',
+    },
+    {
+        id: 'user',
+        header: 'NAME',
+        accessorFn: (row) => `${row.FirstName} ${row.LastName}`,
+        formControlName: 'FirstName',
+    },
+    {
+        id: 'mail',
+        header: 'E-MAIL',
+        accessorKey: 'MailAddress',
+        formControlName: 'MailAddress',
+    },
+    // {
+    //   id: 'address',
+    //   header: 'ADDRESS',
+    //   accessorKey: 'Address',
+    //   formControlName: 'Address',
+    // },
+    {
+        id: 'phone',
+        header: 'PHONE NUMBER',
+        accessorKey: 'PhoneNumber',
+        formControlName: 'PhoneNumber',
+    },
+    {
+        id: 'role',
+        header: 'ROLE',
+        accessorKey: 'Role',
+        formControlName: 'RoleID',
+    },
+    {
+        id: 'status',
+        header: 'STATUS',
+        accessorKey: 'Status',
+        formControlName: 'Status',
+    },
+    {
+        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: '30px',
+    },
+    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,
+    },
+};
+
+class UserManagementFormComponent {
+    fb;
+    // @Input() roles: Role[] = [];
+    // @Input() status: Status[] = [];
+    set currentData(value) {
+        if (value?.data) {
+            this.form.patchValue({
+                MailAddress: value.data.MailAddress || '',
+                FirstName: value.data.FirstName || '',
+                PhoneNumber: value.data.PhoneNumber || '',
+                // Address: value.data.Address || '',
+                RoleID: value.data.RoleID || '',
+                Tags: value.data.Tags || [],
+                Status: value.data.Status || Status.Active,
+            });
+        }
+        else {
+            this.form.reset();
+        }
+    }
+    roles = [];
+    tags = [];
+    switchView = new EventEmitter();
+    onFormSave = new EventEmitter();
+    form;
+    statusOptions = Object.values(Status);
+    constructor(fb) {
+        this.fb = fb;
+        this.form = this.fb.group({
+            MailAddress: ['', { readonly: true }],
+            FirstName: ['', { readonly: true }],
+            PhoneNumber: ['', { readonly: true }],
+            // Address: ['', { readonly: true }],
+            Status: ['', { readonly: true }],
+            RoleID: [''],
+            Tags: [[]],
+        });
+    }
+    ngOnInit() { }
+    onSave() {
+        if (this.form.valid) {
+            // Emit save event with form value
+            console.log('Form saved:', this.form.value);
+            this.onFormSave.emit(this.form.value);
+        }
+    }
+    onDelete() {
+        // Emit delete event
+        console.log('Delete requested');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserManagementFormComponent, selector: "lib-user-request-form", inputs: { currentData: "currentData", roles: "roles", tags: "tags" }, outputs: { switchView: "switchView", onFormSave: "onFormSave" }, 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    label=\"Name:\"\n    name=\"FirstName\"\n    type=\"text\"\n    formControlName=\"FirstName\"\n  />\n  <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n  />\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"E-Mail Address:\"\n    [type]=\"'email'\"\n    formControlName=\"MailAddress\"\n  />\n  <!-- <verbena-input\n    label=\"Address\"\n    name=\"Address\"\n    type=\"text\"\n    formControlName=\"Address\"\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  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n\n    <verben-drop-down\n      label=\"Tags\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"true\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"tags\"\n      id=\"tags\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      formControlName=\"Tags\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"false\"\n      [showClear]=\"false\"\n      placeholder=\"\"\n      [(options)]=\"statusOptions\"\n      id=\"status\"\n      formControlName=\"Status\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.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: i7.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: UserManagementFormComponent, 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    label=\"Name:\"\n    name=\"FirstName\"\n    type=\"text\"\n    formControlName=\"FirstName\"\n  />\n  <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n  />\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"E-Mail Address:\"\n    [type]=\"'email'\"\n    formControlName=\"MailAddress\"\n  />\n  <!-- <verbena-input\n    label=\"Address\"\n    name=\"Address\"\n    type=\"text\"\n    formControlName=\"Address\"\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  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n\n    <verben-drop-down\n      label=\"Tags\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"true\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"tags\"\n      id=\"tags\"\n      optionLabel=\"Name\"\n      optionValue=\"Code\"\n      formControlName=\"Tags\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"false\"\n      [showClear]=\"false\"\n      placeholder=\"\"\n      [(options)]=\"statusOptions\"\n      id=\"status\"\n      formControlName=\"Status\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n</form>\n" }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { currentData: [{
+                type: Input
+            }], roles: [{
+                type: Input
+            }], tags: [{
+                type: Input
+            }], switchView: [{
+                type: Output
+            }], onFormSave: [{
+                type: Output
+            }] } });
+
+class UserManagementService {
+    httpService;
+    // private readonly BASE_URL = 'https://auth.white360.net/User';
+    constructor(httpService) {
+        this.httpService = httpService;
+    }
+    /**
+     * Get users 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 list of users
+     */
+    async getUsers(skip, limit, sortParam, sortOrder) {
+        // var response : User[] | ErrorResponse;
+        const url = `User/GetUsers/${skip}/${limit}/${sortParam}/${sortOrder}`;
+        const res = await this.httpService.get(url);
+        if (res instanceof ErrorResponse) {
+            return res;
+        }
+        else {
+            return res.Result;
+        }
+    }
+    /**
+     * Get users with an additional search 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 list of users
+     */
+    async getUsersWithParam(param, skip, limit, sortParam, sortOrder) {
+        const url = `User/GetUserWithParam/${param}/${skip}/${limit}/${sortParam}/${sortOrder}`;
+        return (await this.httpService.get(url));
+    }
+    async getRealUsers(role, skip, limit, sortParam, sortOrder) {
+        let url;
+        if (role) {
+            // Role is provided, use the "GetUserWithParam" endpoint
+            url = `User/GetUserWithParam/${role}/${skip}/${limit}/${sortParam}/${sortOrder}`;
+        }
+        else {
+            // Role is null, use the "GetUsers" endpoint
+            url = `User/GetUsers/${skip}/${limit}/${sortParam}/${sortOrder}`;
+        }
+        const res = await this.httpService.get(url);
+        if (res instanceof ErrorResponse) {
+            return res;
+        }
+        else {
+            return res;
+        }
+    }
+    /**
+     * Save multiple users
+     * @param users Array of users to save
+     * @returns Promise containing the save operation result
+     */
+    saveUsers(users) {
+        const url = `User/SaveUsers`;
+        return this.httpService.post(url, users);
+    }
+    /**
+     * Delete multiple users
+     * @param userIds Array of user IDs to delete
+     * @returns Observable containing the delete operation result
+     */
+    deleteUsers(userIds) {
+        const url = `User/DeleteUsers`;
+        return this.httpService.delete(`${url}?data=${userIds.join(',')}`);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementService, deps: [{ token: i4.HttpWebRequestService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i4.HttpWebRequestService }] });
+
+class UserStatusBadgeComponent {
+    status = Status.Active;
+    badgeConfig() {
+        switch (this.status) {
+            case Status.Active:
+                return { bgColor: '#CAE1CC', textColor: '#4ABB54', label: 'Active' };
+            case Status.InActive:
+                return { bgColor: '#FFDFDF', textColor: '#EB5757', label: 'InActive' };
+            default:
+                return { bgColor: '#827C7C', textColor: '#C3C3C3', label: 'Unknown' };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserStatusBadgeComponent, selector: "lib-user-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: i7.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: UserStatusBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-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
+            }] } });
+
+var DateFilterTypes;
+(function (DateFilterTypes) {
+    DateFilterTypes["Before"] = "LT";
+    DateFilterTypes["On"] = "EQ";
+    DateFilterTypes["After"] = "GT";
+})(DateFilterTypes || (DateFilterTypes = {}));
+class UserManagementComponent {
+    route;
+    userManagementService;
+    userRole;
+    server;
+    utilService;
+    envSvc;
+    fb;
+    cardDataView;
+    dataView;
+    childComponent;
+    currentSearchTerm = '';
+    allColumns = columns;
+    filteredColumns = columns;
+    skip = 0;
+    users = [];
+    searchTerm$ = new Subject();
+    searchDebounceTime = 500;
+    pageSize = 1;
+    pageState = null;
+    errorMessage = '';
+    appliedFilters = false;
+    isLoading = false;
+    hasMore = true;
+    limit = 20;
+    sortParam = 'name';
+    sortOrder = 'asc';
+    Roles = [];
+    Tags = signal([]);
+    dataFit = {
+        PageSize: 1,
+        Skip: 0,
+        Total: 0,
+        Result: [],
+        LastItem: [''],
+        IsLoadingResults: false,
+    };
+    currentFilters = [];
+    currentSorts = [];
+    role = '';
+    cardContextHistory = [];
+    param;
+    formGroupConfig;
+    statuses = Object.values(Status);
+    constructor(route, userManagementService, userRole, server, utilService, envSvc, fb) {
+        this.route = route;
+        this.userManagementService = userManagementService;
+        this.userRole = userRole;
+        this.server = server;
+        this.utilService = utilService;
+        this.envSvc = envSvc;
+        this.fb = fb;
+        this.formGroupConfig = signal({
+            controls: {
+                MailAddress: this.fb.control(''),
+                FirstName: this.fb.control(''),
+                PhoneNumber: this.fb.control(''),
+                Address: this.fb.control(''),
+                RoleID: this.fb.control(''),
+                Tags: this.fb.control([]),
+                Status: this.fb.control(''),
+            },
+            // validatorOrOpts: null,
+            // asyncValidator: null,
+        });
+    }
+    async ngOnInit() {
+        this.getRoles();
+        this.getTags();
+        this.route.paramMap.subscribe((params) => {
+            this.role = params.get('role') || ''; // Default to an empty string if no role
+            this.fetchUsers();
+        });
+    }
+    cardData = [];
+    data = [];
+    async fetchUsers(sortValue = 'CreatedAt', order = 'asc') {
+        this.isLoading = true;
+        this.utilService.sendBI(true);
+        try {
+            const res = await this.userManagementService.getRealUsers(this.role, this.skip, this.limit, this.sortParam, this.sortOrder);
+            this.utilService.sendBI(false);
+            if (res instanceof ErrorResponse) {
+                // Handle error response
+                console.error('Error fetching logs:', res);
+            }
+            else {
+                const response = res;
+                this.dataFit = response;
+                this.users = [...this.users, ...response.Result];
+                this.cardData = this.formatCardData(this.users);
+                this.skip += this.pageSize;
+                this.hasMore = this.skip < response.Total;
+            }
+        }
+        catch (error) {
+            console.error('Error:', error);
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    async getRoles() {
+        this.utilService.sendBI(true);
+        try {
+            const res = await this.userRole.getRoles();
+            this.utilService.sendBI(false);
+            if (res instanceof ErrorResponse) {
+                console.error('Error fetching roles:', res);
+                return undefined;
+            }
+            const response = res;
+            this.Roles = response.Result;
+        }
+        catch (error) {
+            console.error('Error fetching roles:', error);
+            return undefined;
+        }
+    }
+    async getTags() {
+        this.utilService.sendBI(true);
+        try {
+            const res = await this.userRole.getTags();
+            this.utilService.sendBI(false);
+            if (res instanceof ErrorResponse) {
+                console.error('Error fetching roles:', res);
+                return undefined;
+            }
+            const response = res;
+            this.Tags.set(response.Result);
+        }
+        catch (error) {
+            console.error('Error fetching roles:', error);
+            return undefined;
+        }
+    }
+    handleRoleId(value) {
+        const matchedRole = this.Roles.filter((role) => role.Name === value);
+        return matchedRole[0]?.Code;
+    }
+    /**
+     * Format users into CardData for the UI library
+     * @param users Array of users to format
+     * @returns Array of CardData
+     */
+    formatCardData(users) {
+        return users.map((user) => ({
+            selected: false, // Default selection state
+            title: `${user.FirstName} ${user.LastName}`, // Display user's name as title
+            data: { ...user }, // Pass the entire user object
+            body: [
+                { title: 'Name', value: `${user.FirstName} ${user.LastName}` },
+                { title: 'E-Mail Address', value: user.MailAddress },
+                { title: 'Phone Number', value: user.PhoneNumber || 'N/A' },
+            ],
+            children: [], // Add child data if necessary
+        }));
+    }
+    columns = columns;
+    styles = baseStyle;
+    selectedParent;
+    basicOption;
+    selectedOption = [];
+    selectedOptionTwo = [];
+    selectedOptionThree;
+    missingObject;
+    // clearLogs(sortValue: string = 'CreatedAt', order: string = 'asc') {
+    //   this.User = []; // Clear the logs array
+    //   this.skip = 0; // Reset the skip value
+    //   this.hasMore = true; // Reset the flag to allow fetching more logs
+    //   this.appliedFilters = false;
+    //   this.fetchUsers();
+    // }
+    // Grid view properties
+    isGridView = true;
+    currentData;
+    selectedColumnCount = 0;
+    selectedFilterTableCount = 0;
+    isOPen = true;
+    selectedSortCount = 0;
+    showFilter = false;
+    searchTerm = '';
+    showColumn = false;
+    showSort = false;
+    selectedAll = false;
+    visibleColumns = columns.map((col) => ({
+        checked: false,
+        name: typeof col.header === 'string' ? col.header : col.id,
+        type: DataFilterType.Bool,
+    }));
+    filterArray = [
+        { name: 'FirstName', type: DataFilterType.String, checked: false },
+        { name: 'LastName', type: DataFilterType.String, checked: false },
+        { name: 'MailAddress', type: DataFilterType.String, checked: false },
+        { name: 'Status', type: DataFilterType.String, checked: false },
+        { name: 'PhoneNumber', type: DataFilterType.String, checked: false },
+        { name: 'CreatedAt', type: DataFilterType.Date, checked: false },
+        { name: 'Role', type: DataFilterType.String, 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: false },
+    ];
+    testParents = [
+        { Id: '1', Name: 'Manager' },
+        { Id: '2', Name: 'Administrator' },
+        { Id: '3', Name: 'Jelom' },
+    ];
+    getParentLabel(context) {
+        console.log({ MissingObj: this.missingObject });
+        return this.missingObject.Name;
+    }
+    onSave() {
+        if (this.childComponent.form.valid) {
+            // const userData: User = this.childComponent.form.value;
+            // console.log('Payload:', [userData]); // Log the payload to check its structure
+            this.utilService.sendBI(true);
+            this.userManagementService
+                .saveUsers([
+                {
+                    ...this.currentData?.data,
+                    ...this.childComponent.form.value,
+                    DataState: this.currentData?.data.DataState === ObjectState.Unchanged
+                        ? ObjectState.Changed
+                        : this.currentData?.data.DataState,
+                },
+            ])
+                .then((result) => {
+                if (result instanceof ErrorResponse) {
+                }
+                else {
+                    this.utilService.showSuccess('User saved successfully');
+                }
+            }, (error) => {
+                console.error('Unexpected error saving user:', error);
+            })
+                .finally(() => {
+                this.utilService.sendBI(false);
+            });
+            console.log(this.childComponent.form.value);
+        }
+        else {
+            console.error('Form is invalid');
+        }
+    }
+    async onDataSave(event) {
+        const payload = {
+            ...this.users[event.index],
+            ...event.data,
+            DataState: this.users[event.index]?.DataState === ObjectState.Unchanged
+                ? ObjectState.Changed
+                : ObjectState.New,
+        };
+        this.utilService.sendBI(true);
+        this.userManagementService
+            .saveUsers([payload])
+            .then((result) => {
+            if (result instanceof ErrorResponse) {
+            }
+            else {
+                if (result[0]) {
+                    this.users = this.users.map((user, index) => {
+                        if (index === event.index)
+                            return result[0];
+                        return user;
+                    });
+                }
+                this.utilService.showSuccess('User saved successfully');
+            }
+        }, (error) => {
+            console.error('Unexpected error saving user:', error);
+        })
+            .finally(() => {
+            this.utilService.sendBI(false);
+        });
+    }
+    onDelete() {
+        console.log('Child form delete triggered');
+        // Perform delete logic here
+    }
+    onDropdownChange(event) {
+        // console.log({
+        //   'Test Parent Value': this.selectedParent,
+        //   ...
+        // });
+    }
+    onSelectionChange(selectedRows) {
+        console.log('Selection changed:', selectedRows);
+        // Handle the selection change
+    }
+    handleExport(exportedData) {
+        console.log('Exported data:', exportedData);
+        this.downloadCSV(exportedData);
+    }
+    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);
+        }
+    }
+    getCardDataByMailAddress(mailAddress) {
+        console.log('cardData array:', this.cardData);
+        console.log(mailAddress);
+        return this.cardData.find(({ data }) => data?.MailAddress === mailAddress);
+    }
+    openDetailView(mailAddress) {
+        const cardItem = this.getCardDataByMailAddress(mailAddress);
+        console.log(cardItem);
+        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();
+        }
+    }
+    reset() {
+        this.skip = 0;
+        this.pageSize = 20;
+    }
+    clearData() {
+        this.currentData = {};
+    }
+    loadMore() {
+        if (this.hasMore) {
+            this.fetchUsers();
+        }
+    }
+    onColumnChange(event) {
+        this.showColumn = event;
+    }
+    onSortChange(event) {
+        this.showSort = event;
+        console.log(event);
+    }
+    onColumnsUpdated(updatedColumns) {
+        this.onColumnChange(false);
+        this.selectedColumnCount = updatedColumns.length;
+        if (updatedColumns) {
+            // Filter columns to include only visible ones
+            this.filteredColumns = this.columns.filter((col) => this.visibleColumns.find((filter) => filter.name === col.header && filter.checked));
+            // Reorder columns based on the order in visibleColumns
+            const visibleColumnOrder = this.visibleColumns
+                .filter((filter) => filter.checked)
+                .map((filter) => filter.name);
+            this.columns.sort((a, b) => {
+                const indexA = visibleColumnOrder.indexOf(a.header);
+                const indexB = visibleColumnOrder.indexOf(b.header);
+                return indexA - indexB;
+            });
+        }
+    }
+    async postSearch(payload) {
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`User/SearchUsers/0/10/CreatedAt/asc`, payload);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            this.appliedFilters = false;
+            return;
+        }
+        else {
+            this.appliedFilters = true;
+            const response = res;
+            this.dataFit = response;
+            this.users = response.Result;
+            this.cardData = this.formatCardData(this.users);
+        }
+    }
+    onFilterApplied(appliedFilter) {
+        this.showFilter = false;
+        if (Array.isArray(appliedFilter)) {
+            this.selectedFilterTableCount = appliedFilter.length;
+            console.log(appliedFilter);
+            const queryParams = appliedFilter
+                .filter((filter) => filter.checked)
+                .map((filter) => ({
+                PropertyName: filter.name,
+                EntityValue: filter.name === 'Role'
+                    ? this.handleRoleId(filter.value)
+                    : filter.value,
+                Type: filter.type,
+                Operator: 'And',
+                Sign: this.getCondition(filter.condition),
+            }));
+            this.postSearch(queryParams);
+        }
+    }
+    getCondition(value) {
+        switch (value) {
+            case ConditionalOptions.On:
+                return ConditionOptions.On;
+            case ConditionalOptions.After:
+                return ConditionOptions.After;
+            case ConditionalOptions.Before:
+                return ConditionOptions.Before;
+            case ConditionalOptions.NotEqual:
+                return ConditionOptions.NotEqual;
+            default:
+                return undefined; // Explicitly return undefined for invalid cases
+        }
+    }
+    onSortUpdated(updatedSorts) {
+        this.currentSorts = updatedSorts;
+    }
+    async onSearch(event) {
+        this.searchTerm = event.value;
+        this.reset();
+        if (!this.searchTerm) {
+            this.clearLogs('CreatedAt', 'asc');
+            return;
+        }
+        this.isLoading = true;
+        this.utilService.sendBI(true);
+        try {
+            const res = await this.server.get(`User/GetUserWithParam/${this.searchTerm}/${this.skip}/${this.pageSize}/CreatedAt/asc`);
+            this.utilService.sendBI(false);
+            if (res instanceof ErrorResponse) {
+                console.error('Error during search:', res);
+                this.appliedFilters = false;
+            }
+            else {
+                const response = res;
+                this.dataFit = response;
+                this.users = response.Result;
+                this.cardData = this.formatCardData(this.users);
+            }
+        }
+        catch (error) {
+            console.error('Search error:', error);
+            this.appliedFilters = false;
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    clearLogs(sortValue = 'CreatedAt', order = 'asc') {
+        this.users = []; // Clear the logs array
+        this.skip = 0; // Reset the skip value
+        this.hasMore = true; // Reset the flag to allow fetching more logs
+        this.appliedFilters = false;
+        this.fetchUsers(sortValue, order);
+    }
+    onViewChange(isGridView) { }
+    onStateChange(event) {
+        console.log(`State changed for ${event.key}:`, event.value);
+        if (event.key === 'create') {
+            console.log('peace is a boy');
+            // const newUser = this.newItem()
+            // if ( newUser && 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));
+            //     }
+            //   });
+            //   this.currentData = this.cardDataView.onItemClick(newUser);
+            //   // Force change detection if needed
+            //   // this.changeDetectorRef.detectChanges();
+            // }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementComponent, deps: [{ token: i1$1.ActivatedRoute }, { token: UserManagementService }, { token: i3.UserAccessRequestService }, { token: i4.HttpWebRequestService }, { token: i4.UtilService }, { token: i4.EnvironmentService }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserManagementComponent, selector: "lib-user-management", inputs: { searchDebounceTime: "searchDebounceTime", pageSize: "pageSize" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "childComponent", first: true, predicate: UserManagementFormComponent, descendants: true }], ngImport: i0, template: "<div class=\"flex flex-col gap-4 message-log-container\">\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\n      isToggle: true\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"selectedColumnCount\"\n    [selectedSortCount]=\"selectedSortCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    (onSearchChange)=\"onSearch($event)\"\n    [searchValue]=\"searchTerm\"\n    [showFilterChild]=\"showFilter\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    [isTableView]=\"false\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        [data]=\"users\"\n        [columns]=\"filteredColumns\"\n        [formGroupConfig]=\"formGroupConfig()\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        (rowSave)=\"onDataSave($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\n            />\n          </ng-template>\n          <ng-template\n            #header\n            let-allRowsSelected=\"allRowsSelected\"\n            let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"allRowsSelected()\"\n              [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"user\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verbena-input\n              name=\"FirstName\"\n              type=\"text\"\n              [formControl]=\"formControl\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"mail\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verbena-input\n              name=\"MailAddress\"\n              type=\"email\"\n              [formControl]=\"formControl\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"phone\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verbena-input\n              name=\"PhoneNumber\"\n              type=\"tel\"\n              [formControl]=\"formControl\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"address\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verbena-input\n              name=\"Address\"\n              type=\"text\"\n              [formControl]=\"formControl\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"role\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verben-drop-down\n              name=\"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              [formControl]=\"formControl\"\n              class=\"form-control\"\n            >\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template\n            #cell\n            let-value\n            let-deleteRow=\"deleteRow\"\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"toggleRowEdit()\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\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\n            #cellEdit\n            let-value\n            let-deleteRow=\"deleteRow\"\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"toggleRowEdit()\"\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"toggleRowEdit()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <!-- <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n                (click)=\"goToCardView(value)\"\n              ></verben-svg> -->\n            </div>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"status\">\n          <ng-template\n            #cell\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-deleteRow=\"deleteRow\"\n            let-value=\"value\"\n          >\n            <lib-user-status-badge [status]=\"value\"></lib-user-status-badge>\n          </ng-template>\n\n          <ng-template\n            #cellEdit\n            let-rowIndex=\"rowIndex\"\n            let-formControl=\"formControl\"\n          >\n            <verben-drop-down\n              styleClass=\"w-full\"\n              width=\"100%\"\n              [multiselect]=\"false\"\n              placeholder=\"Set status\"\n              [options]=\"statuses\"\n              [formControl]=\"formControl\"\n              class=\"form-control\"\n            >\n            </verben-drop-down>\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=\"0px\"\n        class=\"gap-1\"\n      >\n        <verben-left-card-data-view class=\"m-0 gap-2\">\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                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"vlcd.showChildren(item)\"\n                  [ngClass]=\"vlcd.showToggle(item) ? 'visible' : 'invisible'\"\n                  class=\"items-center flex cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\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\">\n                        <label for=\"phone\" class=\"text-[10px] font-light\"\n                          >Role:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.Role?.Name\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                          >Role</label\n                        >\n                        <span id=\"role\" class=\"text-sm font-medium\">{{\n                          item.data?.Role?.Name\n                        }}</span> -->\n                      </p>\n\n                      <lib-user-status-badge\n                        [status]=\"item.data.Status\"\n                      ></lib-user-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            <div class=\"bg-secondary-100 py-2 flex flex-col gap-20 px-2\">\n              <lib-user-request-form\n                [roles]=\"Roles\"\n                [tags]=\"Tags()\"\n                [currentData]=\"currentData\"\n                (switchView)=\"vdv.toggleView()\"\n              ></lib-user-request-form>\n              <div class=\"flex justify-end bottom-8 left-0 right-0 p-3\">\n                <!-- <verbena-button text=\"Delete\" bgColor=\"#999999\" textColor=\"white\"\n                border=\"1px solid #999999\" (click)=\"onDelete()\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    (click)=\"vdv.toggleView()\"\n                    text=\"Switch To Table\"\n                    styleType=\"ylw-outline\"\n                  ></verbena-button>\n                  <verbena-button\n                    text=\"Save\"\n                    bgColor=\"#FFE681\"\n                    (click)=\"onSave()\"\n                    textColor=\"#404040\"\n                    border=\"1px solid #FFE681\"\n                  >\n                    <!-- (click)=\"\" -->\n                  </verbena-button>\n                </div>\n              </div>\n            </div>\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        [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        (filtersApplied)=\"onFilterApplied($event)\"\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]=\"allColumns\"\n      [data]=\"users\"\n      >\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n  <div\n    *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n    class=\"message-log-button-container flex justify-between\"\n  ></div>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"w-full 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)}.master-only-contanier{margin-top:0!important}.scroll-no::-webkit-scrollbar{width:4px}.scroll-no::-webkit-scrollbar-thumb{background:gray}.justify-pp{justify-content:start!important;margin-top:0!important}.toolbar{margin:0!important}@media screen and (max-width: 1024px){.scroll-no{padding:5px}}.view-links{color:#3479e9;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i7.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i7.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i7.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: i7.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: i7.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i7.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i7.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i7.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i7.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: i7.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: i7.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: i7.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i7.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: i7.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: i7.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"] }, { kind: "component", type: UserManagementFormComponent, selector: "lib-user-request-form", inputs: ["currentData", "roles", "tags"], outputs: ["switchView", "onFormSave"] }, { kind: "component", type: UserStatusBadgeComponent, selector: "lib-user-status-badge", inputs: ["status"] }, { kind: "pipe", type: i6.DatePipe, name: "date" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-management', template: "<div class=\"flex flex-col gap-4 message-log-container\">\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\n      isToggle: true\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"selectedColumnCount\"\n    [selectedSortCount]=\"selectedSortCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    (onSearchChange)=\"onSearch($event)\"\n    [searchValue]=\"searchTerm\"\n    [showFilterChild]=\"showFilter\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    [isTableView]=\"false\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        [data]=\"users\"\n        [columns]=\"filteredColumns\"\n        [formGroupConfig]=\"formGroupConfig()\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n        (rowSave)=\"onDataSave($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\n            />\n          </ng-template>\n          <ng-template\n            #header\n            let-allRowsSelected=\"allRowsSelected\"\n            let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"allRowsSelected()\"\n              [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"user\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verbena-input\n              name=\"FirstName\"\n              type=\"text\"\n              [formControl]=\"formControl\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"mail\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verbena-input\n              name=\"MailAddress\"\n              type=\"email\"\n              [formControl]=\"formControl\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"phone\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verbena-input\n              name=\"PhoneNumber\"\n              type=\"tel\"\n              [formControl]=\"formControl\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"address\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verbena-input\n              name=\"Address\"\n              type=\"text\"\n              [formControl]=\"formControl\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"role\">\n          <ng-template #cellEdit let-formControl=\"formControl\" let-value>\n            <verben-drop-down\n              name=\"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              [formControl]=\"formControl\"\n              class=\"form-control\"\n            >\n            </verben-drop-down>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template\n            #cell\n            let-value\n            let-deleteRow=\"deleteRow\"\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"toggleRowEdit()\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\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\n            #cellEdit\n            let-value\n            let-deleteRow=\"deleteRow\"\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-rowIndex=\"rowIndex\"\n          >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"toggleRowEdit()\"\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"toggleRowEdit()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <!-- <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n                (click)=\"goToCardView(value)\"\n              ></verben-svg> -->\n            </div>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"status\">\n          <ng-template\n            #cell\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-deleteRow=\"deleteRow\"\n            let-value=\"value\"\n          >\n            <lib-user-status-badge [status]=\"value\"></lib-user-status-badge>\n          </ng-template>\n\n          <ng-template\n            #cellEdit\n            let-rowIndex=\"rowIndex\"\n            let-formControl=\"formControl\"\n          >\n            <verben-drop-down\n              styleClass=\"w-full\"\n              width=\"100%\"\n              [multiselect]=\"false\"\n              placeholder=\"Set status\"\n              [options]=\"statuses\"\n              [formControl]=\"formControl\"\n              class=\"form-control\"\n            >\n            </verben-drop-down>\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=\"0px\"\n        class=\"gap-1\"\n      >\n        <verben-left-card-data-view class=\"m-0 gap-2\">\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                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"vlcd.showChildren(item)\"\n                  [ngClass]=\"vlcd.showToggle(item) ? 'visible' : 'invisible'\"\n                  class=\"items-center flex cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\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\">\n                        <label for=\"phone\" class=\"text-[10px] font-light\"\n                          >Role:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.Role?.Name\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                          >Role</label\n                        >\n                        <span id=\"role\" class=\"text-sm font-medium\">{{\n                          item.data?.Role?.Name\n                        }}</span> -->\n                      </p>\n\n                      <lib-user-status-badge\n                        [status]=\"item.data.Status\"\n                      ></lib-user-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            <div class=\"bg-secondary-100 py-2 flex flex-col gap-20 px-2\">\n              <lib-user-request-form\n                [roles]=\"Roles\"\n                [tags]=\"Tags()\"\n                [currentData]=\"currentData\"\n                (switchView)=\"vdv.toggleView()\"\n              ></lib-user-request-form>\n              <div class=\"flex justify-end bottom-8 left-0 right-0 p-3\">\n                <!-- <verbena-button text=\"Delete\" bgColor=\"#999999\" textColor=\"white\"\n                border=\"1px solid #999999\" (click)=\"onDelete()\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    (click)=\"vdv.toggleView()\"\n                    text=\"Switch To Table\"\n                    styleType=\"ylw-outline\"\n                  ></verbena-button>\n                  <verbena-button\n                    text=\"Save\"\n                    bgColor=\"#FFE681\"\n                    (click)=\"onSave()\"\n                    textColor=\"#404040\"\n                    border=\"1px solid #FFE681\"\n                  >\n                    <!-- (click)=\"\" -->\n                  </verbena-button>\n                </div>\n              </div>\n            </div>\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        [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        (filtersApplied)=\"onFilterApplied($event)\"\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]=\"allColumns\"\n      [data]=\"users\"\n      >\n      </lib-data-xport>\n    </div>\n  </verben-data-view>\n  <div\n    *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n    class=\"message-log-button-container flex justify-between\"\n  ></div>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"w-full 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)}.master-only-contanier{margin-top:0!important}.scroll-no::-webkit-scrollbar{width:4px}.scroll-no::-webkit-scrollbar-thumb{background:gray}.justify-pp{justify-content:start!important;margin-top:0!important}.toolbar{margin:0!important}@media screen and (max-width: 1024px){.scroll-no{padding:5px}}.view-links{color:#3479e9;cursor:pointer}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.ActivatedRoute }, { type: UserManagementService }, { type: i3.UserAccessRequestService }, { type: i4.HttpWebRequestService }, { type: i4.UtilService }, { type: i4.EnvironmentService }, { type: i1.FormBuilder }], propDecorators: { cardDataView: [{
+                type: ViewChild,
+                args: ['vdcv']
+            }], dataView: [{
+                type: ViewChild,
+                args: ['vdv']
+            }], childComponent: [{
+                type: ViewChild,
+                args: [UserManagementFormComponent]
+            }], searchDebounceTime: [{
+                type: Input
+            }], pageSize: [{
+                type: Input
+            }] } });
+
+class LibUserManagementModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibUserManagementModule, declarations: [UserManagementComponent,
+            UserManagementFormComponent,
+            UserStatusBadgeComponent], imports: [HttpClientModule,
+            CommonModule,
+            DataTableModule,
+            CardModule,
+            SvgModule,
+            DataViewModule,
+            CardDataViewModule,
+            SortTableModule,
+            VisibleColumnModule,
+            TableFilterModule,
+            DataExportModule,
+            DataXportModule,
+            FormsModule,
+            ReactiveFormsModule,
+            VerbenaInputModule,
+            VerbenaButtonModule,
+            VerbenaBadgeModule,
+            DropDownModule,
+            VerbenaSwitchModule,
+            LibUserRequestApprovalModule], exports: [UserManagementComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserManagementModule, providers: [UserManagementService], imports: [HttpClientModule,
+            CommonModule,
+            DataTableModule,
+            CardModule,
+            SvgModule,
+            DataViewModule,
+            CardDataViewModule,
+            SortTableModule,
+            VisibleColumnModule,
+            TableFilterModule,
+            DataExportModule,
+            DataXportModule,
+            FormsModule,
+            ReactiveFormsModule,
+            VerbenaInputModule,
+            VerbenaButtonModule,
+            VerbenaBadgeModule,
+            DropDownModule,
+            VerbenaSwitchModule,
+            LibUserRequestApprovalModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserManagementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        UserManagementComponent,
+                        UserManagementFormComponent,
+                        UserStatusBadgeComponent,
+                    ],
+                    imports: [
+                        HttpClientModule,
+                        CommonModule,
+                        DataTableModule,
+                        CardModule,
+                        SvgModule,
+                        DataViewModule,
+                        CardDataViewModule,
+                        SortTableModule,
+                        VisibleColumnModule,
+                        TableFilterModule,
+                        DataExportModule,
+                        DataXportModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        VerbenaInputModule,
+                        VerbenaButtonModule,
+                        VerbenaBadgeModule,
+                        DropDownModule,
+                        VerbenaSwitchModule,
+                        LibUserRequestApprovalModule,
+                    ],
+                    providers: [UserManagementService],
+                    exports: [UserManagementComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibUserManagementModule, UserManagementComponent };
+//# sourceMappingURL=verben-authentication-ui-src-lib-components-user-management.mjs.map