verben-authentication-ui 0.0.1

package/fesm2022/verben-authentication-ui.mjs

@@ -0,0 +1,613 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from 'verben-ng-ui';
+import { VerbenaInputModule, VerbenaButtonModule } from 'verben-ng-ui';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/router';
+import { RouterLink } from '@angular/router';
+
+class ResetPasswordComponent {
+    fb;
+    title = 'Reset Password';
+    subTitle = 'Create a New Password';
+    buttonCaption = 'Submit';
+    buttonTextColor;
+    buttonBackgroundColor;
+    showOldPassword = false;
+    onSubmit = new EventEmitter();
+    resetPasswordForm;
+    constructor(fb) {
+        this.fb = fb;
+        this.resetPasswordForm = this.fb.group({
+            OldPassword: new FormControl(null, this.oldPasswordValidator.bind(this)),
+            Password: new FormControl(null, Validators.required),
+            ConfirmPassword: new FormControl(null, [
+                Validators.required,
+                this.confirmPasswordValidator.bind(this),
+            ]),
+        });
+    }
+    checkForm() {
+        return this.resetPasswordForm.valid;
+    }
+    oldPasswordValidator(control) {
+        if (this.showOldPassword && control.value == null) {
+            return { customValidation: true };
+        }
+        return null;
+    }
+    confirmPasswordValidator(control) {
+        if (this.resetPasswordForm &&
+            this.resetPasswordForm.controls['Password'] &&
+            this.resetPasswordForm.controls['Password'].value !== control.value) {
+            return { customValidation: true };
+        }
+        return null;
+    }
+    submit() {
+        if (!this.checkForm()) {
+            return;
+        }
+        var data = {
+            OldPassword: this.showOldPassword
+                ? this.resetPasswordForm.controls['OldPassword'].value
+                : undefined,
+            Password: this.resetPasswordForm.controls['Password'].value,
+            ConfirmPassword: this.resetPasswordForm.controls['ConfirmPassword'].value,
+        };
+        this.onSubmit.emit(data);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ResetPasswordComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: ResetPasswordComponent, selector: "verben-reset-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", showOldPassword: "showOldPassword" }, outputs: { onSubmit: "onSubmit" }, 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 borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">New Password</div>\n    <verbena-input borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Confirm Password</div>\n    <verbena-input borderRadius=\"12px\" formControlName=\"ConfirmPassword\" 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: i1$1.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i1$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ResetPasswordComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'verben-reset-password', template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n  <div class=\"reset-password-header flex flex-col\">\n    <div class=\"reset-password-title\">{{title}}</div>\n    <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n  </div>\n  <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Old Password</div>\n    <verbena-input borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">New Password</div>\n    <verbena-input borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n  </div>\n  <div class=\"form-field flex flex-col\">\n    <div class=\"form-field-caption\">Confirm Password</div>\n    <verbena-input borderRadius=\"12px\" formControlName=\"ConfirmPassword\" 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"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { title: [{
+                type: Input
+            }], subTitle: [{
+                type: Input
+            }], buttonCaption: [{
+                type: Input
+            }], buttonTextColor: [{
+                type: Input
+            }], buttonBackgroundColor: [{
+                type: Input
+            }], showOldPassword: [{
+                type: Input
+            }], onSubmit: [{
+                type: Output
+            }] } });
+
+class ResetPasswordModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ResetPasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ResetPasswordModule, declarations: [ResetPasswordComponent], imports: [FormsModule,
+            ReactiveFormsModule,
+            VerbenaInputModule,
+            VerbenaButtonModule,
+            CommonModule], exports: [ResetPasswordComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ResetPasswordModule, imports: [FormsModule,
+            ReactiveFormsModule,
+            VerbenaInputModule,
+            VerbenaButtonModule,
+            CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ResetPasswordModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ResetPasswordComponent],
+                    imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        VerbenaInputModule,
+                        VerbenaButtonModule,
+                        CommonModule,
+                    ],
+                    exports: [ResetPasswordComponent],
+                }]
+        }] });
+
+class UserRequestComponent {
+    width = '500px';
+    fName = '';
+    lName = '';
+    email = '';
+    pwd = '';
+    cPwd = '';
+    customClass = '';
+    bgColor = '#fff';
+    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
+    border = '1px solid #66666680';
+    borderRadius = '24px';
+    textColor = '#333';
+    height = 'auto';
+    pd = '32px 48px';
+    // Button Inputs
+    text = 'Send Request';
+    color = 'black';
+    btnBorder = '1px solid #FFE681';
+    btnBorderRadius = "40px";
+    btnBgColor = '#FFE681';
+    btnWidth = '100%';
+    btnPd = '10px 20px';
+    formSubmit = new EventEmitter();
+    get styles() {
+        return {
+            'background-color': this.bgColor,
+            'box-shadow': this.boxShadow,
+            'border': this.border,
+            'border-radius': this.borderRadius,
+            'color': this.textColor,
+            'max-width': this.width,
+            'margin': '0 auto',
+            'height': this.height,
+            'padding': this.pd,
+        };
+    }
+    submitForm() {
+        this.formSubmit.emit({
+            FirstName: this.fName,
+            LastName: this.lName,
+            MailAddress: this.email,
+            Password: this.pwd,
+            ConfirmPassword: this.cPwd
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UserRequestComponent, selector: "lib-user-request", inputs: { width: "width", fName: "fName", lName: "lName", email: "email", pwd: "pwd", cPwd: "cPwd", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", text: "text", color: "color", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd" }, outputs: { formSubmit: "formSubmit" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n  <h2 class=\"font-medium text-[2rem] leading-[48px] text-[#333]\">\n    Request An Account\n  </h2>\n  <div class=\"flex flex-col gap-5 mt-3\">\n    <verbena-input\n      [label]=\"'First Name'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'text'\"\n      [(value)]=\"fName\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <verbena-input\n      [label]=\"'Last Name'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'text'\"\n      [(value)]=\"lName\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <verbena-input\n      [label]=\"'E-mail Address'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'email'\"\n      [(value)]=\"email\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-input\n      [label]=\"'Password'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'password'\"\n      [(value)]=\"pwd\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-input\n      [label]=\"'Confirm Password'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'password'\"\n      [(value)]=\"cPwd\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <p class=\"text-[#666666] text-sm\">\n      <input class=\"accent\" type=\"checkbox\" />\n      By creating an account, I agree to our<br />\n      <a href=\"#\" class=\"text-black text-sm font-[500] underline\"\n        >Terms of use</a\n      >\n      and\n      <a href=\"#\" class=\"text-black font-[500] text-sm underline\"\n        >Privacy Policy\n      </a>\n    </p>\n    <verbena-button\n      [text]=\"text\"\n      [bgColor]=\"btnBgColor\"\n      [textColor]=\"color\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [pd]=\"btnPd\"\n      (click)=\"submitForm()\"\n      [width]=\"btnWidth\"\n      buttonClass=\"font-medium text-[22px] leading-[33px]\"\n    ></verbena-button>\n    <div class=\"flex flex-col gap-4\">\n      <div class=\"flex items-center gap-2\">\n        <hr class=\"flex-1 border-r border-[#66666640]\" />\n        <span class=\"mx-2 text-[#666666]\">OR</span>\n        <hr class=\"flex-1 border-r border-[#66666640]\" />\n      </div>\n    </div>\n\n    <verbena-button\n      svg=\"google-logo\"\n      [svgHeight]=\"24\"\n      [svgWidth]=\"24\"\n      text=\"Continue with Google\"\n      bgColor=\"white\"\n      textColor=\"black\"\n      border=\"1px solid #333\"\n      borderRadius=\"40px\"\n      pd=\"10px 20px\"\n      width=\"100%\"\n      svgPosition=\"left\"\n      buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n    ></verbena-button>\n\n    <verbena-button\n      svg=\"apple-logo\"\n      [svgHeight]=\"24\"\n      [svgWidth]=\"24\"\n      text=\"Continue with Apple\"\n      bgColor=\"white\"\n      textColor=\"black\"\n      border=\"1px solid #333\"\n      borderRadius=\"40px\"\n      pd=\"10px 20px\"\n      width=\"100%\"\n      svgPosition=\"left\"\n      buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n    ></verbena-button>\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}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.object-cover{object-fit:cover}.w-full{width:100%}.accent{accent-color:#34A853}\n"], dependencies: [{ kind: "component", type: i1$1.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i1$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-user-request', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n  <h2 class=\"font-medium text-[2rem] leading-[48px] text-[#333]\">\n    Request An Account\n  </h2>\n  <div class=\"flex flex-col gap-5 mt-3\">\n    <verbena-input\n      [label]=\"'First Name'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'text'\"\n      [(value)]=\"fName\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <verbena-input\n      [label]=\"'Last Name'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'text'\"\n      [(value)]=\"lName\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n    <verbena-input\n      [label]=\"'E-mail Address'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'email'\"\n      [(value)]=\"email\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-input\n      [label]=\"'Password'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'password'\"\n      [(value)]=\"pwd\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <verbena-input\n      [label]=\"'Confirm Password'\"\n      [labelColor]=\"'#666'\"\n      [placeHolder]=\"''\"\n      [required]=\"true\"\n      [type]=\"'password'\"\n      [(value)]=\"cPwd\"\n      [showBorder]=\"true\"\n      [bgColor]=\"'white'\"\n      [border]=\"'1px solid #66666659'\"\n      [borderRadius]=\"'12px'\"\n      [showErrorMessage]=\"true\"\n      [errorMessageColor]=\"'red'\"\n      [errorBorderColor]=\"'red'\"\n      [errorPosition]=\"'bottom'\"\n      class=\"outline-none focus-none\"\n    ></verbena-input>\n\n    <p class=\"text-[#666666] text-sm\">\n      <input class=\"accent\" type=\"checkbox\" />\n      By creating an account, I agree to our<br />\n      <a href=\"#\" class=\"text-black text-sm font-[500] underline\"\n        >Terms of use</a\n      >\n      and\n      <a href=\"#\" class=\"text-black font-[500] text-sm underline\"\n        >Privacy Policy\n      </a>\n    </p>\n    <verbena-button\n      [text]=\"text\"\n      [bgColor]=\"btnBgColor\"\n      [textColor]=\"color\"\n      [border]=\"btnBorder\"\n      [borderRadius]=\"btnBorderRadius\"\n      [pd]=\"btnPd\"\n      (click)=\"submitForm()\"\n      [width]=\"btnWidth\"\n      buttonClass=\"font-medium text-[22px] leading-[33px]\"\n    ></verbena-button>\n    <div class=\"flex flex-col gap-4\">\n      <div class=\"flex items-center gap-2\">\n        <hr class=\"flex-1 border-r border-[#66666640]\" />\n        <span class=\"mx-2 text-[#666666]\">OR</span>\n        <hr class=\"flex-1 border-r border-[#66666640]\" />\n      </div>\n    </div>\n\n    <verbena-button\n      svg=\"google-logo\"\n      [svgHeight]=\"24\"\n      [svgWidth]=\"24\"\n      text=\"Continue with Google\"\n      bgColor=\"white\"\n      textColor=\"black\"\n      border=\"1px solid #333\"\n      borderRadius=\"40px\"\n      pd=\"10px 20px\"\n      width=\"100%\"\n      svgPosition=\"left\"\n      buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n    ></verbena-button>\n\n    <verbena-button\n      svg=\"apple-logo\"\n      [svgHeight]=\"24\"\n      [svgWidth]=\"24\"\n      text=\"Continue with Apple\"\n      bgColor=\"white\"\n      textColor=\"black\"\n      border=\"1px solid #333\"\n      borderRadius=\"40px\"\n      pd=\"10px 20px\"\n      width=\"100%\"\n      svgPosition=\"left\"\n      buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n    ></verbena-button>\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}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.object-cover{object-fit:cover}.w-full{width:100%}.accent{accent-color:#34A853}\n"] }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], fName: [{
+                type: Input
+            }], lName: [{
+                type: Input
+            }], email: [{
+                type: Input
+            }], pwd: [{
+                type: Input
+            }], cPwd: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], boxShadow: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], pd: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], btnBorder: [{
+                type: Input
+            }], btnBorderRadius: [{
+                type: Input
+            }], btnBgColor: [{
+                type: Input
+            }], btnWidth: [{
+                type: Input
+            }], btnPd: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }] } });
+
+class UserRequestModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: UserRequestModule, declarations: [UserRequestComponent], imports: [FormsModule,
+            ReactiveFormsModule,
+            VerbenaInputModule,
+            VerbenaButtonModule,
+            CommonModule], exports: [UserRequestComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestModule, imports: [FormsModule,
+            ReactiveFormsModule,
+            VerbenaInputModule,
+            VerbenaButtonModule,
+            CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [UserRequestComponent],
+                    imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        VerbenaInputModule,
+                        VerbenaButtonModule,
+                        CommonModule,
+                    ],
+                    exports: [UserRequestComponent],
+                }]
+        }] });
+
+class MailValidationComponent {
+    customClass = '';
+    bgColor = '#fff';
+    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
+    border = '1px solid #66666680';
+    borderRadius = '24px';
+    textColor = '#666666';
+    height = 'auto';
+    pd = '32px 48px';
+    width = '600px';
+    text = 'Login';
+    textAlign = 'center';
+    color = 'black';
+    textSize = '32px';
+    btnBorder = '1px solid #FFE681';
+    btnBorderRadius = "40px";
+    btnBgColor = '#FFE681';
+    btnWidth = '100%';
+    btnPd = '7px 10px';
+    resendOtp = new EventEmitter();
+    proceedToNextStep = new EventEmitter();
+    login = new EventEmitter();
+    currentStep = 'linkSent';
+    handleResendOtp() {
+        this.resendOtp.emit();
+    }
+    goToNextStep() {
+        switch (this.currentStep) {
+            case 'linkSent':
+                this.currentStep = 'verified';
+                this.proceedToNextStep.emit(this.currentStep);
+                break;
+            case 'verified':
+                this.currentStep = 'accessGranted';
+                this.proceedToNextStep.emit(this.currentStep);
+                break;
+        }
+    }
+    get styles() {
+        return {
+            'background-color': this.bgColor,
+            'box-shadow': this.boxShadow,
+            'border': this.border,
+            'border-radius': this.borderRadius,
+            'color': this.textColor,
+            'max-width': this.width,
+            'margin': '0 auto',
+            'height': this.height,
+            'padding': this.pd,
+        };
+    }
+    handleLogin() {
+        this.login.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { 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.9", ngImport: i0, type: MailValidationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-mail-validation', template: "<section  [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n  <div *ngIf=\"currentStep === 'linkSent'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Follow the link sent to your e-mail to verify your e-mail address\n    </p>\n    <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n      Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'verified'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n      Your e-mail has been verified! You will be notified when your access has\n      been authorized\n    </p>\n  </div>\n\n  <div *ngIf=\"currentStep === 'accessGranted'\">\n    <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n    Your e-mail has been verified!\n    </p>\n  <div class=\"mt-4\">\n    <verbena-button\n    [text]=\"text\"\n    [bgColor]=\"btnBgColor\"\n    [textColor]=\"color\"\n    [border]=\"btnBorder\"\n    [borderRadius]=\"btnBorderRadius\"\n    [pd]=\"btnPd\"\n    (click)=\"handleLogin()\"\n    [width]=\"btnWidth\"\n    textSize=\"'22px'\"\n    buttonClass=\"font-medium text-[22px] leading-[33px]\"\n  ></verbena-button>\n  </div>\n  </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.w-full{width:100%}\n"] }]
+        }], propDecorators: { customClass: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], boxShadow: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], pd: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }], textAlign: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], textSize: [{
+                type: Input
+            }], btnBorder: [{
+                type: Input
+            }], btnBorderRadius: [{
+                type: Input
+            }], btnBgColor: [{
+                type: Input
+            }], btnWidth: [{
+                type: Input
+            }], btnPd: [{
+                type: Input
+            }], resendOtp: [{
+                type: Output
+            }], proceedToNextStep: [{
+                type: Output
+            }], login: [{
+                type: Output
+            }] } });
+
+class MailValidationModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: MailValidationModule, declarations: [MailValidationComponent], imports: [FormsModule,
+            ReactiveFormsModule,
+            VerbenaInputModule,
+            VerbenaButtonModule,
+            CommonModule], exports: [MailValidationComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailValidationModule, imports: [FormsModule,
+            ReactiveFormsModule,
+            VerbenaInputModule,
+            VerbenaButtonModule,
+            CommonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: MailValidationModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MailValidationComponent],
+                    imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        VerbenaInputModule,
+                        VerbenaButtonModule,
+                        CommonModule,
+                    ],
+                    exports: [MailValidationComponent],
+                }]
+        }] });
+
+class ButtonComponent {
+    text = '';
+    color = 'black';
+    border = '1px solid #FFE681';
+    borderRadius = "40px";
+    bgColor = '#FFE681';
+    width = '100%';
+    pd = '10px 20px';
+    buttonClass = '';
+    disabled = false;
+    buttonClick = new EventEmitter();
+    handleClick() {
+        this.buttonClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-button', template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], pd: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], buttonClick: [{
+                type: Output
+            }] } });
+
+class OAuthComponent {
+    googleClick = new EventEmitter();
+    appleClick = new EventEmitter();
+    oAuthWithGoogle() {
+        this.googleClick.emit();
+    }
+    ;
+    oAuthWithApple() {
+        this.appleClick.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OAuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: OAuthComponent, selector: "verben-o-auth", outputs: { googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section class=\"oauthWrapper\"> \n    <div class=\"OrFlexWrapper\">\n        <hr/>\n        <span>OR</span>\n        <hr/>\n    </div>\n    <verbena-button\n    svg=\"google-logo\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with Google\"\n    bgColor=\"white\"\n    textColor=\"black\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n    (click)=\"oAuthWithGoogle()\"\n    ></verbena-button>\n    \n    <verbena-button\n    svg=\"apple-logo\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with Apple\"\n    bgColor=\"white\"\n    textColor=\"black\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n    (click)=\"oAuthWithApple()\"\n    ></verbena-button>\n</section>\n", styles: ["hr{height:1px;margin:0;border:1px solid #66666640;flex:1}.OR{margin:0 2px;color:#666}.oauthWrapper{display:flex;flex-direction:column;gap:12px}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "component", type: i1$1.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OAuthComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'verben-o-auth', template: "<section class=\"oauthWrapper\"> \n    <div class=\"OrFlexWrapper\">\n        <hr/>\n        <span>OR</span>\n        <hr/>\n    </div>\n    <verbena-button\n    svg=\"google-logo\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with Google\"\n    bgColor=\"white\"\n    textColor=\"black\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n    (click)=\"oAuthWithGoogle()\"\n    ></verbena-button>\n    \n    <verbena-button\n    svg=\"apple-logo\"\n    [svgHeight]=\"24\"\n    [svgWidth]=\"24\"\n    text=\"Continue with Apple\"\n    bgColor=\"white\"\n    textColor=\"black\"\n    border=\"1px solid #333\"\n    borderRadius=\"40px\"\n    pd=\"10px 20px\"\n    width=\"100%\"\n    svgPosition=\"left\"\n    buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n    (click)=\"oAuthWithApple()\"\n    ></verbena-button>\n</section>\n", styles: ["hr{height:1px;margin:0;border:1px solid #66666640;flex:1}.OR{margin:0 2px;color:#666}.oauthWrapper{display:flex;flex-direction:column;gap:12px}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"] }]
+        }], propDecorators: { googleClick: [{
+                type: Output
+            }], appleClick: [{
+                type: Output
+            }] } });
+
+class SignUpComponent {
+    fb;
+    width = '';
+    maxWidth = '';
+    margin = '';
+    pd = '';
+    customClass = '';
+    headlingClass = '';
+    bgColor = '#fff';
+    boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
+    border = '1px solid #66666680';
+    borderRadius = '24px';
+    height = 'auto';
+    priColor = '#FFE681';
+    textColor = '#333';
+    disabled = false;
+    // links
+    termsLink = '';
+    privacyLink = '';
+    routerLink = '';
+    formSubmit = new EventEmitter();
+    googleClick = new EventEmitter();
+    appleClick = new EventEmitter();
+    signUpForm;
+    constructor(fb) {
+        this.fb = fb;
+        this.signUpForm = this.fb.group({
+            Firstname: new FormControl(null, Validators.required),
+            Lastname: new FormControl(null, Validators.required),
+            Email: new FormControl(null, [
+                Validators.required,
+                Validators.email,
+            ]),
+            Password: new FormControl(null, [
+                Validators.required,
+                Validators.minLength(8),
+            ]),
+            Terms: new FormControl(false, [Validators.requiredTrue]),
+        });
+    }
+    checkForm() {
+        return this.signUpForm.valid;
+    }
+    submit() {
+        if (!this.checkForm()) {
+            return;
+        }
+        const data = {
+            Firstname: this.signUpForm.controls['Firstname'].value,
+            Lastname: this.signUpForm.controls['Lastname'].value,
+            Email: this.signUpForm.controls['Email'].value,
+            Password: this.signUpForm.controls['Password'].value,
+            Terms: this.signUpForm.controls['Terms'].value,
+        };
+        this.formSubmit.emit(data);
+    }
+    handleGoogleAuth() {
+        this.googleClick.emit();
+    }
+    handleAppleAuth() {
+        this.appleClick.emit();
+    }
+    get styles() {
+        return {
+            'background-color': this.bgColor,
+            'box-shadow': this.boxShadow,
+            'border': this.border,
+            'border-radius': this.borderRadius,
+            'color': this.textColor,
+            'width': this.width,
+            'max-width': this.maxWidth,
+            'margin': this.margin,
+            'height': this.height,
+            'padding': this.pd
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignUpComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: SignUpComponent, selector: "verben-sign-up", inputs: { width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", height: "height", priColor: "priColor", textColor: "textColor", disabled: "disabled", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n    <h2 class=\"{{headlingClass}}\">\n      Create an account\n    </h2>\n    <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n      <verbena-input\n        [label]=\"'First name'\"\n        [labelColor]=\"'#666'\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Firstname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"'white'\"\n        [border]=\"'1px solid #66666659'\"\n        [borderRadius]=\"'12px'\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Last name'\"\n        [labelColor]=\"'#666'\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Lastname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"'white'\"\n        [border]=\"'1px solid #66666659'\"\n        [borderRadius]=\"'12px'\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Email'\"\n        [labelColor]=\"'#666'\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'email'\"\n        formControlName=\"Email\"\n        [showBorder]=\"true\"\n        [bgColor]=\"'white'\"\n        [border]=\"'1px solid #66666659'\"\n        [borderRadius]=\"'12px'\"\n        [showErrorMessage]=\"true\"\n        [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]=\"'#666'\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'password'\"\n        formControlName=\"Password\"\n        [showBorder]=\"true\"\n        [bgColor]=\"'white'\"\n        [border]=\"'1px solid #66666659'\"\n        [borderRadius]=\"'12px'\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <div> \n        <div class=\"checkBoxWrapper\">\n          <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\"  class=\"checBoxInput\" />\n          <label for=\"terms\" 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\">You must agree to the terms.</small>\n       </p>\n      </div>\n       <p [ngStyle]=\"{'margin-bottom':'5px'}\"></p>\n      <lib-button \n      text=\"Create an account\" \n      type=\"submit\"\n      [disabled]=\"!this.checkForm()\"\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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i1$1.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: OAuthComponent, selector: "verben-o-auth", outputs: ["googleClick", "appleClick"] }, { kind: "directive", type: i1.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.9", ngImport: i0, type: SignUpComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'verben-sign-up', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n    <h2 class=\"{{headlingClass}}\">\n      Create an account\n    </h2>\n    <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n      <verbena-input\n        [label]=\"'First name'\"\n        [labelColor]=\"'#666'\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Firstname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"'white'\"\n        [border]=\"'1px solid #66666659'\"\n        [borderRadius]=\"'12px'\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Last name'\"\n        [labelColor]=\"'#666'\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'text'\"\n        formControlName=\"Lastname\"\n        [showBorder]=\"true\"\n        [bgColor]=\"'white'\"\n        [border]=\"'1px solid #66666659'\"\n        [borderRadius]=\"'12px'\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <verbena-input\n        [label]=\"'Email'\"\n        [labelColor]=\"'#666'\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'email'\"\n        formControlName=\"Email\"\n        [showBorder]=\"true\"\n        [bgColor]=\"'white'\"\n        [border]=\"'1px solid #66666659'\"\n        [borderRadius]=\"'12px'\"\n        [showErrorMessage]=\"true\"\n        [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]=\"'#666'\"\n        [placeHolder]=\"''\"\n        [required]=\"true\"\n        [type]=\"'password'\"\n        formControlName=\"Password\"\n        [showBorder]=\"true\"\n        [bgColor]=\"'white'\"\n        [border]=\"'1px solid #66666659'\"\n        [borderRadius]=\"'12px'\"\n        [showErrorMessage]=\"true\"\n        [errorMessageColor]=\"'red'\"\n        [errorBorderColor]=\"'red'\"\n        [errorPosition]=\"'bottom'\"\n        class=\"outline-none focus-none\"\n      ></verbena-input>\n      <div> \n        <div class=\"checkBoxWrapper\">\n          <input type=\"checkbox\" id=\"terms\" formControlName=\"Terms\"  class=\"checBoxInput\" />\n          <label for=\"terms\" 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\">You must agree to the terms.</small>\n       </p>\n      </div>\n       <p [ngStyle]=\"{'margin-bottom':'5px'}\"></p>\n      <lib-button \n      text=\"Create an account\" \n      type=\"submit\"\n      [disabled]=\"!this.checkForm()\"\n      ></lib-button>\n      <verben-o-auth \n      (googleClick)=\"handleGoogleAuth()\"\n      (appleClick)=\"handleAppleAuth()\"\n      ></verben-o-auth>\n      <p>\n        Already have an account?\n        <a [routerLink]=\"routerLink\"  class=\"\">Log in</a>\n      </p>\n    </form>\n  </section>\n  \n", styles: ["a{text-decoration:underline;cursor:pointer}input[type=checkbox]:checked{accent-color:#111}.flexWrapper{display:flex;flex-direction:column;gap:10px}.checkBoxWrapper{display:flex;align-items:start;gap:2px}.checBoxInput{margin-top:6px}.bigcheckboxWrapper{margin-top:.5rem;margin-bottom:1.5rem}.error-text{color:red}.disable-btn{cursor:not-allowed}\n"] }]
+        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { width: [{
+                type: Input
+            }], maxWidth: [{
+                type: Input
+            }], margin: [{
+                type: Input
+            }], pd: [{
+                type: Input
+            }], customClass: [{
+                type: Input
+            }], headlingClass: [{
+                type: Input
+            }], bgColor: [{
+                type: Input
+            }], boxShadow: [{
+                type: Input
+            }], border: [{
+                type: Input
+            }], borderRadius: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], priColor: [{
+                type: Input
+            }], textColor: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], termsLink: [{
+                type: Input
+            }], privacyLink: [{
+                type: Input
+            }], routerLink: [{
+                type: Input
+            }], formSubmit: [{
+                type: Output
+            }], googleClick: [{
+                type: Output
+            }], appleClick: [{
+                type: Output
+            }] } });
+
+class OAuthModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: OAuthModule, declarations: [OAuthComponent], imports: [CommonModule, VerbenaInputModule, VerbenaButtonModule], exports: [OAuthComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OAuthModule, imports: [CommonModule, VerbenaInputModule, VerbenaButtonModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OAuthModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [OAuthComponent],
+                    imports: [CommonModule, VerbenaInputModule, VerbenaButtonModule],
+                    exports: [OAuthComponent]
+                }]
+        }] });
+
+class ButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, VerbenaButtonModule, FormsModule], exports: [ButtonComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonModule, imports: [CommonModule, VerbenaButtonModule, FormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: ButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ButtonComponent],
+                    imports: [CommonModule, VerbenaButtonModule, FormsModule],
+                    exports: [ButtonComponent]
+                }]
+        }] });
+
+class SignUpModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignUpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: SignUpModule, declarations: [SignUpComponent], imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule], exports: [SignUpComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignUpModule, imports: [CommonModule, FormsModule, VerbenaInputModule, ButtonModule, OAuthModule, ReactiveFormsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignUpModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [SignUpComponent],
+                    imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule],
+                    exports: [SignUpComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of verben-ng-ui
+ */
+// export * from './lib/verben-ng-ui.service';
+// export * from './lib/verben-ng-ui.component';
+// Exporting modules
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MailValidationComponent, MailValidationModule, ResetPasswordComponent, ResetPasswordModule, SignUpComponent, SignUpModule, UserRequestComponent, UserRequestModule };
+//# sourceMappingURL=verben-authentication-ui.mjs.map