verben-authentication-ui 0.9.5 → 0.9.7

package/fesm2022/verben-authentication-ui.mjs

@@ -12,7 +12,6 @@ import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/router';
 import { RouterLink } from '@angular/router';
 import { BehaviorSubject, Subject, debounceTime, distinctUntilChanged, takeUntil, lastValueFrom, of, from } from 'rxjs';
-import { EditorModule } from 'verben-reporting-ui';
 
 class ErrorResponse {
     ErrorMsg;
@@ -63,7 +62,7 @@ class HttpWebRequestService {
     buildHeaders() {
         return {
             'Content-Type': 'application/json',
-            Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJNYWlsQWRkcmVzcyI6InZlcmJlbmFAZ21haWwuY29tIiwiQXBwbGljYXRpb24iOiIiLCJOYW1lIjoiVmVyYmVuYSBMb2dpYyBMaW1pdGVkIiwiUm9sZUlEIjoiUk9MLVpYQVhYVCIsIlRlbmFudElkIjoiUERMVEM2IiwiU2VydmljZU5hbWUiOiJXaGl0ZTM2MCIsIm5iZiI6MTczNjUxMjUwNSwiZXhwIjoxNzM2NzI4NTA1LCJpYXQiOjE3MzY1MTI1MDV9.D8BEM7t9c_dxuPVDqx-IG5SLpMWEiexQ1VeubefvF5s',
+            Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJNYWlsQWRkcmVzcyI6InZlcmJlbmFAZ21haWwuY29tIiwiQXBwbGljYXRpb24iOiIiLCJOYW1lIjoiVmVyYmVuYSBMb2dpYyBMaW1pdGVkIiwiUm9sZUlEIjoiUk9MLVpYQVhYVCIsIlRlbmFudElkIjoiUERMVEM2IiwiU2VydmljZU5hbWUiOiJXaGl0ZTM2MCIsIkNvbXBhbnkiOiJDT00tNkxJNjNIIiwibmJmIjoxNzQ3MTMxNTk1LCJleHAiOjE3NDczNDc1OTUsImlhdCI6MTc0NzEzMTU5NX0.X-5xj31h2ON268n1sTq6eFhphsiZ1k9JhkJ91R2-PKI',
         };
     }
     buildUrl(url, baseUrl) {
@@ -2185,7 +2184,7 @@ const columns$2 = [
     { id: 'actions', header: 'Actions', accessorKey: 'Name' },
 ];
 
-const mockData$1 = new Array(10).fill(1).map((id, i) => ({
+const mockData = new Array(10).fill(1).map((id, i) => ({
     Name: `Name ${id + i}`,
     Id: id,
     id: id.toString(),
@@ -2326,13 +2325,13 @@ class SsoComponent {
     cardDataView;
     dataView;
     columns = columns$2;
-    data = mockData$1;
+    data = mockData;
     filteredColumns = columns$2;
     styles = baseStyle$3;
     currentData = null;
     isGridView = true;
     selected = null;
-    cardData = mockData$1.map(({ Name, Description, Link, Logo }) => ({
+    cardData = mockData.map(({ Name, Description, Link, Logo }) => ({
         selected: false,
         title: Name,
         data: { Name, Description, Link, Logo },
@@ -2703,22 +2702,6 @@ var SearchPropertySign;
     SearchPropertySign["LIKE"] = "LIKE";
 })(SearchPropertySign || (SearchPropertySign = {}));
 
-var OAuthType;
-(function (OAuthType) {
-    OAuthType["InApp"] = "InApp";
-    OAuthType["Google"] = "Google";
-    OAuthType["Facebook"] = "Facebook";
-    OAuthType["OAuth"] = "OAuth";
-    OAuthType["MicrosoftAD"] = "MicrosoftAD";
-})(OAuthType || (OAuthType = {}));
-
-var UserAccessRequestStatus;
-(function (UserAccessRequestStatus) {
-    UserAccessRequestStatus["Pending"] = "Pending";
-    UserAccessRequestStatus["Approved"] = "Approved";
-    UserAccessRequestStatus["Declined"] = "Declined";
-})(UserAccessRequestStatus || (UserAccessRequestStatus = {}));
-
 var SearchPropertyValueType;
 (function (SearchPropertyValueType) {
     SearchPropertyValueType["Int"] = "Int";
@@ -2735,32 +2718,32 @@ const roles = [
     { id: 'manager', name: 'Manager' },
     { id: 'staff', name: 'Staff' },
 ];
-const mockData = new Array(10)
-    .fill(1)
-    .map((id, i) => ({
-    FirstName: `First ${id + i}`,
-    LastName: `Last ${id + i}`,
-    OtherName: `Other ${id + i}`,
-    Id: id + i,
-    id: (id + i).toString(),
-    MailAddress: `user${id + i}@mail.com`,
-    PhoneNumber: `+23480000000${id + i}`,
-    RequestStatus: randomEnum$1(UserAccessRequestStatus),
-    RoleID: roles[Math.floor(Math.random() * roles.length)].id,
-    Password: '1234567',
-    ExpireOn: new Date(),
-    IsSeeded: false,
-    OTPExpireOn: new Date(),
-    Tenants: [],
-    SignupType: OAuthType.InApp,
-    CreatedAt: new Date(),
-    UpdatedAt: new Date(),
-    DataState: ObjectState.New,
-    TenantId: `Tenant${id + i}`,
-    Code: '',
-    ServiceName: '',
-}));
-function randomEnum$1(anEnum) {
+// export const mockData: UserAccessRequest[] = new Array(10)
+//   .fill(1)
+//   .map((id, i) => ({
+//     FirstName: `First ${id + i}`,
+//     LastName: `Last ${id + i}`,
+//     OtherName: `Other ${id + i}`,
+//     Id: id + i,
+//     id: (id + i).toString(),
+//     MailAddress: `user${id + i}@mail.com`,
+//     PhoneNumber: `+23480000000${id + i}`,
+//     RequestStatus: randomEnum(UserAccessRequestStatus),
+//     RoleID: roles[Math.floor(Math.random() * roles.length)].id,
+//     Password: '1234567',
+//     ExpireOn: new Date(),
+//     IsSeeded: false,
+//     OTPExpireOn: new Date(),
+//     Tenants: [],
+//     SignupType: OAuthType.InApp,
+//     CreatedAt: new Date(),
+//     UpdatedAt: new Date(),
+//     DataState: ObjectState.New,
+//     TenantId: `Tenant${id + i}`,
+//     Code: '',
+//     ServiceName: '',
+//   }));
+function randomEnum(anEnum) {
     const enumValues = Object.values(anEnum);
     const randomIndex = Math.floor(Math.random() * enumValues.length);
     return enumValues[randomIndex];
@@ -3161,6 +3144,7 @@ class UserAccessRequestFacade {
             this.userAccessRequestState.setUpdating(true);
             await this.userAccessRequestService.saveUserAccessRequests([request]);
             this.userAccessRequestState.updateRequest(request);
+            this.utilService.showSuccess('Request updated successfully');
         }
         catch (error) {
             console.error('Failed to update request:', error);
@@ -3192,6 +3176,7 @@ class UserAccessRequestFacade {
             const data = response?.[0];
             if (data) {
                 this.userAccessRequestState.updateRequest(data);
+                this.utilService.showSuccess('Request approved successfully');
             }
         }
         catch (error) {
@@ -3218,6 +3203,13 @@ var DateFilterTypes$2;
     DateFilterTypes["After"] = "GT";
 })(DateFilterTypes$2 || (DateFilterTypes$2 = {}));
 
+var UserAccessRequestStatus;
+(function (UserAccessRequestStatus) {
+    UserAccessRequestStatus["Pending"] = "Pending";
+    UserAccessRequestStatus["Approved"] = "Approved";
+    UserAccessRequestStatus["Declined"] = "Declined";
+})(UserAccessRequestStatus || (UserAccessRequestStatus = {}));
+
 class UserRequestFormComponent {
     fb;
     roles = [];
@@ -3580,35 +3572,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['vdv']
             }] } });
 
-const SERVICE_CONFIG = new InjectionToken('ServiceConfig');
-class UserRequestApprovalService {
-    // protected readonly baseUrl: string;
-    resourceEndpoint;
-    roles = [
-        { id: 'admin', name: 'Admin' },
-        { id: 'manager', name: 'Manager' },
-        { id: 'staff', name: 'Staff' },
-    ];
-    constructor() {
-        // this.baseUrl = environment.serviceUrl;
-        // this.resourceEndpoint = config.resourceEndpoint;
-        this.resourceEndpoint = '';
-    }
-    getMockUserRequests() {
-        return mockData;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-function randomEnum(anEnum) {
-    const enumValues = Object.values(anEnum);
-    const randomIndex = Math.floor(Math.random() * enumValues.length);
-    return enumValues[randomIndex];
-}
-
 class LibUserRequestApprovalModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, declarations: [UserRequestApprovalComponent,
@@ -3628,8 +3591,9 @@ class LibUserRequestApprovalModule {
             VerbenaInputModule,
             VerbenaButtonModule,
             VerbenaBadgeModule,
-            DropDownModule], exports: [UserRequestApprovalComponent, UserAccessRequestStatusBadgeComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, providers: [UserRequestApprovalService], imports: [CommonModule,
+            DropDownModule], exports: [UserRequestApprovalComponent,
+            UserAccessRequestStatusBadgeComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, imports: [CommonModule,
             DataTableModule,
             CardModule,
             SvgModule,
@@ -3672,8 +3636,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         VerbenaBadgeModule,
                         DropDownModule,
                     ],
-                    providers: [UserRequestApprovalService],
-                    exports: [UserRequestApprovalComponent, UserAccessRequestStatusBadgeComponent],
+                    providers: [],
+                    exports: [
+                        UserRequestApprovalComponent,
+                        UserAccessRequestStatusBadgeComponent,
+                    ],
                 }]
         }] });
 
@@ -3941,6 +3908,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }], ctorParameters: () => [{ type: HttpWebRequestService }] });
 
+class UserStatusBadgeComponent {
+    status = Status.Active;
+    badgeConfig() {
+        switch (this.status) {
+            case Status.Active:
+                return { bgColor: '#CAE1CC', textColor: '#4ABB54', label: 'Active' };
+            case Status.InActive:
+                return { bgColor: '#FFDFDF', textColor: '#EB5757', label: 'InActive' };
+            default:
+                return { bgColor: '#827C7C', textColor: '#C3C3C3', label: 'Unknown' };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserStatusBadgeComponent, selector: "lib-user-status-badge", inputs: { status: "status" }, ngImport: i0, template: "<verbena-badge\n  borderRadius=\"9px\"\n  [bgColor]=\"badgeConfig().bgColor\"\n  [textColor]=\"badgeConfig().textColor\"\n  fontSize=\"12px\"\n  [text]=\"badgeConfig().label\"\n  [pd]=\"'2px 6px'\"\n></verbena-badge>\n", styles: [""], dependencies: [{ kind: "component", type: i8.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserStatusBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-status-badge', template: "<verbena-badge\n  borderRadius=\"9px\"\n  [bgColor]=\"badgeConfig().bgColor\"\n  [textColor]=\"badgeConfig().textColor\"\n  fontSize=\"12px\"\n  [text]=\"badgeConfig().label\"\n  [pd]=\"'2px 6px'\"\n></verbena-badge>\n" }]
+        }], propDecorators: { status: [{
+                type: Input
+            }] } });
+
 var DateFilterTypes$1;
 (function (DateFilterTypes) {
     DateFilterTypes["Before"] = "LT";
@@ -4373,11 +4362,11 @@ class UserManagementComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementComponent, deps: [{ token: i1$2.ActivatedRoute }, { token: UserManagementService }, { token: UserAccessRequestService }, { token: HttpWebRequestService }, { token: UtilService }, { token: EnvironmentService }], 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]=\"0\"\n    (onSearchChange)=\"onSearch($event)\"\n    [searchValue]=\"searchTerm\"\n  \n    [searchValue]=\"searchTerm\"\n    [selectedSortCount]=\"0\"\n    [showFilterChild]=\"showFilter\"\n    [selectedFilterTableCount]=\"0\"\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        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\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-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n          let-toggleAllRows=\"toggleAllRows\">\n          <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n            (change)=\"toggleAllRows()\" />\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=\"actions\">\n          <ng-template #cell let-value let-deleteRow >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"openDetailView(value)\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n        <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            <verbena-badge\n           borderRadius=\"20px\"\n           width=\"121px\"\n            text=\"{{value}}\"\n            bgColor=\"#D6F3E6\"\n            textColor=\"#2DB76F\"\n            pd=\"5px 15px\"\n            fontSize=\"16px\"\n          >\n\n\n        </verbena-badge>\n          </ng-template>\n        </ng-container>\n\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          >\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                          >Phone Number:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.PhoneNumber\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-access-request-status-badge\n                        [status]=\"item.data.RequestStatus\"\n                      ></lib-user-access-request-status-badge>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n          <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-between 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 (click)=\"vdv.toggleView()\" text=\"Switch To Table\"\n                  styleType=\"ylw-outline\"></verbena-button>\n                <verbena-button  text=\"Save\" bgColor=\"#FFE681\" (click)=\"onSave()\" textColor=\"#404040\"\n                  border=\"1px solid #FFE681\">\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-between': true,\n              'justify-end': vdcv.hasCurrentItem()\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    \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\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-export  (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n    <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n    class=\"message-log-button-container flex justify-between\">\n   \n  </div>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"w-full flex gap-2 justify-between\">\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\n\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-\\[100\\%\\]{height:100%}.h-\\[max-content\\]{height:-moz-max-content;height:max-content}.h-full{height:100%}.w-3{width:.75rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity, 1))}.border-secondary-200{border-color:#d7dbe6}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity, 1))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity, 1))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity, 1))}.bg-secondary-200{background-color:#d7dbe6}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.\\!text-\\[10px\\]{font-size:10px!important}.text-\\[10px\\]{font-size:10px}.text-\\[12px\\]{font-size:12px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.lowercase{text-transform:lowercase}.leading-6{line-height:1.5rem}.leading-\\[12\\.1px\\]{line-height:12.1px}.leading-\\[16\\.6px\\]{line-height:16.6px}.leading-\\[19\\.5px\\]{line-height:19.5px}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))}.text-\\[\\#3479E9\\]{--tw-text-opacity: 1;color:rgb(52 121 233 / var(--tw-text-opacity, 1))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.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: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i8.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i8.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i8.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: i8.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", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i8.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i8.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i8.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i8.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i8.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: i8.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: i8.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: i8.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data"], outputs: ["exportDataEvent"] }, { kind: "component", type: i8.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i8.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }, { kind: "component", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: ["status"] }, { kind: "component", type: UserManagementFormComponent, selector: "lib-user-request-form", inputs: ["currentData", "roles", "tags"], outputs: ["switchView", "onFormSave"] }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
+    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]=\"0\"\n    (onSearchChange)=\"onSearch($event)\"\n    [searchValue]=\"searchTerm\"\n  \n    [searchValue]=\"searchTerm\"\n    [selectedSortCount]=\"0\"\n    [showFilterChild]=\"showFilter\"\n    [selectedFilterTableCount]=\"0\"\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        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\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-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n          let-toggleAllRows=\"toggleAllRows\">\n          <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n            (change)=\"toggleAllRows()\" />\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=\"actions\">\n          <ng-template #cell let-value let-deleteRow >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"openDetailView(value)\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n        <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\n            [status]=\"value\"\n          ></lib-user-status-badge>\n          </ng-template>\n        </ng-container>\n\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          >\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                          >Phone Number:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.PhoneNumber\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-between 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 (click)=\"vdv.toggleView()\" text=\"Switch To Table\"\n                  styleType=\"ylw-outline\"></verbena-button>\n                <verbena-button  text=\"Save\" bgColor=\"#FFE681\" (click)=\"onSave()\" textColor=\"#404040\"\n                  border=\"1px solid #FFE681\">\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-between': true,\n              'justify-end': vdcv.hasCurrentItem()\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    \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\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-export  (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n    <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n    class=\"message-log-button-container flex justify-between\">\n   \n  </div>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"w-full flex gap-2 justify-between\">\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\n\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-\\[100\\%\\]{height:100%}.h-\\[max-content\\]{height:-moz-max-content;height:max-content}.h-full{height:100%}.w-3{width:.75rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity, 1))}.border-secondary-200{border-color:#d7dbe6}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity, 1))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity, 1))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity, 1))}.bg-secondary-200{background-color:#d7dbe6}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.\\!text-\\[10px\\]{font-size:10px!important}.text-\\[10px\\]{font-size:10px}.text-\\[12px\\]{font-size:12px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.lowercase{text-transform:lowercase}.leading-6{line-height:1.5rem}.leading-\\[12\\.1px\\]{line-height:12.1px}.leading-\\[16\\.6px\\]{line-height:16.6px}.leading-\\[19\\.5px\\]{line-height:19.5px}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))}.text-\\[\\#3479E9\\]{--tw-text-opacity: 1;color:rgb(52 121 233 / var(--tw-text-opacity, 1))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.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: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i8.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i8.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i8.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: i8.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", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i8.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i8.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i8.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i8.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i8.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: i8.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: i8.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: i8.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data"], outputs: ["exportDataEvent"] }, { kind: "component", type: i8.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: 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: i7.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-user-management', template: "<div class=\"flex flex-col gap-4 message-log-container\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n     \n      isToggle:true\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"0\"\n    (onSearchChange)=\"onSearch($event)\"\n    [searchValue]=\"searchTerm\"\n  \n    [searchValue]=\"searchTerm\"\n    [selectedSortCount]=\"0\"\n    [showFilterChild]=\"showFilter\"\n    [selectedFilterTableCount]=\"0\"\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        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\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-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n          let-toggleAllRows=\"toggleAllRows\">\n          <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n            (change)=\"toggleAllRows()\" />\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=\"actions\">\n          <ng-template #cell let-value let-deleteRow >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"openDetailView(value)\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n        <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            <verbena-badge\n           borderRadius=\"20px\"\n           width=\"121px\"\n            text=\"{{value}}\"\n            bgColor=\"#D6F3E6\"\n            textColor=\"#2DB76F\"\n            pd=\"5px 15px\"\n            fontSize=\"16px\"\n          >\n\n\n        </verbena-badge>\n          </ng-template>\n        </ng-container>\n\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          >\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                          >Phone Number:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.PhoneNumber\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-access-request-status-badge\n                        [status]=\"item.data.RequestStatus\"\n                      ></lib-user-access-request-status-badge>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n          <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-between 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 (click)=\"vdv.toggleView()\" text=\"Switch To Table\"\n                  styleType=\"ylw-outline\"></verbena-button>\n                <verbena-button  text=\"Save\" bgColor=\"#FFE681\" (click)=\"onSave()\" textColor=\"#404040\"\n                  border=\"1px solid #FFE681\">\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-between': true,\n              'justify-end': vdcv.hasCurrentItem()\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    \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\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-export  (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n    <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n    class=\"message-log-button-container flex justify-between\">\n   \n  </div>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"w-full flex gap-2 justify-between\">\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\n\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-\\[100\\%\\]{height:100%}.h-\\[max-content\\]{height:-moz-max-content;height:max-content}.h-full{height:100%}.w-3{width:.75rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity, 1))}.border-secondary-200{border-color:#d7dbe6}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity, 1))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity, 1))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity, 1))}.bg-secondary-200{background-color:#d7dbe6}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.\\!text-\\[10px\\]{font-size:10px!important}.text-\\[10px\\]{font-size:10px}.text-\\[12px\\]{font-size:12px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.lowercase{text-transform:lowercase}.leading-6{line-height:1.5rem}.leading-\\[12\\.1px\\]{line-height:12.1px}.leading-\\[16\\.6px\\]{line-height:16.6px}.leading-\\[19\\.5px\\]{line-height:19.5px}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))}.text-\\[\\#3479E9\\]{--tw-text-opacity: 1;color:rgb(52 121 233 / var(--tw-text-opacity, 1))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.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"] }]
+            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]=\"0\"\n    (onSearchChange)=\"onSearch($event)\"\n    [searchValue]=\"searchTerm\"\n  \n    [searchValue]=\"searchTerm\"\n    [selectedSortCount]=\"0\"\n    [showFilterChild]=\"showFilter\"\n    [selectedFilterTableCount]=\"0\"\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        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\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-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n          let-toggleAllRows=\"toggleAllRows\">\n          <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n            (change)=\"toggleAllRows()\" />\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=\"actions\">\n          <ng-template #cell let-value let-deleteRow >\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"openDetailView(value)\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n          <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template>\n        </ng-container>\n        <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\n            [status]=\"value\"\n          ></lib-user-status-badge>\n          </ng-template>\n        </ng-container>\n\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          >\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                          >Phone Number:</label\n                        >\n                        <span id=\"phone\" class=\"text-sm truncate\">{{\n                          item.data.PhoneNumber\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-between 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 (click)=\"vdv.toggleView()\" text=\"Switch To Table\"\n                  styleType=\"ylw-outline\"></verbena-button>\n                <verbena-button  text=\"Save\" bgColor=\"#FFE681\" (click)=\"onSave()\" textColor=\"#404040\"\n                  border=\"1px solid #FFE681\">\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-between': true,\n              'justify-end': vdcv.hasCurrentItem()\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    \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\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-export  (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n    <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n    class=\"message-log-button-container flex justify-between\">\n   \n  </div>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"w-full flex gap-2 justify-between\">\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\n\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mb-2{margin-bottom:.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-\\[100\\%\\]{height:100%}.h-\\[max-content\\]{height:-moz-max-content;height:max-content}.h-full{height:100%}.w-3{width:.75rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-all{word-break:break-all}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity, 1))}.border-secondary-200{border-color:#d7dbe6}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity, 1))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity, 1))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity, 1))}.bg-secondary-200{background-color:#d7dbe6}.p-3{padding:.75rem}.p-4{padding:1rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pr-1{padding-right:.25rem}.\\!text-\\[10px\\]{font-size:10px!important}.text-\\[10px\\]{font-size:10px}.text-\\[12px\\]{font-size:12px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.lowercase{text-transform:lowercase}.leading-6{line-height:1.5rem}.leading-\\[12\\.1px\\]{line-height:12.1px}.leading-\\[16\\.6px\\]{line-height:16.6px}.leading-\\[19\\.5px\\]{line-height:19.5px}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 1))}.text-\\[\\#3479E9\\]{--tw-text-opacity: 1;color:rgb(52 121 233 / var(--tw-text-opacity, 1))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity, 1))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.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$2.ActivatedRoute }, { type: UserManagementService }, { type: UserAccessRequestService }, { type: HttpWebRequestService }, { type: UtilService }, { type: EnvironmentService }], propDecorators: { cardDataView: [{
                 type: ViewChild,
                 args: ['vdcv']
@@ -4395,7 +4384,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 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], imports: [HttpClientModule,
+    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,
@@ -4435,7 +4424,7 @@ class LibUserManagementModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserManagementModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [UserManagementComponent, UserManagementFormComponent],
+                    declarations: [UserManagementComponent, UserManagementFormComponent, UserStatusBadgeComponent],
                     imports: [
                         HttpClientModule,
                         CommonModule,
@@ -5144,6 +5133,7 @@ class RoleControlComponent {
         console.log({ Data: data });
         console.log({ CardData: this.cardData });
         if (cardData) {
+            this.dataView.isTableView = false;
             this.viewDetails(cardData);
         }
         this.closePopUp();
@@ -5188,7 +5178,7 @@ class RoleControlComponent {
             return;
         }
         this.dataView.toggleView();
-        const id = this.currentData.data ? this.currentData.data.Code : '';
+        const id = this.currentData.data ? this.currentData.data.Id : '';
         if (id.trim().length > 0 && !this.tableView.isRowEditing(id)) {
             this.tableView.toggleRowEdit(id);
         }
@@ -5988,11 +5978,11 @@ class RoleControlComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, deps: [{ token: AuthorizationService }, { token: RoleControlService }, { token: UtilService }, { token: HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"false\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table #dt [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\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-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\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=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{value.Name}}\n          </ng-template>\n          <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-updateData=\"updateData\" let-value>\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [enableMouseLeave]=\"false\">\n              <verben-svg class=\"cursor-pointer actions-icon\" dropdown-trigger icon=\"list\"></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div (click)=\"toggleRowEdit(); closePopUp(); \" class=\"pop-up-value cursor-pointer\">Edit</div>\n                <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\n          </ng-template>\n          <ng-template #cellEdit let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"></verben-svg>\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg>\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" (click)=\"editValue(value)\"></verben-svg>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"></verbena-button>\n                  <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer *ngIf=\"this.cardContextHistory.length == 0\">\n          <div class=\"flex gap-2 justify-between\">\n            <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n              class=\"message-log-button-container flex justify-between\">\n              <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\n              </verbena-button>\n            </div>\n            <div class=\"flex {{vdcv.hasCurrentItem()?'flex-1':''}} justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n              <button (click)=\"loadMore()\" class=\"load-more view-links\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\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 (click)=\"loadMore()\" class=\"load-more view-links\">Load more</button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.width-max{min-width:max-content}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i8.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i8.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i8.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: i8.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", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i8.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i8.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i8.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i8.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i8.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: i8.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: i8.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: i8.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data"], outputs: ["exportDataEvent"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i8.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"false\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table [dataKey]=\"'Id'\" #dt [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\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-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\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=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{value.Name}}\n          </ng-template>\n          <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-updateData=\"updateData\" let-value>\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [enableMouseLeave]=\"false\">\n              <verben-svg class=\"cursor-pointer actions-icon\" dropdown-trigger icon=\"list\"></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div (click)=\"toggleRowEdit(); closePopUp(); \" class=\"pop-up-value cursor-pointer\">Edit</div>\n                <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\n          </ng-template>\n          <ng-template #cellEdit let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"></verben-svg>\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg>\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" (click)=\"editValue(value)\"></verben-svg>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"></verbena-button>\n                  <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer *ngIf=\"this.cardContextHistory.length == 0\">\n          <div class=\"flex gap-2 justify-between\">\n            <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n              class=\"message-log-button-container flex justify-between\">\n              <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\n              </verbena-button>\n            </div>\n            <div class=\"flex {{vdcv.hasCurrentItem()?'flex-1':''}} justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n              <button (click)=\"loadMore()\" class=\"load-more view-links\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\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 (click)=\"loadMore()\" class=\"load-more view-links\">Load more</button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.width-max{min-width:max-content}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i8.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i8.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i8.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: i8.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", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i8.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i8.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i8.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i8.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i8.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: i8.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: i8.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: i8.DataExportComponent, selector: "lib-data-export", inputs: ["columns", "data"], outputs: ["exportDataEvent"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i8.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i8.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "pipe", type: i7.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-role-control', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"false\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table #dt [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\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-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\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=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{value.Name}}\n          </ng-template>\n          <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-updateData=\"updateData\" let-value>\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [enableMouseLeave]=\"false\">\n              <verben-svg class=\"cursor-pointer actions-icon\" dropdown-trigger icon=\"list\"></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div (click)=\"toggleRowEdit(); closePopUp(); \" class=\"pop-up-value cursor-pointer\">Edit</div>\n                <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\n          </ng-template>\n          <ng-template #cellEdit let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"></verben-svg>\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg>\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" (click)=\"editValue(value)\"></verben-svg>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"></verbena-button>\n                  <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer *ngIf=\"this.cardContextHistory.length == 0\">\n          <div class=\"flex gap-2 justify-between\">\n            <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n              class=\"message-log-button-container flex justify-between\">\n              <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\n              </verbena-button>\n            </div>\n            <div class=\"flex {{vdcv.hasCurrentItem()?'flex-1':''}} justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n              <button (click)=\"loadMore()\" class=\"load-more view-links\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\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 (click)=\"loadMore()\" class=\"load-more view-links\">Load more</button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.width-max{min-width:max-content}\n"] }]
+            args: [{ selector: 'lib-role-control', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"false\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\" (onSearchChange)=\"handleSearch($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table [dataKey]=\"'Id'\" #dt [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\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-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\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=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{value.Name}}\n          </ng-template>\n          <ng-template #cellEdit let-row=\"row\" let-updateValue=\"updateValue\" let-updateData=\"updateData\" let-value>\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <verben-pop-Up #popup [customStyles]=\"{'z-index': '99'}\" [enableMouseLeave]=\"false\">\n              <verben-svg class=\"cursor-pointer actions-icon\" dropdown-trigger icon=\"list\"></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div (click)=\"toggleRowEdit(); closePopUp(); \" class=\"pop-up-value cursor-pointer\">Edit</div>\n                <div (click)=\"viewDetailsFromTable(value)\" class=\"pop-up-value cursor-pointer\">View Details</div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\n          </ng-template>\n          <ng-template #cellEdit let-isEditing=\"isEditing\" let-toggleRowEdit=\"toggleRowEdit\" let-row=\"row\" let-value>\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg icon=\"tick\" [width]=\"15\" [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"></verben-svg>\n              <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg>\n              <verben-svg icon=\"cardViewAlt\" [width]=\"15\" [height]=\"15\" (click)=\"editValue(value)\"></verben-svg>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button class=\"verben-switch-button\" (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"></verbena-button>\n                  <verbena-button class=\"verben-primary-button\" (click)=\"this.saveRole()\" text=\"Save\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer *ngIf=\"this.cardContextHistory.length == 0\">\n          <div class=\"flex gap-2 justify-between\">\n            <div *ngIf=\"!vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\"\n              class=\"message-log-button-container flex justify-between\">\n              <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\n              </verbena-button>\n            </div>\n            <div class=\"flex {{vdcv.hasCurrentItem()?'flex-1':''}} justify-end items-center gap-5\">\n              <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n              <button (click)=\"loadMore()\" class=\"load-more view-links\">Load more</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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter (filtersApplied)=\"onFilterUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\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 (click)=\"loadMore()\" class=\"load-more view-links\">Load more</button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #FFE681}.width-max{min-width:max-content}\n"] }]
         }], ctorParameters: () => [{ type: AuthorizationService }, { type: RoleControlService }, { type: UtilService }, { type: HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: EnvironmentService }], propDecorators: { cardDataView: [{
                 type: ViewChild,
                 args: ['vdcv']
@@ -6188,8 +6178,7 @@ class SharedModule {
             VerbenaSwitchModule,
             VerbenPopUpModule,
             ChipModule,
-            AsyncLabelPipe,
-            EditorModule] });
+            AsyncLabelPipe] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedModule, imports: [CommonModule, CommonModule,
             DataTableModule,
             CardModule,
@@ -6210,8 +6199,7 @@ class SharedModule {
             VerbenaTextareaModule,
             VerbenaSwitchModule,
             VerbenPopUpModule,
-            ChipModule,
-            EditorModule] });
+            ChipModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -6240,8 +6228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         VerbenaSwitchModule,
                         VerbenPopUpModule,
                         ChipModule,
-                        AsyncLabelPipe,
-                        EditorModule
+                        AsyncLabelPipe
                     ],
                 }]
         }] });
@@ -6271,5 +6258,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AUTHORIZATION_CONFIG, AuthCallbackComponent, AuthCallbackModule, AuthorizationService, ENVIRONMENT, EnvironmentService, ForgotPasswordComponent, ForgotPasswordModule, LibUserManagementModule, LibUserRequestApprovalModule, MailComponent, MailModule, MailValidationComponent, MailValidationModule, ResetPasswordComponent, ResetPasswordModule, RoleControlComponent, RoleControlModule, SERVICE_CONFIG, SignInComponent, SignInModule, SignUpComponent, SignUpModule, SsoComponent, SsoModule, TwoFactorAuthOtpComponent, TwoFactorAuthOtpModule, TwoFactorAuthSetupComponent, TwoFactorAuthSetupModule, UserAccessRequestStatusBadgeComponent, UserManagementComponent, UserRequestApprovalComponent, UserRequestApprovalService, UserRequestComponent, UserRequestModule };
+export { AUTHORIZATION_CONFIG, AuthCallbackComponent, AuthCallbackModule, AuthorizationService, ENVIRONMENT, EnvironmentService, ForgotPasswordComponent, ForgotPasswordModule, LibUserManagementModule, LibUserRequestApprovalModule, MailComponent, MailModule, MailValidationComponent, MailValidationModule, ResetPasswordComponent, ResetPasswordModule, RoleControlComponent, RoleControlModule, SignInComponent, SignInModule, SignUpComponent, SignUpModule, SsoComponent, SsoModule, TwoFactorAuthOtpComponent, TwoFactorAuthOtpModule, TwoFactorAuthSetupComponent, TwoFactorAuthSetupModule, UserAccessRequestStatusBadgeComponent, UserManagementComponent, UserRequestApprovalComponent, UserRequestComponent, UserRequestModule };
 //# sourceMappingURL=verben-authentication-ui.mjs.map