verben-authentication-ui 0.5.9 → 0.6.1

package/fesm2022/verben-authentication-ui.mjs

@@ -61,7 +61,7 @@ class HttpWebRequestService {
     buildHeaders() {
         return {
             'Content-Type': 'application/json',
-            'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJNYWlsQWRkcmVzcyI6InZlcmJlbmFAZ21haWwuY29tIiwiQXBwbGljYXRpb24iOiIiLCJOYW1lIjoiVmVyYmVuYSBMb2dpYyBMaW1pdGVkIiwiUm9sZXMiOiIiLCJUZW5hbnRJZCI6IlBETFRDNiIsIlNlcnZpY2VOYW1lIjoiV2hpdGUzNjAiLCJuYmYiOjE3MzU4Mjk1MDMsImV4cCI6MTczNjA0NTUwMywiaWF0IjoxNzM1ODI5NTAzfQ.17pbrSY5giPvVvdjrzWvfTWD2-Ln5vX8WBm4y9vxq2k'
+            'Authorization': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJNYWlsQWRkcmVzcyI6InZlcmJlbmFAZ21haWwuY29tIiwiQXBwbGljYXRpb24iOiIiLCJOYW1lIjoiVmVyYmVuYSBMb2dpYyBMaW1pdGVkIiwiUm9sZXMiOiIiLCJUZW5hbnRJZCI6IlBETFRDNiIsIlNlcnZpY2VOYW1lIjoiV2hpdGUzNjAiLCJuYmYiOjE3MzYxNjM1OTYsImV4cCI6MTczNjM3OTU5NiwiaWF0IjoxNzM2MTYzNTk2fQ.q5ErmDIP0NwKKRlVeb9_EfmrEfd8gsFzkNNszkTeTg4'
         };
     }
     buildUrl(url, baseUrl) {
@@ -448,7 +448,8 @@ class UserRequestComponent {
     height = 'auto';
     pd = '32px 48px';
     isFormEditable = true;
-    apiKey = '';
+    apiKey;
+    secret;
     hidePassword = false;
     isCode = false;
     text = 'Send Request';
@@ -481,6 +482,7 @@ class UserRequestComponent {
         this.envSvc = envSvc;
         this.route = route;
         this.apiKey = this.envSvc.environment.Tenant;
+        this.secret = this.envSvc.environment.Secret;
         this.userRequestForm = this.fb.group({
             Code: new FormControl('', { nonNullable: true }),
             FirstName: new FormControl('', {
@@ -557,7 +559,7 @@ class UserRequestComponent {
     }
     async ngOnInit() {
         await this.getTenantConfig();
-        this.route.queryParams.subscribe(params => {
+        this.route.queryParams.subscribe((params) => {
             this.code = params['code'];
             this.type = params['type'];
             if (this.code) {
@@ -631,7 +633,7 @@ class UserRequestComponent {
             const data = this.AuthMechanisms.find((item) => item.AuthMechanism.includes(this.type));
             const payload = {
                 AuthCode: this.code,
-                APIKey: this.apiKey,
+                Tenant: this.apiKey,
                 AuthMechanism: data.AuthMechanism,
             };
             this.utilService.sendBI(true);
@@ -2648,6 +2650,104 @@ const baseStyle$2 = {
     },
 };
 
+var SearchOperator;
+(function (SearchOperator) {
+    SearchOperator["And"] = "And";
+    SearchOperator["Or"] = "Or";
+})(SearchOperator || (SearchOperator = {}));
+
+var SearchPropertySign;
+(function (SearchPropertySign) {
+    SearchPropertySign["EQ"] = "EQ";
+    SearchPropertySign["NEQ"] = "NEQ";
+    SearchPropertySign["GT"] = "GT";
+    SearchPropertySign["GTE"] = "GTE";
+    SearchPropertySign["LT"] = "LT";
+    SearchPropertySign["LTE"] = "LTE";
+    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";
+    SearchPropertyValueType["Float"] = "Float";
+    SearchPropertyValueType["Decimal"] = "Decimal";
+    SearchPropertyValueType["Double"] = "Double";
+    SearchPropertyValueType["String"] = "String";
+    SearchPropertyValueType["Bool"] = "Bool";
+    SearchPropertyValueType["Date"] = "Date";
+})(SearchPropertyValueType || (SearchPropertyValueType = {}));
+
+const roles = [
+    { id: 'admin', name: 'Admin' },
+    { 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) {
+    const enumValues = Object.values(anEnum);
+    const randomIndex = Math.floor(Math.random() * enumValues.length);
+    return enumValues[randomIndex];
+}
+function convertDataFilterTypeToSearchPropertyValueType(type) {
+    switch (type) {
+        case DataFilterType.String:
+            return SearchPropertyValueType.String;
+        case DataFilterType.Integer:
+            return SearchPropertyValueType.Int;
+        case DataFilterType.Decimal:
+            return SearchPropertyValueType.Decimal;
+        case DataFilterType.Credit:
+            return SearchPropertyValueType.Float;
+        case DataFilterType.Date:
+            return SearchPropertyValueType.Date;
+        case DataFilterType.Bool:
+            return SearchPropertyValueType.Bool;
+        case DataFilterType.Number:
+            return SearchPropertyValueType.Int;
+    }
+}
+
 class UserAccessRequestService {
     httpService;
     BASE_URL = 'User';
@@ -2683,6 +2783,19 @@ class UserAccessRequestService {
         const url = `${this.BASE_URL}/GetUserAccessRequestWithParam/${param}/${skip}/${limit}/${sortParam}/${sortOrder}`;
         return this.httpService.get(url);
     }
+    /**
+     * Get user access requests with additional parameter, pagination and sorting
+     * @param params Filter parameters
+     * @param skip Number of records to skip
+     * @param limit Number of records to take
+     * @param sortParam Sort parameter
+     * @param sortOrder Sort order ('asc' or 'desc')
+     * @returns Promise containing the filtered user access requests
+     */
+    getUserAccessRequestByFilterParams(params, skip, limit, sortParam, sortOrder) {
+        const url = `${this.BASE_URL}/SearchUserAccessRequest/${skip}/${limit}/${sortParam}/${sortOrder}`;
+        return this.httpService.post(url, params);
+    }
     /**
      * Save multiple user access requests
      * @param requests Array of user access requests to save
@@ -2732,6 +2845,7 @@ class UserAccessRequestState {
         sortParam: 'CreatedAt',
         sortOrder: 'asc',
     });
+    filterParams$ = new BehaviorSubject([]);
     isUpdating$() {
         return this.updating$.asObservable();
     }
@@ -2744,6 +2858,12 @@ class UserAccessRequestState {
     setRequests(requests) {
         this.requests$.next(requests);
     }
+    getFilterParams$() {
+        return this.filterParams$.asObservable();
+    }
+    setFilterParams(params) {
+        this.filterParams$.next(params);
+    }
     getRoles$() {
         return this.roles$.asObservable();
     }
@@ -2814,13 +2934,20 @@ class UserAccessRequestFacade {
         this.utilService = utilService;
         // Set up debounced search handling
         this.searchSubject
-            .pipe(debounceTime(500), distinctUntilChanged(), takeUntil(this.destroy$))
+            .pipe(debounceTime(1000), distinctUntilChanged(), takeUntil(this.destroy$))
             .subscribe((searchTerm) => {
             this.handleSearch(searchTerm);
         });
         this.isUpdating$().subscribe((loading) => {
             this.utilService.sendBI(loading);
         });
+        this.getFilterParams$().subscribe((params) => {
+            if (params.length) {
+            }
+            else {
+                this.loadRequests();
+            }
+        });
     }
     destroy() {
         this.destroy$.next();
@@ -2832,6 +2959,9 @@ class UserAccessRequestFacade {
     getRequests$() {
         return this.userAccessRequestState.getRequests$();
     }
+    getFilterParams$() {
+        return this.userAccessRequestState.getFilterParams$();
+    }
     getRoles$() {
         return this.userAccessRequestState.getRoles$();
     }
@@ -2865,6 +2995,10 @@ class UserAccessRequestFacade {
             this.userAccessRequestState.setUpdating(false);
         }
     }
+    async filter(filterParams) {
+        this.userAccessRequestState.resetPagination();
+        this.userAccessRequestState.setFilterParams(filterParams);
+    }
     // Load more handling
     async loadMore() {
         try {
@@ -2933,6 +3067,27 @@ class UserAccessRequestFacade {
             this.userAccessRequestState.setUpdating(false);
         }
     }
+    async loadRequestsByFilterParams(filterParams) {
+        try {
+            this.userAccessRequestState.setUpdating(true);
+            const params = this.userAccessRequestState.getQueryParamsValue();
+            const requests = await this.userAccessRequestService.getUserAccessRequestByFilterParams(filterParams.map((filter) => ({
+                PropertyName: filter.name,
+                EntityValue: filter.value,
+                type: convertDataFilterTypeToSearchPropertyValueType(filter.type),
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            })), params.skip, params.limit, params.sortParam || 'createdDate', params.sortOrder);
+            this.userAccessRequestState.setRequests(requests.Result);
+        }
+        catch (error) {
+            console.error('Failed to load requests with param:', error);
+            throw error;
+        }
+        finally {
+            this.userAccessRequestState.setUpdating(false);
+        }
+    }
     updateQueryParams(params) {
         this.userAccessRequestState.updateQueryParams(params);
         this.loadRequests();
@@ -3009,18 +3164,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: UserAccessRequestService }, { type: UserAccessRequestState }, { type: UtilService }] });
-
-var UserAccessRequestStatus;
-(function (UserAccessRequestStatus) {
-    UserAccessRequestStatus["Pending"] = "Pending";
-    UserAccessRequestStatus["Approved"] = "Approved";
-    UserAccessRequestStatus["Declined"] = "Declined";
-})(UserAccessRequestStatus || (UserAccessRequestStatus = {}));
+var DateFilterTypes$2;
+(function (DateFilterTypes) {
+    DateFilterTypes["Before"] = "LT";
+    DateFilterTypes["On"] = "EQ";
+    DateFilterTypes["After"] = "GT";
+})(DateFilterTypes$2 || (DateFilterTypes$2 = {}));
 
 class UserRequestFormComponent {
     fb;
     roles = [];
+    get currentData() {
+        return this._currentData;
+    }
     set currentData(value) {
+        this._currentData = value;
         if (value?.data) {
             this.form.patchValue({
                 MailAddress: value.data.MailAddress || '',
@@ -3034,6 +3192,7 @@ class UserRequestFormComponent {
             this.form.reset();
         }
     }
+    _currentData = null;
     switchView = new EventEmitter();
     onApproval = new EventEmitter();
     form;
@@ -3058,6 +3217,7 @@ class UserRequestFormComponent {
         // } catch (error) {
         //   // Handle error
         // }
+        console.log(this.currentData?.data);
     }
     onSave() {
         if (this.form.valid) {
@@ -3315,7 +3475,7 @@ class UserRequestApprovalComponent {
         {
             name: 'CreatedAt',
             type: DataFilterType.Date,
-            checked: false,
+            checked: true,
         },
     ];
     clearData() {
@@ -3353,6 +3513,7 @@ class UserRequestApprovalComponent {
     }
     onFilterSet(event) {
         console.log(event);
+        this.userAccessRequestFacade.filter(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: UserAccessRequestFacade }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestApprovalComponent, selector: "lib-user-request-approval", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-8\">\n  <verben-data-view\n    #vdv\n    [viewState]=\"{\n      isSearch: true,\n      isColumn: true,\n      isFilter: true,\n      isSort: true,\n      isExport: true,\n      isSelect: true,\n      isCreate: false,\n      isToggle: true,\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\"\n  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data()\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"status\">\n          <ng-template #cell let-value>\n            <lib-user-access-request-status-badge\n              [status]=\"value\"\n            ></lib-user-access-request-status-badge>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value let-deleteRow>\n            <div class=\"flex gap-6\">\n              <verben-svg\n                (click)=\"openDetailView(value)\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n              <!-- <button (click)=\"openDetailView(value)\">Open</button>\n              <button (click)=\"selected = cardData[rowIndex]; vdv.toggleView()\">\n                Switch\n              </button> -->\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"deleteRow()\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n          <!-- <ng-template #header>\n            <strong>Actions</strong>\n          </ng-template> -->\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        (loadMoreClick)=\"loadMore()\"\n        #vdcv\n        dataId=\"MailAddress\"\n        border=\"5px\"\n        [cardDataList]=\"cardData()\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"20px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"cardData()\"\n          >\n            <ng-template #card let-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <div\n                  (click)=\"currentData = vdcv.onItemClick(item)\"\n                  class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n                >\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"flex-1 flex items-end gap-y-2 gap-x-4 p-4\">\n                    <div class=\"flex-1 space-y-2\">\n                      <span\n                        class=\"font-semibold text-[#404040] flex-1 truncate\"\n                        >{{ item.title }}</span\n                      >\n\n                      <p class=\"flex items-center my-1\">\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.body[0]?.Role\n                        }}</span>\n                      </p>\n\n                      <lib-user-access-request-status-badge\n                        [status]=\"item.data.RequestStatus\"\n                      ></lib-user-access-request-status-badge>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n\n        <verben-right-card-data-view>\n          <ng-template #parent>\n            <lib-user-request-form\n              [roles]=\"roles()\"\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n              (onApproval)=\"onApprove($event)\"\n            ></lib-user-request-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"w-full\">\n          <div\n            [ngClass]=\"{\n              'flex gap-2 items-center': true,\n              'justify-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        (filtersApplied)=\"onFilterSet($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data()\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n\n  <div *ngIf=\"vdv.isTableView\" class=\"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", 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}.col-span-2{grid-column:span 2 / span 2}.col-span-3{grid-column:span 3 / span 3}.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}.mt-\\[8px\\]{margin-top:8px}.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-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.\\!max-w-\\[304px\\]{max-width:304px!important}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.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-\\[1\\.5vw\\]{gap:1.5vw}.gap-x-4{-moz-column-gap:1rem;column-gap:1rem}.gap-y-1{row-gap:.25rem}.gap-y-2{row-gap:.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-7>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.75rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.rounded-\\[9px\\]{border-radius:9px}.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-\\[\\#CAE1CC\\]{--tw-bg-opacity: 1;background-color:rgb(202 225 204 / var(--tw-bg-opacity, 1))}.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}.pl-6{padding-left:1.5rem}.pr-1{padding-right:.25rem}.text-center{text-align:center}.\\!text-\\[10px\\]{font-size:10px!important}.text-\\[10px\\]{font-size:10px}.text-\\[12px\\]{font-size:12px}.text-\\[13px\\]{font-size:13px}.text-\\[16px\\]{font-size:16px}.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-\\[\\#4ABB54\\]{--tw-text-opacity: 1;color:rgb(74 187 84 / 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)}.view-links{color:#3479e9;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "groupBy", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i2.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i2.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: i2.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i2.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i2.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i2.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.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"] }, { kind: "component", type: i2.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied"] }, { kind: "component", type: i2.DataExportComponent, selector: "lib-data-export", inputs: ["data"], outputs: ["exportDataEvent"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: UserRequestFormComponent, selector: "lib-user-request-form", inputs: ["roles", "currentData"], outputs: ["switchView", "onApproval"] }, { kind: "component", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: ["status"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -3368,51 +3529,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['vdv']
             }] } });
 
-var OAuthType;
-(function (OAuthType) {
-    OAuthType["InApp"] = "InApp";
-    OAuthType["Google"] = "Google";
-    OAuthType["Facebook"] = "Facebook";
-    OAuthType["OAuth"] = "OAuth";
-    OAuthType["MicrosoftAD"] = "MicrosoftAD";
-})(OAuthType || (OAuthType = {}));
-
-const roles = [
-    { id: 'admin', name: 'Admin' },
-    { 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) {
-    const enumValues = Object.values(anEnum);
-    const randomIndex = Math.floor(Math.random() * enumValues.length);
-    return enumValues[randomIndex];
-}
-
 const SERVICE_CONFIG = new InjectionToken('ServiceConfig');
 class UserRequestApprovalService {
     // protected readonly baseUrl: string;
@@ -3557,17 +3673,6 @@ const columns = [
     },
 ];
 
-var SearchPropertySign;
-(function (SearchPropertySign) {
-    SearchPropertySign["EQ"] = "EQ";
-    SearchPropertySign["NEQ"] = "NEQ";
-    SearchPropertySign["GT"] = "GT";
-    SearchPropertySign["GTE"] = "GTE";
-    SearchPropertySign["LT"] = "LT";
-    SearchPropertySign["LTE"] = "LTE";
-    SearchPropertySign["LIKE"] = "LIKE";
-})(SearchPropertySign || (SearchPropertySign = {}));
-
 const baseStyle$1 = {
     width: "100%",
     fontFamily: '"Fraunces", serif',
@@ -4588,23 +4693,6 @@ var ChildrenType;
     ChildrenType["Action"] = "Action";
 })(ChildrenType || (ChildrenType = {}));
 
-var SearchOperator;
-(function (SearchOperator) {
-    SearchOperator["And"] = "And";
-    SearchOperator["Or"] = "Or";
-})(SearchOperator || (SearchOperator = {}));
-
-var SearchPropertyValueType;
-(function (SearchPropertyValueType) {
-    SearchPropertyValueType["Int"] = "Int";
-    SearchPropertyValueType["Float"] = "Float";
-    SearchPropertyValueType["Decimal"] = "Decimal";
-    SearchPropertyValueType["Double"] = "Double";
-    SearchPropertyValueType["String"] = "String";
-    SearchPropertyValueType["Bool"] = "Bool";
-    SearchPropertyValueType["Date"] = "Date";
-})(SearchPropertyValueType || (SearchPropertyValueType = {}));
-
 class RoleControlService {
     constructor() { }
     get roleColumns() {