verben-authentication-ui 0.3.2 → 0.3.3

package/fesm2022/verben-authentication-ui.mjs

@@ -1,3545 +0,0 @@
-import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Optional, EventEmitter, Component, Input, Output, NgModule, ViewChild, signal, computed } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@angular/common/http';
-import * as i2 from 'verben-ng-ui';
-import { UTIL_SERVICE, VerbenaInputModule, VerbenaButtonModule, SvgModule, DataFilterType, DataViewModule, TableFilterModule, SortTableModule, DataExportModule, VisibleColumnModule, CardDataViewModule, VerbenaTextareaModule, DataTableModule, CardModule, VerbenaBadgeModule, DropDownModule } from 'verben-ng-ui';
-import * as i1$2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i6 from '@angular/router';
-import { RouterLink } from '@angular/router';
-import { BehaviorSubject, lastValueFrom } from 'rxjs';
-
-class ErrorResponse {
-    ErrorMsg;
-    StatusCode;
-    FullLog;
-    constructor(ErrorMsg, StatusCode, FullLog) {
-        this.ErrorMsg = ErrorMsg;
-        this.StatusCode = StatusCode;
-        this.FullLog = FullLog;
-    }
-}
-
-// In your library's services/environment.service.ts
-// import { ENVIRONMENT } from '../models/ENVIRONMENT_TOKEN';
-const ENVIRONMENT = new InjectionToken('environment');
-class EnvironmentService {
-    env;
-    constructor(env) {
-        this.env = env;
-    }
-    get environment() {
-        return this.env;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EnvironmentService, deps: [{ token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EnvironmentService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EnvironmentService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [ENVIRONMENT]
-                }] }] });
-
-class HttpWebRequestService {
-    http;
-    envSvc;
-    notificationService;
-    isProd;
-    constructor(http, envSvc, notificationService) {
-        this.http = http;
-        this.envSvc = envSvc;
-        this.notificationService = notificationService;
-        this.isProd = this.envSvc.environment.production;
-    }
-    buildHeaders(apiKey = this.envSvc.environment.APIKey) {
-        return {
-            'Content-Type': 'application/json',
-            'APIKey': apiKey,
-        };
-    }
-    buildUrl(url, baseUrl) {
-        return `${baseUrl}/${url}`;
-    }
-    handleError(err) {
-        const msg = err.error?.ErrorMsg ||
-            err.error?.errors?.values?.toString() ||
-            `${err.status} ${err.statusText}`;
-        this.notificationService.error(msg, { timeout: 3000 });
-        return new ErrorResponse(msg);
-    }
-    request(method, url, body, baseUrl = this.envSvc.environment.AuthenticationAPI, apiKey) {
-        const options = {
-            headers: this.buildHeaders(apiKey),
-        };
-        const requestUrl = this.buildUrl(url, baseUrl);
-        switch (method) {
-            case 'GET':
-                return new Promise((resolve) => this.http.get(requestUrl, options).subscribe({
-                    next: resolve,
-                    error: (err) => resolve(this.handleError(err)),
-                }));
-            case 'POST':
-                return new Promise((resolve) => this.http.post(requestUrl, body, options).subscribe({
-                    next: resolve,
-                    error: (err) => resolve(this.handleError(err)),
-                }));
-            case 'PUT':
-                return this.http.put(requestUrl, body, options);
-            case 'DELETE':
-                return this.http.delete(requestUrl, options);
-        }
-    }
-    get(url, baseUrl, apiKey) {
-        return this.request('GET', url, undefined, baseUrl, apiKey);
-    }
-    post(url, body, baseUrl, apiKey) {
-        return this.request('POST', url, JSON.stringify(body), baseUrl, apiKey);
-    }
-    postFile(url, formData, baseUrl) {
-        return new Promise((resolve) => this.http.post(this.buildUrl(url, baseUrl || this.envSvc.environment.AuthenticationAPI), formData).subscribe({
-            next: resolve,
-            error: (err) => resolve(this.handleError(err)),
-        }));
-    }
-    put(url, body, baseUrl) {
-        return this.request('PUT', url, body, baseUrl);
-    }
-    delete(url, baseUrl) {
-        return this.request('DELETE', url, undefined, baseUrl);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpWebRequestService, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }, { token: i2.NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpWebRequestService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HttpWebRequestService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: EnvironmentService }, { type: i2.NotificationService }] });
-
-class UtilService {
-    parentUtilService;
-    constructor(parentUtilService) {
-        this.parentUtilService = parentUtilService;
-    }
-    sendBI(state) {
-        console.log({ Service: this.parentUtilService });
-        if (this.parentUtilService && this.parentUtilService.sendBI) {
-            this.parentUtilService.sendBI(state);
-        }
-        else {
-            console.warn('Util Service is not provided');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UtilService, deps: [{ token: UTIL_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UtilService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UtilService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [UTIL_SERVICE]
-                }] }] });
-
-class ResetPasswordComponent {
-    fb;
-    server;
-    utilService;
-    title = 'Reset Password';
-    subTitle = 'Create a New Password';
-    buttonCaption = 'Submit';
-    buttonTextColor;
-    buttonBackgroundColor;
-    showOldPassword = false;
-    token;
-    onSubmit = new EventEmitter();
-    onSubmitEnd = new EventEmitter();
-    resetPasswordForm;
-    constructor(fb, server, utilService) {
-        this.fb = fb;
-        this.server = server;
-        this.utilService = utilService;
-        this.resetPasswordForm = this.fb.group({
-            OldPassword: new FormControl(null, this.oldPasswordValidator.bind(this)),
-            Password: new FormControl(null, Validators.required),
-            ConfirmPassword: new FormControl(null, [
-                Validators.required,
-                this.confirmPasswordValidator.bind(this),
-            ]),
-        });
-    }
-    checkForm() {
-        return this.resetPasswordForm.valid;
-    }
-    oldPasswordValidator(control) {
-        if (this.showOldPassword && control.value == null) {
-            return { customValidation: true };
-        }
-        return null;
-    }
-    confirmPasswordValidator(control) {
-        if (this.resetPasswordForm &&
-            this.resetPasswordForm.controls['Password'] &&
-            this.resetPasswordForm.controls['Password'].value !== control.value) {
-            return { customValidation: true };
-        }
-        return null;
-    }
-    async submit() {
-        if (!this.checkForm()) {
-            return;
-        }
-        var data = {
-            OldPassword: this.showOldPassword
-                ? this.resetPasswordForm.controls['OldPassword'].value
-                : undefined,
-            Password: this.resetPasswordForm.controls['Password'].value,
-            ConfirmPassword: this.resetPasswordForm.controls['ConfirmPassword'].value,
-        };
-        this.onSubmit.emit(data);
-        var passwordRequest = {
-            NewPassword: data.Password,
-            OldPassword: data.OldPassword,
-            Token: this.token,
-        };
-        this.utilService.sendBI(true);
-        const res = await this.server.post(`User/CompleteChangePasswordRequest`, passwordRequest);
-        this.utilService.sendBI(false);
-        if (res instanceof ErrorResponse) {
-            this.onSubmitEnd.emit(res);
-        }
-        else {
-            var result = res;
-            this.onSubmitEnd.emit(result);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResetPasswordComponent, selector: "verben-reset-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", showOldPassword: "showOldPassword", token: "token" }, outputs: { onSubmit: "onSubmit", onSubmitEnd: "onSubmitEnd" }, ngImport: i0, template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n  <div class=\"reset-password-header flex flex-col\">\n    <div class=\"reset-password-title\">{{title}}</div>\n    <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n  </div>\n  <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Old Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">New Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Confirm Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\"\n      type=\"password\"></verbena-input>\n  </div>\n  <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n    [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { 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: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verben-reset-password', template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n  <div class=\"reset-password-header flex flex-col\">\n    <div class=\"reset-password-title\">{{title}}</div>\n    <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n  </div>\n  <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Old Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">New Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Confirm Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\"\n      type=\"password\"></verbena-input>\n  </div>\n  <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n    [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }], propDecorators: { title: [{
-                type: Input
-            }], subTitle: [{
-                type: Input
-            }], buttonCaption: [{
-                type: Input
-            }], buttonTextColor: [{
-                type: Input
-            }], buttonBackgroundColor: [{
-                type: Input
-            }], showOldPassword: [{
-                type: Input
-            }], token: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }], onSubmitEnd: [{
-                type: Output
-            }] } });
-
-class ResetPasswordModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordModule, declarations: [ResetPasswordComponent], imports: [FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            CommonModule], exports: [ResetPasswordComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordModule, imports: [FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ResetPasswordComponent],
-                    imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        VerbenaInputModule,
-                        VerbenaButtonModule,
-                        CommonModule,
-                    ],
-                    exports: [ResetPasswordComponent],
-                }]
-        }] });
-
-var ObjectState;
-(function (ObjectState) {
-    ObjectState["New"] = "New";
-    ObjectState["Changed"] = "Changed";
-    ObjectState["Unchanged"] = "Unchanged";
-    ObjectState["Removed"] = "Removed";
-})(ObjectState || (ObjectState = {}));
-
-var Status;
-(function (Status) {
-    Status["InActive"] = "InActive";
-    Status["Active"] = "Active";
-})(Status || (Status = {}));
-
-var RequestStatus;
-(function (RequestStatus) {
-    RequestStatus["Pending"] = "Pending";
-})(RequestStatus || (RequestStatus = {}));
-
-class UserRequestComponent {
-    fb;
-    server;
-    utilService;
-    envSvc;
-    width = '500px';
-    headingTitle = 'Request an account';
-    headingClass = 'font-medium text-[2rem] leading-[48px] text-[#333]';
-    customClass = '';
-    bgColor = '#fff';
-    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
-    border = '1px solid #66666680';
-    borderRadius = '24px';
-    textColor = '#333';
-    height = 'auto';
-    pd = '32px 48px';
-    apiKey = '';
-    // Button Inputs
-    text = 'Send Request';
-    color = 'black';
-    btnBorder = '1px solid #FFE681';
-    btnBorderRadius = '40px';
-    btnBgColor = '#FFE681';
-    btnWidth = '100%';
-    btnPd = '10px 20px';
-    termsLink = '';
-    privacyLink = '';
-    routerLink = '';
-    formSubmit = new EventEmitter();
-    googleClick = new EventEmitter();
-    onSubmitSuccess = new EventEmitter();
-    appleClick = new EventEmitter();
-    onSubmitResponseEnd = new EventEmitter();
-    userRequestForm;
-    constructor(fb, server, utilService, envSvc) {
-        this.fb = fb;
-        this.server = server;
-        this.utilService = utilService;
-        this.envSvc = envSvc;
-        this.apiKey = this.envSvc.environment.APIKey;
-        this.userRequestForm = this.fb.group({
-            FirstName: [null, [Validators.required]],
-            LastName: [null, [Validators.required]],
-            Email: [null, [Validators.required, Validators.email]],
-            Password: [null, [Validators.required, Validators.minLength(8)]],
-            ConfirmPassword: [null, [Validators.required]],
-        }, { validators: this.passwordMatchValidator });
-    }
-    passwordMatchValidator(control) {
-        const password = control.get('Password')?.value;
-        const confirmPassword = control.get('ConfirmPassword')?.value;
-        return password === confirmPassword ? null : { passwordMismatch: true };
-    }
-    get passwordMismatchError() {
-        return this.userRequestForm.hasError('passwordMismatch');
-    }
-    get styles() {
-        return {
-            'background-color': this.bgColor,
-            'box-shadow': this.boxShadow,
-            border: this.border,
-            'border-radius': this.borderRadius,
-            color: this.textColor,
-            'max-width': this.width,
-            height: this.height,
-            padding: this.pd,
-        };
-    }
-    checkForm() {
-        return this.userRequestForm.valid;
-    }
-    handleGoogleAuth() {
-        this.googleClick.emit();
-    }
-    handleAppleAuth() {
-        this.appleClick.emit();
-    }
-    async submitForm() {
-        if (!this.checkForm()) {
-            return;
-        }
-        const payload = [
-            {
-                Code: '',
-                FirstName: this.userRequestForm.controls['FirstName'].value,
-                LastName: this.userRequestForm.controls['LastName'].value,
-                MailAddress: this.userRequestForm.controls['Email'].value,
-                Password: this.userRequestForm.controls['Password'].value,
-                PhoneNumber: '',
-                OtherName: '',
-                Role: [],
-                Tags: [],
-                Status: Status.Active,
-                RequestStatus: RequestStatus.Pending,
-                UpdatedAt: new Date(),
-                CreatedAt: new Date(),
-                Id: '',
-                DataState: ObjectState.New,
-                TenantId: '',
-                ServiceName: '',
-                ActionBy: '',
-                Comment: '',
-            },
-        ];
-        // Emit payload if needed
-        this.formSubmit.emit(payload);
-        // Show loading indicator
-        this.utilService.sendBI(true);
-        try {
-            // Make the API call
-            const res = await this.server.post(`User/SaveUserAccessRequests`, payload);
-            // Hide loading indicator
-            this.utilService.sendBI(false);
-            if (res instanceof ErrorResponse) {
-                // Emit error response
-                this.onSubmitResponseEnd.emit(res);
-                console.log(res);
-            }
-            else {
-                // Emit success response
-                const result = res;
-                this.onSubmitResponseEnd.emit(result);
-                // Emit success event
-                this.onSubmitSuccess.emit(result);
-            }
-        }
-        catch (error) {
-            // Handle unexpected errors
-            this.utilService.sendBI(false);
-            console.error('Unexpected error:', error);
-            this.onSubmitResponseEnd.emit(error);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestComponent, selector: "lib-user-request", inputs: { width: "width", headingTitle: "headingTitle", headingClass: "headingClass", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", text: "text", color: "color", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", googleClick: "googleClick", onSubmitSuccess: "onSubmitSuccess", appleClick: "appleClick", onSubmitResponseEnd: "onSubmitResponseEnd" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n  <h2 class=\"{{ headingClass }}\">\n    {{ headingTitle }}\n  </h2>\n\n  <form\n    [formGroup]=\"userRequestForm\"\n    (ngSubmit)=\"submitForm()\"\n    class=\"flex flex-col gap-5 mt-3\"\n  >\n    <verbena-input\n      [label]=\"'First Name'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'text'\"\n      formControlName=\"FirstName\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <verbena-input\n      [label]=\"'Last Name'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'text'\"\n      formControlName=\"LastName\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <verbena-input\n      [label]=\"'E-mail Address'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'email'\"\n      formControlName=\"Email\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [customErrorMessages]=\"{\n        required: 'Email address is required',\n        email: 'Email address must be valid'\n      }\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-input\n      [label]=\"'Password'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      formControlName=\"Password\"\n      [required]=\"true\"\n      [type]=\"'password'\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-input\n      [label]=\"'Confirm Password'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'password'\"\n      formControlName=\"ConfirmPassword\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [customErrorMessages]=\"{\n        minLength:'Confirm Password must match password',\n        required: 'Confirm Password is required and must match password',\n        password: 'Password does not match',\n      }\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-button\n    [class]=\"'mt-6'\"\n      [disable]=\"!this.checkForm()\"\n      [text]=\"text\"\n      [bgColor]=\"btnBgColor\"\n      [textColor]=\"color\"\n      [buttonClass]=\"'cursor-not-allowed'\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [pd]=\"btnPd\"\n      [ngClass]=\"{\n       'cursor-not-allowed':!checkForm()\n      }\"\n      [width]=\"btnWidth\"\n      buttonClass=\"font-medium text-[22px] leading-[33px]\"\n    ></verbena-button>\n    <div class=\"flex justify-center items-center OR\">\n      <span></span>\n      OR\n      <span></span>\n  </div>\n\n    <verbena-button\n      svg=\"google-logo\"\n      [svgHeight]=\"24\"\n      [svgWidth]=\"24\"\n      (click)=\"handleGoogleAuth()\"\n      text=\"Continue with Google\"\n      bgColor=\"white\"\n      textColor=\"black\"\n      border=\"1px solid #333\"\n      borderRadius=\"40px\"\n      pd=\"10px 20px\"\n      width=\"100%\"\n      svgPosition=\"left\"\n      buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n    ></verbena-button>\n\n    <verbena-button\n      svg=\"apple-logo\"\n      (click)=\"handleAppleAuth()\"\n      [svgHeight]=\"24\"\n      [svgWidth]=\"24\"\n      text=\"Continue with Apple\"\n      bgColor=\"white\"\n      textColor=\"black\"\n      border=\"1px solid #333\"\n      borderRadius=\"40px\"\n      pd=\"10px 20px\"\n      width=\"100%\"\n      svgPosition=\"left\"\n      buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n    ></verbena-button>\n  </form>\n</section>\n", styles: [".flex{display:flex}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.justify-center{justify-content:center}.h-full{height:100%}.text-center{text-align:center}.underline{text-decoration:underline}.gap-5{gap:20px}.mt-4{margin-top:1rem}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.object-cover{object-fit:cover}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed!important}.accent{accent-color:#000}.OR{color:#666;gap:6px}.OR span{width:150px;border-top:2px solid #6666663d;display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { 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: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-user-request', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n  <h2 class=\"{{ headingClass }}\">\n    {{ headingTitle }}\n  </h2>\n\n  <form\n    [formGroup]=\"userRequestForm\"\n    (ngSubmit)=\"submitForm()\"\n    class=\"flex flex-col gap-5 mt-3\"\n  >\n    <verbena-input\n      [label]=\"'First Name'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'text'\"\n      formControlName=\"FirstName\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <verbena-input\n      [label]=\"'Last Name'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'text'\"\n      formControlName=\"LastName\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <verbena-input\n      [label]=\"'E-mail Address'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'email'\"\n      formControlName=\"Email\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [customErrorMessages]=\"{\n        required: 'Email address is required',\n        email: 'Email address must be valid'\n      }\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-input\n      [label]=\"'Password'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      formControlName=\"Password\"\n      [required]=\"true\"\n      [type]=\"'password'\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-input\n      [label]=\"'Confirm Password'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'password'\"\n      formControlName=\"ConfirmPassword\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [customErrorMessages]=\"{\n        minLength:'Confirm Password must match password',\n        required: 'Confirm Password is required and must match password',\n        password: 'Password does not match',\n      }\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-button\n    [class]=\"'mt-6'\"\n      [disable]=\"!this.checkForm()\"\n      [text]=\"text\"\n      [bgColor]=\"btnBgColor\"\n      [textColor]=\"color\"\n      [buttonClass]=\"'cursor-not-allowed'\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [pd]=\"btnPd\"\n      [ngClass]=\"{\n       'cursor-not-allowed':!checkForm()\n      }\"\n      [width]=\"btnWidth\"\n      buttonClass=\"font-medium text-[22px] leading-[33px]\"\n    ></verbena-button>\n    <div class=\"flex justify-center items-center OR\">\n      <span></span>\n      OR\n      <span></span>\n  </div>\n\n    <verbena-button\n      svg=\"google-logo\"\n      [svgHeight]=\"24\"\n      [svgWidth]=\"24\"\n      (click)=\"handleGoogleAuth()\"\n      text=\"Continue with Google\"\n      bgColor=\"white\"\n      textColor=\"black\"\n      border=\"1px solid #333\"\n      borderRadius=\"40px\"\n      pd=\"10px 20px\"\n      width=\"100%\"\n      svgPosition=\"left\"\n      buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n    ></verbena-button>\n\n    <verbena-button\n      svg=\"apple-logo\"\n      (click)=\"handleAppleAuth()\"\n      [svgHeight]=\"24\"\n      [svgWidth]=\"24\"\n      text=\"Continue with Apple\"\n      bgColor=\"white\"\n      textColor=\"black\"\n      border=\"1px solid #333\"\n      borderRadius=\"40px\"\n      pd=\"10px 20px\"\n      width=\"100%\"\n      svgPosition=\"left\"\n      buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n    ></verbena-button>\n  </form>\n</section>\n", styles: [".flex{display:flex}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.justify-center{justify-content:center}.h-full{height:100%}.text-center{text-align:center}.underline{text-decoration:underline}.gap-5{gap:20px}.mt-4{margin-top:1rem}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.object-cover{object-fit:cover}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed!important}.accent{accent-color:#000}.OR{color:#666;gap:6px}.OR span{width:150px;border-top:2px solid #6666663d;display:block}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }, { type: EnvironmentService }], propDecorators: { width: [{
-                type: Input
-            }], headingTitle: [{
-                type: Input
-            }], headingClass: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], boxShadow: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], pd: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], btnBorder: [{
-                type: Input
-            }], btnBorderRadius: [{
-                type: Input
-            }], btnBgColor: [{
-                type: Input
-            }], btnWidth: [{
-                type: Input
-            }], btnPd: [{
-                type: Input
-            }], termsLink: [{
-                type: Input
-            }], privacyLink: [{
-                type: Input
-            }], routerLink: [{
-                type: Input
-            }], formSubmit: [{
-                type: Output
-            }], googleClick: [{
-                type: Output
-            }], onSubmitSuccess: [{
-                type: Output
-            }], appleClick: [{
-                type: Output
-            }], onSubmitResponseEnd: [{
-                type: Output
-            }] } });
-
-class UserRequestModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: UserRequestModule, declarations: [UserRequestComponent], imports: [FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            CommonModule], exports: [UserRequestComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestModule, imports: [FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [UserRequestComponent],
-                    imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        VerbenaInputModule,
-                        VerbenaButtonModule,
-                        CommonModule,
-                    ],
-                    exports: [UserRequestComponent],
-                }]
-        }] });
-
-class MailValidationComponent {
-    customClass = '';
-    bgColor = '#fff';
-    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
-    border = '1px solid #66666680';
-    borderRadius = '24px';
-    textColor = '#666666';
-    height = 'auto';
-    pd = '32px 48px';
-    width = '600px';
-    text = 'Login';
-    textAlign = 'center';
-    color = 'black';
-    textSize = '32px';
-    btnBorder = '1px solid #FFE681';
-    btnBorderRadius = "40px";
-    btnBgColor = '#FFE681';
-    btnWidth = '100%';
-    btnPd = '7px 10px';
-    resendOtp = new EventEmitter();
-    proceedToNextStep = new EventEmitter();
-    login = new EventEmitter();
-    currentStep = 'linkSent';
-    handleResendOtp() {
-        this.resendOtp.emit();
-    }
-    goToNextStep() {
-        switch (this.currentStep) {
-            case 'linkSent':
-                this.currentStep = 'verified';
-                this.proceedToNextStep.emit(this.currentStep);
-                break;
-            case 'verified':
-                this.currentStep = 'accessGranted';
-                this.proceedToNextStep.emit(this.currentStep);
-                break;
-        }
-    }
-    get styles() {
-        return {
-            'background-color': this.bgColor,
-            'box-shadow': this.boxShadow,
-            'border': this.border,
-            'border-radius': this.borderRadius,
-            'color': this.textColor,
-            'max-width': this.width,
-            'margin': '0 auto',
-            'height': this.height,
-            'padding': this.pd,
-        };
-    }
-    handleLogin() {
-        this.login.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MailValidationComponent, selector: "lib-mail-validation", inputs: { customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", width: "width", text: "text", textAlign: "textAlign", color: "color", textSize: "textSize", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd" }, outputs: { resendOtp: "resendOtp", proceedToNextStep: "proceedToNextStep", login: "login" }, ngImport: i0, template: "<section  [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n  <div *ngIf=\"currentStep === 'linkSent'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Follow the link sent to your e-mail to verify your e-mail address\n    </p>\n    <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n      Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'verified'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Your e-mail has been verified! You will be notified when your access has\n      been authorized\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'accessGranted'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n    Your e-mail has been verified!\n    </p>\n  <div class=\"mt-4\">\n    <verbena-button\n    [text]=\"text\"\n    [bgColor]=\"btnBgColor\"\n    [textColor]=\"color\"\n    [border]=\"btnBorder\"\n    [borderRadius]=\"btnBorderRadius\"\n    [pd]=\"btnPd\"\n    (click)=\"handleLogin()\"\n    [width]=\"btnWidth\"\n    textSize=\"'22px'\"\n    buttonClass=\"font-medium text-[22px] leading-[33px]\"\n  ></verbena-button>\n  </div>\n  </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.w-full{width:100%}\n"], dependencies: [{ 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: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailValidationComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-mail-validation', template: "<section  [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n  <div *ngIf=\"currentStep === 'linkSent'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Follow the link sent to your e-mail to verify your e-mail address\n    </p>\n    <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n      Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'verified'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Your e-mail has been verified! You will be notified when your access has\n      been authorized\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'accessGranted'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n    Your e-mail has been verified!\n    </p>\n  <div class=\"mt-4\">\n    <verbena-button\n    [text]=\"text\"\n    [bgColor]=\"btnBgColor\"\n    [textColor]=\"color\"\n    [border]=\"btnBorder\"\n    [borderRadius]=\"btnBorderRadius\"\n    [pd]=\"btnPd\"\n    (click)=\"handleLogin()\"\n    [width]=\"btnWidth\"\n    textSize=\"'22px'\"\n    buttonClass=\"font-medium text-[22px] leading-[33px]\"\n  ></verbena-button>\n  </div>\n  </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.w-full{width:100%}\n"] }]
-        }], propDecorators: { customClass: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], boxShadow: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], pd: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }], textAlign: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], textSize: [{
-                type: Input
-            }], btnBorder: [{
-                type: Input
-            }], btnBorderRadius: [{
-                type: Input
-            }], btnBgColor: [{
-                type: Input
-            }], btnWidth: [{
-                type: Input
-            }], btnPd: [{
-                type: Input
-            }], resendOtp: [{
-                type: Output
-            }], proceedToNextStep: [{
-                type: Output
-            }], login: [{
-                type: Output
-            }] } });
-
-class MailValidationModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MailValidationModule, declarations: [MailValidationComponent], imports: [FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            CommonModule], exports: [MailValidationComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailValidationModule, imports: [FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailValidationModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MailValidationComponent],
-                    imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        VerbenaInputModule,
-                        VerbenaButtonModule,
-                        CommonModule,
-                    ],
-                    exports: [MailValidationComponent],
-                }]
-        }] });
-
-class ButtonComponent {
-    text = '';
-    color = 'black';
-    border = '1px solid #FFE681';
-    borderRadius = "40px";
-    bgColor = '#FFE681';
-    width = '100%';
-    pd = '10px 20px';
-    buttonClass = '';
-    disabled = false;
-    buttonClick = new EventEmitter();
-    handleClick() {
-        this.buttonClick.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, selector: "lib-button", inputs: { text: "text", color: "color", border: "border", borderRadius: "borderRadius", bgColor: "bgColor", width: "width", pd: "pd", buttonClass: "buttonClass", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-button', template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"] }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], pd: [{
-                type: Input
-            }], buttonClass: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], buttonClick: [{
-                type: Output
-            }] } });
-
-class OAuthComponent {
-    googleClick = new EventEmitter();
-    appleClick = new EventEmitter();
-    oAuthWithGoogle() {
-        this.googleClick.emit();
-    }
-    ;
-    oAuthWithApple() {
-        this.appleClick.emit();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OAuthComponent, selector: "verben-o-auth", outputs: { googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section class=\"oauthWrapper\"> \n    <div class=\"OrFlexWrapper\">\n        <hr/>\n        <span>OR</span>\n        <hr/>\n    </div>\n    <verbena-button\n    svg=\"google-logo\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with Google\"\n    bgColor=\"white\"\n    textColor=\"black\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n    (click)=\"oAuthWithGoogle()\"\n    ></verbena-button>\n    \n    <verbena-button\n    svg=\"apple-logo\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with Apple\"\n    bgColor=\"white\"\n    textColor=\"black\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n    (click)=\"oAuthWithApple()\"\n    ></verbena-button>\n</section>\n", styles: ["hr{height:1px;margin:0;border:1px solid #66666640;flex:1}.OR{margin:0 2px;color:#666}.oauthWrapper{display:flex;flex-direction:column;gap:12px}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"], dependencies: [{ 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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verben-o-auth', template: "<section class=\"oauthWrapper\"> \n    <div class=\"OrFlexWrapper\">\n        <hr/>\n        <span>OR</span>\n        <hr/>\n    </div>\n    <verbena-button\n    svg=\"google-logo\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with Google\"\n    bgColor=\"white\"\n    textColor=\"black\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n    (click)=\"oAuthWithGoogle()\"\n    ></verbena-button>\n    \n    <verbena-button\n    svg=\"apple-logo\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with Apple\"\n    bgColor=\"white\"\n    textColor=\"black\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n    (click)=\"oAuthWithApple()\"\n    ></verbena-button>\n</section>\n", styles: ["hr{height:1px;margin:0;border:1px solid #66666640;flex:1}.OR{margin:0 2px;color:#666}.oauthWrapper{display:flex;flex-direction:column;gap:12px}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"] }]
-        }], propDecorators: { googleClick: [{
-                type: Output
-            }], appleClick: [{
-                type: Output
-            }] } });
-
-class SignUpComponent {
-    fb;
-    server;
-    utilService;
-    headlingText = 'Create an account';
-    width = '';
-    maxWidth = '';
-    margin = '';
-    pd = '';
-    customClass = '';
-    headlingClass = '';
-    bgColor = '#fff';
-    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
-    border = '1px solid #66666680';
-    borderRadius = '24px';
-    height = 'auto';
-    textColor = '#333';
-    disabled = false;
-    // button styles
-    btnClass = '';
-    btnBgColor = '#FFE681';
-    btnColor = '';
-    btnBorder = '';
-    btnBorderRadius = '24px';
-    btnPd = '';
-    btnText = 'Create account';
-    //inputStyles
-    inputLabelColor = '';
-    inputBgColor = 'transparent';
-    inputBorder = '1px solid #66666659';
-    inputBorderRadius = '12px';
-    // links
-    termsLink = '';
-    privacyLink = '';
-    routerLink = '';
-    formSubmit = new EventEmitter();
-    onSubmitEnd = new EventEmitter();
-    googleClick = new EventEmitter();
-    appleClick = new EventEmitter();
-    signUpForm;
-    constructor(fb, server, utilService) {
-        this.fb = fb;
-        this.server = server;
-        this.utilService = utilService;
-        this.signUpForm = this.fb.group({
-            Firstname: new FormControl(null, Validators.required),
-            Lastname: new FormControl(null, Validators.required),
-            Email: new FormControl(null, [
-                Validators.required,
-                Validators.email,
-            ]),
-            Password: new FormControl(null, [
-                Validators.required,
-                Validators.minLength(8),
-            ]),
-            Confirmpassword: new FormControl(null, [
-                Validators.required,
-                Validators.minLength(8),
-            ]),
-            Terms: new FormControl(false, [Validators.requiredTrue]),
-        }, { validators: this.passwordMatchValidator });
-    }
-    passwordMatchValidator = (group) => {
-        const password = group.get('Password')?.value;
-        const confirmPassword = group.get('Confirmpassword')?.value;
-        return password === confirmPassword ? null : { passwordMismatch: true };
-    };
-    checkForm() {
-        return this.signUpForm.valid;
-    }
-    async submit() {
-        if (!this.checkForm()) {
-            return;
-        }
-        const data = {
-            Firstname: this.signUpForm.controls['Firstname'].value,
-            Lastname: this.signUpForm.controls['Lastname'].value,
-            Email: this.signUpForm.controls['Email'].value,
-            Password: this.signUpForm.controls['Password'].value,
-            Terms: this.signUpForm.controls['Terms'].value,
-            Id: '61f7e48f0c651345677b7775',
-            CreatedAt: new Date(),
-            UpdatedAt: new Date(),
-            DataState: ObjectState.New,
-            id: '61f7e48f0c651345677b7775',
-            Tenant: 'James'
-        };
-        const payload = [
-            {
-                ...data,
-                "Code": "123 ",
-                "ServiceName": "Test 1",
-                "MailAddress": data.Email,
-                "OtherName": "James",
-                "Status": "Inactive",
-                "PhoneNumber": "07012345678",
-                "TenantId": '61f7e48f0c651345677b7775',
-                "Role": ['tester'],
-                "Tags": [
-                    {
-                        "Name": "checker",
-                        "IsOptional": true
-                    }
-                ],
-            }
-        ];
-        this.formSubmit.emit(data);
-        this.utilService.sendBI(true);
-        const res = await this.server.post(`User/SaveUsers`, payload);
-        this.utilService.sendBI(false);
-        if (res instanceof ErrorResponse) {
-            this.onSubmitEnd.emit(res);
-        }
-        else {
-            var result = res;
-            this.onSubmitEnd.emit(result);
-        }
-    }
-    handleGoogleAuth() {
-        this.googleClick.emit();
-    }
-    handleAppleAuth() {
-        this.appleClick.emit();
-    }
-    get styles() {
-        return {
-            'background-color': this.bgColor,
-            'box-shadow': this.boxShadow,
-            'border': this.border,
-            'border-radius': this.borderRadius,
-            'color': this.textColor,
-            'width': this.width,
-            'max-width': this.maxWidth,
-            'margin': this.margin,
-            'height': this.height,
-            'padding': this.pd
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignUpComponent, selector: "verben-sign-up", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", height: "height", textColor: "textColor", disabled: "disabled", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n    <h2 class=\"{{headlingClass}}\">\n      {{headlingText}}\n    </h2>\n    <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n      <verbena-input\n        [label]=\"'First name'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Firstname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n        [customErrorMessages]=\"{required:'First name is required'}\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Last name'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Lastname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n        [customErrorMessages]=\"{required:'Last name is required'}\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Email'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'email'\"\n        formControlName=\"Email\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Password'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'password'\"\n        formControlName=\"Password\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        [passwordToggle]=\"true\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <div> \n        <verbena-input\n          [label]=\"'Confirm Password'\"\n          [labelColor]=\"inputLabelColor\"\n          [placeHolder]=\"''\"\n          [required]=\"true\"\n          [type]=\"'password'\"\n          formControlName=\"Confirmpassword\"\n          [showBorder]=\"true\"\n          [bgColor]=\"inputBgColor\"\n          [border]=\"inputBorder\"\n          [borderRadius]=\"inputBorderRadius\"\n          [showErrorMessage]=\"false\"\n          [errorBorderColor]=\"'red'\"\n          class=\"outline-none focus-none\"\n        ></verbena-input>\n      <span *ngIf=\"signUpForm.hasError('passwordMismatch') && signUpForm.get('Confirmpassword')?.dirty\"> \n        <small class=\"error-text\">Passwords do not match.</small>\n      </span>\n      </div>\n      <div> \n        <div class=\"checkBoxWrapper\">\n          <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\"  class=\"checBoxInput\" />\n          <label for=\"terms\" \n          class=\"break-all font-normal leading-6\"\n            >By creating an account, I agree to our <a  [attr.href]=\"termsLink\">Terms of use</a> and\n            <a [attr.href]=\"privacyLink\">Privacy Policy</a></label\n          >\n        </div>\n       <p *ngIf=\"signUpForm.controls['Terms'].invalid && signUpForm.controls['Terms'].touched\">\n        <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n       </p>\n      </div>\n      <lib-button \n      [buttonClass]=\"btnClass\"\n      [color]=\"btnColor\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [bgColor]=\"btnBgColor\"\n      [pd]=\"btnPd\"\n      [text]=\"btnText\" \n      type=\"submit\"\n      [disabled]=\"!this.checkForm()\"\n      [ngStyle]=\"{'margin-top':'10px'}\"\n      ></lib-button>\n      <verben-o-auth \n      (googleClick)=\"handleGoogleAuth()\"\n      (appleClick)=\"handleAppleAuth()\"\n      ></verben-o-auth>\n      <p>\n        Already have an account?\n        <a [routerLink]=\"routerLink\"  class=\"\">Log in</a>\n      </p>\n    </form>\n  </section>\n  \n", styles: ["a{text-decoration:underline;cursor:pointer}input[type=checkbox]:checked{accent-color:#111}.flexWrapper{display:flex;flex-direction:column;gap:10px}.checkBoxWrapper{display:flex;align-items:start;gap:2px}.checBoxInput{margin-top:6px}.bigcheckboxWrapper{margin-top:.5rem;margin-bottom:1.5rem}.error-text{color:red}.disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: OAuthComponent, selector: "verben-o-auth", outputs: ["googleClick", "appleClick"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verben-sign-up', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n    <h2 class=\"{{headlingClass}}\">\n      {{headlingText}}\n    </h2>\n    <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n      <verbena-input\n        [label]=\"'First name'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Firstname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n        [customErrorMessages]=\"{required:'First name is required'}\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Last name'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Lastname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n        [customErrorMessages]=\"{required:'Last name is required'}\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Email'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'email'\"\n        formControlName=\"Email\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Password'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'password'\"\n        formControlName=\"Password\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        [passwordToggle]=\"true\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <div> \n        <verbena-input\n          [label]=\"'Confirm Password'\"\n          [labelColor]=\"inputLabelColor\"\n          [placeHolder]=\"''\"\n          [required]=\"true\"\n          [type]=\"'password'\"\n          formControlName=\"Confirmpassword\"\n          [showBorder]=\"true\"\n          [bgColor]=\"inputBgColor\"\n          [border]=\"inputBorder\"\n          [borderRadius]=\"inputBorderRadius\"\n          [showErrorMessage]=\"false\"\n          [errorBorderColor]=\"'red'\"\n          class=\"outline-none focus-none\"\n        ></verbena-input>\n      <span *ngIf=\"signUpForm.hasError('passwordMismatch') && signUpForm.get('Confirmpassword')?.dirty\"> \n        <small class=\"error-text\">Passwords do not match.</small>\n      </span>\n      </div>\n      <div> \n        <div class=\"checkBoxWrapper\">\n          <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\"  class=\"checBoxInput\" />\n          <label for=\"terms\" \n          class=\"break-all font-normal leading-6\"\n            >By creating an account, I agree to our <a  [attr.href]=\"termsLink\">Terms of use</a> and\n            <a [attr.href]=\"privacyLink\">Privacy Policy</a></label\n          >\n        </div>\n       <p *ngIf=\"signUpForm.controls['Terms'].invalid && signUpForm.controls['Terms'].touched\">\n        <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n       </p>\n      </div>\n      <lib-button \n      [buttonClass]=\"btnClass\"\n      [color]=\"btnColor\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [bgColor]=\"btnBgColor\"\n      [pd]=\"btnPd\"\n      [text]=\"btnText\" \n      type=\"submit\"\n      [disabled]=\"!this.checkForm()\"\n      [ngStyle]=\"{'margin-top':'10px'}\"\n      ></lib-button>\n      <verben-o-auth \n      (googleClick)=\"handleGoogleAuth()\"\n      (appleClick)=\"handleAppleAuth()\"\n      ></verben-o-auth>\n      <p>\n        Already have an account?\n        <a [routerLink]=\"routerLink\"  class=\"\">Log in</a>\n      </p>\n    </form>\n  </section>\n  \n", styles: ["a{text-decoration:underline;cursor:pointer}input[type=checkbox]:checked{accent-color:#111}.flexWrapper{display:flex;flex-direction:column;gap:10px}.checkBoxWrapper{display:flex;align-items:start;gap:2px}.checBoxInput{margin-top:6px}.bigcheckboxWrapper{margin-top:.5rem;margin-bottom:1.5rem}.error-text{color:red}.disable-btn{cursor:not-allowed}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }], propDecorators: { headlingText: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], pd: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], headlingClass: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], boxShadow: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], btnClass: [{
-                type: Input
-            }], btnBgColor: [{
-                type: Input
-            }], btnColor: [{
-                type: Input
-            }], btnBorder: [{
-                type: Input
-            }], btnBorderRadius: [{
-                type: Input
-            }], btnPd: [{
-                type: Input
-            }], btnText: [{
-                type: Input
-            }], inputLabelColor: [{
-                type: Input
-            }], inputBgColor: [{
-                type: Input
-            }], inputBorder: [{
-                type: Input
-            }], inputBorderRadius: [{
-                type: Input
-            }], termsLink: [{
-                type: Input
-            }], privacyLink: [{
-                type: Input
-            }], routerLink: [{
-                type: Input
-            }], formSubmit: [{
-                type: Output
-            }], onSubmitEnd: [{
-                type: Output
-            }], googleClick: [{
-                type: Output
-            }], appleClick: [{
-                type: Output
-            }] } });
-
-class OAuthModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: OAuthModule, declarations: [OAuthComponent], imports: [CommonModule, VerbenaInputModule, VerbenaButtonModule], exports: [OAuthComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthModule, imports: [CommonModule, VerbenaInputModule, VerbenaButtonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [OAuthComponent],
-                    imports: [CommonModule, VerbenaInputModule, VerbenaButtonModule],
-                    exports: [OAuthComponent]
-                }]
-        }] });
-
-class ButtonModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, VerbenaButtonModule, FormsModule], exports: [ButtonComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonModule, imports: [CommonModule, VerbenaButtonModule, FormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ButtonComponent],
-                    imports: [CommonModule, VerbenaButtonModule, FormsModule],
-                    exports: [ButtonComponent]
-                }]
-        }] });
-
-class SignUpModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SignUpModule, declarations: [SignUpComponent], imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule], exports: [SignUpComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpModule, imports: [CommonModule, FormsModule, VerbenaInputModule, ButtonModule, OAuthModule, ReactiveFormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SignUpComponent],
-                    imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule],
-                    exports: [SignUpComponent]
-                }]
-        }] });
-
-class SignInComponent {
-    fb;
-    server;
-    utilService;
-    envSvc;
-    headlingText = 'Sign in';
-    width = '';
-    maxWidth = '';
-    margin = '';
-    pd = '';
-    customClass = '';
-    headlingClass = '';
-    bgColor = '#fff';
-    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
-    border = '1px solid #66666680';
-    borderRadius = '24px';
-    textColor = '#333';
-    height = 'auto';
-    forgetPasswordClass = '';
-    requestAccessClass = '';
-    createAccountClass = '';
-    createAccountLinkClass = '';
-    // links
-    forgetPasswordLink = '';
-    createAccountLink = '';
-    requestAccessLink = '';
-    // button styles
-    btnClass = '';
-    btnBgColor = '#FFE681';
-    btnColor = '';
-    btnBorder = '';
-    btnBorderRadius = '24px';
-    btnPd = '';
-    btnText = 'Log in';
-    //inputStyles
-    inputLabelColor = '';
-    inputBgColor = 'transparent';
-    inputBorder = '1px solid #66666659';
-    inputBorderRadius = '12px';
-    termsErrorText = 'Please agree to the terms of use and privacy policy.';
-    formSubmit = new EventEmitter();
-    onSubmitEnd = new EventEmitter();
-    googleClick = new EventEmitter();
-    appleClick = new EventEmitter();
-    tenantDetails = null;
-    AuthMechanisms = null;
-    loginForm;
-    apiKey;
-    secret;
-    constructor(fb, server, utilService, envSvc) {
-        this.fb = fb;
-        this.server = server;
-        this.utilService = utilService;
-        this.envSvc = envSvc;
-        this.loginForm = this.fb.group({
-            Email: new FormControl(null, [
-                Validators.required,
-                Validators.email,
-            ]),
-            Password: new FormControl(null, [
-                Validators.required,
-                Validators.minLength(5),
-            ]),
-        });
-        this.apiKey = this.envSvc.environment.APIKey;
-        this.secret = this.envSvc.environment.Secret;
-    }
-    ngOnInit() {
-        this.getTenantConfig();
-    }
-    async getTenantConfig() {
-        const res = await this.server.get(`Tenant/GetTenantConfigByKey/${this.apiKey}`);
-        this.tenantDetails = res;
-        this.AuthMechanisms = this.tenantDetails?.AuthMechanisms;
-    }
-    checkForm() {
-        return this.loginForm.valid;
-    }
-    async submit() {
-        if (!this.checkForm()) {
-            return;
-        }
-        const data = {
-            MailAddress: this.loginForm.controls['Email'].value,
-            Password: this.loginForm.controls['Password'].value,
-            LoginType: this.tenantDetails?.AuthMechanism,
-            APIKey: this.apiKey,
-            Secrete: '$White360$'
-        };
-        this.formSubmit.emit(data);
-        this.utilService.sendBI(true);
-        const res = await this.server.post(`Authentication/Login`, data);
-        this.utilService.sendBI(false);
-        if (res instanceof ErrorResponse) {
-            this.onSubmitEnd.emit(res);
-        }
-        else {
-            var result = res;
-            this.onSubmitEnd.emit(result);
-        }
-    }
-    handleGoogleAuth() {
-        this.googleClick.emit();
-    }
-    handleAppleAuth() {
-        this.appleClick.emit();
-    }
-    get styles() {
-        return {
-            'background-color': this.bgColor,
-            'box-shadow': this.boxShadow,
-            'border': this.border,
-            'border-radius': this.borderRadius,
-            'color': this.textColor,
-            'width': this.width,
-            'max-width': this.maxWidth,
-            'margin': this.margin,
-            'height': this.height,
-            'padding': this.pd
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignInComponent, selector: "verben-sign-in", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", forgetPasswordClass: "forgetPasswordClass", requestAccessClass: "requestAccessClass", createAccountClass: "createAccountClass", createAccountLinkClass: "createAccountLinkClass", forgetPasswordLink: "forgetPasswordLink", createAccountLink: "createAccountLink", requestAccessLink: "requestAccessLink", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsErrorText: "termsErrorText" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n    <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n    <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\"> \n    <verbena-input\n      [label]=\"'Email'\"\n      [labelColor]=\"inputLabelColor\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'email'\"\n      formControlName=\"Email\"\n      [showBorder]=\"true\"\n      [bgColor]=\"inputBgColor\"\n      [border]=\"inputBorder\"\n      [borderRadius]=\"inputBorderRadius\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <div> \n        <verbena-input\n        [label]=\"'Password'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'password'\"\n        formControlName=\"Password\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        [passwordToggle]=\"true\"\n        [customErrorMessages]=\"{\n          password:'length must be 5 characters'\n        }\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <div class=\"pwdWrapper\"> \n          <p clas=\"mb-0\"> <a [routerLink]=\"forgetPasswordLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n      </div>\n    </div>\n    <div> \n      <lib-button \n      [buttonClass]=\"btnClass\"\n      [color]=\"btnColor\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [bgColor]=\"btnBgColor\"\n      [pd]=\"btnPd\"\n      [text]=\"btnText\" \n      type=\"submit\" \n      [disabled]=\"!this.checkForm()\"\n      ></lib-button>\n      <p *ngIf=\"requestAccessLink\">\n        <a [routerLink]=\"requestAccessLink\"  class=\"{{requestAccessClass}}\">Click here to request user access</a>\n      </p>\n      <div> \n        <div *ngIf=\"this.AuthMechanisms !== null && this.AuthMechanisms.length\"> \n          <verben-o-auth \n            (googleClick)=\"handleGoogleAuth()\"\n            (appleClick)=\"handleAppleAuth()\"\n          ></verben-o-auth>\n        </div>\n          <p class=\"{{createAccountClass}}\" *ngIf=\"createAccountLink\">\n            Don't have an account?\n            <a [routerLink]=\"createAccountLink\"  class=\"{{createAccountLinkClass}}\">Create an account</a>\n          </p>\n      </div>\n    </div>\n  </form>\n  </section>\n  ", styles: ["a{text-decoration:underline}.flexWrapper{display:flex;flex-direction:column;gap:20px;margin-top:12px}.pwdWrapper{display:flex;justify-content:flex-end;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: OAuthComponent, selector: "verben-o-auth", outputs: ["googleClick", "appleClick"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verben-sign-in', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n    <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n    <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\"> \n    <verbena-input\n      [label]=\"'Email'\"\n      [labelColor]=\"inputLabelColor\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'email'\"\n      formControlName=\"Email\"\n      [showBorder]=\"true\"\n      [bgColor]=\"inputBgColor\"\n      [border]=\"inputBorder\"\n      [borderRadius]=\"inputBorderRadius\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <div> \n        <verbena-input\n        [label]=\"'Password'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'password'\"\n        formControlName=\"Password\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        [passwordToggle]=\"true\"\n        [customErrorMessages]=\"{\n          password:'length must be 5 characters'\n        }\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <div class=\"pwdWrapper\"> \n          <p clas=\"mb-0\"> <a [routerLink]=\"forgetPasswordLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n      </div>\n    </div>\n    <div> \n      <lib-button \n      [buttonClass]=\"btnClass\"\n      [color]=\"btnColor\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [bgColor]=\"btnBgColor\"\n      [pd]=\"btnPd\"\n      [text]=\"btnText\" \n      type=\"submit\" \n      [disabled]=\"!this.checkForm()\"\n      ></lib-button>\n      <p *ngIf=\"requestAccessLink\">\n        <a [routerLink]=\"requestAccessLink\"  class=\"{{requestAccessClass}}\">Click here to request user access</a>\n      </p>\n      <div> \n        <div *ngIf=\"this.AuthMechanisms !== null && this.AuthMechanisms.length\"> \n          <verben-o-auth \n            (googleClick)=\"handleGoogleAuth()\"\n            (appleClick)=\"handleAppleAuth()\"\n          ></verben-o-auth>\n        </div>\n          <p class=\"{{createAccountClass}}\" *ngIf=\"createAccountLink\">\n            Don't have an account?\n            <a [routerLink]=\"createAccountLink\"  class=\"{{createAccountLinkClass}}\">Create an account</a>\n          </p>\n      </div>\n    </div>\n  </form>\n  </section>\n  ", styles: ["a{text-decoration:underline}.flexWrapper{display:flex;flex-direction:column;gap:20px;margin-top:12px}.pwdWrapper{display:flex;justify-content:flex-end;cursor:pointer}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }, { type: EnvironmentService }], propDecorators: { headlingText: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], pd: [{
-                type: Input
-            }], customClass: [{
-                type: Input
-            }], headlingClass: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], boxShadow: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], forgetPasswordClass: [{
-                type: Input
-            }], requestAccessClass: [{
-                type: Input
-            }], createAccountClass: [{
-                type: Input
-            }], createAccountLinkClass: [{
-                type: Input
-            }], forgetPasswordLink: [{
-                type: Input
-            }], createAccountLink: [{
-                type: Input
-            }], requestAccessLink: [{
-                type: Input
-            }], btnClass: [{
-                type: Input
-            }], btnBgColor: [{
-                type: Input
-            }], btnColor: [{
-                type: Input
-            }], btnBorder: [{
-                type: Input
-            }], btnBorderRadius: [{
-                type: Input
-            }], btnPd: [{
-                type: Input
-            }], btnText: [{
-                type: Input
-            }], inputLabelColor: [{
-                type: Input
-            }], inputBgColor: [{
-                type: Input
-            }], inputBorder: [{
-                type: Input
-            }], inputBorderRadius: [{
-                type: Input
-            }], termsErrorText: [{
-                type: Input
-            }], formSubmit: [{
-                type: Output
-            }], onSubmitEnd: [{
-                type: Output
-            }], googleClick: [{
-                type: Output
-            }], appleClick: [{
-                type: Output
-            }] } });
-
-class SignInModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SignInModule, declarations: [SignInComponent], imports: [CommonModule, FormsModule, VerbenaInputModule, VerbenaButtonModule, RouterLink, OAuthModule, ButtonModule, ReactiveFormsModule], exports: [SignInComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInModule, imports: [CommonModule, FormsModule, VerbenaInputModule, VerbenaButtonModule, OAuthModule, ButtonModule, ReactiveFormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SignInComponent],
-                    imports: [CommonModule, FormsModule, VerbenaInputModule, VerbenaButtonModule, RouterLink, OAuthModule, ButtonModule, ReactiveFormsModule],
-                    exports: [SignInComponent]
-                }]
-        }] });
-
-class OtpInputComponent {
-    fb;
-    length = 6;
-    otpClass = '';
-    otpChange = new EventEmitter();
-    otpForm;
-    constructor(fb) {
-        this.fb = fb;
-    }
-    ngOnInit() {
-        this.otpForm = this.fb.group({
-            otpArray: this.fb.array(Array(this.length).fill('').map(() => new FormControl('')))
-        });
-        this.otpArray.valueChanges.subscribe(() => {
-            this.emitOtp();
-        });
-    }
-    get otpArray() {
-        return this.otpForm.get('otpArray');
-    }
-    handleInput(event, index) {
-        const value = event.target.value;
-        // /\d/.test(value)
-        if (value.length > 0) {
-            this.otpArray.at(index).setValue(value);
-            if (index < this.length - 1) {
-                this.focusNextInput(index);
-            }
-        }
-        else {
-            this.otpArray.at(index).setValue('');
-        }
-    }
-    handleKeydown(event, index) {
-        if (event.key === 'Backspace') {
-            const currentValue = this.otpArray.at(index).value;
-            if (currentValue) {
-                this.otpArray.at(index).setValue('');
-            }
-            else if (index > 0) {
-                this.focusPreviousInput(index);
-            }
-        }
-    }
-    focusNextInput(index) {
-        const nextInput = document.getElementById(`otp-input-${index + 1}`);
-        nextInput?.focus();
-    }
-    focusPreviousInput(index) {
-        const prevInput = document.getElementById(`otp-input-${index - 1}`);
-        prevInput?.focus();
-    }
-    emitOtp() {
-        const otp = this.otpArray.value.join('');
-        this.otpChange.emit(otp);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpInputComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OtpInputComponent, selector: "verben-otp-input", inputs: { length: "length", otpClass: "otpClass" }, outputs: { otpChange: "otpChange" }, ngImport: i0, template: "<form [formGroup]=\"otpForm\" >\n  <div formArrayName=\"otpArray\" class=\"otp-container\">\n    <input\n      *ngFor=\"let control of otpArray.controls; let i = index\"\n      [id]=\"'otp-input-' + i\"\n      class=\"otp-input {{otpClass}}\"\n      maxlength=\"1\"\n      (input)=\"handleInput($event, i)\"\n      (keydown)=\"handleKeydown($event, i)\"\n      [formControlName]=\"i\"\n      type=\"text\"\n    />\n  </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"], dependencies: [{ kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verben-otp-input', template: "<form [formGroup]=\"otpForm\" >\n  <div formArrayName=\"otpArray\" class=\"otp-container\">\n    <input\n      *ngFor=\"let control of otpArray.controls; let i = index\"\n      [id]=\"'otp-input-' + i\"\n      class=\"otp-input {{otpClass}}\"\n      maxlength=\"1\"\n      (input)=\"handleInput($event, i)\"\n      (keydown)=\"handleKeydown($event, i)\"\n      [formControlName]=\"i\"\n      type=\"text\"\n    />\n  </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { length: [{
-                type: Input
-            }], otpClass: [{
-                type: Input
-            }], otpChange: [{
-                type: Output
-            }] } });
-
-class TwoFactorAuthOtpComponent {
-    fb;
-    server;
-    utilService;
-    customClass = '';
-    headlingClass = '';
-    headlingText = 'Two Factor Authentication';
-    paragraphClass = '';
-    resendClass = '';
-    width = '';
-    maxWidth = '';
-    margin = '';
-    pd = '';
-    bgColor = '#fff';
-    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
-    border = '1px solid #66666680';
-    borderRadius = '24px';
-    textColor = '#333';
-    height = 'auto';
-    length = 6;
-    otpClass = '';
-    User = {
-        Code: '024',
-        TenantId: '53b1c579bdf3de74f76bdac9',
-        Id: '53b1c579bdf3de74f76bdac9',
-        ServiceName: 'chinedu',
-        MailAddress: 'nwaekwuchinedu@gmail.com',
-        PhoneNumber: '070',
-        FirstName: 'nwaekwu',
-        LastName: 'chinedu',
-        OtherName: 'chinedu',
-        Role: [],
-        Tags: [
-            {
-                Name: "tester",
-                IsOptional: true
-            }
-        ],
-        Password: 'Default',
-        Status: 'Active',
-        CreatedAt: new Date(),
-        UpdatedAt: new Date(),
-        DataState: ObjectState.New
-    };
-    OtpData = {
-        User: this.User,
-        Token: '',
-        ValidateUrl: '',
-        Secret: '',
-        OTP: '',
-        Info: ''
-    };
-    btnClass = '';
-    btnBgColor = '#FFE681';
-    btnColor = '';
-    btnBorder = '';
-    btnBorderRadius = '24px';
-    btnPd = '';
-    btnText = 'Submit';
-    otpValue = '';
-    otpForm;
-    buttonClick = new EventEmitter();
-    otpChange = new EventEmitter();
-    onSubmitEnd = new EventEmitter();
-    resend = new EventEmitter();
-    constructor(fb, server, utilService) {
-        this.fb = fb;
-        this.server = server;
-        this.utilService = utilService;
-    }
-    ngOnInit() {
-        this.otpForm = this.fb.group({
-            otpValue: ['', [Validators.required, Validators.minLength(6)]]
-        });
-    }
-    onOtpChange(value) {
-        this.otpValue = value;
-        this.otpForm.get('otpValue')?.setValue(value);
-        this.otpChange.emit(this.otpValue);
-    }
-    async submitData() {
-        const data = {
-            User: {
-                ...this.User
-            },
-            Token: this.OtpData.Token,
-            ValidateUrl: this.OtpData.ValidateUrl,
-            Secret: this.OtpData.Secret,
-            OTP: this.OtpData.OTP,
-            Info: this.OtpData.Info,
-        };
-        if (this.otpForm.valid) {
-            // this.buttonClick.emit(this.otpForm.get('otpValue')?.value);
-            this.utilService.sendBI(true);
-            const res = await this.server.post(`Authentication/Validate`, data);
-            this.utilService.sendBI(false);
-            if (res instanceof ErrorResponse) {
-                this.onSubmitEnd.emit(res);
-            }
-            else {
-                var result = res;
-                this.onSubmitEnd.emit(result);
-            }
-        }
-    }
-    resendOtp() {
-        this.resend.emit();
-    }
-    get styles() {
-        return {
-            'background-color': this.bgColor,
-            'box-shadow': this.boxShadow,
-            'border': this.border,
-            'border-radius': this.borderRadius,
-            'color': this.textColor,
-            'width': this.width,
-            'max-width': this.maxWidth,
-            'margin': this.margin,
-            'height': this.height,
-            'padding': this.pd
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthOtpComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TwoFactorAuthOtpComponent, selector: "verben-auth-otp", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", resendClass: "resendClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", length: "length", otpClass: "otpClass", User: "User", OtpData: "OtpData", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText" }, outputs: { buttonClick: "buttonClick", otpChange: "otpChange", onSubmitEnd: "onSubmitEnd", resend: "resend" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n  <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n  <div class=\"otpWrapper\"> \n    <p class=\"{{paragraphClass}}\">Enter the {{length}} digit code sent to you</p>\n    <verben-otp-input \n    [length]=\"length\" \n    (otpChange)=\"onOtpChange($event)\"\n    [otpClass]=\"otpClass\"\n    ></verben-otp-input>\n  </div>\n  <lib-button  \n  [buttonClass]=\"btnClass\"\n  [color]=\"btnColor\"\n  [border]=\"btnBorder\"\n  [borderRadius]=\"btnBorderRadius\"\n  [bgColor]=\"btnBgColor\"\n  [pd]=\"btnPd\"\n  [text]=\"btnText\"  \n  (buttonClick)=\"submitData()\"\n  [disabled]=\"!otpForm.valid\"\n  ></lib-button>\n  <p class=\"resendWrapper\">\n    Didn\u2019t get a code?\n    <a class=\"{{resendClass}}\" (click)=\"resendOtp()\">Resend</a>\n  </p>\n   \n</section>", styles: [".otpWrapper{margin-bottom:20px;margin-top:15px}.resendWrapper{margin-top:10px;margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: OtpInputComponent, selector: "verben-otp-input", inputs: ["length", "otpClass"], outputs: ["otpChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthOtpComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verben-auth-otp', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n  <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n  <div class=\"otpWrapper\"> \n    <p class=\"{{paragraphClass}}\">Enter the {{length}} digit code sent to you</p>\n    <verben-otp-input \n    [length]=\"length\" \n    (otpChange)=\"onOtpChange($event)\"\n    [otpClass]=\"otpClass\"\n    ></verben-otp-input>\n  </div>\n  <lib-button  \n  [buttonClass]=\"btnClass\"\n  [color]=\"btnColor\"\n  [border]=\"btnBorder\"\n  [borderRadius]=\"btnBorderRadius\"\n  [bgColor]=\"btnBgColor\"\n  [pd]=\"btnPd\"\n  [text]=\"btnText\"  \n  (buttonClick)=\"submitData()\"\n  [disabled]=\"!otpForm.valid\"\n  ></lib-button>\n  <p class=\"resendWrapper\">\n    Didn\u2019t get a code?\n    <a class=\"{{resendClass}}\" (click)=\"resendOtp()\">Resend</a>\n  </p>\n   \n</section>", styles: [".otpWrapper{margin-bottom:20px;margin-top:15px}.resendWrapper{margin-top:10px;margin-bottom:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }], propDecorators: { customClass: [{
-                type: Input
-            }], headlingClass: [{
-                type: Input
-            }], headlingText: [{
-                type: Input
-            }], paragraphClass: [{
-                type: Input
-            }], resendClass: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], pd: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], boxShadow: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], length: [{
-                type: Input
-            }], otpClass: [{
-                type: Input
-            }], User: [{
-                type: Input
-            }], OtpData: [{
-                type: Input
-            }], btnClass: [{
-                type: Input
-            }], btnBgColor: [{
-                type: Input
-            }], btnColor: [{
-                type: Input
-            }], btnBorder: [{
-                type: Input
-            }], btnBorderRadius: [{
-                type: Input
-            }], btnPd: [{
-                type: Input
-            }], btnText: [{
-                type: Input
-            }], buttonClick: [{
-                type: Output
-            }], otpChange: [{
-                type: Output
-            }], onSubmitEnd: [{
-                type: Output
-            }], resend: [{
-                type: Output
-            }] } });
-
-class OtpInputModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: OtpInputModule, declarations: [OtpInputComponent], imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule], exports: [OtpInputComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpInputModule, imports: [CommonModule, FormsModule, VerbenaInputModule, ButtonModule, OAuthModule, ReactiveFormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OtpInputModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [OtpInputComponent],
-                    imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule],
-                    exports: [OtpInputComponent]
-                }]
-        }] });
-
-class TwoFactorAuthOtpModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthOtpModule, declarations: [TwoFactorAuthOtpComponent], imports: [CommonModule, ButtonModule, OtpInputModule, RouterLink, ReactiveFormsModule], exports: [TwoFactorAuthOtpComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthOtpModule, imports: [CommonModule, ButtonModule, OtpInputModule, ReactiveFormsModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthOtpModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TwoFactorAuthOtpComponent],
-                    imports: [CommonModule, ButtonModule, OtpInputModule, RouterLink, ReactiveFormsModule],
-                    exports: [TwoFactorAuthOtpComponent]
-                }]
-        }] });
-
-class TwoFactorAuthSetupComponent {
-    customClass = '';
-    headlingClass = '';
-    headlingText = 'Set Up Two Factor Authentication';
-    paragraphClass = '';
-    buttonClass = '';
-    width = '';
-    maxWidth = '';
-    margin = '';
-    pd = '';
-    bgColor = '#fff';
-    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
-    border = '1px solid #66666680';
-    borderRadius = '24px';
-    textColor = '#333';
-    height = '';
-    smsClick = new EventEmitter();
-    mailClick = new EventEmitter();
-    skipClick = new EventEmitter();
-    continueWithSMS() {
-        this.smsClick.emit();
-    }
-    continueWithMail() {
-        this.mailClick.emit();
-    }
-    handleSkip() {
-        this.skipClick.emit();
-    }
-    get styles() {
-        return {
-            'background-color': this.bgColor,
-            'box-shadow': this.boxShadow,
-            'border': this.border,
-            'border-radius': this.borderRadius,
-            'color': this.textColor,
-            'width': this.width,
-            'max-width': this.maxWidth,
-            'margin': this.margin,
-            'height': this.height,
-            'padding': this.pd
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthSetupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TwoFactorAuthSetupComponent, selector: "verben-two-factor-auth-setup", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", buttonClass: "buttonClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { smsClick: "smsClick", mailClick: "mailClick", skipClick: "skipClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n  <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n  <div class=\"setUpBtnWrapper\">\n    <verbena-button\n    svg=\"2fa-mail\"\n    [svgHeight]=\"16\"\n    [svgWidth]=\"20\"\n    text=\"Continue with Mail\"\n    bgColor=\"white\"\n    textColor=\"#333333\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mb-2\"\n    (click)=\"continueWithMail()\"\n    ></verbena-button>\n    <verbena-button\n    svg=\"2fa-sms\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with SMS\"\n    bgColor=\"white\"\n    textColor=\"#333333\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    (click)=\"continueWithSMS()\"\n    ></verbena-button>\n    <!-- <div class=\"iconWrapper\" (click)=\"handleSkip()\"> \n        <p class=\"{{paragraphClass}}\">Skip for now</p>\n        <verben-svg \n        icon=\"skip-forward\"\n        [height]=\"24\"\n        [width]=\"24\"\n        />\n    </div> -->\n</div>\n</section>", styles: [".setUpBtnWrapper{display:flex;flex-direction:column;gap:12px;margin-top:40px}.iconWrapper{display:flex;cursor:pointer;align-items:center;justify-content:end;gap:12px;margin-bottom:50px}.custom-button{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthSetupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verben-two-factor-auth-setup', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n  <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n  <div class=\"setUpBtnWrapper\">\n    <verbena-button\n    svg=\"2fa-mail\"\n    [svgHeight]=\"16\"\n    [svgWidth]=\"20\"\n    text=\"Continue with Mail\"\n    bgColor=\"white\"\n    textColor=\"#333333\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mb-2\"\n    (click)=\"continueWithMail()\"\n    ></verbena-button>\n    <verbena-button\n    svg=\"2fa-sms\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with SMS\"\n    bgColor=\"white\"\n    textColor=\"#333333\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    (click)=\"continueWithSMS()\"\n    ></verbena-button>\n    <!-- <div class=\"iconWrapper\" (click)=\"handleSkip()\"> \n        <p class=\"{{paragraphClass}}\">Skip for now</p>\n        <verben-svg \n        icon=\"skip-forward\"\n        [height]=\"24\"\n        [width]=\"24\"\n        />\n    </div> -->\n</div>\n</section>", styles: [".setUpBtnWrapper{display:flex;flex-direction:column;gap:12px;margin-top:40px}.iconWrapper{display:flex;cursor:pointer;align-items:center;justify-content:end;gap:12px;margin-bottom:50px}.custom-button{font-weight:500}\n"] }]
-        }], propDecorators: { customClass: [{
-                type: Input
-            }], headlingClass: [{
-                type: Input
-            }], headlingText: [{
-                type: Input
-            }], paragraphClass: [{
-                type: Input
-            }], buttonClass: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], pd: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], boxShadow: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], smsClick: [{
-                type: Output
-            }], mailClick: [{
-                type: Output
-            }], skipClick: [{
-                type: Output
-            }] } });
-
-class TwoFactorAuthSetupModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthSetupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthSetupModule, declarations: [TwoFactorAuthSetupComponent], imports: [CommonModule, VerbenaButtonModule, SvgModule], exports: [TwoFactorAuthSetupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthSetupModule, imports: [CommonModule, VerbenaButtonModule, SvgModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TwoFactorAuthSetupModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [TwoFactorAuthSetupComponent],
-                    imports: [CommonModule, VerbenaButtonModule, SvgModule],
-                    exports: [TwoFactorAuthSetupComponent]
-                }]
-        }] });
-
-class MailComponent {
-    customClass = '';
-    headlingClass = '';
-    width = '';
-    maxWidth = '';
-    margin = '';
-    pd = '';
-    bgColor = '#fff';
-    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
-    border = '1px solid #66666680';
-    borderRadius = '24px';
-    textColor = '#333';
-    height = 'auto';
-    buttonClick = new EventEmitter();
-    goToLogin() {
-        this.buttonClick.emit();
-    }
-    get styles() {
-        return {
-            'background-color': this.bgColor,
-            'box-shadow': this.boxShadow,
-            'border': this.border,
-            'border-radius': this.borderRadius,
-            'color': this.textColor,
-            'width': this.width,
-            'max-width': this.maxWidth,
-            'margin': this.margin,
-            'height': this.height,
-            'padding': this.pd
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MailComponent, selector: "verben-mail-message", inputs: { customClass: "customClass", headlingClass: "headlingClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n    <h3 class=\"{{headlingClass}}\">Your e-mail has been verified!</h3>\n    <lib-button \n    text=\"Login\" \n    buttonClass=\"\"\n    (click)=\"goToLogin()\"\n    ></lib-button>   \n</section>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verben-mail-message', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n    <h3 class=\"{{headlingClass}}\">Your e-mail has been verified!</h3>\n    <lib-button \n    text=\"Login\" \n    buttonClass=\"\"\n    (click)=\"goToLogin()\"\n    ></lib-button>   \n</section>\n" }]
-        }], propDecorators: { customClass: [{
-                type: Input
-            }], headlingClass: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], maxWidth: [{
-                type: Input
-            }], margin: [{
-                type: Input
-            }], pd: [{
-                type: Input
-            }], bgColor: [{
-                type: Input
-            }], boxShadow: [{
-                type: Input
-            }], border: [{
-                type: Input
-            }], borderRadius: [{
-                type: Input
-            }], textColor: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], buttonClick: [{
-                type: Output
-            }] } });
-
-class MailModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MailModule, declarations: [MailComponent], imports: [CommonModule, FormsModule, RouterLink, ButtonModule], exports: [MailComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailModule, imports: [CommonModule, FormsModule, ButtonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [MailComponent],
-                    imports: [CommonModule, FormsModule, RouterLink, ButtonModule],
-                    exports: [MailComponent]
-                }]
-        }] });
-
-class ForgotPasswordComponent {
-    fb;
-    server;
-    utilService;
-    title = 'Forgot Password';
-    subTitle = 'Enter the e-mail you used during registration';
-    buttonCaption = 'Submit';
-    buttonTextColor;
-    buttonBackgroundColor;
-    onSubmit = new EventEmitter();
-    onSubmitEnd = new EventEmitter();
-    forgotPasswordForm;
-    constructor(fb, server, utilService) {
-        this.fb = fb;
-        this.server = server;
-        this.utilService = utilService;
-        this.forgotPasswordForm = this.fb.group({
-            Email: new FormControl(null, [
-                Validators.required,
-                this.emailValidator.bind(this),
-            ]),
-        });
-    }
-    isValidEmail(mail) {
-        const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-        return emailPattern.test(mail);
-    }
-    emailValidator(control) {
-        const value = control.value;
-        if (this.isValidEmail(value) == false) {
-            return { customValidation: true };
-        }
-        return null;
-    }
-    checkForm() {
-        return this.forgotPasswordForm.valid;
-    }
-    async submit() {
-        if (!this.checkForm()) {
-            return;
-        }
-        var data = {
-            Email: this.forgotPasswordForm.controls['Email'].value,
-        };
-        this.onSubmit.emit(data);
-        this.utilService.sendBI(true);
-        const res = await this.server.get(`User/PasswordChangeRequest/${data.Email}`);
-        this.utilService.sendBI(false);
-        if (res instanceof ErrorResponse) {
-            this.onSubmitEnd.emit(res);
-        }
-        else {
-            var result = res;
-            this.onSubmitEnd.emit(result);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ForgotPasswordComponent, selector: "verben-forgot-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor" }, outputs: { onSubmit: "onSubmit", onSubmitEnd: "onSubmitEnd" }, ngImport: i0, template: "<div [formGroup]=\"this.forgotPasswordForm\" class=\"reset-password-container flex flex-col\">\n  <div class=\"reset-password-header flex flex-col\">\n    <div class=\"reset-password-title\">{{title}}</div>\n    <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Email</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Email\" type=\"email\"></verbena-input>\n  </div>\n  <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n    [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { 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"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'verben-forgot-password', template: "<div [formGroup]=\"this.forgotPasswordForm\" class=\"reset-password-container flex flex-col\">\n  <div class=\"reset-password-header flex flex-col\">\n    <div class=\"reset-password-title\">{{title}}</div>\n    <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Email</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Email\" type=\"email\"></verbena-input>\n  </div>\n  <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n    [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }], propDecorators: { title: [{
-                type: Input
-            }], subTitle: [{
-                type: Input
-            }], buttonCaption: [{
-                type: Input
-            }], buttonTextColor: [{
-                type: Input
-            }], buttonBackgroundColor: [{
-                type: Input
-            }], onSubmit: [{
-                type: Output
-            }], onSubmitEnd: [{
-                type: Output
-            }] } });
-
-class ForgotPasswordModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordModule, declarations: [ForgotPasswordComponent], imports: [FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            CommonModule], exports: [ForgotPasswordComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordModule, imports: [FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            CommonModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ForgotPasswordComponent],
-                    imports: [
-                        FormsModule,
-                        ReactiveFormsModule,
-                        VerbenaInputModule,
-                        VerbenaButtonModule,
-                        CommonModule,
-                    ],
-                    exports: [ForgotPasswordComponent],
-                }]
-        }] });
-
-const columns$2 = [
-    {
-        id: 'createdAt',
-        header: 'Created',
-        accessorKey: 'CreatedAt',
-    },
-    {
-        id: 'name',
-        header: 'Name',
-        accessorKey: 'Name',
-    },
-    {
-        id: 'description',
-        header: 'Description',
-        accessorKey: 'Description',
-    },
-    {
-        id: 'link',
-        header: 'Link',
-        accessorKey: 'Link',
-    },
-    {
-        id: 'logo',
-        header: 'Logo',
-        accessorKey: 'Logo',
-    },
-    { id: 'actions', header: 'Actions', accessorKey: 'Name' },
-];
-
-const mockData$2 = new Array(10).fill(1).map((id, i) => ({
-    Name: `Name ${id + i}`,
-    Id: id,
-    id: id.toString(),
-    Description: `Sign in option ${id + i}`,
-    Logo: `./assets/images/test-logo.png`,
-    Link: `Link ${id + i}`,
-    CreatedAt: new Date(),
-    UpdatedAt: new Date(),
-    DataState: ObjectState.New,
-    Tenant: `Tenant ${id + i}`,
-}));
-
-const baseStyle$2 = {
-    width: '100%',
-    fontFamily: '"Fraunces", serif',
-    fontSize: '125%',
-    whiteSpace: 'nowrap',
-    margin: '0',
-    border: '1px solid #D4A007',
-    borderRadius: '16px',
-    borderCollapse: 'separate',
-    borderSpacing: '0',
-    tableLayout: 'fixed',
-    overflow: 'hidden',
-    rows: {
-        even: {
-            backgroundColor: '#FDFDFD',
-        },
-        odd: {
-            backgroundColor: '#F1F4FB',
-        },
-        height: '68px',
-    },
-    cells: {
-        padding: '0.5rem 1rem',
-    },
-    header: {
-        stickyTop: true,
-        zIndex: 2,
-        backgroundColor: '#EFF2FB',
-        fontWeight: 'bold',
-        textAlign: 'left',
-        padding: '12px 16px',
-        height: '40px',
-    },
-    footer: {
-        stickyBottom: true,
-        zIndex: 2,
-        padding: '3px',
-    },
-    //   body: {
-    //     background: '#fff',
-    //     padding: '4px 5px',
-    //     textAlign: 'center',
-    //   },
-    // firstColumn: {
-    //   stickyLeft: true,
-    //   zIndex: 1,
-    // },
-    lastColumn: {
-        stickyRight: true,
-        zIndex: 1,
-    },
-};
-
-class SsoFormComponent {
-    fb;
-    isUploading = false;
-    uploadedFileName = null;
-    fileUploadError = null;
-    currentData = null;
-    switchView = new EventEmitter();
-    form;
-    constructor(fb) {
-        this.fb = fb;
-        this.form = this.fb.group({
-            Description: [''],
-            Name: [''],
-            Link: [''],
-            Logo: [''],
-        });
-    }
-    ngOnInit() { }
-    onSave() {
-        if (this.form.valid) {
-            // Emit save event with form value
-            console.log('Form saved:', this.form.value);
-        }
-    }
-    onDelete() {
-        // Emit delete event
-        console.log('Delete requested');
-    }
-    onFileSelected(event) {
-        const input = event.target;
-        if (input.files && input.files.length > 0) {
-            const file = input.files[0];
-            this.fileUploadError = null;
-            if (!file) {
-                this.isUploading = true;
-            }
-            if (file.size > 5000000) {
-                this.fileUploadError = 'File size exceeds 5MB limit.';
-                this.uploadedFileName = null;
-                this.isUploading = false; // Reset isUploading state
-            }
-            else {
-                this.uploadedFileName = file.name;
-            }
-        }
-        else {
-            this.isUploading = false;
-        }
-    }
-    removeFile() {
-        this.uploadedFileName = null;
-        this.fileUploadError = null;
-        const fileInput = document.getElementById('attachment');
-        if (fileInput) {
-            fileInput.value = '';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SsoFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SsoFormComponent, selector: "lib-sso-form", inputs: { currentData: "currentData" }, outputs: { switchView: "switchView" }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative\"\n>\n  <verbena-input\n    name=\"Name\"\n    label=\"Name:\"\n    formControlName=\"Name\"\n    [(ngModel)]=\"currentData?.data.Name\"\n  />\n  <verbena-input\n    label=\"Description:\"\n    name=\"Description\"\n    formControlName=\"Description\"\n    [(ngModel)]=\"currentData?.data.Description\"\n  />\n  <verbena-input\n  label=\"Link:\"\n  name=\"Link\"\n  formControlName=\"Link\"\n  [(ngModel)]=\"currentData?.data.Link\"\n/>\n<span class=\"block my-2 \">Logo</span>\n<label [style.background-color]=\"'#f9f9f9'\" class=\"border cursor-pointer border-secondary-200 rounded-md w-full px-4 py-2 flex justify-between\">\n  <span *ngIf=\"!uploadedFileName\">{{isUploading?\"uploading...\":\"Upload a photo\"}}</span>\n  <span *ngIf=\"fileUploadError\" class=\"error\">{{ fileUploadError }}</span>\n  <div *ngIf=\"uploadedFileName\" class=\"flex items-center text-sm gap-2 border border-primary rounded-lg px-3 \">\n    <span>{{ uploadedFileName }}</span>\n    <button\n      [style.color]=\"'black'\"\n      type=\"button\"\n      (click)=\"removeFile()\"\n    >\n      &#x2715;\n    </button>\n  </div>\n  <input\n  id=\"logo\"\n[type]=\"'file'\"\n  label=\"Logo:\"\n  name=\"Logo\"\n  accept=\"image/png\"\n  formControlName=\"Logo\"\n  (change)=\"onFileSelected($event)\"\n  formControlName=\"Logo\"\n/>\n<span class=\"flex gap-2\">\n<span class=\"bg-primary flex icon-container rounded-md justify-center items-center\">\n  <img src=\"./assets/icons/cam.png\" class=\"icon-width\"/>\n</span>\n<span  class=\"bg-primary flex icon-container rounded-md justify-center items-center\">\n  <img src=\"./assets/icons/file.png\" class=\"icon-width2\"/>\n</span>\n</span>\n</label>\n\n  <!-- buttons -->\n  <div\n    class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute\"\n    style=\"\n      display: flex;\n      justify-content: space-between;\n      position: absolute;\n      padding: 8px 12px;\n      right: 0;\n      left: 0;\n      bottom: 32;\n    \"\n  >\n    <!-- <verbena-button\n      text=\"Delete\"\n      class=\"bg-secondary-200 text-[black]\"\n      (click)=\"onDelete()\"\n    />\n    <verbena-button\n      text=\"Save\"\n      class=\"bg-primary text-[black]\"\n      (click)=\"onSave()\"\n    />\n\n    <verbena-button\n      text=\"Secondary Button\"\n      styleType=\"secondary\"\n    ></verbena-button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      [bgColor]=\"'#999999'\"\n      [textColor]=\"'#404040'\"\n      borderRadius=\"10px\"\n    ></verbena-button>\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n    <verbena-button\n      text=\"Save\"\n      bgColor=\"#28a745\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      [bgColor]=\"'#FFE681'\"\n      width=\"114px\"\n      height=\"39px\"\n    ></verbena-button>\n  </div>\n</form>\n", styles: ["#logo{display:none}.icon-width{width:20px}.icon-width2{width:15px}.icon-container{width:30px;height:30px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SsoFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-sso-form', template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative\"\n>\n  <verbena-input\n    name=\"Name\"\n    label=\"Name:\"\n    formControlName=\"Name\"\n    [(ngModel)]=\"currentData?.data.Name\"\n  />\n  <verbena-input\n    label=\"Description:\"\n    name=\"Description\"\n    formControlName=\"Description\"\n    [(ngModel)]=\"currentData?.data.Description\"\n  />\n  <verbena-input\n  label=\"Link:\"\n  name=\"Link\"\n  formControlName=\"Link\"\n  [(ngModel)]=\"currentData?.data.Link\"\n/>\n<span class=\"block my-2 \">Logo</span>\n<label [style.background-color]=\"'#f9f9f9'\" class=\"border cursor-pointer border-secondary-200 rounded-md w-full px-4 py-2 flex justify-between\">\n  <span *ngIf=\"!uploadedFileName\">{{isUploading?\"uploading...\":\"Upload a photo\"}}</span>\n  <span *ngIf=\"fileUploadError\" class=\"error\">{{ fileUploadError }}</span>\n  <div *ngIf=\"uploadedFileName\" class=\"flex items-center text-sm gap-2 border border-primary rounded-lg px-3 \">\n    <span>{{ uploadedFileName }}</span>\n    <button\n      [style.color]=\"'black'\"\n      type=\"button\"\n      (click)=\"removeFile()\"\n    >\n      &#x2715;\n    </button>\n  </div>\n  <input\n  id=\"logo\"\n[type]=\"'file'\"\n  label=\"Logo:\"\n  name=\"Logo\"\n  accept=\"image/png\"\n  formControlName=\"Logo\"\n  (change)=\"onFileSelected($event)\"\n  formControlName=\"Logo\"\n/>\n<span class=\"flex gap-2\">\n<span class=\"bg-primary flex icon-container rounded-md justify-center items-center\">\n  <img src=\"./assets/icons/cam.png\" class=\"icon-width\"/>\n</span>\n<span  class=\"bg-primary flex icon-container rounded-md justify-center items-center\">\n  <img src=\"./assets/icons/file.png\" class=\"icon-width2\"/>\n</span>\n</span>\n</label>\n\n  <!-- buttons -->\n  <div\n    class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute\"\n    style=\"\n      display: flex;\n      justify-content: space-between;\n      position: absolute;\n      padding: 8px 12px;\n      right: 0;\n      left: 0;\n      bottom: 32;\n    \"\n  >\n    <!-- <verbena-button\n      text=\"Delete\"\n      class=\"bg-secondary-200 text-[black]\"\n      (click)=\"onDelete()\"\n    />\n    <verbena-button\n      text=\"Save\"\n      class=\"bg-primary text-[black]\"\n      (click)=\"onSave()\"\n    />\n\n    <verbena-button\n      text=\"Secondary Button\"\n      styleType=\"secondary\"\n    ></verbena-button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Delete\"\n      [bgColor]=\"'#999999'\"\n      [textColor]=\"'#404040'\"\n      borderRadius=\"10px\"\n    ></verbena-button>\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n    <verbena-button\n      text=\"Save\"\n      bgColor=\"#28a745\"\n      textColor=\"#404040\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      [bgColor]=\"'#FFE681'\"\n      width=\"114px\"\n      height=\"39px\"\n    ></verbena-button>\n  </div>\n</form>\n", styles: ["#logo{display:none}.icon-width{width:20px}.icon-width2{width:15px}.icon-container{width:30px;height:30px}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { currentData: [{
-                type: Input
-            }], switchView: [{
-                type: Output
-            }] } });
-
-class SsoComponent {
-    cardDataView;
-    dataView;
-    columns = columns$2;
-    data = mockData$2;
-    filteredColumns = columns$2;
-    styles = baseStyle$2;
-    currentData = null;
-    isGridView = true;
-    selected = null;
-    cardData = mockData$2.map(({ Name, Description, Link, Logo }) => ({
-        selected: false,
-        title: Name,
-        data: { Name, Description, Link, Logo },
-        body: [
-            { title: 'Description', value: Description ?? '' },
-        ],
-        children: [],
-    }));
-    openDetailView(name) {
-        const cardItem = this.getCardDataByMailAddress(name);
-        if (cardItem && this.cardDataView) {
-            this.dataView.toggleView();
-            this.cardData.forEach((item) => {
-                item.selected = false;
-                if (item.children) {
-                    item.children.forEach((child) => (child.selected = false));
-                }
-            });
-            cardItem.selected = true;
-            this.currentData = this.cardDataView.onItemClick(cardItem);
-        }
-    }
-    getCardDataByMailAddress(name) {
-        return this.cardData.find(({ data }) => data.Name === name);
-    }
-    onViewChange(isGridView) {
-        isGridView = isGridView;
-        if (this.currentData) {
-            this.cardDataView?.clearData();
-            this.currentData = null;
-        }
-        if (this.selected) {
-            this.cardDataView.onItemClick(this.selected);
-        }
-    }
-    openFormView(index) {
-        const item = this.cardData[index];
-        console.log('ITEM = ', item);
-    }
-    handleExport(exportedData) {
-        console.log('Exported data:', exportedData);
-        this.downloadCSV(exportedData);
-    }
-    /**
-     *
-     * @param data Simple csv export for testing
-     */
-    downloadCSV(data) {
-        const headers = Object.keys(data[0]);
-        const csvContent = [
-            headers.join(','),
-            ...data.map((row) => headers.map((header) => row[header]).join(',')),
-        ].join('\n');
-        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-        const link = document.createElement('a');
-        if (link.download !== undefined) {
-            const url = URL.createObjectURL(blob);
-            link.setAttribute('href', url);
-            link.setAttribute('download', 'export.csv');
-            link.style.visibility = 'hidden';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-    }
-    onSelectionChange(selectedRows) {
-        console.log('Selection changed:', selectedRows);
-        // Handle the selection change
-    }
-    /**
-     * Copied over from card view doc until I understand usage
-     */
-    selectedColumnCount = 0;
-    selectedFilterTableCount = 0;
-    isOPen = true;
-    selectedSortCount = 0;
-    showColumn = false;
-    showSort = false;
-    showExport = false;
-    selectedAll = false;
-    showFilter = false;
-    visibleColumns = columns$2.map((col) => ({
-        checked: false,
-        name: typeof col.header === 'string' ? col.header : col.id,
-        type: DataFilterType.Bool,
-    }));
-    filterArray = [
-        {
-            name: 'Name',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'Description',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'Logo',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'Link',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'CreatedAt',
-            type: DataFilterType.Date,
-            checked: false,
-        },
-    ];
-    sortOptions = [
-        {
-            name: 'Name',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'Description',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'Link',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'Logo',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'CreatedAt',
-            type: DataFilterType.Date,
-            checked: false,
-        },
-    ];
-    clearData() {
-        this.currentData = {};
-    }
-    loadMore() {
-        this.cardData = this.cardData.concat(this.cardData);
-    }
-    onColumnChange(event) {
-        this.showColumn = event;
-    }
-    onSortChange(event) {
-        this.showSort = false;
-        console.log(event);
-    }
-    onColumnsUpdated(updatedColumns) {
-        this.showColumn = false;
-        this.selectedColumnCount = updatedColumns.length;
-        if (updatedColumns) {
-            // Filter columns to include only visible ones
-            this.filteredColumns = this.columns.filter((col) => this.visibleColumns.find((filter) => filter.name === col.header && filter.checked));
-            // Reorder columns based on the order in visibleColumns
-            const visibleColumnOrder = this.visibleColumns
-                .filter((filter) => filter.checked)
-                .map((filter) => filter.name);
-            this.columns.sort((a, b) => {
-                const indexA = visibleColumnOrder.indexOf(a.header);
-                const indexB = visibleColumnOrder.indexOf(b.header);
-                return indexA - indexB;
-            });
-        }
-    }
-    onFilterApplied(appliedFilter) {
-        this.showFilter = false;
-        if (Array.isArray(appliedFilter)) {
-            this.selectedFilterTableCount = appliedFilter.length;
-        }
-        else {
-            console.log('appliedFilter is not an array');
-        }
-    }
-    onSortUpdated(updatedSorts) {
-        this.onSortChange(false);
-        this.selectedSortCount = updatedSorts.length;
-        console.log(updatedSorts);
-    }
-    onStateChange(event) {
-        switch (event.key) {
-            case 'column':
-                this.showColumn = event.value;
-                break;
-            case 'sort':
-                this.showSort = event.value;
-                break;
-            case 'export':
-                this.showExport = event.value;
-                break;
-            case 'filter':
-                this.showFilter = event.value;
-                break;
-            default:
-                break;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SsoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SsoComponent, selector: "lib-sso", 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        isToggle:true\n      }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedSortCount]=\"selectedSortCount\"\n    [selectedColumnCount]=\"selectedColumnCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    [showColumnChild]=\"showColumn\"\n    [showSortChild]=\"showSort\"\n    [showFilterChild]=\"showFilter\"\n    [isTableView]=\"false\"\n    [selectedFilterTableCount]=\"0\"\n    [cardIcon]=\"'list-view'\"\n    [tableIcon]=\"'table-view'\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data\"\n        [columns]=\"filteredColumns\"\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=\"logo\">\n          <ng-template #cell let-value>\n            <img class=\"logo-width\" [src]=\"value\"/>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value let-deleteRow let-rowIndex>\n            <div class=\"flex space-x-8\" style=\"display: flex; gap: 24px\">\n              <verben-svg\n                (click)=\"openDetailView(value)\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                stroke=\"#3479E9\"\n                fill=\"white\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                stroke=\"#E20000\"\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=\"Link\"\n        border=\"5px\"\n        [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\"\n      >\n        <verben-left-card-data-view class=\"\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"Link\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"cardData\"\n          >\n            <ng-template #card let-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"vlcd.showChildren(item)\"\n                  [ngClass]=\"vlcd.showToggle(item) ? 'visible' : 'invisible'\"\n                  class=\"items-center flex pr-1 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 flex-col py-2 px-4 w-full\">\n                    <div class=\"flex\">\n                      <span class=\"font-bold text-sm\">{{ item.data.Name }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"flex items-center justify-between gap-2\">\n                      <div>\n                        <span class=\"text-muted font-light text-xs\"\n                          >{{ ciItem.title }}:</span\n                        >\n                        <span class=\"text-black text-xs font-semibold\">{{ item.data.Description }}</span>\n                      </div>\n                      <img class=\"logo-width\" [alt]=\"ciItem.title\" [src]=\"item.data.Logo\"/>\n                    </div>\n                    }\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-sso-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n            ></lib-sso-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2 mt-1\">\n            <span class=\"paginator-text\"\n              >{{ cardData.length }} records loaded</span\n            >\n            <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\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)=\"onFilterApplied($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</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.bg-secondary-200{background-color:#e8eaf1}.flex-col{flex-direction:column}.items-center{align-items:center}.bg-primary{background-color:#d4a007}.border-primary{border:1px solid #d4a007}.rounded-lg{border-radius:20px}.w-3{width:6px}.rounded-tr-none{border-top-right-radius:0}.rounded-br-none{border-bottom-right-radius:0}.bg-secondary-100{background-color:#8080800e}.bg-secondary{background-color:#e8eaf1}.p-2{padding:6px}.logo-width{width:70px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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.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.DataExportComponent, selector: "lib-data-export", inputs: ["data"], outputs: ["exportDataEvent"] }, { 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.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.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: SsoFormComponent, selector: "lib-sso-form", inputs: ["currentData"], outputs: ["switchView"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SsoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-sso', 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        isToggle:true\n      }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [selectedSortCount]=\"selectedSortCount\"\n    [selectedColumnCount]=\"selectedColumnCount\"\n    [selectedFilterTableCount]=\"selectedFilterTableCount\"\n    [showColumnChild]=\"showColumn\"\n    [showSortChild]=\"showSort\"\n    [showFilterChild]=\"showFilter\"\n    [isTableView]=\"false\"\n    [selectedFilterTableCount]=\"0\"\n    [cardIcon]=\"'list-view'\"\n    [tableIcon]=\"'table-view'\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data\"\n        [columns]=\"filteredColumns\"\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=\"logo\">\n          <ng-template #cell let-value>\n            <img class=\"logo-width\" [src]=\"value\"/>\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value let-deleteRow let-rowIndex>\n            <div class=\"flex space-x-8\" style=\"display: flex; gap: 24px\">\n              <verben-svg\n                (click)=\"openDetailView(value)\"\n                icon=\"edit\"\n                [width]=\"15\"\n                [height]=\"15\"\n                stroke=\"#3479E9\"\n                fill=\"white\"\n                class=\"cursor-pointer\"\n              ></verben-svg>\n              <verben-svg\n                icon=\"delete\"\n                [width]=\"15\"\n                [height]=\"15\"\n                stroke=\"#E20000\"\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=\"Link\"\n        border=\"5px\"\n        [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\"\n      >\n        <verben-left-card-data-view class=\"\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"Link\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"cardData\"\n          >\n            <ng-template #card let-item>\n              <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"vlcd.showChildren(item)\"\n                  [ngClass]=\"vlcd.showToggle(item) ? 'visible' : 'invisible'\"\n                  class=\"items-center flex pr-1 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 flex-col py-2 px-4 w-full\">\n                    <div class=\"flex\">\n                      <span class=\"font-bold text-sm\">{{ item.data.Name }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"flex items-center justify-between gap-2\">\n                      <div>\n                        <span class=\"text-muted font-light text-xs\"\n                          >{{ ciItem.title }}:</span\n                        >\n                        <span class=\"text-black text-xs font-semibold\">{{ item.data.Description }}</span>\n                      </div>\n                      <img class=\"logo-width\" [alt]=\"ciItem.title\" [src]=\"item.data.Logo\"/>\n                    </div>\n                    }\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-sso-form\n              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n            ></lib-sso-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2 mt-1\">\n            <span class=\"paginator-text\"\n              >{{ cardData.length }} records loaded</span\n            >\n            <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\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)=\"onFilterApplied($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</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.bg-secondary-200{background-color:#e8eaf1}.flex-col{flex-direction:column}.items-center{align-items:center}.bg-primary{background-color:#d4a007}.border-primary{border:1px solid #d4a007}.rounded-lg{border-radius:20px}.w-3{width:6px}.rounded-tr-none{border-top-right-radius:0}.rounded-br-none{border-bottom-right-radius:0}.bg-secondary-100{background-color:#8080800e}.bg-secondary{background-color:#e8eaf1}.p-2{padding:6px}.logo-width{width:70px}\n"] }]
-        }], propDecorators: { cardDataView: [{
-                type: ViewChild,
-                args: ['vdcv']
-            }], dataView: [{
-                type: ViewChild,
-                args: ['vdv']
-            }] } });
-
-class SsoModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SsoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SsoModule, declarations: [SsoComponent, SsoFormComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            DataViewModule,
-            TableFilterModule,
-            SortTableModule,
-            DataExportModule,
-            VisibleColumnModule,
-            VerbenaButtonModule,
-            CardDataViewModule,
-            VerbenaInputModule,
-            SvgModule,
-            VerbenaTextareaModule,
-            DataTableModule], exports: [SsoComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SsoModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            DataViewModule,
-            TableFilterModule,
-            SortTableModule,
-            DataExportModule,
-            VisibleColumnModule,
-            VerbenaButtonModule,
-            CardDataViewModule,
-            VerbenaInputModule,
-            SvgModule,
-            VerbenaTextareaModule,
-            DataTableModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SsoModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SsoComponent, SsoFormComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        DataViewModule,
-                        TableFilterModule,
-                        SortTableModule,
-                        DataExportModule,
-                        VisibleColumnModule,
-                        VerbenaButtonModule,
-                        CardDataViewModule,
-                        VerbenaInputModule,
-                        SvgModule,
-                        VerbenaTextareaModule,
-                        DataTableModule,
-                    ],
-                    exports: [SsoComponent],
-                }]
-        }] });
-
-const columns$1 = [
-    {
-        id: 'createdAt',
-        header: 'Created',
-        accessorKey: 'CreatedAt',
-    },
-    {
-        id: 'user',
-        header: 'Name',
-        accessorFn: (row) => `${row.FirstName} ${row.LastName}`,
-    },
-    {
-        id: 'mail',
-        header: 'E-Mail',
-        accessorKey: 'MailAddress',
-    },
-    {
-        id: 'phone',
-        header: 'Phone Number',
-        accessorKey: 'PhoneNumber',
-    },
-    { id: 'actions', header: 'Actions', accessorKey: 'MailAddress' },
-];
-
-const baseStyle$1 = {
-    width: '100%',
-    fontFamily: '"Fraunces", serif',
-    fontSize: '125%',
-    whiteSpace: 'nowrap',
-    margin: '0',
-    border: '1px solid #D4A007',
-    borderRadius: '16px',
-    borderCollapse: 'separate',
-    borderSpacing: '0',
-    tableLayout: 'fixed',
-    overflow: 'hidden',
-    rows: {
-        even: {
-            backgroundColor: '#FDFDFD',
-        },
-        odd: {
-            backgroundColor: '#F1F4FB',
-        },
-        height: '68px',
-    },
-    cells: {
-        padding: '0.5rem 1rem',
-    },
-    header: {
-        // stickyTop: true,
-        // zIndex: 2,
-        backgroundColor: '#EFF2FB',
-        fontWeight: 'bold',
-        textAlign: 'left',
-        padding: '12px 16px',
-        height: '40px',
-    },
-    footer: {
-        // stickyBottom: true,
-        // zIndex: 2,
-        padding: '3px',
-    },
-    //   body: {
-    //     background: '#fff',
-    //     padding: '4px 5px',
-    //     textAlign: 'center',
-    //   },
-    // firstColumn: {
-    //   stickyLeft: true,
-    //   zIndex: 1,
-    // },
-    lastColumn: {
-    // stickyRight: true,
-    // zIndex: 1,
-    },
-};
-
-class UserAccessRequestService {
-    httpService;
-    BASE_URL = 'User';
-    constructor(httpService) {
-        this.httpService = httpService;
-    }
-    /**
-     * Get user access requests with pagination and sorting
-     * @param skip Number of records to skip
-     * @param limit Number of records to take
-     * @param sortParam Sort parameter
-     * @param sortOrder Sort order ('asc' or 'desc')
-     * @returns Promise containing the user access requests
-     */
-    getUserAccessRequests(skip, limit, sortParam, sortOrder) {
-        const url = `${this.BASE_URL}/GetUserAccessRequests/${skip}/${limit}/${sortParam}/${sortOrder}`;
-        return this.httpService.get(url);
-    }
-    /**
-     * Get user access requests with additional parameter, pagination and sorting
-     * @param param Search parameter
-     * @param skip Number of records to skip
-     * @param limit Number of records to take
-     * @param sortParam Sort parameter
-     * @param sortOrder Sort order ('asc' or 'desc')
-     * @returns Promise containing the filtered user access requests
-     */
-    getUserAccessRequestWithParam(param, skip, limit, sortParam, sortOrder) {
-        const url = `${this.BASE_URL}/GetUserAccessRequestWithParam/${param}/${skip}/${limit}/${sortParam}/${sortOrder}`;
-        return this.httpService.get(url);
-    }
-    /**
-     * Save multiple user access requests
-     * @param requests Array of user access requests to save
-     * @returns Promise containing the save operation result
-     */
-    saveUserAccessRequests(requests) {
-        const url = `${this.BASE_URL}/SaveUserAccessRequests`;
-        return this.httpService.post(url, requests);
-    }
-    /**
-     * Approve or reject multiple user access requests
-     * @param requests Array of user access requests to save
-     * @param isApproval True for approval, false for decline
-     * @returns Promise containing the save operation result
-     */
-    processUserAccessRequests(requests, isApproval) {
-        const url = `${this.BASE_URL}/UserAccessRequestAction/${isApproval}`;
-        return this.httpService.post(url, requests);
-    }
-    /**
-     * Delete multiple user access requests
-     * @param requestIds Array of request IDs to delete
-     * @returns Observable containing the delete operation result
-     */
-    deleteUserAccessRequests(requestIds) {
-        const url = `${this.BASE_URL}/DeleteUserAccessRequests`;
-        return this.httpService.delete(`${url}?data=${requestIds.join(',')}`);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestService, deps: [{ token: HttpWebRequestService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: HttpWebRequestService }] });
-
-class UserAccessRequestState {
-    updating$ = new BehaviorSubject(false);
-    requests$ = new BehaviorSubject([]);
-    queryParams$ = new BehaviorSubject({
-        skip: 0,
-        limit: 10,
-        sortParam: 'CreatedAt',
-        sortOrder: 'asc',
-    });
-    isUpdating$() {
-        return this.updating$.asObservable();
-    }
-    setUpdating(isUpdating) {
-        this.updating$.next(isUpdating);
-    }
-    getRequests$() {
-        return this.requests$.asObservable();
-    }
-    setRequests(requests) {
-        this.requests$.next(requests);
-    }
-    getQueryParams$() {
-        return this.queryParams$.asObservable();
-    }
-    getQueryParamsValue() {
-        return this.queryParams$.getValue();
-    }
-    updateQueryParams(params) {
-        this.queryParams$.next({ ...this.queryParams$.getValue(), ...params });
-    }
-    addRequest(request) {
-        const currentValue = this.requests$.getValue();
-        this.requests$.next([...currentValue, request]);
-    }
-    updateRequest(updatedRequest) {
-        const requests = this.requests$.getValue();
-        const index = requests.findIndex((r) => r.Id === updatedRequest.Id);
-        if (index !== -1) {
-            requests[index] = updatedRequest;
-            this.requests$.next([...requests]);
-        }
-    }
-    removeRequest(requestId) {
-        const currentValue = this.requests$.getValue();
-        this.requests$.next(currentValue.filter((r) => r.Id !== requestId));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestState, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestState, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class UserAccessRequestFacade {
-    userAccessRequestService;
-    userAccessRequestState;
-    constructor(userAccessRequestService, userAccessRequestState) {
-        this.userAccessRequestService = userAccessRequestService;
-        this.userAccessRequestState = userAccessRequestState;
-    }
-    isUpdating$() {
-        return this.userAccessRequestState.isUpdating$();
-    }
-    getRequests$() {
-        return this.userAccessRequestState.getRequests$();
-    }
-    getQueryParams$() {
-        return this.userAccessRequestState.getQueryParams$();
-    }
-    async loadRequests() {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const params = this.userAccessRequestState.getQueryParamsValue();
-            const requests = await this.userAccessRequestService.getUserAccessRequests(params.skip, params.limit, params.sortParam || 'createdDate', params.sortOrder);
-            this.userAccessRequestState.setRequests(requests.Result);
-        }
-        catch (error) {
-            console.error('Failed to load requests:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
-    }
-    async loadRequestsWithParam(param) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const params = this.userAccessRequestState.getQueryParamsValue();
-            const requests = await this.userAccessRequestService.getUserAccessRequestWithParam(param, params.skip, params.limit, params.sortParam || 'createdDate', params.sortOrder);
-            this.userAccessRequestState.setRequests(requests.Result);
-        }
-        catch (error) {
-            console.error('Failed to load requests with param:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
-    }
-    updateQueryParams(params) {
-        this.userAccessRequestState.updateQueryParams(params);
-        this.loadRequests();
-    }
-    async addRequest(request) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const newRequest = { ...request };
-            this.userAccessRequestState.addRequest(newRequest);
-            await this.userAccessRequestService.saveUserAccessRequests([newRequest]);
-            await this.loadRequests(); // Reload to get server-side changes
-        }
-        catch (error) {
-            console.error('Failed to add request:', error);
-            this.userAccessRequestState.removeRequest(request.Id);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
-    }
-    async updateRequest(request) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            await this.userAccessRequestService.saveUserAccessRequests([request]);
-            this.userAccessRequestState.updateRequest(request);
-        }
-        catch (error) {
-            console.error('Failed to update request:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
-    }
-    async deleteRequest(requestId) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            await lastValueFrom(this.userAccessRequestService.deleteUserAccessRequests([requestId]));
-            this.userAccessRequestState.removeRequest(requestId);
-        }
-        catch (error) {
-            console.error('Failed to delete request:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
-    }
-    async approveRequest(request) {
-        try {
-            this.userAccessRequestState.setUpdating(true);
-            const response = await this.userAccessRequestService.processUserAccessRequests([request], true);
-            // console.log(response);
-            const data = response?.[0];
-            if (data) {
-                this.userAccessRequestState.updateRequest(data);
-            }
-        }
-        catch (error) {
-            console.error('Failed to update request:', error);
-            throw error;
-        }
-        finally {
-            this.userAccessRequestState.setUpdating(false);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestFacade, deps: [{ token: UserAccessRequestService }, { token: UserAccessRequestState }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestFacade, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestFacade, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: UserAccessRequestService }, { type: UserAccessRequestState }] });
-
-class UserRequestFormComponent {
-    fb;
-    set currentData(value) {
-        if (value?.data) {
-            this.form.patchValue({
-                MailAddress: value.data.MailAddress || '',
-                FirstName: value.data.FirstName || '',
-                LastName: value.data.LastName || '',
-                OtherName: value.data.OtherName || '',
-                PhoneNumber: value.data.PhoneNumber || '',
-            });
-        }
-        else {
-            this.form.reset();
-        }
-    }
-    switchView = new EventEmitter();
-    onApproval = new EventEmitter();
-    form;
-    roles = [
-        { id: 'admin', name: 'Admin' },
-        { id: 'manager', name: 'Manager' },
-        { id: 'staff', name: 'Staff' },
-    ];
-    constructor(fb) {
-        this.fb = fb;
-        this.form = this.fb.group({
-            MailAddress: ['', { readonly: true }],
-            FirstName: ['', { readonly: true }],
-            LastName: ['', { readonly: true }],
-            OtherName: ['', { readonly: true }],
-            PhoneNumber: ['', { readonly: true }],
-            RoleId: [''],
-        });
-    }
-    ngOnInit() { }
-    onSave() {
-        if (this.form.valid) {
-            // Emit save event with form value
-            console.log('Form saved:', this.form.value);
-        }
-    }
-    onDelete() {
-        // Emit delete event
-        console.log('Delete requested');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserRequestFormComponent, selector: "lib-user-request-form", inputs: { currentData: "currentData" }, outputs: { switchView: "switchView", onApproval: "onApproval" }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"Mail Address:\"\n    formControlName=\"MailAddress\"\n  />\n  <verbena-input\n    label=\"First Name:\"\n    name=\"FirstName\"\n    type=\"text\"\n    formControlName=\"FirstName\"\n  />\n  <verbena-input\n    label=\"Last Name:\"\n    name=\"LastName\"\n    type=\"text\"\n    formControlName=\"LastName\"\n  />\n  <verbena-input\n    label=\"OtherName:\"\n    name=\"OtherName\"\n    type=\"text\"\n    formControlName=\"OtherName\"\n  />\n  <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n  />\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down\n      label=\"Role\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"roles\"\n      id=\"role\"\n      optionLabel=\"name\"\n      optionValue=\"id\"\n      formControlName=\"RoleId\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2\">\n    <!-- <verbena-button\n      text=\"Delete\"\n      class=\"bg-secondary-200 text-[black]\"\n      (click)=\"onDelete()\"\n    />\n    <verbena-button\n      text=\"Save\"\n      class=\"bg-primary text-[black]\"\n      (click)=\"onSave()\"\n    />\n\n    <verbena-button\n      text=\"Secondary Button\"\n      styleType=\"secondary\"\n    ></verbena-button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Reject\"\n      styleType=\"danger\"\n      borderRadius=\"10px\"\n    ></verbena-button>\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n    <verbena-button\n      (click)=\"onApproval.emit(form.get('MailAddress')?.value)\"\n      text=\"Approve\"\n      bgColor=\"#28a745\"\n      textColor=\"white\"\n      border=\"1px solid #28a745\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n    ></verbena-button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { 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: i2.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-user-request-form', template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"Mail Address:\"\n    formControlName=\"MailAddress\"\n  />\n  <verbena-input\n    label=\"First Name:\"\n    name=\"FirstName\"\n    type=\"text\"\n    formControlName=\"FirstName\"\n  />\n  <verbena-input\n    label=\"Last Name:\"\n    name=\"LastName\"\n    type=\"text\"\n    formControlName=\"LastName\"\n  />\n  <verbena-input\n    label=\"OtherName:\"\n    name=\"OtherName\"\n    type=\"text\"\n    formControlName=\"OtherName\"\n  />\n  <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n  />\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down\n      label=\"Role\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"roles\"\n      id=\"role\"\n      optionLabel=\"name\"\n      optionValue=\"id\"\n      formControlName=\"RoleId\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2\">\n    <!-- <verbena-button\n      text=\"Delete\"\n      class=\"bg-secondary-200 text-[black]\"\n      (click)=\"onDelete()\"\n    />\n    <verbena-button\n      text=\"Save\"\n      class=\"bg-primary text-[black]\"\n      (click)=\"onSave()\"\n    />\n\n    <verbena-button\n      text=\"Secondary Button\"\n      styleType=\"secondary\"\n    ></verbena-button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Reject\"\n      styleType=\"danger\"\n      borderRadius=\"10px\"\n    ></verbena-button>\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n    <verbena-button\n      (click)=\"onApproval.emit(form.get('MailAddress')?.value)\"\n      text=\"Approve\"\n      bgColor=\"#28a745\"\n      textColor=\"white\"\n      border=\"1px solid #28a745\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n    ></verbena-button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { currentData: [{
-                type: Input
-            }], switchView: [{
-                type: Output
-            }], onApproval: [{
-                type: Output
-            }] } });
-
-var UserAccessRequestStatus;
-(function (UserAccessRequestStatus) {
-    UserAccessRequestStatus["Pending"] = "Pending";
-    UserAccessRequestStatus["Approved"] = "Approved";
-    UserAccessRequestStatus["Declined"] = "Declined";
-})(UserAccessRequestStatus || (UserAccessRequestStatus = {}));
-
-class UserAccessRequestStatusBadgeComponent {
-    status = UserAccessRequestStatus.Pending;
-    badgeConfig() {
-        switch (this.status) {
-            case UserAccessRequestStatus.Approved:
-                return { bgColor: '#CAE1CC', textColor: '#4ABB54', label: 'Approved' };
-            case UserAccessRequestStatus.Declined:
-                return { bgColor: '#FFDFDF', textColor: '#EB5757', label: 'Rejected' };
-            default:
-                return { bgColor: '#827C7C', textColor: '#C3C3C3', label: 'Pending' };
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: { status: "status" }, ngImport: i0, template: "<verbena-badge\n  borderRadius=\"9px\"\n  [bgColor]=\"badgeConfig().bgColor\"\n  [textColor]=\"badgeConfig().textColor\"\n  fontSize=\"12px\"\n  [text]=\"badgeConfig().label\"\n></verbena-badge>\n", styles: [""], dependencies: [{ kind: "component", type: i2.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserAccessRequestStatusBadgeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-user-access-request-status-badge', template: "<verbena-badge\n  borderRadius=\"9px\"\n  [bgColor]=\"badgeConfig().bgColor\"\n  [textColor]=\"badgeConfig().textColor\"\n  fontSize=\"12px\"\n  [text]=\"badgeConfig().label\"\n></verbena-badge>\n" }]
-        }], propDecorators: { status: [{
-                type: Input
-            }] } });
-
-class UserRequestApprovalComponent {
-    cdr;
-    userAccessRequestFacade;
-    cardDataView;
-    dataView;
-    columns = columns$1;
-    // visibleColumnDef: WritableSignal<ColumnDefinition<UserAccessRequest>[]> =
-    //   signal(columns);
-    visibleColumnDef = this.columns;
-    data = signal([]);
-    styles = baseStyle$1;
-    currentData = null;
-    isGridView = true;
-    selected = null;
-    cardData = computed(() => this.data()?.map(({ FirstName, LastName, MailAddress, PhoneNumber, RoleID, RequestStatus, }) => ({
-        selected: false,
-        title: `${FirstName} ${LastName}`,
-        data: {
-            FirstName,
-            LastName,
-            MailAddress,
-            PhoneNumber,
-            RoleID,
-            RequestStatus,
-        },
-        body: [
-            { title: 'Name', value: `${FirstName} ${LastName}` },
-            { title: 'E-Mail Address', value: MailAddress },
-            { title: 'Phone Number', value: PhoneNumber ?? '' },
-        ],
-        children: [],
-    })));
-    constructor(cdr, 
-    // private service: UserRequestApprovalService,
-    userAccessRequestFacade) {
-        this.cdr = cdr;
-        this.userAccessRequestFacade = userAccessRequestFacade;
-    }
-    async ngOnInit() {
-        // this.data = this.service.getMockUserRequests();
-        this.userAccessRequestFacade.getRequests$().subscribe((data) => {
-            this.data.set(data);
-        });
-        try {
-            await this.userAccessRequestFacade.loadRequests();
-        }
-        catch (error) {
-            // Handle error
-        }
-    }
-    // To search with parameter:
-    async searchRequests(param) {
-        try {
-            await this.userAccessRequestFacade.loadRequestsWithParam(param);
-        }
-        catch (error) {
-            // Handle error
-        }
-    }
-    async onApprove(mailAddress) {
-        const data = this.data().find(({ MailAddress }) => MailAddress === mailAddress);
-        if (data) {
-            await this.userAccessRequestFacade.approveRequest(data);
-        }
-    }
-    openDetailView(mailAddress) {
-        const cardItem = this.getCardDataByMailAddress(mailAddress);
-        if (cardItem && this.cardDataView) {
-            this.dataView.toggleView();
-            // First reset all selections
-            this.cardData().forEach((item) => {
-                item.selected = false;
-                if (item.children) {
-                    item.children.forEach((child) => (child.selected = false));
-                }
-            });
-            // Set the selected item
-            cardItem.selected = true;
-            this.currentData = this.cardDataView.onItemClick(cardItem);
-            // Force change detection if needed
-            // this.changeDetectorRef.detectChanges();
-        }
-    }
-    getCardDataByMailAddress(mailAddress) {
-        return this.cardData().find(({ data }) => data.MailAddress === mailAddress);
-    }
-    onViewChange(isGridView) {
-        this.isGridView = isGridView;
-        // Reset selection when switching views
-        if (this.currentData) {
-            this.cardDataView?.clearData();
-            this.currentData = null;
-        }
-        console.log('SELECTED', this.selected);
-        if (this.selected) {
-            this.cardDataView.onItemClick(this.selected);
-        }
-    }
-    openFormView(index) {
-        const item = this.cardData()[index];
-        console.log('ITEM = ', item);
-    }
-    handleExport(exportedData) {
-        console.log('Exported data:', exportedData);
-        this.downloadCSV(exportedData);
-    }
-    /**
-     *
-     * @param data Simple csv export for testing
-     */
-    downloadCSV(data) {
-        const headers = Object.keys(data[0]);
-        const csvContent = [
-            headers.join(','),
-            ...data.map((row) => headers.map((header) => row[header]).join(',')),
-        ].join('\n');
-        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-        const link = document.createElement('a');
-        if (link.download !== undefined) {
-            const url = URL.createObjectURL(blob);
-            link.setAttribute('href', url);
-            link.setAttribute('download', 'export.csv');
-            link.style.visibility = 'hidden';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-    }
-    onSelectionChange(selectedRows) {
-        console.log('Selection changed:', selectedRows);
-        // Handle the selection change
-    }
-    /**
-     * Copied over from card view doc until I understand usage
-     */
-    selectedColumnCount = 0;
-    selectedFilterTableCount = 0;
-    isOPen = true;
-    selectedSortCount = 0;
-    showColumn = false;
-    showSort = false;
-    selectedAll = false;
-    visibleColumns = columns$1.map((col) => ({
-        checked: true,
-        name: typeof col.header === 'string' ? col.header : col.id,
-        type: DataFilterType.Bool,
-    }));
-    filterArray = [
-        {
-            name: 'Name',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'MailAddress',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'PhoneNumber',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'CreatedAt',
-            type: DataFilterType.Date,
-            checked: false,
-        },
-    ];
-    sortOptions = [
-        {
-            name: 'Name',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'MailAddress',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'PhoneNumber',
-            type: DataFilterType.String,
-            checked: false,
-        },
-        {
-            name: 'CreatedAt',
-            type: DataFilterType.Date,
-            checked: false,
-        },
-    ];
-    clearData() {
-        this.currentData = {};
-    }
-    loadMore() {
-        // this.cardData = this.cardData.concat(this.cardData);
-    }
-    onColumnChange(event) {
-        this.showColumn = event;
-    }
-    onSortChange(event) {
-        this.showSort = event;
-        console.log(event);
-    }
-    onColumnsUpdated(updatedColumns) {
-        console.log(updatedColumns);
-        const updatedColumnDef = [];
-        updatedColumns.forEach((col) => {
-            const matchingCol = this.columns.find((column) => column.header === col.name || column.id === col.name);
-            if (matchingCol) {
-                updatedColumnDef.push(matchingCol);
-            }
-        });
-        console.log(updatedColumnDef);
-        this.visibleColumnDef = [...updatedColumnDef];
-        this.cdr.markForCheck();
-        this.onColumnChange(false);
-        this.selectedColumnCount = updatedColumns.length;
-    }
-    onSortUpdated(updatedSorts) {
-        this.onSortChange(false);
-        this.selectedSortCount = updatedSorts.length;
-        console.log(updatedSorts);
-    }
-    onStateChange(event) {
-        console.log(`State changed for ${event.key}:`, event.value);
-    }
-    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  >\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=\"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 flex-col py-2 px-4 w-full\">\n                    <div class=\"flex items-center gap-4 justify-between\">\n                      <div class=\"grid gap-y-2\">\n                        <span class=\"font-semibold text-[#404040]\">{{\n                          item.title\n                        }}</span>\n                        <p class=\"flex items-center\">\n                          <label for=\"phone\" class=\"text-[10px] font-light\"\n                            >Phone Number:</label\n                          >\n                          <span id=\"phone\" class=\"text-sm\">{{\n                            item.data.PhoneNumber\n                          }}</span>\n                        </p>\n                      </div>\n\n                      <div class=\"grid gap-y-2\">\n                        <p class=\"grid\">\n                          <label for=\"role\" class=\"text-[10px] font-light\"\n                            >Role</label\n                          >\n                          <span id=\"role\" class=\"text-sm\">Manager</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\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\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              [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=\"float-right\">\n          <div class=\"flex gap-2\">\n            <!-- <span class=\"paginator-text\"\n              >{{ data().length }} records loaded</span\n            > -->\n            <span></span>\n            <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\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      ></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</div>\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-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-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.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-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}.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-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.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}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 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)}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "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: UserRequestFormComponent, selector: "lib-user-request-form", inputs: ["currentData"], outputs: ["switchView", "onApproval"] }, { kind: "component", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: ["status"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserRequestApprovalComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-user-request-approval', 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  >\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=\"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 flex-col py-2 px-4 w-full\">\n                    <div class=\"flex items-center gap-4 justify-between\">\n                      <div class=\"grid gap-y-2\">\n                        <span class=\"font-semibold text-[#404040]\">{{\n                          item.title\n                        }}</span>\n                        <p class=\"flex items-center\">\n                          <label for=\"phone\" class=\"text-[10px] font-light\"\n                            >Phone Number:</label\n                          >\n                          <span id=\"phone\" class=\"text-sm\">{{\n                            item.data.PhoneNumber\n                          }}</span>\n                        </p>\n                      </div>\n\n                      <div class=\"grid gap-y-2\">\n                        <p class=\"grid\">\n                          <label for=\"role\" class=\"text-[10px] font-light\"\n                            >Role</label\n                          >\n                          <span id=\"role\" class=\"text-sm\">Manager</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\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\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              [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=\"float-right\">\n          <div class=\"flex gap-2\">\n            <!-- <span class=\"paginator-text\"\n              >{{ data().length }} records loaded</span\n            > -->\n            <span></span>\n            <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\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      ></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</div>\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-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-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.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-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}.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-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.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}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 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)}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: UserAccessRequestFacade }], propDecorators: { cardDataView: [{
-                type: ViewChild,
-                args: ['vdcv']
-            }], dataView: [{
-                type: ViewChild,
-                args: ['vdv']
-            }] } });
-
-const roles = [
-    { id: 'admin', name: 'Admin' },
-    { id: 'manager', name: 'Manager' },
-    { id: 'staff', name: 'Staff' },
-];
-const mockData$1 = 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: [],
-    CreatedAt: new Date(),
-    UpdatedAt: new Date(),
-    DataState: ObjectState.New,
-    Tenant: `Tenant${id + i}`,
-}));
-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;
-    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$1;
-    }
-    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,
-            UserRequestFormComponent,
-            UserAccessRequestStatusBadgeComponent], imports: [CommonModule,
-            DataTableModule,
-            CardModule,
-            SvgModule,
-            DataViewModule,
-            CardDataViewModule,
-            SortTableModule,
-            VisibleColumnModule,
-            TableFilterModule,
-            DataExportModule,
-            FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            VerbenaBadgeModule,
-            DropDownModule], exports: [UserRequestApprovalComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, providers: [UserRequestApprovalService], imports: [CommonModule,
-            DataTableModule,
-            CardModule,
-            SvgModule,
-            DataViewModule,
-            CardDataViewModule,
-            SortTableModule,
-            VisibleColumnModule,
-            TableFilterModule,
-            DataExportModule,
-            FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            VerbenaBadgeModule,
-            DropDownModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserRequestApprovalModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        UserRequestApprovalComponent,
-                        UserRequestFormComponent,
-                        UserAccessRequestStatusBadgeComponent,
-                    ],
-                    imports: [
-                        CommonModule,
-                        DataTableModule,
-                        CardModule,
-                        SvgModule,
-                        DataViewModule,
-                        CardDataViewModule,
-                        SortTableModule,
-                        VisibleColumnModule,
-                        TableFilterModule,
-                        DataExportModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        VerbenaInputModule,
-                        VerbenaButtonModule,
-                        VerbenaBadgeModule,
-                        DropDownModule,
-                    ],
-                    providers: [UserRequestApprovalService],
-                    exports: [UserRequestApprovalComponent],
-                }]
-        }] });
-
-const columns = [
-    {
-        id: 'createdAt',
-        header: 'CREATED',
-        accessorKey: 'CreatedAt',
-    },
-    {
-        id: 'user',
-        header: 'NAME',
-        accessorFn: (row) => `${row.FirstName} ${row.LastName}`,
-    },
-    {
-        id: 'mail',
-        header: 'E-Mail',
-        accessorKey: 'MailAddress',
-    },
-    {
-        id: 'phone',
-        header: 'PHONE NUMBER',
-        accessorKey: 'PhoneNumber',
-    },
-    {
-        id: 'address',
-        header: 'ADDRESS',
-        accessorKey: 'Address',
-    },
-    {
-        id: 'role',
-        header: 'ROLE',
-        accessorKey: 'Role',
-    },
-    {
-        id: 'status',
-        header: 'STATUS',
-        accessorKey: 'Status',
-    },
-    {
-        id: 'actions',
-        header: 'ACTIONS',
-        accessorKey: 'MailAddress',
-    },
-];
-
-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: UserAccessRequestStatus.Pending,
-    Address: `AAA Block`,
-    Password: '1234567',
-    ExpireOn: new Date(),
-    IsSeeded: false,
-    OTPExpireOn: new Date(),
-    Tenants: [],
-    Role: ['Manager'],
-    CreatedAt: new Date(),
-    UpdatedAt: new Date(),
-    DataState: ObjectState.New,
-    Tenant: `Tenant${id + i}`,
-}));
-
-const baseStyle = {
-    width: "100%",
-    fontFamily: '"Fraunces", serif',
-    fontSize: '80%',
-    whiteSpace: 'nowrap',
-    margin: '0',
-    border: '1px solid #D4A007',
-    borderRadius: '16px',
-    borderCollapse: 'separate',
-    borderSpacing: '0',
-    tableLayout: 'fixed',
-    overflow: 'hidden',
-    rows: {
-        even: {
-            backgroundColor: '#FDFDFD',
-        },
-        odd: {
-            backgroundColor: '#F1F4FB',
-        },
-        height: '68px',
-    },
-    cells: {
-        padding: '0.5rem 1rem',
-    },
-    header: {
-        stickyTop: true,
-        zIndex: 2,
-        backgroundColor: '#EFF2FB',
-        fontWeight: 'bold',
-        textAlign: 'left',
-        padding: '12px 16px',
-        height: '40px',
-    },
-    footer: {
-        stickyBottom: true,
-        zIndex: 2,
-        padding: '3px',
-    },
-    //   body: {
-    //     background: '#fff',
-    //     padding: '4px 5px',
-    //     textAlign: 'center',
-    //   },
-    firstColumn: {
-        stickyLeft: true,
-        zIndex: 1,
-    },
-    lastColumn: {
-        stickyRight: true,
-        zIndex: 1,
-    },
-};
-
-class UserManagementFormComponent {
-    fb;
-    set currentData(value) {
-        if (value?.data) {
-            this.form.patchValue({
-                MailAddress: value.data.MailAddress || '',
-                Name: value.data.Name || '',
-                PhoneNumber: value.data.PhoneNumber || '',
-            });
-        }
-        else {
-            this.form.reset();
-        }
-    }
-    switchView = new EventEmitter();
-    form;
-    roles = [
-        { id: 'admin', name: 'Admin' },
-        { id: 'manager', name: 'Manager' },
-        { id: 'staff', name: 'Staff' },
-    ];
-    constructor(fb) {
-        this.fb = fb;
-        this.form = this.fb.group({
-            MailAddress: ['', { readonly: true }],
-            Name: ['', { readonly: true }],
-            PhoneNumber: ['', { readonly: true }],
-            RoleId: [''],
-        });
-    }
-    ngOnInit() { }
-    onSave() {
-        if (this.form.valid) {
-            // Emit save event with form value
-            console.log('Form saved:', this.form.value);
-        }
-    }
-    onDelete() {
-        // Emit delete event
-        console.log('Delete requested');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserManagementFormComponent, selector: "lib-user-request-form", inputs: { currentData: "currentData" }, outputs: { switchView: "switchView" }, ngImport: i0, template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"Mail Address:\"\n    [type]=\"'email'\"\n    formControlName=\"MailAddress\"\n  />\n  <verbena-input label=\"Name:\" name=\"Name\" type=\"text\" formControlName=\"Name\" />\n  <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n  />\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down\n      label=\"Role\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"roles\"\n      id=\"role\"\n      optionLabel=\"name\"\n      optionValue=\"id\"\n      formControlName=\"RoleId\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div\n    class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute\"\n    style=\"\n      display: flex;\n      justify-content: space-between;\n      position: absolute;\n      padding: 8px 12px;\n      right: 0;\n      left: 0;\n      bottom: 32;\n    \"\n  >\n    <!-- <verbena-button\n      text=\"Delete\"\n      class=\"bg-secondary-200 text-[black]\"\n      (click)=\"onDelete()\"\n    />\n    <verbena-button\n      text=\"Save\"\n      class=\"bg-primary text-[black]\"\n      (click)=\"onSave()\"\n    />\n\n    <verbena-button\n      text=\"Secondary Button\"\n      styleType=\"secondary\"\n    ></verbena-button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Reject\"\n      styleType=\"danger\"\n      borderRadius=\"10px\"\n    ></verbena-button>\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n    <verbena-button\n      text=\"Approve\"\n      bgColor=\"#28a745\"\n      textColor=\"white\"\n      border=\"1px solid #28a745\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n    ></verbena-button>\n  </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.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", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { 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: i2.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-user-request-form', template: "<form\n  [formGroup]=\"form\"\n  class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n  <verbena-input\n    name=\"MailAddress\"\n    label=\"Mail Address:\"\n    [type]=\"'email'\"\n    formControlName=\"MailAddress\"\n  />\n  <verbena-input label=\"Name:\" name=\"Name\" type=\"text\" formControlName=\"Name\" />\n  <verbena-input\n    label=\"Phone Number:\"\n    name=\"PhoneNumber\"\n    type=\"tel\"\n    formControlName=\"PhoneNumber\"\n  />\n\n  <div class=\"space-y-1\">\n    <label for=\"role\">Role</label>\n\n    <verben-drop-down\n      label=\"Role\"\n      styleClass=\"w-full\"\n      width=\"100%\"\n      [multiselect]=\"false\"\n      [filter]=\"true\"\n      [showClear]=\"true\"\n      placeholder=\"\"\n      [(options)]=\"roles\"\n      id=\"role\"\n      optionLabel=\"name\"\n      optionValue=\"id\"\n      formControlName=\"RoleId\"\n      class=\"form-control\"\n    >\n    </verben-drop-down>\n  </div>\n\n  <!-- buttons -->\n  <div\n    class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute\"\n    style=\"\n      display: flex;\n      justify-content: space-between;\n      position: absolute;\n      padding: 8px 12px;\n      right: 0;\n      left: 0;\n      bottom: 32;\n    \"\n  >\n    <!-- <verbena-button\n      text=\"Delete\"\n      class=\"bg-secondary-200 text-[black]\"\n      (click)=\"onDelete()\"\n    />\n    <verbena-button\n      text=\"Save\"\n      class=\"bg-primary text-[black]\"\n      (click)=\"onSave()\"\n    />\n\n    <verbena-button\n      text=\"Secondary Button\"\n      styleType=\"secondary\"\n    ></verbena-button> -->\n    <verbena-button\n      width=\"114px\"\n      height=\"39px\"\n      text=\"Reject\"\n      styleType=\"danger\"\n      borderRadius=\"10px\"\n    ></verbena-button>\n    <verbena-button\n      (click)=\"switchView.emit()\"\n      text=\"Switch To Table\"\n      styleType=\"ylw-outline\"\n    ></verbena-button>\n    <verbena-button\n      text=\"Approve\"\n      bgColor=\"#28a745\"\n      textColor=\"white\"\n      border=\"1px solid #28a745\"\n      borderRadius=\"10px\"\n      pd=\"10px 20px\"\n      width=\"114px\"\n      height=\"39px\"\n    ></verbena-button>\n  </div>\n</form>\n" }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { currentData: [{
-                type: Input
-            }], switchView: [{
-                type: Output
-            }] } });
-
-class UserManagementComponent {
-    cardDataView;
-    dataView;
-    columns = columns;
-    data = mockData;
-    styles = baseStyle;
-    selectedParent;
-    basicOption;
-    selectedOption = [];
-    selectedOptionTwo = [];
-    selectedOptionThree;
-    missingObject;
-    generateNewUserAccessRequest() {
-        const newId = this.data.length + 1; // Incremental ID based on current data length
-        return {
-            FirstName: `First ${newId}`,
-            LastName: `Last ${newId}`,
-            OtherName: `Other ${newId}`,
-            Id: `${newId}`,
-            id: newId,
-            MailAddress: ` `,
-            PhoneNumber: ``,
-            RequestStatus: UserAccessRequestStatus.Pending,
-            Address: ` `,
-            Password: ' ',
-            ExpireOn: new Date(),
-            IsSeeded: false,
-            OTPExpireOn: new Date(),
-            Tenants: [`Tenant${newId}`],
-            Role: ['User'],
-            CreatedAt: new Date(),
-            UpdatedAt: new Date(),
-            DataState: ObjectState.New,
-            Tenant: `Tenant${newId}`
-        };
-    }
-    // Function to add a new user to mockData
-    addNewUserToMockData() {
-        const newUser = this.generateNewUserAccessRequest();
-        this.data.push(newUser); // Adds the new user to the data array
-        // Optionally, update cardData with the new user entry for card display
-        const fullName = `${newUser.FirstName} ${newUser.LastName}`;
-        const newCardData = {
-            selected: false,
-            title: fullName,
-            data: {
-                Name: fullName,
-                MailAddress: newUser.MailAddress,
-                PhoneNumber: newUser.PhoneNumber,
-                RoleID: newUser.Role,
-                Status: newUser.Status,
-            },
-            body: [
-                { title: 'Name', value: fullName },
-                { title: 'E-Mail Address', value: newUser.MailAddress },
-                { title: 'Phone Number', value: newUser.PhoneNumber ?? '' },
-            ],
-            children: [],
-        };
-        this.cardData.push(newCardData); // Update cardData array with the new user
-        return newUser;
-    }
-    // Grid view properties
-    isGridView = true;
-    currentData;
-    selectedColumnCount = 0;
-    selectedFilterTableCount = 0;
-    isOPen = true;
-    selectedSortCount = 0;
-    showColumn = false;
-    showSort = false;
-    selectedAll = false;
-    visibleColumns = columns.map((col) => ({
-        checked: false,
-        name: typeof col.header === 'string' ? col.header : col.id,
-        type: DataFilterType.Bool,
-    }));
-    filterArray = [
-        { name: 'Name', type: DataFilterType.String, checked: false },
-        { name: 'MailAddress', type: DataFilterType.String, checked: false },
-        { name: 'PhoneNumber', type: DataFilterType.String, checked: false },
-        { name: 'CreatedAt', type: DataFilterType.Date, checked: false },
-    ];
-    sortOptions = [
-        { name: 'Name', type: DataFilterType.String, checked: false },
-        { name: 'MailAddress', type: DataFilterType.String, checked: false },
-        { name: 'PhoneNumber', type: DataFilterType.String, checked: false },
-        { name: 'CreatedAt', type: DataFilterType.Date, checked: false },
-    ];
-    testParents = [
-        { Id: '1', Name: 'Manager' },
-        { Id: '2', Name: 'Administrator' },
-        { Id: '3', Name: 'Jelom' },
-    ];
-    cardData = mockData.map(({ FirstName, LastName, MailAddress, PhoneNumber, RoleID, Status }) => ({
-        selected: false,
-        title: `${FirstName} ${LastName}`,
-        data: {
-            FirstName,
-            LastName,
-            MailAddress,
-            PhoneNumber,
-            RoleID,
-            Status,
-        },
-        body: [
-            { title: 'Name', value: `${FirstName} ${LastName}` },
-            { title: 'E-Mail Address', value: MailAddress },
-            { title: 'Phone Number', value: PhoneNumber ?? '' },
-        ],
-        children: [],
-    }));
-    ngOnInit() {
-        this.selectedParent = '1';
-        this.selectedOption = ['Opt 1'];
-        this.selectedOptionTwo = ['1'];
-        this.selectedOptionThree = '1';
-    }
-    getParentLabel(context) {
-        console.log({ MissingObj: this.missingObject });
-        return this.missingObject.Name;
-    }
-    async loadMoreParents(event) {
-        console.log({ ParentLoadEvent: JSON.parse(JSON.stringify(event)) });
-        return await new Promise((resolve) => setTimeout(() => resolve([
-            { Id: '1', Name: 'Jimly' },
-            { Id: '2', Name: 'Jecil' },
-            { Id: '3', Name: 'Jelom' },
-            { Id: '4', Name: 'Jemima' },
-            { Id: '5', Name: 'Akintunde' },
-        ]), 3000));
-    }
-    onDropdownChange(event) {
-        // console.log({
-        //   'Test Parent Value': this.selectedParent,
-        //   ...
-        // });
-    }
-    onSelectionChange(selectedRows) {
-        console.log('Selection changed:', selectedRows);
-        // Handle the selection change
-    }
-    handleExport(exportedData) {
-        console.log('Exported data:', exportedData);
-        this.downloadCSV(exportedData);
-    }
-    downloadCSV(data) {
-        const headers = Object.keys(data[0]);
-        const csvContent = [
-            headers.join(','),
-            ...data.map((row) => headers.map((header) => row[header]).join(',')),
-        ].join('\n');
-        const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-        const link = document.createElement('a');
-        if (link.download !== undefined) {
-            const url = URL.createObjectURL(blob);
-            link.setAttribute('href', url);
-            link.setAttribute('download', 'export.csv');
-            link.style.visibility = 'hidden';
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-    }
-    // applyFilters() {
-    //   this.filteredData = this.data.filter((item) => {
-    //     return this.filterArray.every((filter) => {
-    //       if (filter.checked) {
-    //         switch (filter.type) {
-    //           case DataFilterType.String:
-    //             return item[filter.name].toLowerCase().includes(filter.name.toLowerCase());
-    //           case DataFilterType.Date:
-    //             return new Date(item[filter.name]) >= new Date(filter.name);
-    //           default:
-    //             return true;
-    //         }
-    //       }
-    //       return true;
-    //     });
-    //   });
-    // }
-    getCardDataByMailAddress(mailAddress) {
-        console.log('cardData array:', this.cardData);
-        console.log(mailAddress);
-        return this.cardData.find(({ data }) => data?.MailAddress === mailAddress);
-    }
-    openDetailView(mailAddress) {
-        const cardItem = this.getCardDataByMailAddress(mailAddress);
-        console.log(cardItem);
-        if (cardItem && this.cardDataView) {
-            this.dataView.toggleView();
-            // First reset all selections
-            this.cardData.forEach((item) => {
-                item.selected = false;
-                if (item.children) {
-                    item.children.forEach((child) => (child.selected = false));
-                }
-            });
-            // Set the selected item
-            cardItem.selected = true;
-            this.currentData = this.cardDataView.onItemClick(cardItem);
-            // Force change detection if needed
-            // this.changeDetectorRef.detectChanges();
-        }
-    }
-    newItem() {
-        const newData = this.addNewUserToMockData();
-        const newCardData = {
-            selected: true,
-            title: `${newData.FirstName} ${newData.LastName}`,
-            data: {
-                ...newData,
-            },
-            body: [
-                { title: 'Name', value: `${newData.FirstName} ${newData.LastName}` },
-                { title: 'E-Mail Address', value: newData.MailAddress },
-                { title: 'Phone Number', value: newData.PhoneNumber ?? '' },
-            ],
-            children: [],
-        };
-        if (this.dataView.isTableView) {
-            this.dataView.toggleView();
-        }
-        // First reset all selections
-        this.cardData.forEach((item) => {
-            item.selected = false;
-            if (item.children) {
-                item.children.forEach((child) => (child.selected = false));
-            }
-        });
-        // this.cardData = [newCardData].concat(this.cardData);
-        // this.cardDataView.onItemClick(newCardData)
-        this.cardData = [newCardData, ...this.cardData];
-        this.currentData = this.cardDataView.onItemClick(newCardData);
-    }
-    // toggleChildView(action: string) {
-    //   if (action === 'create') {
-    //     const newCard: CardData = {
-    //       selected: false,
-    //       title: 'New Card', // Default title, change as needed
-    //       data: { Name: '', MailAddress: '', PhoneNumber: '' },
-    //       body: [
-    //         { title: 'Name', value: '' },
-    //         { title: 'E-Mail Address', value: '' },
-    //         { title: 'Phone Number', value: '' }
-    //       ],
-    //       children: []
-    //     };
-    //     this.cardData.push(newCard);
-    //   }
-    // }
-    clearData() {
-        this.currentData = {};
-    }
-    loadMore() {
-        this.cardData = this.cardData.concat(this.cardData);
-    }
-    onColumnChange(event) {
-        this.showColumn = event;
-    }
-    onSortChange(event) {
-        this.showSort = event;
-        console.log(event);
-    }
-    onColumnsUpdated(updatedColumns) {
-        this.onColumnChange(false);
-        this.selectedColumnCount = updatedColumns.length;
-    }
-    onSortUpdated(updatedSorts) {
-        this.onSortChange(false);
-        this.selectedSortCount = updatedSorts.length;
-        console.log(updatedSorts);
-    }
-    onViewChange(isGridView) {
-        console.log('View changed to:', isGridView ? 'Grid View' : 'List View');
-    }
-    onStateChange(event) {
-        console.log(`State changed for ${event.key}:`, event.value);
-        if (event.key === 'create') {
-            console.log('peace is a boy');
-            this.newItem();
-            // const newUser = this.newItem()
-            // if ( newUser && this.cardDataView) {
-            //   this.dataView.toggleView();
-            //   // First reset all selections
-            //   this.cardData.forEach((item) => {
-            //     item.selected = false;
-            //     if (item.children) {
-            //       item.children.forEach((child) => (child.selected = false));
-            //     }
-            //   });
-            //   this.currentData = this.cardDataView.onItemClick(newUser);
-            //   // Force change detection if needed
-            //   // this.changeDetectorRef.detectChanges();
-            // }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UserManagementComponent, selector: "lib-user-management", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-1 h-full\">\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: true,\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  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data\"\n        [columns]=\"columns\"\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=\"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        <ng-container libColumn=\"role\">\n          <ng-template\n          #cell\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-deleteRow=\"deleteRow\"\n          let-value=\"value\"\n          let-updateValue=\"updateValue\"\n          >\n            <!-- <verben-drop-down [minChar]=\"3\" [required]=\"true\" placeholder=\"Select Parent\"\n            [asyncLabel]=\"this.getParentLabel.bind(this)\" invalidMessage=\"No value was provided\"\n             width=\"120px\"\n            (onChange)=\"onDropdownChange($event)\" [(ngModel)]=\"selectedParent\" optionLabel=\"Name\" optionValue=\"Id\"\n            [options]=\"testParents\"></verben-drop-down> -->\n\n            <verben-drop-down\n            placeholder=\"Select Value\"\n            width=\"120px\"\n            (ngModelChange)=\"onDropdownChange($event)\"\n            [options]=\"testParents\"\n            optionLabel=\"Name\"\n            optionValue=\"Name\"\n            [ngModel]=\"value\"\n          ></verben-drop-down>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        (loadMoreClick)=\"loadMore()\"\n        #vdcv\n        dataId=\"MailAddress\"\n        border=\"5px\"\n        [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n        class=\"gap-1\"\n      >\n        <verben-left-card-data-view class=\"m-0 gap-2\" >\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"MailAddress\"\n            class=\"bg-secondary-100  rounded-xl scroll-no border-primary border-[1px] gap-1 h-full justify-pp m-0 overflow-y-auto overflow-hidden\"\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  bg-secondary rounded-xl overflow-hidden w-full\"\n                >\n                  <div\n                    class=\"w-2 rounded-xl rounded-tr-none rounded-br-none overflow-hidden\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"flex flex-col py-[6px] pr-[3px] \">\n                    <div class=\"flex items-center gap-4\">\n                      <div class=\"pl-[13px]\">\n                        <span class=\"font-semibold text-[16px] text-[#404040]\">{{\n                          item.title\n                        }}</span>\n                        <p class=\"flex items-center\">\n                          <label for=\"phone\" class=\"text-[10px] font-light\"\n                            >Phone Number:</label\n                          >\n                          <span id=\"phone\" class=\"text-[13px] font-medium truncate text-wrap\">{{\n                            item.data.PhoneNumber\n                          }}</span>\n                        </p>\n                      </div>\n\n                      <div class=\"  \">\n                        <p class=\"grid\">\n                          <label for=\"phone\" class=\"text-[10px] font-light\"\n                            >Role</label\n                          >\n                          <span id=\"phone\" class=\"text-sm font-medium\"\n                            >Manager</span\n                          >\n                          <span class=\" bg-[#CAE1CC] text-center text-[#4ABB54] text-[13px] mt-[8px] rounded-[9px]\">\n                            {{item.data.Status}}\n                          </span>\n                        </p>\n                        <!-- <lib-user-access-request-status-badge\n                          [status]=\"item.data.Status\"\n                        ></lib-user-access-request-status-badge> -->\n                      </div>\n                    </div>\n\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\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              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n            ></lib-user-request-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2\">\n            <span class=\"paginator-text\"\n              >{{ cardData.length }} records loaded</span\n            >\n            <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\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      ></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</div>\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-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-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.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-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}.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-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.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}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 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)}.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}}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "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: "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: i2.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }, { kind: "component", type: i2.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }, { kind: "component", type: UserManagementFormComponent, selector: "lib-user-request-form", inputs: ["currentData"], outputs: ["switchView"] }, { kind: "pipe", type: i1$2.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=\"space-y-1 h-full\">\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: true,\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  >\n    <div table-content>\n      <lib-data-table\n        [data]=\"data\"\n        [columns]=\"columns\"\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=\"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        <ng-container libColumn=\"role\">\n          <ng-template\n          #cell\n          let-isEditing=\"isEditing\"\n          let-toggleRowEdit=\"toggleRowEdit\"\n          let-deleteRow=\"deleteRow\"\n          let-value=\"value\"\n          let-updateValue=\"updateValue\"\n          >\n            <!-- <verben-drop-down [minChar]=\"3\" [required]=\"true\" placeholder=\"Select Parent\"\n            [asyncLabel]=\"this.getParentLabel.bind(this)\" invalidMessage=\"No value was provided\"\n             width=\"120px\"\n            (onChange)=\"onDropdownChange($event)\" [(ngModel)]=\"selectedParent\" optionLabel=\"Name\" optionValue=\"Id\"\n            [options]=\"testParents\"></verben-drop-down> -->\n\n            <verben-drop-down\n            placeholder=\"Select Value\"\n            width=\"120px\"\n            (ngModelChange)=\"onDropdownChange($event)\"\n            [options]=\"testParents\"\n            optionLabel=\"Name\"\n            optionValue=\"Name\"\n            [ngModel]=\"value\"\n          ></verben-drop-down>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        (loadMoreClick)=\"loadMore()\"\n        #vdcv\n        dataId=\"MailAddress\"\n        border=\"5px\"\n        [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n        class=\"gap-1\"\n      >\n        <verben-left-card-data-view class=\"m-0 gap-2\" >\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"MailAddress\"\n            class=\"bg-secondary-100  rounded-xl scroll-no border-primary border-[1px] gap-1 h-full justify-pp m-0 overflow-y-auto overflow-hidden\"\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  bg-secondary rounded-xl overflow-hidden w-full\"\n                >\n                  <div\n                    class=\"w-2 rounded-xl rounded-tr-none rounded-br-none overflow-hidden\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"flex flex-col py-[6px] pr-[3px] \">\n                    <div class=\"flex items-center gap-4\">\n                      <div class=\"pl-[13px]\">\n                        <span class=\"font-semibold text-[16px] text-[#404040]\">{{\n                          item.title\n                        }}</span>\n                        <p class=\"flex items-center\">\n                          <label for=\"phone\" class=\"text-[10px] font-light\"\n                            >Phone Number:</label\n                          >\n                          <span id=\"phone\" class=\"text-[13px] font-medium truncate text-wrap\">{{\n                            item.data.PhoneNumber\n                          }}</span>\n                        </p>\n                      </div>\n\n                      <div class=\"  \">\n                        <p class=\"grid\">\n                          <label for=\"phone\" class=\"text-[10px] font-light\"\n                            >Role</label\n                          >\n                          <span id=\"phone\" class=\"text-sm font-medium\"\n                            >Manager</span\n                          >\n                          <span class=\" bg-[#CAE1CC] text-center text-[#4ABB54] text-[13px] mt-[8px] rounded-[9px]\">\n                            {{item.data.Status}}\n                          </span>\n                        </p>\n                        <!-- <lib-user-access-request-status-badge\n                          [status]=\"item.data.Status\"\n                        ></lib-user-access-request-status-badge> -->\n                      </div>\n                    </div>\n\n                    <!-- <div class=\"flex\">\n                      <span class=\"font-normal text-sm\">{{ item.title }}</span>\n                    </div>\n                    @for (ciItem of item.body; track ciItem.value) {\n                    <div class=\"\">\n                      <span class=\"text-muted font-light text-xs\"\n                        >{{ ciItem.title }}:</span\n                      >\n                      <span class=\"text-black\">{{ ciItem.value }}</span>\n                    </div>\n                    } -->\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              [currentData]=\"currentData\"\n              (switchView)=\"vdv.toggleView()\"\n            ></lib-user-request-form>\n          </ng-template>\n        </verben-right-card-data-view>\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2\">\n            <span class=\"paginator-text\"\n              >{{ cardData.length }} records loaded</span\n            >\n            <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\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      ></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</div>\n", styles: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-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-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.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-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}.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-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.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}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity, 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)}.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}}\n"] }]
-        }], propDecorators: { cardDataView: [{
-                type: ViewChild,
-                args: ['vdcv']
-            }], dataView: [{
-                type: ViewChild,
-                args: ['vdv']
-            }] } });
-
-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: [CommonModule,
-            DataTableModule,
-            CardModule,
-            SvgModule,
-            DataViewModule,
-            CardDataViewModule,
-            SortTableModule,
-            VisibleColumnModule,
-            TableFilterModule,
-            DataExportModule,
-            FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            VerbenaBadgeModule,
-            DropDownModule], exports: [UserManagementComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserManagementModule, imports: [CommonModule,
-            DataTableModule,
-            CardModule,
-            SvgModule,
-            DataViewModule,
-            CardDataViewModule,
-            SortTableModule,
-            VisibleColumnModule,
-            TableFilterModule,
-            DataExportModule,
-            FormsModule,
-            ReactiveFormsModule,
-            VerbenaInputModule,
-            VerbenaButtonModule,
-            VerbenaBadgeModule,
-            DropDownModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibUserManagementModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [UserManagementComponent, UserManagementFormComponent],
-                    imports: [
-                        CommonModule,
-                        DataTableModule,
-                        CardModule,
-                        SvgModule,
-                        DataViewModule,
-                        CardDataViewModule,
-                        SortTableModule,
-                        VisibleColumnModule,
-                        TableFilterModule,
-                        DataExportModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        VerbenaInputModule,
-                        VerbenaButtonModule,
-                        VerbenaBadgeModule,
-                        DropDownModule
-                    ],
-                    exports: [UserManagementComponent],
-                }]
-        }] });
-
-/*
- * Public API Surface of verben-ng-ui
- */
-// export * from './lib/verben-ng-ui.service';
-// export * from './lib/verben-ng-ui.component';
-// Exporting modules
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { ENVIRONMENT, EnvironmentService, ForgotPasswordComponent, ForgotPasswordModule, LibUserManagementModule, LibUserRequestApprovalModule, MailComponent, MailModule, MailValidationComponent, MailValidationModule, ResetPasswordComponent, ResetPasswordModule, SERVICE_CONFIG, SignInComponent, SignInModule, SignUpComponent, SignUpModule, SsoComponent, SsoModule, TwoFactorAuthOtpComponent, TwoFactorAuthOtpModule, TwoFactorAuthSetupComponent, TwoFactorAuthSetupModule, UserManagementComponent, UserRequestApprovalComponent, UserRequestApprovalService, UserRequestComponent, UserRequestModule };
-//# sourceMappingURL=verben-authentication-ui.mjs.map