verben-authentication-ui 1.0.36 → 1.0.37

package/esm2022/src/lib/components/button/button.component.mjs

@@ -3,10 +3,11 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "verben-ng-ui";
 export class ButtonComponent {
+    type;
     text = '';
     color = 'black';
     border = '1px solid #FFE681';
-    borderRadius = "40px";
+    borderRadius = '40px';
     bgColor = '#FFE681';
     width = '100%';
     pd = '10px 20px';
@@ -17,12 +18,14 @@ export class ButtonComponent {
         this.buttonClick.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, selector: "lib-button", inputs: { text: "text", color: "color", border: "border", borderRadius: "borderRadius", bgColor: "bgColor", width: "width", pd: "pd", buttonClass: "buttonClass", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ButtonComponent, selector: "lib-button", inputs: { type: "type", text: "text", color: "color", border: "border", borderRadius: "borderRadius", bgColor: "bgColor", width: "width", pd: "pd", buttonClass: "buttonClass", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<verbena-button\n  [text]=\"text\"\n  [bgColor]=\"bgColor\"\n  [textColor]=\"color\"\n  [border]=\"border\"\n  [borderRadius]=\"borderRadius\"\n  [pd]=\"pd\"\n  [type]=\"type\"\n  [width]=\"width\"\n  [disable]=\"disabled\"\n  [ngStyle]=\"{ cursor: disabled ? 'not-allowed' : 'pointer' }\"\n  buttonClass=\"font-medium text-[22px] leading-[33px] {{ buttonClass }}\"\n  (click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-button', template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"] }]
-        }], propDecorators: { text: [{
+            args: [{ selector: 'lib-button', template: "<verbena-button\n  [text]=\"text\"\n  [bgColor]=\"bgColor\"\n  [textColor]=\"color\"\n  [border]=\"border\"\n  [borderRadius]=\"borderRadius\"\n  [pd]=\"pd\"\n  [type]=\"type\"\n  [width]=\"width\"\n  [disable]=\"disabled\"\n  [ngStyle]=\"{ cursor: disabled ? 'not-allowed' : 'pointer' }\"\n  buttonClass=\"font-medium text-[22px] leading-[33px] {{ buttonClass }}\"\n  (click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"] }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], text: [{
                 type: Input
             }], color: [{
                 type: Input
@@ -43,4 +46,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], buttonClick: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZlcmJlbi1hdXRoZW50aWNhdGlvbi11aS9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tYXV0aGVudGljYXRpb24tdWkvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQU8vRSxNQUFNLE9BQU8sZUFBZTtJQUNqQixJQUFJLEdBQVcsRUFBRSxDQUFDO0lBQ2xCLEtBQUssR0FBVyxPQUFPLENBQUM7SUFDeEIsTUFBTSxHQUFXLG1CQUFtQixDQUFDO0lBQ3JDLFlBQVksR0FBVSxNQUFNLENBQUE7SUFDNUIsT0FBTyxHQUFXLFNBQVMsQ0FBQztJQUM1QixLQUFLLEdBQVcsTUFBTSxDQUFDO0lBQ3ZCLEVBQUUsR0FBVyxXQUFXLENBQUM7SUFDekIsV0FBVyxHQUFXLEVBQUUsQ0FBQztJQUN6QixRQUFRLEdBQVksS0FBSyxDQUFDO0lBRXpCLFdBQVcsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0lBRWpELFdBQVc7UUFDVCxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQzFCLENBQUM7d0dBZlUsZUFBZTs0RkFBZixlQUFlLHFSQ1A1Qix3WEFhQTs7NEZETmEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxZQUFZOzhCQUtiLElBQUk7c0JBQVosS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLO2dCQUNHLFlBQVk7c0JBQXBCLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxFQUFFO3NCQUFWLEtBQUs7Z0JBQ0csV0FBVztzQkFBbkIsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVJLFdBQVc7c0JBQXBCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1idXR0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuY3NzJ1xufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnR7XG4gIEBJbnB1dCgpIHRleHQ6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBjb2xvcjogc3RyaW5nID0gJ2JsYWNrJztcbiAgQElucHV0KCkgYm9yZGVyOiBzdHJpbmcgPSAnMXB4IHNvbGlkICNGRkU2ODEnO1xuICBASW5wdXQoKSBib3JkZXJSYWRpdXM6c3RyaW5nID0gXCI0MHB4XCJcbiAgQElucHV0KCkgYmdDb2xvcjogc3RyaW5nID0gJyNGRkU2ODEnO1xuICBASW5wdXQoKSB3aWR0aDogc3RyaW5nID0gJzEwMCUnO1xuICBASW5wdXQoKSBwZDogc3RyaW5nID0gJzEwcHggMjBweCc7XG4gIEBJbnB1dCgpIGJ1dHRvbkNsYXNzOiBzdHJpbmcgPSAnJztcbiAgQElucHV0KCkgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBAT3V0cHV0KCkgYnV0dG9uQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgaGFuZGxlQ2xpY2soKXsgXG4gICAgdGhpcy5idXR0b25DbGljay5lbWl0KCk7XG4gIH1cbn1cbiIsIjx2ZXJiZW5hLWJ1dHRvblxuW3RleHRdPVwidGV4dFwiXG5bYmdDb2xvcl09XCJiZ0NvbG9yXCJcblt0ZXh0Q29sb3JdPVwiY29sb3JcIlxuW2JvcmRlcl09XCJib3JkZXJcIlxuW2JvcmRlclJhZGl1c109XCJib3JkZXJSYWRpdXNcIlxuW3BkXT1cInBkXCJcblt3aWR0aF09XCJ3aWR0aFwiXG5bZGlzYWJsZV09XCJkaXNhYmxlZFwiXG5bbmdTdHlsZV09XCJ7J2N1cnNvcic6IGRpc2FibGVkID8gJ25vdC1hbGxvd2VkJyA6ICdwb2ludGVyJyB9XCJcbmJ1dHRvbkNsYXNzPVwiZm9udC1tZWRpdW0gdGV4dC1bMjJweF0gbGVhZGluZy1bMzNweF0ge3tidXR0b25DbGFzc319XCJcbihjbGljayk9XCJoYW5kbGVDbGljaygpXCJcbj48L3ZlcmJlbmEtYnV0dG9uPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ZlcmJlbi1hdXRoZW50aWNhdGlvbi11aS9zcmMvbGliL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy92ZXJiZW4tYXV0aGVudGljYXRpb24tdWkvc3JjL2xpYi9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQU8vRSxNQUFNLE9BQU8sZUFBZTtJQUNqQixJQUFJLENBQXFCO0lBQ3pCLElBQUksR0FBVyxFQUFFLENBQUM7SUFDbEIsS0FBSyxHQUFXLE9BQU8sQ0FBQztJQUN4QixNQUFNLEdBQVcsbUJBQW1CLENBQUM7SUFDckMsWUFBWSxHQUFXLE1BQU0sQ0FBQztJQUM5QixPQUFPLEdBQVcsU0FBUyxDQUFDO0lBQzVCLEtBQUssR0FBVyxNQUFNLENBQUM7SUFDdkIsRUFBRSxHQUFXLFdBQVcsQ0FBQztJQUN6QixXQUFXLEdBQVcsRUFBRSxDQUFDO0lBQ3pCLFFBQVEsR0FBWSxLQUFLLENBQUM7SUFFekIsV0FBVyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFFakQsV0FBVztRQUNULElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxFQUFFLENBQUM7SUFDMUIsQ0FBQzt3R0FoQlUsZUFBZTs0RkFBZixlQUFlLG1TQ1A1QixrYUFjQTs7NEZEUGEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxZQUFZOzhCQUtiLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csS0FBSztzQkFBYixLQUFLO2dCQUNHLE1BQU07c0JBQWQsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csRUFBRTtzQkFBVixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFFSSxXQUFXO3NCQUFwQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPbkluaXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsaWItYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2J1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9idXR0b24uY29tcG9uZW50LmNzcycsXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG4gIEBJbnB1dCgpIHR5cGU6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgdGV4dDogc3RyaW5nID0gJyc7XG4gIEBJbnB1dCgpIGNvbG9yOiBzdHJpbmcgPSAnYmxhY2snO1xuICBASW5wdXQoKSBib3JkZXI6IHN0cmluZyA9ICcxcHggc29saWQgI0ZGRTY4MSc7XG4gIEBJbnB1dCgpIGJvcmRlclJhZGl1czogc3RyaW5nID0gJzQwcHgnO1xuICBASW5wdXQoKSBiZ0NvbG9yOiBzdHJpbmcgPSAnI0ZGRTY4MSc7XG4gIEBJbnB1dCgpIHdpZHRoOiBzdHJpbmcgPSAnMTAwJSc7XG4gIEBJbnB1dCgpIHBkOiBzdHJpbmcgPSAnMTBweCAyMHB4JztcbiAgQElucHV0KCkgYnV0dG9uQ2xhc3M6IHN0cmluZyA9ICcnO1xuICBASW5wdXQoKSBkaXNhYmxlZDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSBidXR0b25DbGljayA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBoYW5kbGVDbGljaygpIHtcbiAgICB0aGlzLmJ1dHRvbkNsaWNrLmVtaXQoKTtcbiAgfVxufVxuIiwiPHZlcmJlbmEtYnV0dG9uXG4gIFt0ZXh0XT1cInRleHRcIlxuICBbYmdDb2xvcl09XCJiZ0NvbG9yXCJcbiAgW3RleHRDb2xvcl09XCJjb2xvclwiXG4gIFtib3JkZXJdPVwiYm9yZGVyXCJcbiAgW2JvcmRlclJhZGl1c109XCJib3JkZXJSYWRpdXNcIlxuICBbcGRdPVwicGRcIlxuICBbdHlwZV09XCJ0eXBlXCJcbiAgW3dpZHRoXT1cIndpZHRoXCJcbiAgW2Rpc2FibGVdPVwiZGlzYWJsZWRcIlxuICBbbmdTdHlsZV09XCJ7IGN1cnNvcjogZGlzYWJsZWQgPyAnbm90LWFsbG93ZWQnIDogJ3BvaW50ZXInIH1cIlxuICBidXR0b25DbGFzcz1cImZvbnQtbWVkaXVtIHRleHQtWzIycHhdIGxlYWRpbmctWzMzcHhdIHt7IGJ1dHRvbkNsYXNzIH19XCJcbiAgKGNsaWNrKT1cImhhbmRsZUNsaWNrKClcIlxuPjwvdmVyYmVuYS1idXR0b24+XG4iXX0=

package/esm2022/src/lib/components/forgot-password/forgot-password.component.mjs

@@ -66,7 +66,7 @@ export class ForgotPasswordComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1.FormBuilder }, { token: i2.HttpWebRequestService }, { token: i2.UtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ForgotPasswordComponent, selector: "verben-forgot-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", tenant: "tenant" }, outputs: { onSubmit: "onSubmit", onSubmitEnd: "onSubmitEnd" }, ngImport: i0, template: "<div\n  *ngIf=\"!isSubmitted\"\n  [formGroup]=\"this.forgotPasswordForm\"\n  class=\"reset-password-container flex flex-col\"\n>\n  <div class=\"reset-password-header flex flex-col\">\n    <div class=\"reset-password-title\">{{ title }}</div>\n    <div class=\"reset-password-subtitle\">{{ subTitle }}</div>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Email</div>\n    <verbena-input\n      bgColor=\"white\"\n      borderRadius=\"12px\"\n      formControlName=\"Email\"\n      type=\"email\"\n    ></verbena-input>\n  </div>\n  <verbena-button\n    fontWeight=\"700\"\n    (click)=\"submit()\"\n    [text]=\"buttonCaption\"\n    width=\"100%\"\n    [textColor]=\"buttonTextColor\"\n    [bgColor]=\"buttonBackgroundColor\"\n    borderRadius=\"25px\"\n    [disable]=\"!this.checkForm()\"\n  ></verbena-button>\n</div>\n<div *ngIf=\"isSubmitted\" class=\"reset-password-container flex flex-col\">\n  <div class=\"reset-password-title resend-title\">\n    Follow the link sent to your e-mail to proceed\n  </div>\n  <div class=\"resend-text flex gap-1\">\n    <span class=\"resend-caption\">Didn't get a link?</span>\n    <span class=\"resend-caption resend-link\" (click)=\"submit()\">Resend</span>\n  </div>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}.resend-caption{font-size:13px}.resend-link{color:#00f;cursor:pointer}.resend-link:hover{text-decoration:underline}.resend-title{color:#666}.resend-text>span{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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", "fontSize", "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", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ForgotPasswordComponent, selector: "verben-forgot-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", tenant: "tenant" }, outputs: { onSubmit: "onSubmit", onSubmitEnd: "onSubmitEnd" }, ngImport: i0, template: "<div\n  *ngIf=\"!isSubmitted\"\n  [formGroup]=\"this.forgotPasswordForm\"\n  class=\"reset-password-container flex flex-col\"\n>\n  <div class=\"reset-password-header flex flex-col\">\n    <div class=\"reset-password-title\">{{ title }}</div>\n    <div class=\"reset-password-subtitle\">{{ subTitle }}</div>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Email</div>\n    <verbena-input\n      bgColor=\"white\"\n      borderRadius=\"12px\"\n      formControlName=\"Email\"\n      type=\"email\"\n    ></verbena-input>\n  </div>\n  <verbena-button\n    fontWeight=\"700\"\n    (click)=\"submit()\"\n    [text]=\"buttonCaption\"\n    width=\"100%\"\n    [textColor]=\"buttonTextColor\"\n    [bgColor]=\"buttonBackgroundColor\"\n    borderRadius=\"25px\"\n    [disable]=\"!this.checkForm()\"\n  ></verbena-button>\n</div>\n<div *ngIf=\"isSubmitted\" class=\"reset-password-container flex flex-col\">\n  <div class=\"reset-password-title resend-title\">\n    Follow the link sent to your e-mail to proceed\n  </div>\n  <div class=\"resend-text flex gap-1\">\n    <span class=\"resend-caption\">Didn't get a link?</span>\n    <span class=\"resend-caption resend-link\" (click)=\"submit()\">Resend</span>\n  </div>\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}.resend-caption{font-size:13px}.resend-link{color:#00f;cursor:pointer}.resend-link:hover{text-decoration:underline}.resend-title{color:#666}.resend-text>span{font-size:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
             type: Component,

package/esm2022/src/lib/components/mail/mail.component.mjs

@@ -34,7 +34,7 @@ export class MailComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MailComponent, selector: "verben-mail-message", inputs: { customClass: "customClass", headlingClass: "headlingClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n    <h3 class=\"{{headlingClass}}\">Your e-mail has been verified!</h3>\n    <lib-button \n    text=\"Login\" \n    buttonClass=\"\"\n    (click)=\"goToLogin()\"\n    ></lib-button>   \n</section>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MailComponent, selector: "verben-mail-message", inputs: { customClass: "customClass", headlingClass: "headlingClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n    <h3 class=\"{{headlingClass}}\">Your e-mail has been verified!</h3>\n    <lib-button \n    text=\"Login\" \n    buttonClass=\"\"\n    (click)=\"goToLogin()\"\n    ></lib-button>   \n</section>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.ButtonComponent, selector: "lib-button", inputs: ["type", "text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailComponent, decorators: [{
             type: Component,

package/esm2022/src/lib/components/mail-validation/mail-validation.component.mjs

@@ -57,7 +57,7 @@ export class MailValidationComponent {
         this.login.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MailValidationComponent, selector: "lib-mail-validation", inputs: { customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", width: "width", text: "text", textAlign: "textAlign", color: "color", textSize: "textSize", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd" }, outputs: { resendOtp: "resendOtp", proceedToNextStep: "proceedToNextStep", login: "login" }, ngImport: i0, template: "<section  [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n  <div *ngIf=\"currentStep === 'linkSent'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Follow the link sent to your e-mail to verify your e-mail address\n    </p>\n    <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n      Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'verified'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Your e-mail has been verified! You will be notified when your access has\n      been authorized\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'accessGranted'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n    Your e-mail has been verified!\n    </p>\n  <div class=\"mt-4\">\n    <verbena-button\n    [text]=\"text\"\n    [bgColor]=\"btnBgColor\"\n    [textColor]=\"color\"\n    [border]=\"btnBorder\"\n    [borderRadius]=\"btnBorderRadius\"\n    [pd]=\"btnPd\"\n    (click)=\"handleLogin()\"\n    [width]=\"btnWidth\"\n    textSize=\"'22px'\"\n    buttonClass=\"font-medium text-[22px] leading-[33px]\"\n  ></verbena-button>\n  </div>\n  </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.w-full{width:100%}\n"], dependencies: [{ kind: "component", type: i1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MailValidationComponent, selector: "lib-mail-validation", inputs: { customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", width: "width", text: "text", textAlign: "textAlign", color: "color", textSize: "textSize", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd" }, outputs: { resendOtp: "resendOtp", proceedToNextStep: "proceedToNextStep", login: "login" }, ngImport: i0, template: "<section  [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n  <div *ngIf=\"currentStep === 'linkSent'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Follow the link sent to your e-mail to verify your e-mail address\n    </p>\n    <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n      Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'verified'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Your e-mail has been verified! You will be notified when your access has\n      been authorized\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'accessGranted'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n    Your e-mail has been verified!\n    </p>\n  <div class=\"mt-4\">\n    <verbena-button\n    [text]=\"text\"\n    [bgColor]=\"btnBgColor\"\n    [textColor]=\"color\"\n    [border]=\"btnBorder\"\n    [borderRadius]=\"btnBorderRadius\"\n    [pd]=\"btnPd\"\n    (click)=\"handleLogin()\"\n    [width]=\"btnWidth\"\n    textSize=\"'22px'\"\n    buttonClass=\"font-medium text-[22px] leading-[33px]\"\n  ></verbena-button>\n  </div>\n  </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.w-full{width:100%}\n"], dependencies: [{ kind: "component", type: i1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MailValidationComponent, decorators: [{
             type: Component,

package/esm2022/src/lib/components/o-auth/o-auth.component.mjs

@@ -94,7 +94,7 @@ export class OAuthComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthComponent, deps: [{ token: i1.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OAuthComponent, selector: "verben-o-auth", inputs: { authMechanisms: "authMechanisms" }, outputs: { emitMechanismFn: "emitMechanismFn" }, ngImport: i0, template: "<section class=\"oauthWrapper\"> \n    <div class=\"OrFlexWrapper\">\n        <hr/>\n        <span>OR</span>\n        <hr/>\n    </div>\n     <div class=\"btnWrapper\">\n      <div *ngFor=\"let btn of authMechanisms, let i = index\"> \n        <verbena-button\n        [svg]=\"checkForValue(btn.AuthMechanism)\"\n        [svgHeight]=\"24\"\n        [svgWidth]=\"24\"\n        [text]=\"'Continue with ' + btn.AuthMechanism\"\n        bgColor=\"white\"\n        textColor=\"black\"\n        border=\"1px solid #333\"\n        borderRadius=\"40px\"\n        pd=\"10px 20px\"\n        width=\"100%\"\n        svgPosition=\"left\"\n        buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n        (click)=\"handleOauthClick(btn)\"\n        ></verbena-button>\n      </div> \n     </div> \n</section>\n", styles: ["hr{height:1px;margin:0;border:1px solid #66666640;flex:1}.OR{margin:0 2px;color:#666}.oauthWrapper{display:flex;flex-direction:column;gap:12px}.btnWrapper{display:flex;flex-direction:column;gap:10px}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: OAuthComponent, selector: "verben-o-auth", inputs: { authMechanisms: "authMechanisms" }, outputs: { emitMechanismFn: "emitMechanismFn" }, ngImport: i0, template: "<section class=\"oauthWrapper\"> \n    <div class=\"OrFlexWrapper\">\n        <hr/>\n        <span>OR</span>\n        <hr/>\n    </div>\n     <div class=\"btnWrapper\">\n      <div *ngFor=\"let btn of authMechanisms, let i = index\"> \n        <verbena-button\n        [svg]=\"checkForValue(btn.AuthMechanism)\"\n        [svgHeight]=\"24\"\n        [svgWidth]=\"24\"\n        [text]=\"'Continue with ' + btn.AuthMechanism\"\n        bgColor=\"white\"\n        textColor=\"black\"\n        border=\"1px solid #333\"\n        borderRadius=\"40px\"\n        pd=\"10px 20px\"\n        width=\"100%\"\n        svgPosition=\"left\"\n        buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n        (click)=\"handleOauthClick(btn)\"\n        ></verbena-button>\n      </div> \n     </div> \n</section>\n", styles: ["hr{height:1px;margin:0;border:1px solid #66666640;flex:1}.OR{margin:0 2px;color:#666}.oauthWrapper{display:flex;flex-direction:column;gap:12px}.btnWrapper{display:flex;flex-direction:column;gap:10px}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: OAuthComponent, decorators: [{
             type: Component,

package/esm2022/src/lib/components/reset-password/reset-password.component.mjs

@@ -80,7 +80,7 @@ export class ResetPasswordComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordComponent, deps: [{ token: i1.FormBuilder }, { token: i2.HttpWebRequestService }, { token: i2.UtilService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResetPasswordComponent, selector: "verben-reset-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", showOldPassword: "showOldPassword", token: "token" }, outputs: { onSubmit: "onSubmit", onSubmitEnd: "onSubmitEnd" }, ngImport: i0, template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n  <div class=\"reset-password-header flex flex-col\">\n    <div class=\"reset-password-title\">{{title}}</div>\n    <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n  </div>\n  <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Old Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" [passwordToggle]=\"true\"\n      type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">New Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" [passwordToggle]=\"true\"\n      type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Confirm Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\" [passwordToggle]=\"true\"\n      type=\"password\"></verbena-input>\n  </div>\n  <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n    [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: 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", "fontSize", "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", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ResetPasswordComponent, selector: "verben-reset-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", showOldPassword: "showOldPassword", token: "token" }, outputs: { onSubmit: "onSubmit", onSubmitEnd: "onSubmitEnd" }, ngImport: i0, template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n  <div class=\"reset-password-header flex flex-col\">\n    <div class=\"reset-password-title\">{{title}}</div>\n    <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n  </div>\n  <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Old Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" [passwordToggle]=\"true\"\n      type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">New Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" [passwordToggle]=\"true\"\n      type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Confirm Password</div>\n    <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\" [passwordToggle]=\"true\"\n      type=\"password\"></verbena-input>\n  </div>\n  <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n    [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i3.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ResetPasswordComponent, decorators: [{
             type: Component,

package/esm2022/src/lib/components/role-control/role-control.component.mjs

@@ -1691,7 +1691,7 @@ export class RoleControlComponent {
         }, this.pageState);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, deps: [{ token: i1.AuthorizationService }, { token: i2.RoleControlService }, { token: i1.UtilService }, { token: i1.HttpWebRequestService }, { token: i0.ChangeDetectorRef }, { token: i3.FormBuilder }, { token: i1.EnvironmentService }, { token: i1.ImportService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime", permissionConfig: "permissionConfig" }, viewQueries: [{ propertyName: "columnTemplates", predicate: ColumnDirective, descendants: true, isSignal: true }, { propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\"\n  >\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div\n        class=\"context-content items-center flex gap-2\"\n        *ngFor=\"let context of this.cardContextHistory; index as i\"\n      >\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{\n            context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef\n              ? context.data.Name\n              : context.title\n          }}</span>\n          <span\n            *ngIf=\"i == this.cardContextHistory.length - 1\"\n            class=\"context-subcaption\"\n            >{{ this.getCardSubCaption(context) }}</span\n          >\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length - 1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg\n        (click)=\"closeDetails()\"\n        class=\"cursor-pointer\"\n        icon=\"close-circle-full\"\n        [width]=\"20\"\n        [height]=\"20\"\n      ></verben-svg>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n    class=\"nested-top-container flex gap-2 items-center\"\n  >\n    <div class=\"flex items-center gap-2 px-2\">\n      <input\n        [disabled]=\"this.isCheckboxDisabled(this.cardData[0])\"\n        type=\"checkbox\"\n        class=\"mt-1 cursor-pointer\"\n        [ngModel]=\"isAllSelected(this.cardData[0])\"\n        (click)=\"\n          $event.preventDefault(); this.saveAllRoleDynamic(this.cardData[0])\n        \"\n      />\n\n      <span class=\"font-semibold\">Select All</span>\n    </div>\n    <div\n      [ngClass]=\"{ focused: isInputFocused }\"\n      tabindex=\"0\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur()\"\n      class=\"search-section flex\"\n    >\n      <span class=\"search-icon flex\">\n        <verben-svg\n          icon=\"search\"\n          stroke=\"#64748b\"\n          [width]=\"15\"\n          [height]=\"15\"\n        ></verben-svg>\n      </span>\n      <div class=\"search-input-container\">\n        <input\n          [(ngModel)]=\"searchContext\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur()\"\n          placeholder=\"Search...\"\n          class=\"search-input\"\n        />\n      </div>\n    </div>\n  </div>\n  <verben-data-view\n    #vdv\n    [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:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Create']),\n      isToggle: this.cardContextHistory.length == 0,\n      isImport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Import'])\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [isTableView]=\"false\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        [dataKey]=\"'Id'\"\n        #dt\n        [data]=\"data\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\n            />\n          </ng-template>\n          <ng-template\n            #header\n            let-allRowsSelected=\"allRowsSelected\"\n            let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"allRowsSelected()\"\n              [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.Name }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template\n            #cell\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  *ngIf=\"\n                    !permissionConfig || permissionConfig.Actions['Create']\n                  \"\n                  (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <div\n                  (click)=\"viewDetailsFromTable(value)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View Details\n                </div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"restoreCache(value); toggleRowEdit()\"\n                icon=\"close-no-circle\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <!-- <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"editValue(value)\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"\n          this.cardContextHistory.length > 0 ? filteredData : cardData\n        \"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"\n              this.cardContextHistory.length > 0 ? filteredData : cardData\n            \"\n          >\n            <ng-template #card let-item>\n              <div\n                (click)=\"roleCardClicked(item)\"\n                *ngIf=\"\n                  item.data.ChildrenType &&\n                  item.data.ChildrenType == childPermissionRef\n                \"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.data.Name }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div\n                *ngIf=\"\n                  !item.data.ChildrenType ||\n                  item.data.ChildrenType !== childPermissionRef\n                \"\n                class=\"flex h-[max-content]\"\n              >\n                <verben-svg\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item)\"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-index=\"index\" let-item>\n              <div class=\"flex gap-2 items-start h-[max-content]\">\n                <input\n                  [ngClass]=\"index == 0 ? 'visible' : 'invisible'\"\n                  [disabled]=\"this.isCheckboxDisabled(item)\"\n                  type=\"checkbox\"\n                  class=\"mt-1 cursor-pointer\"\n                  [ngModel]=\"isAllSelected(item)\"\n                  (click)=\"\n                    $event.preventDefault(); this.saveAllRoleDynamic(item)\n                  \"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </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\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\"\n              />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <div></div>\n                <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveRole()\"\n                    text=\"Save\"\n                  ></verbena-button>\n                </div>\n              </div>\n            </div>\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\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"\n                !vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\n              \"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\n              </verbena-button> -->\n            </div>\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData.length }} records loaded</span\n              >\n              <button (click)=\"loadMore()\" class=\"load-more view-links\">\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (filtersApplied)=\"onFilterUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div import-content>\n      <lib-data-import\n        [previewColumns]=\"visibleColumnDef\"\n        title=\"role\"\n        (importEventData)=\"onComplete($event)\"\n        [columnTemplates]=\"columnTemplates()\"\n      >\n      </lib-data-import>\n    </div>\n    <div export-content>\n      <lib-data-xport\n        [useImportKey]=\"true\"\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data\"\n        [dataQueryFunction]=\"exportFiltersAndSorts\"\n      >\n      </lib-data-xport>\n      <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export> -->\n    </div>\n  </verben-data-view>\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #ffe681}.width-max{min-width:max-content}.search-section{flex:1 1 0;border:1px solid transparent;padding:5px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i5.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i5.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i5.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i5.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i5.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i5.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i5.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions", "resetSortData"] }, { kind: "component", type: i5.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "closeColumn"], outputs: ["columnsUpdated", "resetFilter"] }, { kind: "component", type: i5.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "component", type: i5.DataImportComponent, selector: "lib-data-import", inputs: ["previewColumns", "formGroupConfig", "fields", "title", "columnTemplates", "parser", "previewData", "onImportComplete"], outputs: ["exportTemplateEvent", "importEvent", "importEventData", "rowSave"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.13", type: RoleControlComponent, selector: "lib-role-control", inputs: { isGlobal: "isGlobal", serviceName: "serviceName", application: "application", pageSize: "pageSize", searchDebounceTime: "searchDebounceTime", permissionConfig: "permissionConfig" }, viewQueries: [{ propertyName: "columnTemplates", predicate: ColumnDirective, descendants: true, isSignal: true }, { propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }, { propertyName: "tableView", first: true, predicate: ["dt"], descendants: true }, { propertyName: "popUps", predicate: ["popup"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div #messageLog class=\"flex flex-col gap-4 message-log-container\">\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0\"\n    class=\"context-banner py-3 px-4 rounded-xl flex item-center justify-space-between gap-3\"\n  >\n    <div class=\"flex gap-2 flex-1 context-banner-content\">\n      <div\n        class=\"context-content items-center flex gap-2\"\n        *ngFor=\"let context of this.cardContextHistory; index as i\"\n      >\n        <div class=\"context-main-content-container flex gap-4\">\n          <span class=\"context-caption font-bold text-[#404040]\">{{\n            context.data.ChildrenType &&\n            context.data.ChildrenType == childPermissionRef\n              ? context.data.Name\n              : context.title\n          }}</span>\n          <span\n            *ngIf=\"i == this.cardContextHistory.length - 1\"\n            class=\"context-subcaption\"\n            >{{ this.getCardSubCaption(context) }}</span\n          >\n        </div>\n        <div *ngIf=\"i < this.cardContextHistory.length - 1\">/</div>\n      </div>\n    </div>\n    <div class=\"flex justify-end\">\n      <verben-svg\n        (click)=\"closeDetails()\"\n        class=\"cursor-pointer\"\n        icon=\"close-circle-full\"\n        [width]=\"20\"\n        [height]=\"20\"\n      ></verben-svg>\n    </div>\n  </div>\n\n  <div\n    *ngIf=\"this.cardContextHistory.length > 0 && this.cardData.length > 0\"\n    class=\"nested-top-container flex gap-2 items-center\"\n  >\n    <div class=\"flex items-center gap-2 px-2\">\n      <input\n        [disabled]=\"this.isCheckboxDisabled(this.cardData[0])\"\n        type=\"checkbox\"\n        class=\"mt-1 cursor-pointer\"\n        [ngModel]=\"isAllSelected(this.cardData[0])\"\n        (click)=\"\n          $event.preventDefault(); this.saveAllRoleDynamic(this.cardData[0])\n        \"\n      />\n\n      <span class=\"font-semibold\">Select All</span>\n    </div>\n    <div\n      [ngClass]=\"{ focused: isInputFocused }\"\n      tabindex=\"0\"\n      (focus)=\"onSearchFocus()\"\n      (blur)=\"onSearchBlur()\"\n      class=\"search-section flex\"\n    >\n      <span class=\"search-icon flex\">\n        <verben-svg\n          icon=\"search\"\n          stroke=\"#64748b\"\n          [width]=\"15\"\n          [height]=\"15\"\n        ></verben-svg>\n      </span>\n      <div class=\"search-input-container\">\n        <input\n          [(ngModel)]=\"searchContext\"\n          (focus)=\"onInputFocus()\"\n          (blur)=\"onInputBlur()\"\n          placeholder=\"Search...\"\n          class=\"search-input\"\n        />\n      </div>\n    </div>\n  </div>\n  <verben-data-view\n    #vdv\n    [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:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Export']),\n      isSelect: this.cardContextHistory.length == 0,\n      isCreate:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Create']),\n      isToggle: this.cardContextHistory.length == 0,\n      isImport:\n        this.cardContextHistory.length == 0 &&\n        (!permissionConfig || permissionConfig.Actions['Import'])\n    }\"\n    [buttonClass]=\"'my-custom-button-class'\"\n    [iconClass]=\"'my-icon-class'\"\n    [activeIconClass]=\"'my-active-icon-class'\"\n    [isTableView]=\"false\"\n    [selectedColumnCount]=\"0\"\n    [selectedSortCount]=\"0\"\n    [selectedFilterTableCount]=\"0\"\n    (viewChange)=\"onViewChange($event)\"\n    (stateChange)=\"onStateChange($event)\"\n    (onSearchChange)=\"handleSearch($event)\"\n  >\n    <div class=\"mt-2\" table-content>\n      <lib-data-table\n        [dataKey]=\"'Id'\"\n        #dt\n        [data]=\"data\"\n        [columns]=\"visibleColumnDef\"\n        [styleConfig]=\"styles\"\n        (selectionChange)=\"onSelectionChange($event)\"\n      >\n        <ng-container libColumn=\"select\">\n          <ng-template\n            #cell\n            let-isSelected=\"isSelected\"\n            let-toggleRowSelection=\"toggleRowSelection\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"isSelected\"\n              (change)=\"toggleRowSelection()\"\n            />\n          </ng-template>\n          <ng-template\n            #header\n            let-allRowsSelected=\"allRowsSelected\"\n            let-someRowsSelected=\"someRowsSelected\"\n            let-toggleAllRows=\"toggleAllRows\"\n          >\n            <input\n              type=\"checkbox\"\n              [checked]=\"allRowsSelected()\"\n              [indeterminate]=\"someRowsSelected()\"\n              (change)=\"toggleAllRows()\"\n            />\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"createdAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"updatedAt\">\n          <ng-template #cell let-value>\n            {{ value | date }}\n          </ng-template>\n        </ng-container>\n        <ng-container libColumn=\"name\">\n          <ng-template #cell let-row=\"row\" let-value>\n            {{ value.Name }}\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-row=\"row\"\n            let-updateValue=\"updateValue\"\n            let-updateData=\"updateData\"\n            let-value\n          >\n            <div class=\"width-max\">\n              <verbena-input [(ngModel)]=\"value.Name\"></verbena-input>\n            </div>\n          </ng-template>\n        </ng-container>\n\n        <ng-container libColumn=\"actions\">\n          <ng-template\n            #cell\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <verben-pop-Up\n              #popup\n              [customStyles]=\"{ 'z-index': '99' }\"\n              [enableMouseLeave]=\"false\"\n            >\n              <verben-svg\n                class=\"cursor-pointer actions-icon\"\n                dropdown-trigger\n                icon=\"list\"\n              ></verben-svg>\n              <div class=\"pop-up-content flex flex-col\" dropdown-content>\n                <div\n                  *ngIf=\"\n                    !permissionConfig || permissionConfig.Actions['Create']\n                  \"\n                  (click)=\"toggleRowEdit(); cacheItem(value); closePopUp()\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  Edit\n                </div>\n                <div\n                  (click)=\"viewDetailsFromTable(value)\"\n                  class=\"pop-up-value cursor-pointer\"\n                >\n                  View Details\n                </div>\n                <div class=\"pop-up-value cursor-pointer\">View Users</div>\n              </div>\n            </verben-pop-Up>\n            <!-- <div class=\"flex gap-4 items-center\">\n              <verben-svg (click)=\"editValue(value)\" icon=\"edit\" [width]=\"15\" [height]=\"15\"\n                class=\"cursor-pointer\"></verben-svg>\n              <span (click)=\"viewDetailsFromTable(value)\" class=\"view-links view-details\">view details</span>\n              <span class=\"view-links view-users\">view users</span>\n            </div> -->\n          </ng-template>\n          <ng-template\n            #cellEdit\n            let-isEditing=\"isEditing\"\n            let-toggleRowEdit=\"toggleRowEdit\"\n            let-row=\"row\"\n            let-value\n          >\n            <div class=\"flex gap-2 items-center\">\n              <verben-svg\n                icon=\"tick\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"tableSaveRole(value, toggleRowEdit)\"\n              ></verben-svg>\n              <verben-svg\n                (click)=\"restoreCache(value); toggleRowEdit()\"\n                icon=\"close-no-circle\"\n                [width]=\"15\"\n                [height]=\"15\"\n              ></verben-svg>\n              <!-- <verben-svg icon=\"delete\" [width]=\"15\" [height]=\"15\"></verben-svg> -->\n              <verben-svg\n                icon=\"cardViewAlt\"\n                [width]=\"15\"\n                [height]=\"15\"\n                (click)=\"editValue(value)\"\n              ></verben-svg>\n            </div>\n          </ng-template>\n        </ng-container>\n      </lib-data-table>\n    </div>\n    <div card-content>\n      <verben-card-data-view\n        borderRadius=\"12px\"\n        #vdcv\n        dataId=\"Id\"\n        border=\"5px\"\n        [cardDataList]=\"\n          this.cardContextHistory.length > 0 ? filteredData : cardData\n        \"\n        rbgColor=\"#f5f6f9\"\n        mg=\"0px\"\n      >\n        <verben-left-card-data-view class=\"space-y-7\">\n          <verben-left-card-data\n            #vlcd\n            [parent]=\"vdcv\"\n            dataId=\"MailAddress\"\n            class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n            [cardDataList]=\"\n              this.cardContextHistory.length > 0 ? filteredData : cardData\n            \"\n          >\n            <ng-template #card let-item>\n              <div\n                (click)=\"roleCardClicked(item)\"\n                *ngIf=\"\n                  item.data.ChildrenType &&\n                  item.data.ChildrenType == childPermissionRef\n                \"\n                class=\"flex cursor-pointer h-[max-content]\"\n              >\n                <verben-svg\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item); $event.stopPropagation()\"\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 h-[100%]\">\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.data.Name }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item); $event.stopPropagation()\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div\n                *ngIf=\"\n                  !item.data.ChildrenType ||\n                  item.data.ChildrenType !== childPermissionRef\n                \"\n                class=\"flex h-[max-content]\"\n              >\n                <verben-svg\n                  [ngClass]=\"\n                    item.children && item.children.length\n                      ? 'visible'\n                      : 'invisible'\n                  \"\n                  [width]=\"15\"\n                  [height]=\"15\"\n                  (click)=\"toggleChildren(item)\"\n                  class=\"items-center flex pr-1 cursor-pointer\"\n                  [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetails(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </p>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </ng-template>\n            <ng-template #cardChild let-index=\"index\" let-item>\n              <div class=\"flex gap-2 items-start h-[max-content]\">\n                <input\n                  [ngClass]=\"index == 0 ? 'visible' : 'invisible'\"\n                  [disabled]=\"this.isCheckboxDisabled(item)\"\n                  type=\"checkbox\"\n                  class=\"mt-1 cursor-pointer\"\n                  [ngModel]=\"isAllSelected(item)\"\n                  (click)=\"\n                    $event.preventDefault(); this.saveAllRoleDynamic(item)\n                  \"\n                />\n                <div class=\"flex w-full bg-secondary rounded-xl\">\n                  <div\n                    class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n                    [ngClass]=\"\n                      item.selected ? 'bg-primary' : 'bg-secondary-200'\n                    \"\n                  ></div>\n                  <div class=\"py-3 px-4 flex-1 flex gap-2 h-[100%] items-start\">\n                    <input\n                      *ngIf=\"item.data?.Selected != undefined\"\n                      [disabled]=\"this.isCheckboxDisabled(item)\"\n                      type=\"checkbox\"\n                      class=\"mt-1 cursor-pointer\"\n                      [(ngModel)]=\"item.data.Selected\"\n                      (click)=\"\n                        $event.preventDefault(); this.saveRoleDynamic(item)\n                      \"\n                    />\n                    <div\n                      class=\"flex items-start flex-1 gap-1 justify-between h-[100%]\"\n                    >\n                      <div\n                        class=\"flex flex-col flex-1 card-min-height justify-between h-[100%]\"\n                      >\n                        <h3\n                          class=\"my-0 font-bold text-[#404040] leading-[19.5px]\"\n                        >\n                          {{ item.title }}\n                        </h3>\n                        <span\n                          class=\"!text-[10px] font-light text-[#404040] leading-[12.1px]\"\n                          *ngIf=\"item.children && item.children.length > 0\"\n                        >\n                          {{ getCardSubCaption(item) }}\n                        </span>\n                      </div>\n\n                      <div\n                        *ngIf=\"item.children && item.children.length > 0\"\n                        class=\"flex items-end h-[100%]\"\n                      >\n                        <p\n                          (click)=\"viewDetailsChild(item)\"\n                          class=\"my-0 underline text-[#3479E9] text-[12px] leading-[16.6px] cursor-pointer font-medium\"\n                        >\n                          view details\n                        </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\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <ng-template #parent>\n            <div\n              *ngIf=\"this.currentData\"\n              class=\"flex flex-col rounded-xl h-full w-full justify-between relative space-y-4\"\n            >\n              <verbena-input\n                name=\"Name\"\n                label=\"Name\"\n                (ngModelChange)=\"updateTable()\"\n                [(ngModel)]=\"this.currentData.data.Name\"\n              />\n\n              <!-- buttons -->\n              <div class=\"flex justify-between bottom-8 left-0 right-0\">\n                <div></div>\n                <!-- <verbena-button class=\"verben-delete-button\" text=\"Delete\"></verbena-button> -->\n                <div class=\"flex gap-3\">\n                  <verbena-button\n                    class=\"verben-switch-button\"\n                    (click)=\"goToTableView()\"\n                    text=\"Switch To Table\"\n                  ></verbena-button>\n                  <verbena-button\n                    class=\"verben-primary-button\"\n                    (click)=\"this.saveRole()\"\n                    text=\"Save\"\n                  ></verbena-button>\n                </div>\n              </div>\n            </div>\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\n          *ngIf=\"this.cardContextHistory.length == 0\"\n        >\n          <div class=\"flex gap-2 justify-between\">\n            <div\n              *ngIf=\"\n                !vdcv.hasCurrentItem() && this.cardContextHistory.length == 0\n              \"\n              class=\"message-log-button-container flex justify-between\"\n            >\n              <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n                [text]=\"'Delete'\">\n              </verbena-button> -->\n            </div>\n            <div\n              class=\"flex {{\n                vdcv.hasCurrentItem() ? 'flex-1' : ''\n              }} justify-end items-center gap-5\"\n            >\n              <span class=\"paginator-text\"\n                >{{ cardData.length }} records loaded</span\n              >\n              <button (click)=\"loadMore()\" class=\"load-more view-links\">\n                Load more\n              </button>\n            </div>\n          </div>\n        </verben-card-data-view-footer>\n      </verben-card-data-view>\n    </div>\n    <div column-content>\n      <verben-visible-column\n        (columnsUpdated)=\"onColumnsUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        [columns]=\"visibleColumns\"\n        [displayedColumns]=\"5\"\n      ></verben-visible-column>\n    </div>\n    <div filter-content>\n      <verben-table-filter\n        (filtersApplied)=\"onFilterUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"420px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [filterOptions]=\"filterArray\"\n        [maxFilterLength]=\"3\"\n      ></verben-table-filter>\n    </div>\n    <div sort-content>\n      <verben-sort-table\n        (selectedOptions)=\"onSortUpdated($event)\"\n        [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n        borderRadius=\"10px\"\n        boxShadow=\"2px 2px 2px 0px silver\"\n        bgColor=\"white\"\n        width=\"400px\"\n        textColor=\"black\"\n        pd=\"1rem\"\n        primaryColor=\"#FFE681\"\n        secondaryColor=\"#3479E9\"\n        tertiaryColor=\"#404040\"\n        [enableDragAndDrop]=\"true\"\n        [sortOptions]=\"sortOptions\"\n      ></verben-sort-table>\n    </div>\n    <div import-content>\n      <lib-data-import\n        [previewColumns]=\"visibleColumnDef\"\n        title=\"role\"\n        (importEventData)=\"onComplete($event)\"\n        [columnTemplates]=\"columnTemplates()\"\n      >\n      </lib-data-import>\n    </div>\n    <div export-content>\n      <lib-data-xport\n        [useImportKey]=\"true\"\n        [columns]=\"visibleColumnDef\"\n        [data]=\"data\"\n        [dataQueryFunction]=\"exportFiltersAndSorts\"\n      >\n      </lib-data-xport>\n      <!-- <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n      </lib-data-export> -->\n    </div>\n  </verben-data-view>\n  <div *ngIf=\"vdv.isTableView\" class=\"flex gap-2 justify-between\">\n    <div class=\"message-log-button-container flex justify-between\">\n      <!-- <verbena-button [fontWeight]=\"'bold'\" [bgColor]=\"'#8E8D87'\" [borderRadius]=\"'4px'\" [textColor]=\"'#fff'\"\n        [text]=\"'Delete'\">\n      </verbena-button> -->\n    </div>\n    <div class=\"flex justify-end items-center gap-5\">\n      <span class=\"paginator-text\">{{ cardData.length }} records loaded</span>\n      <button (click)=\"loadMore()\" class=\"load-more view-links\">\n        Load more\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [".view-links{font-size:14px!important;color:#00f;font-weight:600;cursor:pointer}.view-links:hover{text-decoration:underline;text-underline-offset:3px}.context-banner{background-color:#d4a00773}.card-min-height{gap:10px}::ng-deep .childrenPadding{max-height:300px;overflow-y:auto}.pop-up-content{border-radius:4px;background-color:#fff;border:1px solid rgba(212,161,7,.5)}.pop-up-value{padding:10px 20px}.pop-up-content>div:nth-child(1){border-bottom:4px solid #ffe681}.width-max{min-width:max-content}.search-section{flex:1 1 0;border:1px solid transparent;padding:5px 10px;border-radius:24px;gap:3px;background-color:#d9d9d940;align-items:center}.search-section.focused{border-color:#3b82f6;outline:none}.search-icon>svg{color:#64748b;width:.8rem;height:.8rem}.search-input-container{flex:1 1 0}.search-input{width:100%;border:none;outline:none;background-color:transparent}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "dataKey", "formGroupConfig", "groupBy", "useVirtualScroll", "virtualScrollItemSize", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowRevert", "rowDelete", "selectionChange"] }, { kind: "directive", type: i5.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i5.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "type", "size"] }, { kind: "component", type: i5.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "extendCustomClass", "exportCustomClass", "selectCustomClass", "importCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "importTemplate", "columnTemplate", "extendTemplate", "filterTemplate", "sortTemplate", "children", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "milliseconds", "showColumnChild", "showSortChild", "showFilterChild", "showImportChild", "showExportChild", "showExtendChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { kind: "component", type: i5.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "showEditIcon", "useVirtualScroll", "virtualScrollItemSize", "onItemClick", "onCardChildClick"], outputs: ["editClicked", "loadMoreClick"] }, { kind: "component", type: i5.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "useVirtualScroll", "virtualScrollItemSize", "dataId"] }, { kind: "component", type: i5.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i5.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i5.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i5.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions", "resetSortData"] }, { kind: "component", type: i5.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "closeColumn"], outputs: ["columnsUpdated", "resetFilter"] }, { kind: "component", type: i5.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied", "resetSortData"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "component", type: i5.VerbenaButtonComponent, selector: "verbena-button", inputs: ["type", "text", "icon", "useIcon", "svgPosition", "iconPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "svgSize", "weight", "variant", "styleType", "svg", "svgWidth", "svgHeight", "iconColor", "svgColor", "buttonClass", "buttonTextClass", "isLoading", "spinnerSize", "spinnerColor"] }, { kind: "component", type: i5.VerbenPopUpComponent, selector: "verben-pop-Up", inputs: ["dropdownOpen", "dropdownWidth", "color", "customStyles", "popUpClass", "border", "borderRadius", "enableMouseLeave", "cdkPosition"], outputs: ["dropdownOpenChange", "close"] }, { kind: "component", type: i5.DataXportComponent, selector: "lib-data-xport", inputs: ["data", "columns", "useImportKey", "dataFetchUrl", "dataQueryParameters", "dataQueryFunction"], outputs: ["exportDataEvent", "exportDataRangeEvent"] }, { kind: "component", type: i5.DataImportComponent, selector: "lib-data-import", inputs: ["previewColumns", "formGroupConfig", "fields", "title", "columnTemplates", "parser", "previewData", "onImportComplete"], outputs: ["exportTemplateEvent", "importEvent", "importEventData", "rowSave"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RoleControlComponent, decorators: [{
             type: Component,

package/esm2022/src/lib/components/sign-in/sign-in.component.mjs

@@ -237,7 +237,7 @@ export class SignInComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, deps: [{ token: i1.FormBuilder }, { token: i2.HttpWebRequestService }, { token: i2.UtilService }, { token: i2.EnvironmentService }, { token: i3.ActivatedRoute }, { token: i3.Router }, { token: i2.EncryptionService }], 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", urlKeyOverride: "urlKeyOverride", authCallbackUrl: "authCallbackUrl" }, 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     \n    </div>\n  </form>\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  </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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.OAuthComponent, selector: "verben-o-auth", inputs: ["authMechanisms"], outputs: ["emitMechanismFn"] }, { kind: "component", type: i7.ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    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", urlKeyOverride: "urlKeyOverride", authCallbackUrl: "authCallbackUrl" }, 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     \n    </div>\n  </form>\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  </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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i5.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.OAuthComponent, selector: "verben-o-auth", inputs: ["authMechanisms"], outputs: ["emitMechanismFn"] }, { kind: "component", type: i7.ButtonComponent, selector: "lib-button", inputs: ["type", "text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,

package/esm2022/src/lib/components/sign-up/sign-up.component.mjs

@@ -154,7 +154,7 @@ export class SignUpComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, deps: [{ token: i1.FormBuilder }, { token: i2.HttpWebRequestService }, { token: i2.UtilService }, { token: i2.EncryptionService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignUpComponent, selector: "verben-sign-up", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", height: "height", textColor: "textColor", disabled: "disabled", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n    <h2 class=\"{{headlingClass}}\">\n      {{headlingText}}\n    </h2>\n    <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n      <verbena-input\n        [label]=\"'First name'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Firstname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n        [customErrorMessages]=\"{required:'First name is required'}\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Last name'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Lastname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n        [customErrorMessages]=\"{required:'Last name is required'}\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Email'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'email'\"\n        formControlName=\"Email\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Password'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'password'\"\n        formControlName=\"Password\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        [passwordToggle]=\"true\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <div>\n        <verbena-input\n          [label]=\"'Confirm Password'\"\n          [labelColor]=\"inputLabelColor\"\n          [placeHolder]=\"''\"\n          [required]=\"true\"\n          [type]=\"'password'\"\n          formControlName=\"Confirmpassword\"\n          [showBorder]=\"true\"\n          [bgColor]=\"inputBgColor\"\n          [border]=\"inputBorder\"\n          [borderRadius]=\"inputBorderRadius\"\n          [showErrorMessage]=\"false\"\n          [errorBorderColor]=\"'red'\"\n          class=\"outline-none focus-none\"\n        ></verbena-input>\n      <span *ngIf=\"signUpForm.hasError('passwordMismatch') && signUpForm.get('Confirmpassword')?.dirty\">\n        <small class=\"error-text\">Passwords do not match.</small>\n      </span>\n      </div>\n      <div>\n        <div class=\"checkBoxWrapper\">\n          <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\"  class=\"checBoxInput\" />\n          <label for=\"terms\"\n          class=\"break-all font-normal leading-6\"\n            >By creating an account, I agree to our <a  [attr.href]=\"termsLink\">Terms of use</a> and\n            <a [attr.href]=\"privacyLink\">Privacy Policy</a></label\n          >\n        </div>\n       <p *ngIf=\"signUpForm.controls['Terms'].invalid && signUpForm.controls['Terms'].touched\">\n        <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n       </p>\n      </div>\n      <lib-button\n      [buttonClass]=\"btnClass\"\n      [color]=\"btnColor\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [bgColor]=\"btnBgColor\"\n      [pd]=\"btnPd\"\n      [text]=\"btnText\"\n      type=\"submit\"\n      [disabled]=\"!this.checkForm()\"\n      [ngStyle]=\"{'margin-top':'10px'}\"\n      ></lib-button>\n      <verben-o-auth\n      (googleClick)=\"handleGoogleAuth()\"\n      (appleClick)=\"handleAppleAuth()\"\n      ></verben-o-auth>\n      <p>\n        Already have an account?\n        <a [routerLink]=\"routerLink\"  class=\"\">Log in</a>\n      </p>\n    </form>\n  </section>\n\n", styles: ["a{text-decoration:underline;cursor:pointer}input[type=checkbox]:checked{accent-color:#111}.flexWrapper{display:flex;flex-direction:column;gap:10px}.checkBoxWrapper{display:flex;align-items:start;gap:2px}.checBoxInput{margin-top:6px}.bigcheckboxWrapper{margin-top:.5rem;margin-bottom:1.5rem}.error-text{color:red}.disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.OAuthComponent, selector: "verben-o-auth", inputs: ["authMechanisms"], outputs: ["emitMechanismFn"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SignUpComponent, selector: "verben-sign-up", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", height: "height", textColor: "textColor", disabled: "disabled", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n    <h2 class=\"{{headlingClass}}\">\n      {{headlingText}}\n    </h2>\n    <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n      <verbena-input\n        [label]=\"'First name'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Firstname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n        [customErrorMessages]=\"{required:'First name is required'}\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Last name'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Lastname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n        [customErrorMessages]=\"{required:'Last name is required'}\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Email'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'email'\"\n        formControlName=\"Email\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Password'\"\n        [labelColor]=\"inputLabelColor\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'password'\"\n        formControlName=\"Password\"\n        [showBorder]=\"true\"\n        [bgColor]=\"inputBgColor\"\n        [border]=\"inputBorder\"\n        [borderRadius]=\"inputBorderRadius\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        [passwordToggle]=\"true\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <div>\n        <verbena-input\n          [label]=\"'Confirm Password'\"\n          [labelColor]=\"inputLabelColor\"\n          [placeHolder]=\"''\"\n          [required]=\"true\"\n          [type]=\"'password'\"\n          formControlName=\"Confirmpassword\"\n          [showBorder]=\"true\"\n          [bgColor]=\"inputBgColor\"\n          [border]=\"inputBorder\"\n          [borderRadius]=\"inputBorderRadius\"\n          [showErrorMessage]=\"false\"\n          [errorBorderColor]=\"'red'\"\n          class=\"outline-none focus-none\"\n        ></verbena-input>\n      <span *ngIf=\"signUpForm.hasError('passwordMismatch') && signUpForm.get('Confirmpassword')?.dirty\">\n        <small class=\"error-text\">Passwords do not match.</small>\n      </span>\n      </div>\n      <div>\n        <div class=\"checkBoxWrapper\">\n          <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\"  class=\"checBoxInput\" />\n          <label for=\"terms\"\n          class=\"break-all font-normal leading-6\"\n            >By creating an account, I agree to our <a  [attr.href]=\"termsLink\">Terms of use</a> and\n            <a [attr.href]=\"privacyLink\">Privacy Policy</a></label\n          >\n        </div>\n       <p *ngIf=\"signUpForm.controls['Terms'].invalid && signUpForm.controls['Terms'].touched\">\n        <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n       </p>\n      </div>\n      <lib-button\n      [buttonClass]=\"btnClass\"\n      [color]=\"btnColor\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [bgColor]=\"btnBgColor\"\n      [pd]=\"btnPd\"\n      [text]=\"btnText\"\n      type=\"submit\"\n      [disabled]=\"!this.checkForm()\"\n      [ngStyle]=\"{'margin-top':'10px'}\"\n      ></lib-button>\n      <verben-o-auth\n      (googleClick)=\"handleGoogleAuth()\"\n      (appleClick)=\"handleAppleAuth()\"\n      ></verben-o-auth>\n      <p>\n        Already have an account?\n        <a [routerLink]=\"routerLink\"  class=\"\">Log in</a>\n      </p>\n    </form>\n  </section>\n\n", styles: ["a{text-decoration:underline;cursor:pointer}input[type=checkbox]:checked{accent-color:#111}.flexWrapper{display:flex;flex-direction:column;gap:10px}.checkBoxWrapper{display:flex;align-items:start;gap:2px}.checBoxInput{margin-top:6px}.bigcheckboxWrapper{margin-top:.5rem;margin-bottom:1.5rem}.error-text{color:red}.disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i4.VerbenaInputComponent, selector: "verbena-input", inputs: ["disabled", "label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "readOnly", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "fontSize", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "passLength", "inputWrapperClass", "passwordToggle", "customErrorMessages", "icon", "textPass"], outputs: ["valueChange"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.ButtonComponent, selector: "lib-button", inputs: ["type", "text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.OAuthComponent, selector: "verben-o-auth", inputs: ["authMechanisms"], outputs: ["emitMechanismFn"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,