verben-authentication-ui 0.4.2 → 0.4.4

package/fesm2022/verben-authentication-ui.mjs

@@ -464,7 +464,7 @@ class UserRequestComponent {
         this.utilService = utilService;
         this.envSvc = envSvc;
         this.route = route;
-        this.apiKey = this.envSvc.environment.APIKey;
+        this.apiKey = this.envSvc.environment.Tenant;
         this.userRequestForm = this.fb.group({
             Code: new FormControl('', { nonNullable: true }),
             FirstName: new FormControl('', {
@@ -527,7 +527,7 @@ class UserRequestComponent {
     }
     async ngOnInit() {
         await this.getTenantConfig();
-        this.route.queryParams.subscribe(params => {
+        this.route.queryParams.subscribe((params) => {
             this.code = params['code'];
             this.type = params['type'];
             if (this.code) {
@@ -601,7 +601,7 @@ class UserRequestComponent {
             const data = this.AuthMechanisms.find((item) => item.AuthMechanism.includes(this.type));
             const payload = {
                 AuthCode: this.code,
-                APIKey: this.apiKey,
+                Tenant: this.apiKey,
                 AuthMechanism: data.AuthMechanism,
             };
             this.utilService.sendBI(true);
@@ -1192,6 +1192,7 @@ class SignInComponent {
     onSubmitEnd = new EventEmitter();
     onGoogleAuthResponse = new EventEmitter();
     onSubmitGoogleAuth = new EventEmitter();
+    tenantConfigLoaded = new EventEmitter();
     googleClick = new EventEmitter();
     microsoftClick = new EventEmitter();
     appleClick = new EventEmitter();
@@ -1209,8 +1210,9 @@ class SignInComponent {
         AccessToken: '',
         Email: '',
         FirstName: '',
-        LastName: ''
+        LastName: '',
     };
+    configData = null;
     constructor(fb, server, utilService, envSvc, route) {
         this.fb = fb;
         this.server = server;
@@ -1227,12 +1229,12 @@ class SignInComponent {
                 Validators.minLength(5),
             ]),
         });
-        this.apiKey = this.envSvc.environment.APIKey;
+        this.apiKey = this.envSvc.environment.Tenant;
         this.secret = this.envSvc.environment.Secret;
     }
     async ngOnInit() {
         await this.getTenantConfig();
-        this.route.queryParams.subscribe(params => {
+        this.route.queryParams.subscribe((params) => {
             this.code = params['code'];
             this.type = params['type'];
             if (this.code) {
@@ -1241,14 +1243,23 @@ class SignInComponent {
         });
     }
     async getTenantConfig() {
-        const res = await this.server.get(`Tenant/GetTenantConfigByKey/${this.apiKey}`);
-        this.tenantDetails = res;
-        this.AuthMechanisms = this.tenantDetails?.AuthMechanisms;
-        if (!this.tenantDetails?.AuthMechanism && this.tenantDetails?.AuthMechanism !== MechanismType.InApp) {
-            this.showform = false;
+        try {
+            const res = await this.server.get(`Tenant/GetTenantConfigByKey/${this.apiKey}`);
+            this.tenantDetails = res;
+            this.configData = res;
+            this.AuthMechanisms = this.tenantDetails?.AuthMechanisms;
+            if (!this.tenantDetails?.AuthMechanism &&
+                this.tenantDetails?.AuthMechanism !== MechanismType.InApp) {
+                this.showform = false;
+            }
+            else {
+                this.showform = true;
+            }
+            this.tenantConfigLoaded.emit(this.configData);
         }
-        else {
-            this.showform = true;
+        catch (err) {
+            const msg = err;
+            this.tenantConfigLoaded.emit(null);
         }
     }
     checkForm() {
@@ -1256,11 +1267,11 @@ class SignInComponent {
     }
     async verifyUserDetails() {
         if (this.AuthMechanisms !== null && this.apiKey) {
-            const data = this.AuthMechanisms.find(item => item.AuthMechanism.includes(this.type));
+            const data = this.AuthMechanisms.find((item) => item.AuthMechanism.includes(this.type));
             const payload = {
                 AuthCode: this.code,
-                APIKey: this.apiKey,
-                AuthMechanism: data.AuthMechanism
+                Tenant: this.apiKey,
+                AuthMechanism: data.AuthMechanism,
             };
             this.utilService.sendBI(true);
             const res = await this.server.post(`Authentication/GetUserDetails`, payload);
@@ -1274,7 +1285,7 @@ class SignInComponent {
                     AccessToken: result?.AccessToken,
                     Email: result?.Email,
                     FirstName: result?.FirstName,
-                    LastName: result?.LastName
+                    LastName: result?.LastName,
                 };
                 this.submit(data.AuthMechanism);
             }
@@ -1288,9 +1299,9 @@ class SignInComponent {
             MailAddress: '',
             Password: '',
             LoginType: type,
-            APIKey: this.apiKey,
+            Tenant: this.apiKey,
             Secrete: this.secret,
-            Token: ''
+            Token: '',
         };
         switch (type) {
             case MechanismType.InApp:
@@ -1301,7 +1312,7 @@ class SignInComponent {
                     data = {
                         ...data,
                         MailAddress: this.loginForm.controls['Email'].value,
-                        Password: this.loginForm.controls['Password'].value
+                        Password: this.loginForm.controls['Password'].value,
                     };
                 }
                 break;
@@ -1309,14 +1320,14 @@ class SignInComponent {
                 data = {
                     ...data,
                     MailAddress: this.OauthData?.Email,
-                    Token: this.OauthData?.AccessToken
+                    Token: this.OauthData?.AccessToken,
                 };
                 break;
             case MechanismType.MicrosoftAD:
                 data = {
                     ...data,
                     MailAddress: this.OauthData?.Email,
-                    Token: this.OauthData?.AccessToken
+                    Token: this.OauthData?.AccessToken,
                 };
                 break;
             default:
@@ -1352,18 +1363,18 @@ class SignInComponent {
         return {
             'background-color': this.bgColor,
             'box-shadow': this.boxShadow,
-            'border': this.border,
+            border: this.border,
             'border-radius': this.borderRadius,
-            'color': this.textColor,
-            'width': this.width,
+            color: this.textColor,
+            width: this.width,
             'max-width': this.maxWidth,
-            'margin': this.margin,
-            'height': this.height,
-            'padding': this.pd
+            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 }, { token: i1$2.ActivatedRoute }], 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", onGoogleAuthResponse: "onGoogleAuthResponse", onSubmitGoogleAuth: "onSubmitGoogleAuth", googleClick: "googleClick", microsoftClick: "microsoftClick", appleClick: "appleClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n    <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n    <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit('InApp')\" class=\"flexWrapper\"> \n      <div class=\"formWrapper\" *ngIf=\"showform\"> \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        [passLength]=\"5\"\n        [customErrorMessages]=\"{\n          password:'Password is required'\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      <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    </div>\n    <div> \n      <p *ngIf=\"requestAccessLink\">\n        <a [routerLink]=\"requestAccessLink\"  class=\"{{requestAccessClass}}\">Click here to request user access</a>\n      </p>\n      <div> \n        <div *ngIf=\"AuthMechanisms !== null\"> \n          <verben-o-auth \n            [authMechanisms]=\"AuthMechanisms\"\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}.formWrapper{display:flex;flex-direction:column;gap:20px}.pwdWrapper{display:flex;justify-content:flex-end;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3.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", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: OAuthComponent, selector: "verben-o-auth", inputs: ["authMechanisms"], outputs: ["emitMechanismFn"] }, { 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"] }] });
+    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", onGoogleAuthResponse: "onGoogleAuthResponse", onSubmitGoogleAuth: "onSubmitGoogleAuth", tenantConfigLoaded: "tenantConfigLoaded", googleClick: "googleClick", microsoftClick: "microsoftClick", appleClick: "appleClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n    <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n    <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit('InApp')\" class=\"flexWrapper\"> \n      <div class=\"formWrapper\" *ngIf=\"showform\"> \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        [passLength]=\"5\"\n        [customErrorMessages]=\"{\n          password:'Password is required'\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      <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    </div>\n    <div> \n      <p *ngIf=\"requestAccessLink\">\n        <a [routerLink]=\"requestAccessLink\"  class=\"{{requestAccessClass}}\">Click here to request user access</a>\n      </p>\n      <div> \n        <div *ngIf=\"AuthMechanisms !== null\"> \n          <verben-o-auth \n            [authMechanisms]=\"AuthMechanisms\"\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}.formWrapper{display:flex;flex-direction:column;gap:20px}.pwdWrapper{display:flex;justify-content:flex-end;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i3.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", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: OAuthComponent, selector: "verben-o-auth", inputs: ["authMechanisms"], outputs: ["emitMechanismFn"] }, { 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,
@@ -1440,6 +1451,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Output
             }], onSubmitGoogleAuth: [{
                 type: Output
+            }], tenantConfigLoaded: [{
+                type: Output
             }], googleClick: [{
                 type: Output
             }], microsoftClick: [{
@@ -1565,12 +1578,12 @@ class TwoFactorAuthOtpComponent {
     length = 6;
     otpClass = '';
     resendOtpData = {
-        MailAddress: "verbena@gmail.com",
-        Password: "Default",
-        LoginType: "InApp",
-        APIKey: "PDLTC6",
-        Secrete: "$White360$",
-        RedirectUri: "/auth/otp"
+        MailAddress: 'verbena@gmail.com',
+        Password: 'Default',
+        LoginType: 'InApp',
+        Tenant: 'PDLTC6',
+        Secrete: '$White360$',
+        RedirectUri: '/auth/otp',
     };
     User = {
         Code: '024',
@@ -1585,15 +1598,15 @@ class TwoFactorAuthOtpComponent {
         Role: [],
         Tags: [
             {
-                Name: "tester",
-                IsOptional: true
-            }
+                Name: 'tester',
+                IsOptional: true,
+            },
         ],
         Password: 'Default',
         Status: 'Active',
         CreatedAt: new Date(),
         UpdatedAt: new Date(),
-        DataState: ObjectState.New
+        DataState: ObjectState.New,
     };
     OtpData = {
         User: this.User,
@@ -1601,7 +1614,7 @@ class TwoFactorAuthOtpComponent {
         ValidateUrl: '',
         Secret: '',
         OTP: '',
-        Info: ''
+        Info: '',
     };
     btnClass = '';
     btnBgColor = '#FFE681';
@@ -1623,7 +1636,7 @@ class TwoFactorAuthOtpComponent {
     }
     ngOnInit() {
         this.otpForm = this.fb.group({
-            otpValue: ['', [Validators.required, Validators.minLength(6)]]
+            otpValue: ['', [Validators.required, Validators.minLength(6)]],
         });
     }
     onOtpChange(value) {
@@ -1634,7 +1647,7 @@ class TwoFactorAuthOtpComponent {
     async submitData() {
         const data = {
             User: {
-                ...this.User
+                ...this.User,
             },
             Token: this.OtpData.Token,
             ValidateUrl: this.OtpData.ValidateUrl,
@@ -1661,9 +1674,9 @@ class TwoFactorAuthOtpComponent {
             MailAddress: this.resendOtpData?.MailAddress,
             Password: this.resendOtpData?.Password,
             LoginType: this.resendOtpData?.LoginType,
-            APIKey: this.resendOtpData?.APIKey,
+            Tenant: this.resendOtpData?.Tenant,
             Secrete: this.resendOtpData?.Secrete,
-            RedirectUri: this.resendOtpData?.RedirectUri
+            RedirectUri: this.resendOtpData?.RedirectUri,
         };
         this.utilService.sendBI(true);
         const res = await this.server.post(`Authentication/ResendOTP`, data);
@@ -1680,14 +1693,14 @@ class TwoFactorAuthOtpComponent {
         return {
             'background-color': this.bgColor,
             'box-shadow': this.boxShadow,
-            'border': this.border,
+            border: this.border,
             'border-radius': this.borderRadius,
-            'color': this.textColor,
-            'width': this.width,
+            color: this.textColor,
+            width: this.width,
             'max-width': this.maxWidth,
-            'margin': this.margin,
-            'height': this.height,
-            'padding': this.pd
+            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 });
@@ -4024,9 +4037,9 @@ class AuthorizationService {
         this.auth = auth;
     }
     get authorizationConfig() {
-        return this.auth;
+        return this.auth ? this.auth : [];
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthorizationService, deps: [{ token: AUTHORIZATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthorizationService, deps: [{ token: AUTHORIZATION_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthorizationService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AuthorizationService, decorators: [{
@@ -4035,6 +4048,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                     providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
                     type: Inject,
                     args: [AUTHORIZATION_CONFIG]
                 }] }] });
@@ -4145,6 +4160,23 @@ var ChildrenType;
     ChildrenType["Action"] = "Action";
 })(ChildrenType || (ChildrenType = {}));
 
+var SearchOperator;
+(function (SearchOperator) {
+    SearchOperator["And"] = "And";
+    SearchOperator["Or"] = "Or";
+})(SearchOperator || (SearchOperator = {}));
+
+var SearchPropertySign;
+(function (SearchPropertySign) {
+    SearchPropertySign["EQ"] = "EQ";
+    SearchPropertySign["NEQ"] = "NEQ";
+    SearchPropertySign["GT"] = "GT";
+    SearchPropertySign["GTE"] = "GTE";
+    SearchPropertySign["LT"] = "LT";
+    SearchPropertySign["LTE"] = "LTE";
+    SearchPropertySign["LIKE"] = "LIKE";
+})(SearchPropertySign || (SearchPropertySign = {}));
+
 class RoleControlService {
     constructor() { }
     get roleColumns() {
@@ -4202,6 +4234,7 @@ class RoleControlComponent {
     server;
     cdr;
     fb;
+    envSvc;
     visibleColumnDef = [];
     styles = baseStyle;
     data = [];
@@ -4213,6 +4246,10 @@ class RoleControlComponent {
     cardContextHistoryData = [];
     cardDataView;
     dataView;
+    isGlobal = true;
+    serviceName = null;
+    application = null;
+    sourceData = [];
     visibleColumns = [];
     filterArray = [
         {
@@ -4240,13 +4277,16 @@ class RoleControlComponent {
     ];
     // form: FormGroup;
     childPermissionRef = ChildrenType.Permission;
-    constructor(authService, roleControlSvc, utilService, server, cdr, fb) {
+    roleContextsStore = [];
+    roleActionsStore = [];
+    constructor(authService, roleControlSvc, utilService, server, cdr, fb, envSvc) {
         this.authService = authService;
         this.roleControlSvc = roleControlSvc;
         this.utilService = utilService;
         this.server = server;
         this.cdr = cdr;
         this.fb = fb;
+        this.envSvc = envSvc;
         this.visibleColumnDef = roleControlSvc.roleColumns;
         this.visibleColumns = roleControlSvc.roleColumns.map((col) => ({
             checked: true,
@@ -4260,14 +4300,70 @@ class RoleControlComponent {
     async ngOnInit() {
         const mockData = this.getMockRoles();
         const roles = await this.getAllRoles();
+        if (this.isGlobal) {
+            const contextsRes = await this.getSavedContexts();
+            if (contextsRes) {
+                this.roleContextsStore = contextsRes;
+                this.roleActionsStore = contextsRes.flatMap((x) => x.RoleActions);
+                const authConfig = contextsRes.map((x) => {
+                    return {
+                        Name: x.Name,
+                        Actions: x.RoleActions.map((y) => {
+                            return y.Name;
+                        }),
+                    };
+                });
+                this.sourceData = authConfig;
+            }
+        }
+        else {
+            this.sourceData = this.authService.authorizationConfig;
+        }
         if (roles) {
             this.setUpMappedData(roles);
             this.setUpCardData();
         }
     }
+    async getSavedContexts() {
+        if (!this.isGlobal || !this.serviceName) {
+            return undefined;
+        }
+        var payload = [
+            {
+                PropertyName: 'ServiceName',
+                EntityValue: this.serviceName,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            },
+            {
+                PropertyName: 'APIKey',
+                EntityValue: this.envSvc.environment.APIKey,
+                Operator: SearchOperator.And,
+                Sign: SearchPropertySign.EQ,
+            },
+        ];
+        this.utilService.sendBI(true);
+        const res = await this.server.post(`Application/SearchApplicationRoleContexts/0/0`, payload);
+        this.utilService.sendBI(false);
+        if (res instanceof ErrorResponse) {
+            return undefined;
+        }
+        else {
+            var result = res.Result;
+            return result;
+        }
+    }
     async getAllRoles() {
+        //   var payload: SearchPropertyValue[] = [
+        //     {
+        //       PropertyName: 'APIKey',
+        //       EntityValue: this.envSvc.environment.APIKey,
+        //       Operator: SearchOperator.And,
+        //       Sign: SearchPropertySign.EQ
+        //     }
+        // ]
         this.utilService.sendBI(true);
-        const res = await this.server.get(`Role/GetRoles/0/0`);
+        const res = await this.server.get(`Role/GetRolesWithParam/${this.envSvc.environment.APIKey}/0/0`);
         this.utilService.sendBI(false);
         if (res instanceof ErrorResponse) {
             return undefined;
@@ -4277,6 +4373,14 @@ class RoleControlComponent {
             return result;
         }
     }
+    getApplicationContextCode(name) {
+        const item = this.roleContextsStore.find((x) => x.Name == name);
+        return item ? item.Code : '';
+    }
+    getApplicationActionCode(name) {
+        const item = this.roleActionsStore.find((x) => x.Name == name);
+        return item ? item.Code : '';
+    }
     findParent(cardData, target) {
         for (const item of cardData) {
             if (item.children.includes(target)) {
@@ -4307,7 +4411,7 @@ class RoleControlComponent {
                 ...x,
                 id: x.Id,
                 ChildrenType: ChildrenType.Permission,
-                RoleContexts: this.authService.authorizationConfig.map((config) => {
+                RoleContexts: this.sourceData.map((config) => {
                     const existingId = x.RoleContexts.findIndex((y) => y.Name == config.Name);
                     var context = {
                         ChildrenType: ChildrenType.Action,
@@ -4339,6 +4443,11 @@ class RoleControlComponent {
                                     ? x.RoleContexts[existingId].RoleActions[existingAction]
                                         .ServiceName
                                     : '',
+                                APIKey: existingAction > -1
+                                    ? x.RoleContexts[existingId].RoleActions[existingAction]
+                                        .APIKey
+                                    : this.envSvc.environment.APIKey,
+                                ApplicationRoleAction: this.getApplicationActionCode(action),
                             };
                             return act;
                         }),
@@ -4352,6 +4461,10 @@ class RoleControlComponent {
                         TenantId: x.TenantId,
                         Code: existingId > -1 ? x.RoleContexts[existingId].Code : '',
                         ServiceName: existingId > -1 ? x.RoleContexts[existingId].ServiceName : '',
+                        APIKey: existingId > -1
+                            ? x.RoleContexts[existingId].APIKey
+                            : this.envSvc.environment.APIKey,
+                        ApplicationRoleContext: this.getApplicationContextCode(config.Name),
                     };
                     return context;
                 }),
@@ -4481,7 +4594,7 @@ class RoleControlComponent {
                     var mappedRoleSave = {
                         ...roleResult,
                         ChildrenType: ChildrenType.Permission,
-                        RoleContexts: this.authService.authorizationConfig.map((config) => {
+                        RoleContexts: this.sourceData.map((config) => {
                             const existingId = roleResult.RoleContexts.findIndex((y) => y.Name == config.Name);
                             var context = {
                                 ChildrenType: ChildrenType.Action,
@@ -4511,6 +4624,10 @@ class RoleControlComponent {
                                         ServiceName: existingAction > -1
                                             ? roleResult.RoleContexts[existingId].RoleActions[existingAction].ServiceName
                                             : '',
+                                        APIKey: existingAction > -1
+                                            ? roleResult.RoleContexts[existingId].RoleActions[existingAction].APIKey
+                                            : this.envSvc.environment.APIKey,
+                                        ApplicationRoleAction: this.getApplicationActionCode(action),
                                     };
                                     return act;
                                 }),
@@ -4528,6 +4645,10 @@ class RoleControlComponent {
                                 ServiceName: existingId > -1
                                     ? roleResult.RoleContexts[existingId].ServiceName
                                     : '',
+                                APIKey: existingId > -1
+                                    ? roleResult.RoleContexts[existingId].APIKey
+                                    : this.envSvc.environment.APIKey,
+                                ApplicationRoleContext: this.getApplicationContextCode(config.Name),
                             };
                             return context;
                         }),
@@ -4625,7 +4746,7 @@ class RoleControlComponent {
                 var mappedRoleSave = {
                     ...roleResult,
                     ChildrenType: ChildrenType.Permission,
-                    RoleContexts: this.authService.authorizationConfig.map((config) => {
+                    RoleContexts: this.sourceData.map((config) => {
                         const existingId = roleResult.RoleContexts.findIndex((y) => y.Name == config.Name);
                         var context = {
                             ChildrenType: ChildrenType.Action,
@@ -4655,6 +4776,10 @@ class RoleControlComponent {
                                     ServiceName: existingAction > -1
                                         ? roleResult.RoleContexts[existingId].RoleActions[existingAction].ServiceName
                                         : '',
+                                    APIKey: existingAction > -1
+                                        ? roleResult.RoleContexts[existingId].RoleActions[existingAction].APIKey
+                                        : this.envSvc.environment.APIKey,
+                                    ApplicationRoleAction: this.getApplicationActionCode(action),
                                 };
                                 return act;
                             }),
@@ -4670,6 +4795,10 @@ class RoleControlComponent {
                             ServiceName: existingId > -1
                                 ? roleResult.RoleContexts[existingId].ServiceName
                                 : '',
+                            APIKey: existingId > -1
+                                ? roleResult.RoleContexts[existingId].APIKey
+                                : this.envSvc.environment.APIKey,
+                            ApplicationRoleContext: this.getApplicationContextCode(config.Name),
                         };
                         return context;
                     }),
@@ -4751,7 +4880,7 @@ class RoleControlComponent {
         switch (event.key) {
             case 'create':
                 var newMappedRole = {
-                    RoleContexts: this.authService.authorizationConfig.map((config) => {
+                    RoleContexts: this.sourceData.map((config) => {
                         var context = {
                             ChildrenType: ChildrenType.Action,
                             Selected: false,
@@ -4769,6 +4898,8 @@ class RoleControlComponent {
                                     TenantId: '',
                                     Code: '',
                                     ServiceName: '',
+                                    APIKey: this.envSvc.environment.APIKey,
+                                    ApplicationRoleAction: this.getApplicationActionCode(action),
                                 };
                                 return act;
                             }),
@@ -4782,6 +4913,8 @@ class RoleControlComponent {
                             TenantId: '',
                             Code: '',
                             ServiceName: '',
+                            APIKey: this.envSvc.environment.APIKey,
+                            ApplicationRoleContext: this.getApplicationContextCode(config.Name),
                         };
                         return context;
                     }),
@@ -4795,6 +4928,8 @@ class RoleControlComponent {
                     TenantId: '',
                     Code: '',
                     ServiceName: '',
+                    Application: this.application ? this.application : undefined,
+                    APIKey: this.envSvc.environment.APIKey,
                 };
                 const cardData = {
                     selected: false,
@@ -4876,6 +5011,7 @@ class RoleControlComponent {
             TenantId: `Tenant${id + i}`,
             Code: '',
             ServiceName: '',
+            APIKey: '',
         }));
     }
     mockNames = [
@@ -4915,6 +5051,8 @@ class RoleControlComponent {
                 TenantId: `Tenant${'context' + i}`,
                 Code: '',
                 ServiceName: '',
+                APIKey: '',
+                ApplicationRoleContext: '',
             });
             usedList.push(randomIndex);
         }
@@ -4941,6 +5079,8 @@ class RoleControlComponent {
                 TenantId: `Tenant${'action' + i}`,
                 Code: '',
                 ServiceName: '',
+                APIKey: '',
+                ApplicationRoleAction: '',
             });
             usedList.push(randomIndex);
         }
@@ -4957,18 +5097,24 @@ class RoleControlComponent {
             // }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, deps: [{ token: AuthorizationService }, { token: RoleControlService }, { token: UtilService }, { token: HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"select\">\n          <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n            <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n          </ng-template>\n          <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value>\n            <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col px-6 pt-6 pb-9 rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2\">\n                <verbena-button text=\"Delete\" bgColor=\"#999999\" textColor=\"white\"\n                  border=\"1px solid #999999\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button (click)=\"vdv.toggleView()\" text=\"Switch To Table\"\n                    styleType=\"ylw-outline\"></verbena-button>\n                  <verbena-button (click)=\"this.saveRole()\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\"\n                    border=\"1px solid #FFE681\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2\">\n            <!-- <span class=\"paginator-text\"\n              >{{ cardData.length }} records loaded</span> -->\n            <button 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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter [border]=\"'1px solid rgba(212, 160, 7, 1)'\" borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n  <div class=\"message-log-button-container flex justify-between\">\n    <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n      [text]=\"'Delete'\">\n    </verbena-button>\n  </div>\n</div>", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i3.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i3.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: i3.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i3.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i3.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i3.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i3.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i3.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: i3.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: i3.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: i3.DataExportComponent, selector: "lib-data-export", inputs: ["data"], outputs: ["exportDataEvent"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i3.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: "pipe", type: i2.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, deps: [{ token: AuthorizationService }, { token: RoleControlService }, { token: UtilService }, { token: HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i1$1.FormBuilder }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application" }, viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"select\">\n          <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n            <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n          </ng-template>\n          <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value>\n            <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col px-6 pt-6 pb-9 rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2\">\n                <verbena-button text=\"Delete\" bgColor=\"#999999\" textColor=\"white\"\n                  border=\"1px solid #999999\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button (click)=\"vdv.toggleView()\" text=\"Switch To Table\"\n                    styleType=\"ylw-outline\"></verbena-button>\n                  <verbena-button (click)=\"this.saveRole()\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\"\n                    border=\"1px solid #FFE681\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2\">\n            <!-- <span class=\"paginator-text\"\n              >{{ cardData.length }} records loaded</span> -->\n            <button 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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter [border]=\"'1px solid rgba(212, 160, 7, 1)'\" borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n  <div class=\"message-log-button-container flex justify-between\">\n    <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n      [text]=\"'Delete'\">\n    </verbena-button>\n  </div>\n</div>", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i3.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i3.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i3.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: i3.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i3.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i3.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i3.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i3.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i3.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: i3.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: i3.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: i3.DataExportComponent, selector: "lib-data-export", inputs: ["data"], outputs: ["exportDataEvent"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.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", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i3.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: "pipe", type: i2.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-role-control', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"select\">\n          <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n            <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n          </ng-template>\n          <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value>\n            <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col px-6 pt-6 pb-9 rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2\">\n                <verbena-button text=\"Delete\" bgColor=\"#999999\" textColor=\"white\"\n                  border=\"1px solid #999999\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button (click)=\"vdv.toggleView()\" text=\"Switch To Table\"\n                    styleType=\"ylw-outline\"></verbena-button>\n                  <verbena-button (click)=\"this.saveRole()\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\"\n                    border=\"1px solid #FFE681\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2\">\n            <!-- <span class=\"paginator-text\"\n              >{{ cardData.length }} records loaded</span> -->\n            <button 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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter [border]=\"'1px solid rgba(212, 160, 7, 1)'\" borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n  <div class=\"message-log-button-container flex justify-between\">\n    <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n      [text]=\"'Delete'\">\n    </verbena-button>\n  </div>\n</div>", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}::ng-deep .toolbar{margin-bottom:15px}::ng-deep .master-only-container{margin:0!important;padding:0!important}::ng-deep .master-detail-container{margin:0!important;padding:0!important}\n"] }]
-        }], ctorParameters: () => [{ type: AuthorizationService }, { type: RoleControlService }, { type: UtilService }, { type: HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }], propDecorators: { cardDataView: [{
+            args: [{ selector: 'lib-role-control', template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\">\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div class=\"context-content items-center flex gap-2\" *ngFor=\"let context of this.cardContextHistory; index as i\">\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef? context.data.Name: context.title}}</span>\n          <span *ngIf=\"i == this.cardContextHistory.length -1\"\n            class=\"context-subcaption\">{{this.getCardSubCaption(context)}}</span>\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length -1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg (click)=\"closeDetails()\" class=\"cursor-pointer\" icon=\"close-circle-full\" [width]=\"20\"\n        [height]=\"20\"></verben-svg>\n    </div>\n  </div>\n  <verben-data-view #vdv [viewState]=\"{\n      isSearch: this.cardContextHistory.length == 0,\n      isColumn: this.cardContextHistory.length == 0,\n      isFilter: this.cardContextHistory.length == 0,\n      isSort: this.cardContextHistory.length == 0,\n      isExport: this.cardContextHistory.length == 0,\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate: this.cardContextHistory.length == 0,\n      isToggle:this.cardContextHistory.length == 0,\n    }\" [buttonClass]=\"'my-custom-button-class'\" [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\" [isTableView]=\"this.cardContextHistory.length == 0\"\n    [selectedColumnCount]=\"0\" [selectedSortCount]=\"0\" [selectedFilterTableCount]=\"0\" (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\">\n    <div class=\"mt-2\" table-content>\n      <lib-data-table [data]=\"data\" [columns]=\"visibleColumnDef\" [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\">\n        <ng-container libColumn=\"select\">\n          <ng-template #cell let-isSelected=\"isSelected\" let-toggleRowSelection=\"toggleRowSelection\">\n            <input type=\"checkbox\" [checked]=\"isSelected\" (change)=\"toggleRowSelection()\" />\n          </ng-template>\n          <ng-template #header let-allRowsSelected=\"allRowsSelected\" let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\">\n            <input type=\"checkbox\" [checked]=\"allRowsSelected()\" [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\" />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template #cell let-value>\n            <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view borderRadius=\"12px\" #vdcv dataId=\"Id\" border=\"5px\" [cardDataList]=\"cardData\"\n        rbgColor=\"#f5f6f9\" mg=\"0px\">\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data #vlcd [parent]=\"vdcv\" dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\" [cardDataList]=\"cardData\">\n            <ng-template #card let-item>\n              <div (click)=\"roleCardClicked(item)\"\n                *ngIf=\"item.data.ChildrenType && item.data.ChildrenType == childPermissionRef\"\n                class=\"flex cursor-pointer h-[max-content]\">\n                <verben-svg [width]=\"15\" [height]=\"15\" (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"item.children && item.children.length?'visible':'invisible'\"\n                  class=\"items-center flex  pr-1 cursor-pointer\" [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.data.Name\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div *ngIf=\"!item.data.ChildrenType || item.data.ChildrenType !== childPermissionRef\"\n                class=\"flex h-[max-content]\">\n                <verben-svg [ngClass]=\"item.children && item.children.length?'visible':'invisible'\" [width]=\"15\"\n                  [height]=\"15\" (click)=\"toggleChildren(item)\" class=\"items-center flex  pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded?'minus':'plus'\" />\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-item>\n              <div class=\"flex h-[max-content]\">\n                <div class=\"flex  w-full bg-secondary rounded-xl\">\n                  <div class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\" [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input *ngIf=\"item.data?.Selected != undefined\" [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\" class=\"mt-1 cursor-pointer\" [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"$event.preventDefault(); this.saveRoleDynamic(item)\" />\n                    <div class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\">\n                      <div class=\"flex flex-col flex-1 min-h-[50px] justify-between h-[100%]\">\n                        <h3 class=\"my-0 font-bold text-[#404040] leading-[19.5px]\">{{\n                          item.title\n                          }}</h3>\n                        <span class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\">\n                          {{getCardSubCaption(item)}}\n                        </span>\n                      </div>\n\n                      <div *ngIf=\"item.children && item.children.length > 0\" class=\"flex items-end h-[100%]\">\n                        <p (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\">\n                          view details</p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n          </verben-left-card-data>\n        </verben-left-card-data-view>\n        <verben-right-card-data-view *ngIf=\"this.cardContextHistory.length == 0\">\n          <ng-template #parent>\n            <div *ngIf=\"this.currentData\"\n              class=\"flex flex-col px-6 pt-6 pb-9 rounded-xl h-full w-full justify-between relative space-y-4\">\n              <verbena-input name=\"Name\" label=\"Name\" (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\" />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2\">\n                <verbena-button text=\"Delete\" bgColor=\"#999999\" textColor=\"white\"\n                  border=\"1px solid #999999\"></verbena-button>\n                <div class=\"flex gap-3\">\n                  <verbena-button (click)=\"vdv.toggleView()\" text=\"Switch To Table\"\n                    styleType=\"ylw-outline\"></verbena-button>\n                  <verbena-button (click)=\"this.saveRole()\" text=\"Save\" bgColor=\"#FFE681\" textColor=\"#404040\"\n                    border=\"1px solid #FFE681\"></verbena-button>\n                </div>\n              </div>\n            </div>\n\n          </ng-template>\n        </verben-right-card-data-view>\n        <!-- <verben-right-card-data-view>\n          yeshhhhhh\n        </verben-right-card-data-view> -->\n\n        <verben-card-data-view-footer class=\"float-right\">\n          <div class=\"flex gap-2\">\n            <!-- <span class=\"paginator-text\"\n              >{{ cardData.length }} records loaded</span> -->\n            <button 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 (columnsUpdated)=\"onColumnsUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter [border]=\"'1px solid rgba(212, 160, 7, 1)'\" borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"420px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table (selectedOptions)=\"onSortUpdated($event)\" [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\" boxShadow=\"2px 2px 2px 0px silver\" bgColor=\"white\" width=\"400px\" textColor=\"black\" pd=\"1rem\"\n        primaryColor=\"#FFE681\" secondaryColor=\"#3479E9\" tertiaryColor=\"#404040\" [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"></verben-sort-table>\n    </div>\n    <div export-content>\n      <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export>\n    </div>\n  </verben-data-view>\n  <div class=\"message-log-button-container flex justify-between\">\n    <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n      [text]=\"'Delete'\">\n    </verbena-button>\n  </div>\n</div>", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}\n"] }]
+        }], ctorParameters: () => [{ type: AuthorizationService }, { type: RoleControlService }, { type: UtilService }, { type: HttpWebRequestService }, { type: i0.ChangeDetectorRef }, { type: i1$1.FormBuilder }, { type: EnvironmentService }], propDecorators: { cardDataView: [{
                 type: ViewChild,
                 args: ['vdcv']
             }], dataView: [{
                 type: ViewChild,
                 args: ['vdv']
+            }], isGlobal: [{
+                type: Input
+            }], serviceName: [{
+                type: Input
+            }], application: [{
+                type: Input
             }] } });
 
 class SharedModule {