verben-authentication-ui 1.1.0 → 1.1.1

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

@@ -1,23 +1,69 @@
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, signal, ViewChild, NgModule } from '@angular/core';
-import { ErrorResponse, SearchOperator, SearchPropertySign, SortDirection, Status, ObjectState, ConditionOptions } from 'verben-authentication-ui/src/lib/models';
-import { Subject } from 'rxjs';
-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 { Component, Input, input, EventEmitter, effect, Output, Injectable, viewChild, inject, DestroyRef, ViewChild, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i2$1 from 'verben-authentication-ui/src/lib/base';
+import { BaseDataPageState, BaseDataPageService, BaseDataPageFacade, SearchHandlerService } from 'verben-authentication-ui/src/lib/base';
+import * as i3 from 'verben-ng-ui';
+import { VerbenaBadgeModule, VerbenaInputModule, VerbenaButtonModule, DropDownModule, DataTableComponent, DataTableModule, SvgModule, DataViewModule, DataColumnsModule, DataFilterModule, DataSortModule, DataXportModule, CardDataViewModule } from 'verben-ng-ui';
+import { Status, ObjectState, ErrorResponse, OAuthType } from 'verben-authentication-ui/src/lib/models';
 import * as i1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from 'verben-authentication-ui/src/lib/services';
-import * as i1$1 from '@angular/router';
-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';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { BehaviorSubject } from 'rxjs';
+import * as i1$1 from 'verben-authentication-ui/src/lib/services';
+
+class UserStatusBadgeComponent {
+    status = Status.Active;
+    badgeConfig() {
+        switch (this.status) {
+            case Status.Active:
+                return { bgColor: 'var(--vbn-color-success-bg)', textColor: 'var(--vbn-color-success)', label: 'Active' };
+            case Status.InActive:
+                return { bgColor: 'var(--vbn-color-error-bg)', textColor: 'var(--vbn-color-error)', label: 'InActive' };
+            default:
+                return { bgColor: 'var(--vbn-color-text-muted)', textColor: 'var(--vbn-color-border)', 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, isStandalone: true, 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: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: VerbenaBadgeModule }, { kind: "component", type: i3.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserStatusBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-status-badge', standalone: true, imports: [CommonModule, VerbenaBadgeModule], template: "<verbena-badge\n  borderRadius=\"9px\"\n  [bgColor]=\"badgeConfig().bgColor\"\n  [textColor]=\"badgeConfig().textColor\"\n  fontSize=\"12px\"\n  [text]=\"badgeConfig().label\"\n  [pd]=\"'2px 6px'\"\n></verbena-badge>\n" }]
+        }], propDecorators: { status: [{
+                type: Input
+            }] } });
 
-const columns = [
+/**
+ * Presentational card for a single user in the card view.
+ */
+class UserManagementCardComponent {
+    user;
+    selected = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserManagementCardComponent, isStandalone: true, selector: "lib-user-management-card", inputs: { user: "user", selected: "selected" }, ngImport: i0, template: "<div class=\"flex cursor-pointer w-full bg-secondary rounded-xl\">\n  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n    [ngClass]=\"selected ? 'bg-primary' : 'bg-secondary-200'\"></div>\n  <div class=\"flex-1 flex items-end gap-y-2 gap-x-4 p-4\">\n    <div class=\"flex-1 space-y-2\">\n      <span class=\"font-semibold text-[var(--vbn-color-text)] flex-1 truncate\">\n        {{ user.FirstName }} {{ user.LastName }}\n      </span>\n      <p class=\"flex items-center my-1 gap-1\">\n        <label class=\"text-[10px] font-light\">E-Mail:</label>\n        <span class=\"text-sm truncate\">{{ user.MailAddress }}</span>\n      </p>\n    </div>\n    <div class=\"grid gap-y-1\">\n      <lib-user-status-badge [status]=\"user.Status\"></lib-user-status-badge>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UserStatusBadgeComponent, selector: "lib-user-status-badge", inputs: ["status"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-management-card', standalone: true, imports: [CommonModule, UserStatusBadgeComponent], template: "<div class=\"flex cursor-pointer w-full bg-secondary rounded-xl\">\n  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n    [ngClass]=\"selected ? 'bg-primary' : 'bg-secondary-200'\"></div>\n  <div class=\"flex-1 flex items-end gap-y-2 gap-x-4 p-4\">\n    <div class=\"flex-1 space-y-2\">\n      <span class=\"font-semibold text-[var(--vbn-color-text)] flex-1 truncate\">\n        {{ user.FirstName }} {{ user.LastName }}\n      </span>\n      <p class=\"flex items-center my-1 gap-1\">\n        <label class=\"text-[10px] font-light\">E-Mail:</label>\n        <span class=\"text-sm truncate\">{{ user.MailAddress }}</span>\n      </p>\n    </div>\n    <div class=\"grid gap-y-1\">\n      <lib-user-status-badge [status]=\"user.Status\"></lib-user-status-badge>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { user: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }] } });
+
+const fb = new FormBuilder();
+/**
+ * Column definitions for the user table.
+ * Single source of truth for table, filter, sort, and export.
+ * The role column keys on `RoleID`; the table renders it as the role name.
+ */
+const USER_COLUMNS = [
     {
         id: 'select',
         header: '',
+        canExport: false,
     },
     {
         id: 'createdAt',
@@ -36,12 +82,6 @@ const columns = [
         accessorKey: 'MailAddress',
         formControlName: 'MailAddress',
     },
-    // {
-    //   id: 'address',
-    //   header: 'ADDRESS',
-    //   accessorKey: 'Address',
-    //   formControlName: 'Address',
-    // },
     {
         id: 'phone',
         header: 'PHONE NUMBER',
@@ -51,7 +91,7 @@ const columns = [
     {
         id: 'role',
         header: 'ROLE',
-        accessorKey: 'Role',
+        accessorKey: 'RoleID',
         formControlName: 'RoleID',
     },
     {
@@ -63,890 +103,487 @@ const columns = [
     {
         id: 'actions',
         header: 'ACTIONS',
-        accessorKey: 'MailAddress',
+        canExport: false,
     },
 ];
-
-const baseStyle = {
-    width: "100%",
-    fontFamily: '"Fraunces", serif',
-    fontSize: '125%',
-    whiteSpace: 'nowrap',
-    margin: '0',
-    border: '1px solid #D4A007',
-    borderRadius: '16px',
-    borderCollapse: 'separate',
-    borderSpacing: '0',
-    // tableLayout: 'fixed',
-    overflow: 'hidden',
-    rows: {
-        even: {
-            backgroundColor: '#FDFDFD',
-        },
-        odd: {
-            backgroundColor: '#F1F4FB',
+/**
+ * Page configuration for user management.
+ */
+const USER_CONFIG = {
+    endpoint: 'User',
+    pageSize: 20,
+    columns: USER_COLUMNS,
+    cardDataMapper: (user) => ({
+        selected: false,
+        title: `${user.FirstName} ${user.LastName}`,
+        data: user,
+        body: [
+            { title: 'Name', value: `${user.FirstName} ${user.LastName}` },
+            { title: 'E-Mail Address', value: user.MailAddress },
+            { title: 'Phone Number', value: user.PhoneNumber || 'N/A' },
+        ],
+        children: [],
+    }),
+    searchDebounceTime: 500,
+    formGroupConfig: {
+        controls: {
+            MailAddress: fb.control(''),
+            FirstName: fb.control(''),
+            LastName: fb.control(''),
+            PhoneNumber: fb.control(''),
+            RoleID: fb.control(''),
+            Tags: fb.control([]),
+            Status: fb.control(''),
         },
-        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,
     },
+    enableCreate: false,
+    enableImport: false,
+    enableExport: true,
+    enableFilter: true,
+    enableSort: true,
+    enableSearch: true,
+    enableCardView: true,
+    enableTableRowEdit: true,
 };
 
-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 = `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 = `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 = `GetUserWithParam/${role}/${skip}/${limit}/${sortParam}/${sortOrder}`;
-        }
-        else {
-            // Role is null, use the "GetUsers" endpoint
-            url = `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 = `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 = `DeleteUsers`;
-        return this.httpService.delete(`${url}?data=${userIds.join(',')}`);
-    }
-    async loadEntities(entity, fields, env, event = null) {
-        var payload = {
-            Fields: fields,
-            SearchKeyValues: [
-                {
-                    PropertyName: 'Code',
-                    EntityValue: '',
-                    Operator: SearchOperator.And,
-                    Sign: SearchPropertySign.EQ,
-                    Sort: SortDirection.Asc,
-                },
-            ],
-        };
-        const res = await this.httpService.post(`SearchDynamic${entity}/0/0`, payload, env);
-        if (res instanceof ErrorResponse) {
-            return [];
-        }
-        else {
-            var result = res.Result;
-            return result;
-        }
-    }
-    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 }] });
-
+/**
+ * Form for editing a user's role, tags, and status.
+ * Identity fields are read-only.
+ */
 class UserManagementFormComponent {
     fb;
-    userManagementService;
-    envService;
-    // @Input() roles: Role[] = [];
-    // @Input() status: Status[] = [];
-    set currentData(value) {
-        if (value?.data) {
-            // Convert comma-separated warehouse codes back to array for dropdown
-            // const warehouseCodes = value.data.Warehouses
-            //   ? value.data.Warehouses.split(',').filter((code: string) => code.trim())
-            //   : [];
-            this.form.patchValue({
-                MailAddress: value.data.MailAddress || '',
-                FirstName: value.data.FirstName || '',
-                LastName: value.data.LastName || '',
-                PhoneNumber: value.data.PhoneNumber || '',
-                // Address: value.data.Address || '',
-                RoleID: value.data.RoleID || '',
-                Tags: value.data.Tags || [],
-                Status: value.data.Status || Status.Active,
-                // Warehouses: warehouseCodes,
-            });
-        }
-        else {
-            this.form.reset();
-        }
-    }
-    roles = [];
-    tags = [];
-    switchView = new EventEmitter();
-    onFormSave = new EventEmitter();
+    user = input();
+    roles = input([]);
+    tags = input([]);
+    save = new EventEmitter();
+    switchToTable = new EventEmitter();
     form;
     statusOptions = Object.values(Status);
-    // warehouses: Warehouse[] = [];
-    constructor(fb, userManagementService, envService) {
+    constructor(fb) {
         this.fb = fb;
-        this.userManagementService = userManagementService;
-        this.envService = envService;
-        this.form = this.fb.group({
-            MailAddress: ['', { readonly: true }],
-            FirstName: ['', { readonly: true }],
-            LastName: ['', { readonly: true }],
-            PhoneNumber: ['', { readonly: true }],
-            // Address: ['', { readonly: true }],
-            Status: ['', { readonly: true }],
-            RoleID: [''],
-            Tags: [[]],
-            // Warehouses: [[]],
+        this.form = this.fb.group(USER_CONFIG.formGroupConfig.controls);
+        effect(() => {
+            const user = this.user();
+            if (user && this.form) {
+                this.form.patchValue({
+                    MailAddress: user.MailAddress || '',
+                    FirstName: user.FirstName || '',
+                    LastName: user.LastName || '',
+                    PhoneNumber: user.PhoneNumber || '',
+                    RoleID: user.RoleID || '',
+                    Tags: user.Tags || [],
+                    Status: user.Status || Status.Active,
+                });
+            }
         });
     }
-    ngOnInit() {
-        // this.loadWarehouses();
-    }
-    // async loadWarehouses(): Promise<void> {
-    //   try {
-    //     this.warehouses = await this.userManagementService.loadEntities<Warehouse>(
-    //       'Warehouse',
-    //       ['Name', 'Code'],
-    //       this.envService.environment.RevenueAPI
-    //     );
-    //   } catch (error) {
-    //     console.error('Error loading warehouses:', error);
-    //     this.warehouses = [];
-    //   }
-    // }
-    // onWarehouseChange(event: DropdownChangeEvent): void {
-    //   // Convert array of warehouse codes to comma-separated string
-    //   const selectedCodes = event.value as string[];
-    //   const commaSeparated = selectedCodes ? selectedCodes.join(',') : '';
-    //   // Update the form with the comma-separated value for saving
-    //   this.form.patchValue({
-    //     Warehouses: commaSeparated
-    //   }, { emitEvent: false });
-    // }
     onSave() {
         if (this.form.valid) {
-            // Emit save event with form value
-            console.log('Form saved:', this.form.value);
-            this.onFormSave.emit(this.form.value);
+            const merged = {
+                ...this.user(),
+                ...this.form.getRawValue(),
+                DataState: this.user()?.DataState === ObjectState.New
+                    ? ObjectState.New
+                    : ObjectState.Changed,
+            };
+            this.save.emit(merged);
         }
     }
-    onDelete() {
-        // Emit delete event
-        console.log('Delete requested');
+    onSwitchToTable() {
+        this.switchToTable.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementFormComponent, deps: [{ token: i1.FormBuilder }, { token: UserManagementService }, { token: i4.EnvironmentService }], 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 [formGroup]=\"form\" class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\">\n  <verbena-input label=\"First Name:\" name=\"FirstName\" type=\"text\" formControlName=\"FirstName\" />\n  <verbena-input label=\"Last Name:\" name=\"LastName\" type=\"text\" formControlName=\"LastName\" />\n  <verbena-input label=\"Phone Number:\" name=\"PhoneNumber\" type=\"tel\" formControlName=\"PhoneNumber\" />\n  <verbena-input name=\"MailAddress\" label=\"E-Mail Address:\" [type]=\"'email'\" formControlName=\"MailAddress\" />\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 label=\"Role\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"roles\" id=\"role\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"RoleID\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n\n    <verben-drop-down label=\"Tags\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"tags\" id=\"tags\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"Tags\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <!-- <div class=\"space-y-1\">\n    <label for=\"warehouses\">Warehouses</label>\n\n    <verben-drop-down label=\"Warehouses\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"warehouses\" id=\"warehouses\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"Warehouses\" (onChange)=\"onWarehouseChange($event)\" class=\"form-control\">\n    </verben-drop-down>\n  </div> -->\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"false\" [showClear]=\"false\"\n      placeholder=\"\" [(options)]=\"statusOptions\" id=\"status\" formControlName=\"Status\" class=\"form-control\">\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: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i7.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementFormComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: UserManagementFormComponent, isStandalone: true, selector: "lib-user-management-form", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, roles: { classPropertyName: "roles", publicName: "roles", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", switchToTable: "switchToTable" }, ngImport: i0, template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSave()\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\">\n  <verbena-input label=\"First Name:\" name=\"FirstName\" type=\"text\" formControlName=\"FirstName\" [readOnly]=\"true\" />\n  <verbena-input label=\"Last Name:\" name=\"LastName\" type=\"text\" formControlName=\"LastName\" [readOnly]=\"true\" />\n  <verbena-input label=\"Phone Number:\" name=\"PhoneNumber\" type=\"tel\" formControlName=\"PhoneNumber\" [readOnly]=\"true\" />\n  <verbena-input name=\"MailAddress\" label=\"E-Mail Address:\" [type]=\"'email'\" formControlName=\"MailAddress\"\n    [readOnly]=\"true\" />\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"true\" [showClear]=\"true\"\n      placeholder=\"\" [options]=\"roles()\" id=\"role\" optionLabel=\"Name\" optionValue=\"Code\" formControlName=\"RoleID\"\n      class=\"form-control\"></verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\" [showClear]=\"true\"\n      placeholder=\"\" [options]=\"tags()\" id=\"tags\" optionLabel=\"Name\" optionValue=\"Code\" formControlName=\"Tags\"\n      class=\"form-control\"></verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"false\" [showClear]=\"false\"\n      placeholder=\"\" [options]=\"statusOptions\" id=\"status\" formControlName=\"Status\"\n      class=\"form-control\"></verben-drop-down>\n  </div>\n\n  <!-- Form Actions -->\n  <div class=\"flex justify-end gap-4 my-2 items-center\">\n    <verbena-button styleType=\"ylw-outline\" text=\"Switch To Table\" (click)=\"onSwitchToTable()\" type=\"button\">\n    </verbena-button>\n    <verbena-button text=\"Save\" type=\"submit\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\"\n      pd=\"10px 20px\" width=\"114px\" height=\"39px\"></verbena-button>\n  </div>\n</form>\n", styles: [":host{display:block;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: VerbenaInputModule }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "ngmodule", type: VerbenaButtonModule }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "ngmodule", type: DropDownModule }, { kind: "component", type: i3.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
 }
 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 [formGroup]=\"form\" class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\">\n  <verbena-input label=\"First Name:\" name=\"FirstName\" type=\"text\" formControlName=\"FirstName\" />\n  <verbena-input label=\"Last Name:\" name=\"LastName\" type=\"text\" formControlName=\"LastName\" />\n  <verbena-input label=\"Phone Number:\" name=\"PhoneNumber\" type=\"tel\" formControlName=\"PhoneNumber\" />\n  <verbena-input name=\"MailAddress\" label=\"E-Mail Address:\" [type]=\"'email'\" formControlName=\"MailAddress\" />\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 label=\"Role\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"roles\" id=\"role\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"RoleID\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n\n    <verben-drop-down label=\"Tags\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"tags\" id=\"tags\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"Tags\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n\n  <!-- <div class=\"space-y-1\">\n    <label for=\"warehouses\">Warehouses</label>\n\n    <verben-drop-down label=\"Warehouses\" styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\"\n      [showClear]=\"true\" placeholder=\"\" [(options)]=\"warehouses\" id=\"warehouses\" optionLabel=\"Name\" optionValue=\"Code\"\n      formControlName=\"Warehouses\" (onChange)=\"onWarehouseChange($event)\" class=\"form-control\">\n    </verben-drop-down>\n  </div> -->\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"false\" [showClear]=\"false\"\n      placeholder=\"\" [(options)]=\"statusOptions\" id=\"status\" formControlName=\"Status\" class=\"form-control\">\n    </verben-drop-down>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }, { type: UserManagementService }, { type: i4.EnvironmentService }], propDecorators: { currentData: [{
-                type: Input
-            }], roles: [{
-                type: Input
-            }], tags: [{
-                type: Input
-            }], switchView: [{
+            args: [{ selector: 'lib-user-management-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        VerbenaInputModule,
+                        VerbenaButtonModule,
+                        DropDownModule,
+                    ], template: "<form [formGroup]=\"form\" (ngSubmit)=\"onSave()\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\">\n  <verbena-input label=\"First Name:\" name=\"FirstName\" type=\"text\" formControlName=\"FirstName\" [readOnly]=\"true\" />\n  <verbena-input label=\"Last Name:\" name=\"LastName\" type=\"text\" formControlName=\"LastName\" [readOnly]=\"true\" />\n  <verbena-input label=\"Phone Number:\" name=\"PhoneNumber\" type=\"tel\" formControlName=\"PhoneNumber\" [readOnly]=\"true\" />\n  <verbena-input name=\"MailAddress\" label=\"E-Mail Address:\" [type]=\"'email'\" formControlName=\"MailAddress\"\n    [readOnly]=\"true\" />\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"true\" [showClear]=\"true\"\n      placeholder=\"\" [options]=\"roles()\" id=\"role\" optionLabel=\"Name\" optionValue=\"Code\" formControlName=\"RoleID\"\n      class=\"form-control\"></verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"tags\">Tags</label>\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"true\" [filter]=\"true\" [showClear]=\"true\"\n      placeholder=\"\" [options]=\"tags()\" id=\"tags\" optionLabel=\"Name\" optionValue=\"Code\" formControlName=\"Tags\"\n      class=\"form-control\"></verben-drop-down>\n  </div>\n\n  <div class=\"space-y-1\">\n    <label for=\"status\">Status</label>\n    <verben-drop-down styleClass=\"w-full\" width=\"100%\" [multiselect]=\"false\" [filter]=\"false\" [showClear]=\"false\"\n      placeholder=\"\" [options]=\"statusOptions\" id=\"status\" formControlName=\"Status\"\n      class=\"form-control\"></verben-drop-down>\n  </div>\n\n  <!-- Form Actions -->\n  <div class=\"flex justify-end gap-4 my-2 items-center\">\n    <verbena-button styleType=\"ylw-outline\" text=\"Switch To Table\" (click)=\"onSwitchToTable()\" type=\"button\">\n    </verbena-button>\n    <verbena-button text=\"Save\" type=\"submit\" bgColor=\"#FFE681\" textColor=\"#404040\" borderRadius=\"10px\"\n      pd=\"10px 20px\" width=\"114px\" height=\"39px\"></verbena-button>\n  </div>\n</form>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { save: [{
                 type: Output
-            }], onFormSave: [{
+            }], switchToTable: [{
                 type: Output
             }] } });
 
-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' };
-        }
+/**
+ * State for the user-management page.
+ * Adds the roles/tags lists used by the form's dropdowns.
+ */
+class UserState extends BaseDataPageState {
+    roles$ = new BehaviorSubject([]);
+    tags$ = new BehaviorSubject([]);
+    getRoles$() {
+        return this.roles$.asObservable();
     }
-    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"] }] });
+    getRolesValue() {
+        return this.roles$.getValue();
+    }
+    setRoles(roles) {
+        this.roles$.next(roles);
+    }
+    getTags$() {
+        return this.tags$.asObservable();
+    }
+    setTags(tags) {
+        this.tags$.next(tags);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserState, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserState });
 }
-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
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserState, decorators: [{
+            type: Injectable
+        }] });
 
-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([]),
-                Warehouses: this.fb.control(''),
-                Status: this.fb.control(''),
-            },
-            // validatorOrOpts: null,
-            // asyncValidator: null,
-        });
+/**
+ * Service for user API operations.
+ *
+ * The auth API pluralises names, appends a `/{sortParam}/{sortOrder}` suffix to
+ * reads, and deletes via a query string, so the base URL seams are overridden.
+ * Roles/tags are loaded here so this page no longer depends on the
+ * access-request module.
+ */
+class UserService extends BaseDataPageService {
+    defaultSort = 'CreatedAt/Asc';
+    constructor(server, filterHandler, sortHandler) {
+        super(server, filterHandler, sortHandler);
     }
-    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();
-        });
+    getEndpoint() {
+        return 'User';
     }
-    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 = response.Skip;
-                this.hasMore = this.skip < response.Total;
-            }
-        }
-        catch (error) {
-            console.error('Error:', error);
-        }
-        finally {
-            this.isLoading = false;
-        }
+    // ===== URL seams =====
+    listUrl(skip, limit) {
+        return `GetUsers/${skip}/${limit}/${this.defaultSort}`;
+    }
+    searchTermUrl(term, skip, limit) {
+        return `GetUserWithParam/${term}/${skip}/${limit}/${this.defaultSort}`;
     }
+    filterSearchUrl(skip, limit) {
+        return `SearchUsers/${skip}/${limit}/${this.defaultSort}`;
+    }
+    saveUrl() {
+        return 'SaveUsers';
+    }
+    deleteUrl(itemIds) {
+        return `DeleteUsers?data=${itemIds.join(',')}`;
+    }
+    // ===== Lookups =====
     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;
+        const res = await this.server.get('GetRoles/0/0');
+        if (res instanceof ErrorResponse) {
+            return [];
         }
+        return res.Result ?? [];
     }
     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);
+        const res = await this.server.get('GetTags/0/0');
+        if (res instanceof ErrorResponse) {
+            return [];
+        }
+        return res.Result ?? [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserService, deps: [{ token: i1$1.HttpWebRequestService }, { token: i2$1.FilterHandlerService }, { token: i2$1.SortHandlerService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.HttpWebRequestService }, { type: i2$1.FilterHandlerService }, { type: i2$1.SortHandlerService }] });
+
+/**
+ * Facade for the user-management page.
+ */
+class UserFacade extends BaseDataPageFacade {
+    userService;
+    blankUser;
+    constructor(state, service, searchHandler, utilService) {
+        super(state, service, searchHandler, utilService, USER_CONFIG);
+        this.userService = service;
+    }
+    // ===== Custom observables =====
+    get roles$() {
+        return this.state.getRoles$();
+    }
+    get tags$() {
+        return this.state.getTags$();
+    }
+    // ===== Runtime configuration (from component @Inputs) =====
+    applyRuntimeConfig(options) {
+        if (options.pageSize && options.pageSize > 0) {
+            this.state.updateQueryParams({ limit: options.pageSize });
         }
-        catch (error) {
-            console.error('Error fetching roles:', error);
-            return undefined;
+        if (options.searchDebounceTime && options.searchDebounceTime > 0) {
+            this.searchHandler.setDebounceTime(options.searchDebounceTime);
         }
     }
-    handleRoleId(value) {
-        const matchedRole = this.Roles.filter((role) => role.Name === value);
-        return matchedRole[0]?.Code;
+    /** Seed an initial search term (used by the optional `role` input). */
+    setInitialSearch(term) {
+        this.state.setSearchTerm(term);
     }
+    // ===== Lookups =====
+    async loadRoles() {
+        this.state.setRoles(await this.userService.getRoles());
+    }
+    async loadTags() {
+        this.state.setTags(await this.userService.getTags());
+    }
+    getRoleName(roleId) {
+        return this.state.getRolesValue().find((r) => r.Code === roleId)?.Name ?? '';
+    }
+    // ===== View management =====
     /**
-     * Format users into CardData for the UI library
-     * @param users Array of users to format
-     * @returns Array of CardData
+     * Select the user to show in the form. The form template binds to
+     * currentCardData(), so route selection through selectCard (reusing the
+     * matching card from the loaded list when present) rather than a separate
+     * selected-user stream that nothing reads.
      */
-    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;
+    openForm(user) {
+        const target = user ?? this.createEmptyUser();
+        const existing = this.cardData().find((card) => card.data?.Code === target.Code);
+        this.selectCard(existing ?? this.getConfig().cardDataMapper(target));
     }
-    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');
-        }
+    closeForm() {
+        this.selectCard(null);
     }
-    async onDataSave(event) {
+    handleColumnsUpdated(columns) {
+        this.updateVisibleColumns(columns);
+    }
+    // ===== User operations =====
+    async saveUser(user) {
         const payload = {
-            ...this.users[event.index],
-            ...event.data,
-            DataState: this.users[event.index]?.DataState === ObjectState.Unchanged
-                ? ObjectState.Changed
-                : ObjectState.New,
+            ...user,
+            DataState: user.DataState === ObjectState.New ? ObjectState.New : ObjectState.Changed,
+        };
+        const success = await this.saveItems([payload]);
+        if (success) {
+            this.closeForm();
+            await this.refresh();
+        }
+        return success;
+    }
+    async deleteUser(id) {
+        const success = await this.deleteItems([id]);
+        if (success) {
+            this.closeForm();
+            await this.refresh();
+        }
+        return success;
+    }
+    // ===== Empty placeholder =====
+    get emptyUser() {
+        return (this.blankUser ??= this.createEmptyUser());
+    }
+    createEmptyUser() {
+        return {
+            id: Date.now().toString(),
+            Id: '',
+            Code: '',
+            TenantId: '',
+            ServiceName: '',
+            CreatedAt: new Date(),
+            UpdatedAt: new Date(),
+            DataState: ObjectState.New,
+            Password: '',
+            FirstName: '',
+            LastName: '',
+            MailAddress: '',
+            IsSeeded: false,
+            Status: Status.Active,
+            SignupType: OAuthType.InApp,
         };
-        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();
-        }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserFacade, deps: [{ token: UserState }, { token: UserService }, { token: i2$1.SearchHandlerService }, { token: i1$1.UtilService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserFacade });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserFacade, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: UserState }, { type: UserService }, { type: i2$1.SearchHandlerService }, { type: i1$1.UtilService }] });
+
+/**
+ * Table view for users with inline row editing.
+ */
+class UserManagementTableComponent {
+    facade;
+    tableView = viewChild(DataTableComponent);
+    users = [];
+    columns = [];
+    isLoading = false;
+    formGroupConfig;
+    view = new EventEmitter();
+    delete = new EventEmitter();
+    saveRow = new EventEmitter();
+    statuses = Object.values(Status);
+    constructor(facade) {
+        this.facade = facade;
     }
-    reset() {
-        this.skip = 0;
-        this.pageSize = 20;
+    onView(user) {
+        this.view.emit(user);
     }
-    clearData() {
-        this.currentData = {};
+    onDelete(user) {
+        this.delete.emit(user);
     }
-    loadMore() {
-        if (this.hasMore) {
-            this.fetchUsers();
-        }
+    onRowSaved(event) {
+        const original = this.users[event.index] ?? {};
+        this.saveRow.emit({ ...original, ...event.data });
     }
-    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;
-            });
-        }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementTableComponent, deps: [{ token: UserFacade }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: UserManagementTableComponent, isStandalone: true, selector: "lib-user-management-table", inputs: { users: "users", columns: "columns", isLoading: "isLoading", formGroupConfig: "formGroupConfig" }, outputs: { view: "view", delete: "delete", saveRow: "saveRow" }, viewQueries: [{ propertyName: "tableView", first: true, predicate: DataTableComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"table-container\" [class.loading]=\"isLoading\">\n  <lib-data-table [data]=\"users\" [columns]=\"columns\" [formGroupConfig]=\"formGroupConfig\" dataKey=\"Code\"\n    (rowSave)=\"onRowSaved($event)\">\n    <!-- Select -->\n    <ng-container libColumn=\"select\">\n      <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n        <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n      </ng-template>\n    </ng-container>\n\n    <!-- Created -->\n    <ng-container libColumn=\"createdAt\">\n      <ng-template #cell let-value>{{ value | date }}</ng-template>\n    </ng-container>\n\n    <!-- Mail -->\n    <ng-container libColumn=\"mail\">\n      <ng-template #cell let-value>{{ value }}</ng-template>\n      <ng-template #cellEdit let-control=\"control\">\n        <verbena-input name=\"MailAddress\" [formControl]=\"control\" placeHolder=\"Enter E-Mail\" />\n      </ng-template>\n    </ng-container>\n\n    <!-- Phone -->\n    <ng-container libColumn=\"phone\">\n      <ng-template #cell let-value>{{ value }}</ng-template>\n      <ng-template #cellEdit let-control=\"control\">\n        <verbena-input name=\"PhoneNumber\" [formControl]=\"control\" placeHolder=\"Enter Phone Number\" />\n      </ng-template>\n    </ng-container>\n\n    <!-- Role -->\n    <ng-container libColumn=\"role\">\n      <ng-template #cell let-value>{{ facade.getRoleName(value) || 'N/A' }}</ng-template>\n      <ng-template #cellEdit let-control=\"control\">\n        <verben-drop-down [width]=\"'100%'\" [formControl]=\"control\" placeHolder=\"Select Role\"\n          [options]=\"(facade.roles$ | async) ?? []\" optionLabel=\"Name\" optionValue=\"Code\" [filter]=\"true\"\n          [showClear]=\"true\"></verben-drop-down>\n      </ng-template>\n    </ng-container>\n\n    <!-- Status -->\n    <ng-container libColumn=\"status\">\n      <ng-template #cell let-value>\n        <lib-user-status-badge [status]=\"value\"></lib-user-status-badge>\n      </ng-template>\n      <ng-template #cellEdit let-control=\"control\">\n        <verben-drop-down [width]=\"'100%'\" [formControl]=\"control\" placeHolder=\"Select Status\" [options]=\"statuses\"\n          [filter]=\"false\" [showClear]=\"false\"></verben-drop-down>\n      </ng-template>\n    </ng-container>\n\n    <!-- Actions -->\n    <ng-container libColumn=\"actions\">\n      <ng-template #cell let-row=\"row\" let-toggleRowEdit=\"toggleRowEdit\">\n        <div class=\"flex gap-6\">\n          <verben-svg (click)=\"toggleRowEdit()\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n          <verben-svg (click)=\"onView(row)\" icon=\"eye\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n          <verben-svg (click)=\"onDelete(row)\" icon=\"delete\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n        </div>\n      </ng-template>\n      <ng-template #cellEdit let-toggleRowEdit=\"toggleRowEdit\">\n        <div class=\"flex gap-6\">\n          <verben-svg (click)=\"toggleRowEdit()\" icon=\"tick\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n          <verben-svg (click)=\"toggleRowEdit()\" icon=\"delete\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n\n  <div *ngIf=\"users.length === 0 && !isLoading\" class=\"empty-state\">\n    <p>No users found</p>\n  </div>\n</div>\n", styles: [".table-container{width:100%}.table-container.loading{opacity:.6;pointer-events:none}.empty-state{padding:2rem;text-align:center;color:var(--vbn-color-text-muted)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: DataTableModule }, { kind: "component", type: i3.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i3.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "ngmodule", type: SvgModule }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "ngmodule", type: DropDownModule }, { kind: "component", type: i3.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "ngmodule", type: VerbenaInputModule }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: UserStatusBadgeComponent, selector: "lib-user-status-badge", inputs: ["status"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-management-table', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        DataTableModule,
+                        SvgModule,
+                        DropDownModule,
+                        VerbenaInputModule,
+                        UserStatusBadgeComponent,
+                    ], template: "<div class=\"table-container\" [class.loading]=\"isLoading\">\n  <lib-data-table [data]=\"users\" [columns]=\"columns\" [formGroupConfig]=\"formGroupConfig\" dataKey=\"Code\"\n    (rowSave)=\"onRowSaved($event)\">\n    <!-- Select -->\n    <ng-container libColumn=\"select\">\n      <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n        <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n      </ng-template>\n    </ng-container>\n\n    <!-- Created -->\n    <ng-container libColumn=\"createdAt\">\n      <ng-template #cell let-value>{{ value | date }}</ng-template>\n    </ng-container>\n\n    <!-- Mail -->\n    <ng-container libColumn=\"mail\">\n      <ng-template #cell let-value>{{ value }}</ng-template>\n      <ng-template #cellEdit let-control=\"control\">\n        <verbena-input name=\"MailAddress\" [formControl]=\"control\" placeHolder=\"Enter E-Mail\" />\n      </ng-template>\n    </ng-container>\n\n    <!-- Phone -->\n    <ng-container libColumn=\"phone\">\n      <ng-template #cell let-value>{{ value }}</ng-template>\n      <ng-template #cellEdit let-control=\"control\">\n        <verbena-input name=\"PhoneNumber\" [formControl]=\"control\" placeHolder=\"Enter Phone Number\" />\n      </ng-template>\n    </ng-container>\n\n    <!-- Role -->\n    <ng-container libColumn=\"role\">\n      <ng-template #cell let-value>{{ facade.getRoleName(value) || 'N/A' }}</ng-template>\n      <ng-template #cellEdit let-control=\"control\">\n        <verben-drop-down [width]=\"'100%'\" [formControl]=\"control\" placeHolder=\"Select Role\"\n          [options]=\"(facade.roles$ | async) ?? []\" optionLabel=\"Name\" optionValue=\"Code\" [filter]=\"true\"\n          [showClear]=\"true\"></verben-drop-down>\n      </ng-template>\n    </ng-container>\n\n    <!-- Status -->\n    <ng-container libColumn=\"status\">\n      <ng-template #cell let-value>\n        <lib-user-status-badge [status]=\"value\"></lib-user-status-badge>\n      </ng-template>\n      <ng-template #cellEdit let-control=\"control\">\n        <verben-drop-down [width]=\"'100%'\" [formControl]=\"control\" placeHolder=\"Select Status\" [options]=\"statuses\"\n          [filter]=\"false\" [showClear]=\"false\"></verben-drop-down>\n      </ng-template>\n    </ng-container>\n\n    <!-- Actions -->\n    <ng-container libColumn=\"actions\">\n      <ng-template #cell let-row=\"row\" let-toggleRowEdit=\"toggleRowEdit\">\n        <div class=\"flex gap-6\">\n          <verben-svg (click)=\"toggleRowEdit()\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n          <verben-svg (click)=\"onView(row)\" icon=\"eye\" [width]=\"15\" [height]=\"15\" class=\"cursor-pointer\"></verben-svg>\n          <verben-svg (click)=\"onDelete(row)\" icon=\"delete\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n        </div>\n      </ng-template>\n      <ng-template #cellEdit let-toggleRowEdit=\"toggleRowEdit\">\n        <div class=\"flex gap-6\">\n          <verben-svg (click)=\"toggleRowEdit()\" icon=\"tick\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n          <verben-svg (click)=\"toggleRowEdit()\" icon=\"delete\" [width]=\"15\" [height]=\"15\"\n            class=\"cursor-pointer\"></verben-svg>\n        </div>\n      </ng-template>\n    </ng-container>\n  </lib-data-table>\n\n  <div *ngIf=\"users.length === 0 && !isLoading\" class=\"empty-state\">\n    <p>No users found</p>\n  </div>\n</div>\n", styles: [".table-container{width:100%}.table-container.loading{opacity:.6;pointer-events:none}.empty-state{padding:2rem;text-align:center;color:var(--vbn-color-text-muted)}\n"] }]
+        }], ctorParameters: () => [{ type: UserFacade }], propDecorators: { users: [{
+                type: Input
+            }], columns: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], formGroupConfig: [{
+                type: Input
+            }], view: [{
+                type: Output
+            }], delete: [{
+                type: Output
+            }], saveRow: [{
+                type: Output
+            }] } });
+
+/**
+ * User-management page. Lists users in table/card views with inline row editing
+ * and a form panel, driven by the base-page facade.
+ */
+class UserManagementComponent {
+    facade;
+    searchDebounceTime = 500;
+    pageSize = 20;
+    /** Optional role filter, applied as the initial search term. */
+    role = '';
+    vdv;
+    cardDataView;
+    destroyRef = inject(DestroyRef);
+    constructor(facade) {
+        this.facade = facade;
     }
-    async postSearch(payload) {
-        this.utilService.sendBI(true);
-        const res = await this.server.post(`SearchUsers/0/10/CreatedAt/asc`, payload);
-        this.utilService.sendBI(false);
-        if (res instanceof ErrorResponse) {
-            this.appliedFilters = false;
+    ngOnInit() {
+        this.facade.applyRuntimeConfig({
+            pageSize: this.pageSize,
+            searchDebounceTime: this.searchDebounceTime,
+        });
+        if (this.role) {
+            this.facade.setInitialSearch(this.role);
+        }
+        this.facade.cardSelectionCleared$
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.clearCardView());
+        this.facade.loadData();
+        this.facade.loadRoles();
+        this.facade.loadTags();
+    }
+    clearCardView() {
+        const view = this.cardDataView;
+        if (!view)
             return;
-        }
-        else {
-            this.appliedFilters = true;
-            const response = res;
-            this.dataFit = response;
-            this.users = response.Result;
-            this.cardData = this.formatCardData(this.users);
+        view.clearData();
+        if (view.rightContent) {
+            view.rightContent.parentData = null;
         }
     }
-    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);
-        }
+    // ===== Filter / Sort / Search =====
+    onFilterApplied(filters) {
+        this.facade.applyFilters(filters);
     }
-    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
-        }
+    onSortApplied(sorts) {
+        this.facade.applySorts(sorts);
     }
-    onSortUpdated(updatedSorts) {
-        this.currentSorts = updatedSorts;
+    onSearch(term) {
+        this.facade.onSearch(term);
     }
-    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(`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;
-        }
+    onColumnsUpdated(columns) {
+        this.facade.handleColumnsUpdated(columns);
+    }
+    onLoadMore() {
+        this.facade.loadMore();
     }
-    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();
-            // }
+    // ===== Table events =====
+    onViewUser(user) {
+        this.facade.openForm(user);
+        this.vdv.toggleView();
+    }
+    onDeleteUser(user) {
+        const name = `${user.FirstName} ${user.LastName}`.trim() || user.MailAddress;
+        if (confirm(`Delete user ${name}?`)) {
+            this.facade.deleteUser(user.Id || user.Code);
         }
     }
-    getRoleName(roleId) {
-        const role = this.Roles.find((role) => role.Code === roleId);
-        return role ? role.Name : '';
+    onSaveRow(user) {
+        this.facade.saveUser(user);
+    }
+    userCardClicked(selectedCard) {
+        this.facade.selectCard(selectedCard);
     }
-    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                          getRoleName(item.data.RoleID)\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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.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}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-full{height:100%}.w-10{width:2.5rem}.w-12{width:3rem}.w-3{width:.75rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.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-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-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))}.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))}.border-secondary-200{border-color:#d7dbe6}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.text-\\[10px\\]{font-size:10px}.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-\\[500\\]{font-weight:500}.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}.leading-6{line-height:1.5rem}.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))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#666666\\]{--tw-text-opacity: 1;color:rgb(102 102 102 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.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", "useVirtualScroll", "virtualScrollItemSize", "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", "useVirtualScroll", "virtualScrollItemSize", "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: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i7.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i7.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "overlayWidth", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "selectKey", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "refPageSize", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "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" }] });
+    // ===== Form events =====
+    onSaveUser(user) {
+        this.facade.saveUser(user);
+        this.vdv.toggleView();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementComponent, deps: [{ token: UserFacade }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserManagementComponent, isStandalone: true, selector: "lib-user-management", inputs: { searchDebounceTime: "searchDebounceTime", pageSize: "pageSize", role: "role" }, providers: [UserFacade, UserState, UserService, SearchHandlerService], viewQueries: [{ propertyName: "vdv", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }], ngImport: i0, template: "<div class=\"user-management-page space-y-8\">\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isCreate: false,\n      isToggle: true,\n      isImport: false,\n    }\" [selectedColumnCount]=\"(facade.visibleColumns$ | async)?.length ?? 0\"\n    [selectedSortCount]=\"(facade.sorts$ | async)?.length ?? 0\"\n    [selectedFilterTableCount]=\"(facade.filters$ | async)?.length ?? 0\"\n    (onSearchChange)=\"onSearch($event.value)\">\n\n    <!-- Table View -->\n    <div table-content>\n      <lib-user-management-table [users]=\"(facade.items$ | async) ?? []\"\n        [columns]=\"(facade.visibleColumns$ | async) ?? []\" [isLoading]=\"(facade.isLoading$ | async) ?? false\"\n        [formGroupConfig]=\"facade.getConfig().formGroupConfig\" (view)=\"onViewUser($event)\"\n        (delete)=\"onDeleteUser($event)\" (saveRow)=\"onSaveRow($event)\">\n      </lib-user-management-table>\n    </div>\n\n    <!-- Card View -->\n    <div card-content>\n      <verben-card-data-view #vdcv [cardDataList]=\"facade.cardData()\" borderRadius=\"12px\" dataId=\"Code\" [border]=\"'5px'\"\n        rbgColor=\"var(--vbn-color-surface-alt)\" mg=\"20px\">\n\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"Code\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"facade.cardData()\">\n            <ng-template #card let-item>\n              <div (click)=\"userCardClicked(vdcv.onItemClick(item))\" class=\"cursor-pointer h-[max-content]\">\n                <lib-user-management-card [user]=\"item.data\" [selected]=\"item.selected\"></lib-user-management-card>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <lib-user-management-form [user]=\"facade.currentCardData()?.data ?? facade.emptyUser\"\n              [roles]=\"(facade.roles$ | async) ?? []\" [tags]=\"(facade.tags$ | async) ?? []\"\n              (save)=\"onSaveUser($event)\" (switchToTable)=\"vdv.toggleView()\">\n            </lib-user-management-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div class=\"flex gap-2 items-center justify-end\">\n            <div class=\"flex justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ (facade.items$ | async)?.length }} records loaded</span>\n              <button class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\"\n                [disabled]=\"(facade.isLoading$ | async) ?? false\" (click)=\"onLoadMore()\">Load More</button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n\n    <!-- Column Selector -->\n    <div column-content>\n      <lib-data-columns [columns]=\"facade.getColumns()\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n\n    <!-- Filter -->\n    <div filter-content>\n      <lib-data-filter [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"\n        (filterApplied)=\"onFilterApplied($event)\"></lib-data-filter>\n    </div>\n\n    <!-- Sort -->\n    <div sort-content>\n      <lib-data-sort [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"\n        (sortApplied)=\"onSortApplied($event)\"></lib-data-sort>\n    </div>\n\n    <!-- Export -->\n    <div export-content>\n      <lib-data-xport [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"></lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <!-- Table View Load More -->\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end mt-4 px-4\">\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ (facade.items$ | async)?.length }} records loaded</span>\n      <button class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\"\n        [disabled]=\"(facade.isLoading$ | async) ?? false\" (click)=\"onLoadMore()\">Load More</button>\n    </div>\n  </div>\n</div>\n", styles: [".user-management-page{width:100%}.paginator-text{color:var(--vbn-color-text-muted);font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: DataViewModule }, { kind: "component", type: i3.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "ngmodule", type: DataColumnsModule }, { kind: "component", type: i3.DataColumnsComponent, selector: "lib-data-columns", inputs: ["columns", "enableDragAndDrop", "maxVisibleItems"], outputs: ["columnsUpdated"] }, { kind: "ngmodule", type: DataFilterModule }, { kind: "component", type: i3.DataFilterComponent, selector: "lib-data-filter", inputs: ["columns", "data"], outputs: ["filterApplied", "resetFilter"] }, { kind: "ngmodule", type: DataSortModule }, { kind: "component", type: i3.DataSortComponent, selector: "lib-data-sort", inputs: ["columns", "data", "enableDragAndDrop"], outputs: ["sortApplied", "resetFilter"] }, { kind: "ngmodule", type: DataXportModule }, { kind: "component", type: i3.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "ngmodule", type: CardDataViewModule }, { kind: "component", type: i3.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "useVirtualScroll", "virtualScrollItemSize", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i3.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i3.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i3.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i3.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: UserManagementTableComponent, selector: "lib-user-management-table", inputs: ["users", "columns", "isLoading", "formGroupConfig"], outputs: ["view", "delete", "saveRow"] }, { kind: "component", type: UserManagementCardComponent, selector: "lib-user-management-card", inputs: ["user", "selected"] }, { kind: "component", type: UserManagementFormComponent, selector: "lib-user-management-form", inputs: ["user", "roles", "tags"], outputs: ["save", "switchToTable"] }] });
 }
 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                          getRoleName(item.data.RoleID)\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}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.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}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-full{height:100%}.w-10{width:2.5rem}.w-12{width:3rem}.w-3{width:.75rem}.w-4{width:1rem}.w-6{width:1.5rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.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-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-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))}.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))}.border-secondary-200{border-color:#d7dbe6}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.text-\\[10px\\]{font-size:10px}.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-\\[500\\]{font-weight:500}.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}.leading-6{line-height:1.5rem}.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))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#666666\\]{--tw-text-opacity: 1;color:rgb(102 102 102 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.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: [{
+            args: [{ selector: 'lib-user-management', standalone: true, imports: [
+                        CommonModule,
+                        DataViewModule,
+                        DataColumnsModule,
+                        DataFilterModule,
+                        DataSortModule,
+                        DataXportModule,
+                        CardDataViewModule,
+                        UserManagementTableComponent,
+                        UserManagementCardComponent,
+                        UserManagementFormComponent,
+                    ], providers: [UserFacade, UserState, UserService, SearchHandlerService], template: "<div class=\"user-management-page space-y-8\">\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isCreate: false,\n      isToggle: true,\n      isImport: false,\n    }\" [selectedColumnCount]=\"(facade.visibleColumns$ | async)?.length ?? 0\"\n    [selectedSortCount]=\"(facade.sorts$ | async)?.length ?? 0\"\n    [selectedFilterTableCount]=\"(facade.filters$ | async)?.length ?? 0\"\n    (onSearchChange)=\"onSearch($event.value)\">\n\n    <!-- Table View -->\n    <div table-content>\n      <lib-user-management-table [users]=\"(facade.items$ | async) ?? []\"\n        [columns]=\"(facade.visibleColumns$ | async) ?? []\" [isLoading]=\"(facade.isLoading$ | async) ?? false\"\n        [formGroupConfig]=\"facade.getConfig().formGroupConfig\" (view)=\"onViewUser($event)\"\n        (delete)=\"onDeleteUser($event)\" (saveRow)=\"onSaveRow($event)\">\n      </lib-user-management-table>\n    </div>\n\n    <!-- Card View -->\n    <div card-content>\n      <verben-card-data-view #vdcv [cardDataList]=\"facade.cardData()\" borderRadius=\"12px\" dataId=\"Code\" [border]=\"'5px'\"\n        rbgColor=\"var(--vbn-color-surface-alt)\" mg=\"20px\">\n\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"Code\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"facade.cardData()\">\n            <ng-template #card let-item>\n              <div (click)=\"userCardClicked(vdcv.onItemClick(item))\" class=\"cursor-pointer h-[max-content]\">\n                <lib-user-management-card [user]=\"item.data\" [selected]=\"item.selected\"></lib-user-management-card>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <lib-user-management-form [user]=\"facade.currentCardData()?.data ?? facade.emptyUser\"\n              [roles]=\"(facade.roles$ | async) ?? []\" [tags]=\"(facade.tags$ | async) ?? []\"\n              (save)=\"onSaveUser($event)\" (switchToTable)=\"vdv.toggleView()\">\n            </lib-user-management-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div class=\"flex gap-2 items-center justify-end\">\n            <div class=\"flex justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ (facade.items$ | async)?.length }} records loaded</span>\n              <button class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\"\n                [disabled]=\"(facade.isLoading$ | async) ?? false\" (click)=\"onLoadMore()\">Load More</button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n\n    <!-- Column Selector -->\n    <div column-content>\n      <lib-data-columns [columns]=\"facade.getColumns()\" (columnsUpdated)=\"onColumnsUpdated($event)\"></lib-data-columns>\n    </div>\n\n    <!-- Filter -->\n    <div filter-content>\n      <lib-data-filter [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"\n        (filterApplied)=\"onFilterApplied($event)\"></lib-data-filter>\n    </div>\n\n    <!-- Sort -->\n    <div sort-content>\n      <lib-data-sort [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"\n        (sortApplied)=\"onSortApplied($event)\"></lib-data-sort>\n    </div>\n\n    <!-- Export -->\n    <div export-content>\n      <lib-data-xport [columns]=\"facade.getColumns()\" [data]=\"(facade.items$ | async) ?? []\"></lib-data-xport>\n    </div>\n  </verben-data-view>\n\n  <!-- Table View Load More -->\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-end mt-4 px-4\">\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ (facade.items$ | async)?.length }} records loaded</span>\n      <button class=\"load-more view-links text-[var(--vbn-color-border-focus)] underline\"\n        [disabled]=\"(facade.isLoading$ | async) ?? false\" (click)=\"onLoadMore()\">Load More</button>\n    </div>\n  </div>\n</div>\n", styles: [".user-management-page{width:100%}.paginator-text{color:var(--vbn-color-text-muted);font-size:.875rem}\n"] }]
+        }], ctorParameters: () => [{ type: UserFacade }], propDecorators: { searchDebounceTime: [{
                 type: Input
             }], pageSize: [{
                 type: Input
+            }], role: [{
+                type: Input
+            }], vdv: [{
+                type: ViewChild,
+                args: ['vdv']
+            }], cardDataView: [{
+                type: ViewChild,
+                args: ['vdcv']
             }] } });
 
+/**
+ * Backward-compatibility shim. The components are standalone; this module keeps
+ * the historical `LibUserManagementModule` name so existing NgModule-based
+ * consumers keep working after the rebuild. It no longer depends on the
+ * access-request module.
+ */
 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] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibUserManagementModule, imports: [UserManagementComponent, UserStatusBadgeComponent], exports: [UserManagementComponent, UserStatusBadgeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserManagementModule, imports: [UserManagementComponent, UserStatusBadgeComponent] });
 }
 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,
-                        // AsyncLabelPipe,
-                    ],
-                    providers: [UserManagementService],
-                    exports: [UserManagementComponent],
+                    imports: [UserManagementComponent, UserStatusBadgeComponent],
+                    exports: [UserManagementComponent, UserStatusBadgeComponent],
                 }]
         }] });
 
@@ -954,5 +591,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { LibUserManagementModule, UserManagementComponent };
+export { LibUserManagementModule, UserManagementComponent, UserStatusBadgeComponent };
 //# sourceMappingURL=verben-authentication-ui-src-lib-components-user-management.mjs.map