verben-authentication-ui 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/button/button.component.mjs +4 -4
- package/esm2022/lib/components/button/button.module.mjs +5 -5
- package/esm2022/lib/components/forgot-password/forgot-password.component.mjs +4 -4
- package/esm2022/lib/components/forgot-password/forgot-password.module.mjs +5 -5
- package/esm2022/lib/components/mail/mail.component.mjs +4 -4
- package/esm2022/lib/components/mail/mail.module.mjs +5 -5
- package/esm2022/lib/components/mail-validation/mail-validation.component.mjs +4 -4
- package/esm2022/lib/components/mail-validation/mail-validation.module.mjs +5 -5
- package/esm2022/lib/components/o-auth/o-auth.component.mjs +4 -4
- package/esm2022/lib/components/o-auth/o-auth.module.mjs +5 -5
- package/esm2022/lib/components/otp-input/otp-input.component.mjs +8 -5
- package/esm2022/lib/components/otp-input/otp-input.module.mjs +5 -5
- package/esm2022/lib/components/reset-password/reset-password.component.mjs +4 -4
- package/esm2022/lib/components/reset-password/reset-password.module.mjs +5 -5
- package/esm2022/lib/components/sign-in/sign-in.component.mjs +44 -6
- package/esm2022/lib/components/sign-in/sign-in.module.mjs +5 -5
- package/esm2022/lib/components/sign-up/sign-up.component.mjs +51 -9
- package/esm2022/lib/components/sign-up/sign-up.module.mjs +5 -5
- package/esm2022/lib/components/sso/base-table-style.mjs +53 -0
- package/esm2022/lib/components/sso/helper.mjs +14 -0
- package/esm2022/lib/components/sso/sso-form/sso-form.component.mjs +102 -0
- package/esm2022/lib/components/sso/sso.columns.mjs +29 -0
- package/esm2022/lib/components/sso/sso.component.mjs +202 -0
- package/esm2022/lib/components/sso/sso.module.mjs +63 -0
- package/esm2022/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.mjs +36 -6
- package/esm2022/lib/components/two-factor-auth-otp/two-factor-auth-otp.module.mjs +5 -5
- package/esm2022/lib/components/two-factor-auth-setup/two-factor-auth-setup.component.mjs +8 -5
- package/esm2022/lib/components/two-factor-auth-setup/two-factor-auth-setup.module.mjs +5 -5
- package/esm2022/lib/components/user-request/user-request.component.mjs +25 -13
- package/esm2022/lib/components/user-request/user-request.module.mjs +5 -5
- package/esm2022/lib/components/user-request-approval/helper.mjs +3 -3
- package/esm2022/lib/components/user-request-approval/user-access-request-status-badge/user-access-request-status-badge.component.mjs +4 -4
- package/esm2022/lib/components/user-request-approval/user-request-approval.component.mjs +58 -13
- package/esm2022/lib/components/user-request-approval/user-request-approval.module.mjs +7 -5
- package/esm2022/lib/components/user-request-approval/user-request-approval.service.mjs +50 -0
- package/esm2022/lib/components/user-request-approval/user-request-form/user-request-form.component.mjs +10 -7
- package/esm2022/lib/models/UserRequest.mjs +2 -0
- package/esm2022/lib/models/base.mjs +1 -1
- package/esm2022/lib/models/sign-up.mjs +1 -1
- package/esm2022/lib/models/single-sign-on.mjs +2 -0
- package/esm2022/lib/services/environment.service.mjs +4 -4
- package/esm2022/lib/services/http-web-request.service.mjs +4 -4
- package/esm2022/public-api.mjs +5 -2
- package/fesm2022/verben-authentication-ui.mjs +804 -142
- package/fesm2022/verben-authentication-ui.mjs.map +1 -1
- package/lib/components/otp-input/otp-input.component.d.ts +2 -1
- package/lib/components/sign-in/sign-in.component.d.ts +13 -1
- package/lib/components/sign-up/sign-up.component.d.ts +13 -2
- package/lib/components/sso/base-table-style.d.ts +1 -0
- package/lib/components/sso/helper.d.ts +2 -0
- package/lib/components/sso/sso-form/sso-form.component.d.ts +24 -0
- package/lib/components/sso/sso.columns.d.ts +3 -0
- package/lib/components/sso/sso.component.d.ts +50 -0
- package/lib/components/sso/sso.module.d.ts +11 -0
- package/lib/components/two-factor-auth-otp/two-factor-auth-otp.component.d.ts +12 -2
- package/lib/components/two-factor-auth-setup/two-factor-auth-setup.component.d.ts +2 -1
- package/lib/components/user-request/user-request.component.d.ts +5 -10
- package/lib/components/user-request-approval/user-request-approval.component.d.ts +10 -3
- package/lib/components/user-request-approval/user-request-approval.service.d.ts +18 -0
- package/lib/models/UserRequest.d.ts +9 -0
- package/lib/models/sign-up.d.ts +1 -0
- package/lib/models/single-sign-on.d.ts +7 -0
- package/package.json +4 -4
- package/public-api.d.ts +4 -1
|
@@ -4,7 +4,7 @@ import * as i1$1 from '@angular/forms';
|
|
|
4
4
|
import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
5
5
|
import * as i1 from '@angular/common/http';
|
|
6
6
|
import * as i2 from 'verben-ng-ui';
|
|
7
|
-
import { VerbenaInputModule, VerbenaButtonModule, SvgModule, DataFilterType,
|
|
7
|
+
import { VerbenaInputModule, VerbenaButtonModule, SvgModule, DataFilterType, DataViewModule, TableFilterModule, SortTableModule, DataExportModule, VisibleColumnModule, CardDataViewModule, VerbenaTextareaModule, DataTableModule, CardModule, VerbenaBadgeModule, DropDownModule } from 'verben-ng-ui';
|
|
8
8
|
import * as i2$1 from '@angular/common';
|
|
9
9
|
import { CommonModule } from '@angular/common';
|
|
10
10
|
import * as i4 from '@angular/router';
|
|
@@ -32,10 +32,10 @@ class EnvironmentService {
|
|
|
32
32
|
get environment() {
|
|
33
33
|
return this.env;
|
|
34
34
|
}
|
|
35
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
36
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
35
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: EnvironmentService, deps: [{ token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
36
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: EnvironmentService, providedIn: 'root' });
|
|
37
37
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: EnvironmentService, decorators: [{
|
|
39
39
|
type: Injectable,
|
|
40
40
|
args: [{
|
|
41
41
|
providedIn: 'root',
|
|
@@ -115,10 +115,10 @@ class HttpWebRequestService {
|
|
|
115
115
|
delete(url, baseUrl = this.envSvc.environment.AuthenticationAPI) {
|
|
116
116
|
return this.http.delete(baseUrl + '/' + url);
|
|
117
117
|
}
|
|
118
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
119
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.
|
|
118
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: HttpWebRequestService, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
119
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: HttpWebRequestService, providedIn: 'root' });
|
|
120
120
|
}
|
|
121
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: HttpWebRequestService, decorators: [{
|
|
122
122
|
type: Injectable,
|
|
123
123
|
args: [{
|
|
124
124
|
providedIn: 'root',
|
|
@@ -180,10 +180,10 @@ class ResetPasswordComponent {
|
|
|
180
180
|
this.onSubmit.emit(data);
|
|
181
181
|
this.onSubmitResponseEnd.emit('');
|
|
182
182
|
}
|
|
183
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
184
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
183
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ResetPasswordComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }], target: i0.ɵɵFactoryTarget.Component });
|
|
184
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: ResetPasswordComponent, selector: "verben-reset-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", showOldPassword: "showOldPassword" }, outputs: { onSubmit: "onSubmit", onSubmitResponseEnd: "onSubmitResponseEnd" }, ngImport: i0, template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Old Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">New Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Confirm Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\"\n type=\"password\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
185
185
|
}
|
|
186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ResetPasswordComponent, decorators: [{
|
|
187
187
|
type: Component,
|
|
188
188
|
args: [{ selector: 'verben-reset-password', template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Old Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">New Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Confirm Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\"\n type=\"password\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"] }]
|
|
189
189
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }], propDecorators: { title: [{
|
|
@@ -205,19 +205,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
205
205
|
}] } });
|
|
206
206
|
|
|
207
207
|
class ResetPasswordModule {
|
|
208
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
209
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
208
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ResetPasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
209
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: ResetPasswordModule, declarations: [ResetPasswordComponent], imports: [FormsModule,
|
|
210
210
|
ReactiveFormsModule,
|
|
211
211
|
VerbenaInputModule,
|
|
212
212
|
VerbenaButtonModule,
|
|
213
213
|
CommonModule], exports: [ResetPasswordComponent] });
|
|
214
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
214
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ResetPasswordModule, imports: [FormsModule,
|
|
215
215
|
ReactiveFormsModule,
|
|
216
216
|
VerbenaInputModule,
|
|
217
217
|
VerbenaButtonModule,
|
|
218
218
|
CommonModule] });
|
|
219
219
|
}
|
|
220
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ResetPasswordModule, decorators: [{
|
|
221
221
|
type: NgModule,
|
|
222
222
|
args: [{
|
|
223
223
|
declarations: [ResetPasswordComponent],
|
|
@@ -232,6 +232,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
232
232
|
}]
|
|
233
233
|
}] });
|
|
234
234
|
|
|
235
|
+
var ObjectState;
|
|
236
|
+
(function (ObjectState) {
|
|
237
|
+
ObjectState["New"] = "New";
|
|
238
|
+
ObjectState["Changed"] = "Changed";
|
|
239
|
+
ObjectState["Unchanged"] = "Unchanged";
|
|
240
|
+
ObjectState["Removed"] = "Removed";
|
|
241
|
+
})(ObjectState || (ObjectState = {}));
|
|
242
|
+
|
|
235
243
|
class UserRequestComponent {
|
|
236
244
|
fb;
|
|
237
245
|
width = '500px';
|
|
@@ -259,16 +267,17 @@ class UserRequestComponent {
|
|
|
259
267
|
formSubmit = new EventEmitter();
|
|
260
268
|
googleClick = new EventEmitter();
|
|
261
269
|
appleClick = new EventEmitter();
|
|
270
|
+
onSubmitResponseEnd = new EventEmitter();
|
|
262
271
|
userRequestForm;
|
|
263
272
|
constructor(fb) {
|
|
264
273
|
this.fb = fb;
|
|
265
274
|
this.userRequestForm = this.fb.group({
|
|
266
275
|
FirstName: [null, [Validators.required]],
|
|
267
276
|
LastName: [null, [Validators.required]],
|
|
268
|
-
|
|
277
|
+
Email: [null, [Validators.required, Validators.email]],
|
|
269
278
|
Password: [null, [Validators.required, Validators.minLength(8)]],
|
|
270
279
|
ConfirmPassword: [null, [Validators.required]],
|
|
271
|
-
Terms: [
|
|
280
|
+
Terms: [false, Validators.requiredTrue]
|
|
272
281
|
}, { validators: this.passwordMatchValidator });
|
|
273
282
|
}
|
|
274
283
|
passwordMatchValidator(control) {
|
|
@@ -300,25 +309,33 @@ class UserRequestComponent {
|
|
|
300
309
|
handleAppleAuth() {
|
|
301
310
|
this.appleClick.emit();
|
|
302
311
|
}
|
|
303
|
-
submitForm() {
|
|
312
|
+
async submitForm() {
|
|
304
313
|
if (!this.checkForm()) {
|
|
305
314
|
return;
|
|
306
315
|
}
|
|
307
|
-
|
|
316
|
+
const payload = {
|
|
308
317
|
FirstName: this.userRequestForm.controls["FirstName"].value,
|
|
309
318
|
LastName: this.userRequestForm.controls["LastName"].value,
|
|
310
|
-
|
|
319
|
+
Email: this.userRequestForm.controls["Email"].value,
|
|
311
320
|
Password: this.userRequestForm.controls["Password"].value,
|
|
312
321
|
ConfirmPassword: this.userRequestForm.controls["ConfirmPassword"].value,
|
|
313
|
-
Terms: this.userRequestForm.controls["
|
|
314
|
-
|
|
322
|
+
Terms: this.userRequestForm.controls["Terms"].value,
|
|
323
|
+
UpdatedAt: new Date(),
|
|
324
|
+
CreatedAt: new Date(),
|
|
325
|
+
Id: "",
|
|
326
|
+
State: ObjectState.New,
|
|
327
|
+
Tenant: "",
|
|
328
|
+
id: ""
|
|
329
|
+
};
|
|
330
|
+
this.formSubmit.emit(payload);
|
|
331
|
+
this.onSubmitResponseEnd.emit("");
|
|
315
332
|
}
|
|
316
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
317
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
333
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
334
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserRequestComponent, selector: "lib-user-request", inputs: { width: "width", headingTitle: "headingTitle", headingClass: "headingClass", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", text: "text", color: "color", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", googleClick: "googleClick", appleClick: "appleClick", onSubmitResponseEnd: "onSubmitResponseEnd" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{ headingClass }}\">\n {{ headingTitle }}\n </h2>\n\n <form\n [formGroup]=\"userRequestForm\"\n (ngSubmit)=\"submitForm()\"\n class=\"flex flex-col gap-5 mt-3\"\n >\n <verbena-input\n [label]=\"'First Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"FirstName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"LastName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'E-mail Address'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [customErrorMessages]=\"{\n required: 'Email address is required',\n email: 'Email address must be valid'\n }\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n formControlName=\"Password\"\n [required]=\"true\"\n [type]=\"'password'\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Confirm Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"ConfirmPassword\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [customErrorMessages]=\"{\n minLength:'Confirm Password must match password',\n required: 'Confirm Password is required and must match password',\n password: 'Password does not match',\n }\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <p class=\"text-[#666666] text-sm\">\n <input formControlName=\"Terms\" class=\"accent\" type=\"checkbox\" />\n By creating an account, I agree to our<br />\n <a [attr.href]=\"termsLink\" class=\"text-black text-sm font-[500] underline\"\n >Terms of use</a\n >\n and\n <a [attr.href]=\"privacyLink\" class=\"text-black font-[500] text-sm underline\"\n >Privacy Policy\n </a>\n <p *ngIf=\"userRequestForm.controls['Terms'].invalid && userRequestForm.controls['Terms'].touched\">\n <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n </p>\n \n <verbena-button\n [disable]=\"!this.checkForm()\"\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [buttonClass]=\"'cursor-not-allowed'\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n (click)=\"submitForm()\"\n [ngClass]=\"{\n 'cursor-not-allowed':!checkForm()\n }\"\n [width]=\"btnWidth\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n <div class=\"flex justify-center items-center OR\">\n <span></span>\n OR\n <span></span>\n </div>\n\n <verbena-button\n svg=\"google-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n (click)=\"handleGoogleAuth()\"\n text=\"Continue with Google\"\n bgColor=\"white\"\n textColor=\"black\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n ></verbena-button>\n\n <verbena-button\n svg=\"apple-logo\"\n (click)=\"handleAppleAuth()\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Apple\"\n bgColor=\"white\"\n textColor=\"black\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n ></verbena-button>\n </form>\n</section>\n", styles: [".flex{display:flex}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.justify-center{justify-content:center}.h-full{height:100%}.text-center{text-align:center}.underline{text-decoration:underline}.gap-5{gap:20px}.mt-4{margin-top:1rem}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.object-cover{object-fit:cover}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed!important}.accent{accent-color:#000}.OR{color:#666;gap:6px}.OR span{width:150px;border-top:2px solid #6666663d;display:block}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
318
335
|
}
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestComponent, decorators: [{
|
|
320
337
|
type: Component,
|
|
321
|
-
args: [{ selector: 'lib-user-request', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{ headingClass }}\">\n {{ headingTitle }}\n </h2>\n\n <form\n [formGroup]=\"userRequestForm\"\n (ngSubmit)=\"submitForm()\"\n class=\"flex flex-col gap-5 mt-3\"\n >\n <verbena-input\n [label]=\"'First Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"FirstName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"LastName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'E-mail Address'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"
|
|
338
|
+
args: [{ selector: 'lib-user-request', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{ headingClass }}\">\n {{ headingTitle }}\n </h2>\n\n <form\n [formGroup]=\"userRequestForm\"\n (ngSubmit)=\"submitForm()\"\n class=\"flex flex-col gap-5 mt-3\"\n >\n <verbena-input\n [label]=\"'First Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"FirstName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"LastName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'E-mail Address'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [customErrorMessages]=\"{\n required: 'Email address is required',\n email: 'Email address must be valid'\n }\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n formControlName=\"Password\"\n [required]=\"true\"\n [type]=\"'password'\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Confirm Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"ConfirmPassword\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [customErrorMessages]=\"{\n minLength:'Confirm Password must match password',\n required: 'Confirm Password is required and must match password',\n password: 'Password does not match',\n }\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <p class=\"text-[#666666] text-sm\">\n <input formControlName=\"Terms\" class=\"accent\" type=\"checkbox\" />\n By creating an account, I agree to our<br />\n <a [attr.href]=\"termsLink\" class=\"text-black text-sm font-[500] underline\"\n >Terms of use</a\n >\n and\n <a [attr.href]=\"privacyLink\" class=\"text-black font-[500] text-sm underline\"\n >Privacy Policy\n </a>\n <p *ngIf=\"userRequestForm.controls['Terms'].invalid && userRequestForm.controls['Terms'].touched\">\n <small class=\"error-text\">Please agree to the terms of use and privacy policy.</small>\n </p>\n \n <verbena-button\n [disable]=\"!this.checkForm()\"\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [buttonClass]=\"'cursor-not-allowed'\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n (click)=\"submitForm()\"\n [ngClass]=\"{\n 'cursor-not-allowed':!checkForm()\n }\"\n [width]=\"btnWidth\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n <div class=\"flex justify-center items-center OR\">\n <span></span>\n OR\n <span></span>\n </div>\n\n <verbena-button\n svg=\"google-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n (click)=\"handleGoogleAuth()\"\n text=\"Continue with Google\"\n bgColor=\"white\"\n textColor=\"black\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n ></verbena-button>\n\n <verbena-button\n svg=\"apple-logo\"\n (click)=\"handleAppleAuth()\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Apple\"\n bgColor=\"white\"\n textColor=\"black\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n ></verbena-button>\n </form>\n</section>\n", styles: [".flex{display:flex}.items-center{align-items:center}.overflow-hidden{overflow:hidden}.justify-center{justify-content:center}.h-full{height:100%}.text-center{text-align:center}.underline{text-decoration:underline}.gap-5{gap:20px}.mt-4{margin-top:1rem}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.object-cover{object-fit:cover}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed!important}.accent{accent-color:#000}.OR{color:#666;gap:6px}.OR span{width:150px;border-top:2px solid #6666663d;display:block}\n"] }]
|
|
322
339
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { width: [{
|
|
323
340
|
type: Input
|
|
324
341
|
}], headingTitle: [{
|
|
@@ -367,22 +384,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
367
384
|
type: Output
|
|
368
385
|
}], appleClick: [{
|
|
369
386
|
type: Output
|
|
387
|
+
}], onSubmitResponseEnd: [{
|
|
388
|
+
type: Output
|
|
370
389
|
}] } });
|
|
371
390
|
|
|
372
391
|
class UserRequestModule {
|
|
373
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
374
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
392
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
393
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: UserRequestModule, declarations: [UserRequestComponent], imports: [FormsModule,
|
|
375
394
|
ReactiveFormsModule,
|
|
376
395
|
VerbenaInputModule,
|
|
377
396
|
VerbenaButtonModule,
|
|
378
397
|
CommonModule], exports: [UserRequestComponent] });
|
|
379
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
398
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestModule, imports: [FormsModule,
|
|
380
399
|
ReactiveFormsModule,
|
|
381
400
|
VerbenaInputModule,
|
|
382
401
|
VerbenaButtonModule,
|
|
383
402
|
CommonModule] });
|
|
384
403
|
}
|
|
385
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestModule, decorators: [{
|
|
386
405
|
type: NgModule,
|
|
387
406
|
args: [{
|
|
388
407
|
declarations: [UserRequestComponent],
|
|
@@ -451,10 +470,10 @@ class MailValidationComponent {
|
|
|
451
470
|
handleLogin() {
|
|
452
471
|
this.login.emit();
|
|
453
472
|
}
|
|
454
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
473
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
474
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MailValidationComponent, selector: "lib-mail-validation", inputs: { customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", width: "width", text: "text", textAlign: "textAlign", color: "color", textSize: "textSize", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd" }, outputs: { resendOtp: "resendOtp", proceedToNextStep: "proceedToNextStep", login: "login" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <div *ngIf=\"currentStep === 'linkSent'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Follow the link sent to your e-mail to verify your e-mail address\n </p>\n <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'verified'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified! You will be notified when your access has\n been authorized\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'accessGranted'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified!\n </p>\n <div class=\"mt-4\">\n <verbena-button\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n (click)=\"handleLogin()\"\n [width]=\"btnWidth\"\n textSize=\"'22px'\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n </div>\n </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.w-full{width:100%}\n"], dependencies: [{ kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
456
475
|
}
|
|
457
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
476
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailValidationComponent, decorators: [{
|
|
458
477
|
type: Component,
|
|
459
478
|
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"] }]
|
|
460
479
|
}], propDecorators: { customClass: [{
|
|
@@ -502,19 +521,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
502
521
|
}] } });
|
|
503
522
|
|
|
504
523
|
class MailValidationModule {
|
|
505
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
506
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
524
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailValidationModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
525
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: MailValidationModule, declarations: [MailValidationComponent], imports: [FormsModule,
|
|
507
526
|
ReactiveFormsModule,
|
|
508
527
|
VerbenaInputModule,
|
|
509
528
|
VerbenaButtonModule,
|
|
510
529
|
CommonModule], exports: [MailValidationComponent] });
|
|
511
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
530
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailValidationModule, imports: [FormsModule,
|
|
512
531
|
ReactiveFormsModule,
|
|
513
532
|
VerbenaInputModule,
|
|
514
533
|
VerbenaButtonModule,
|
|
515
534
|
CommonModule] });
|
|
516
535
|
}
|
|
517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
536
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailValidationModule, decorators: [{
|
|
518
537
|
type: NgModule,
|
|
519
538
|
args: [{
|
|
520
539
|
declarations: [MailValidationComponent],
|
|
@@ -543,10 +562,10 @@ class ButtonComponent {
|
|
|
543
562
|
handleClick() {
|
|
544
563
|
this.buttonClick.emit();
|
|
545
564
|
}
|
|
546
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
547
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
565
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
566
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", 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$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }] });
|
|
548
567
|
}
|
|
549
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
550
569
|
type: Component,
|
|
551
570
|
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"] }]
|
|
552
571
|
}], propDecorators: { text: [{
|
|
@@ -581,10 +600,10 @@ class OAuthComponent {
|
|
|
581
600
|
oAuthWithApple() {
|
|
582
601
|
this.appleClick.emit();
|
|
583
602
|
}
|
|
584
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
585
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
603
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OAuthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
604
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: OAuthComponent, selector: "verben-o-auth", outputs: { googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section class=\"oauthWrapper\"> \n <div class=\"OrFlexWrapper\">\n <hr/>\n <span>OR</span>\n <hr/>\n </div>\n <verbena-button\n svg=\"google-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Google\"\n bgColor=\"white\"\n textColor=\"black\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n (click)=\"oAuthWithGoogle()\"\n ></verbena-button>\n \n <verbena-button\n svg=\"apple-logo\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with Apple\"\n bgColor=\"white\"\n textColor=\"black\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333] mt-2\"\n (click)=\"oAuthWithApple()\"\n ></verbena-button>\n</section>\n", styles: ["hr{height:1px;margin:0;border:1px solid #66666640;flex:1}.OR{margin:0 2px;color:#666}.oauthWrapper{display:flex;flex-direction:column;gap:12px}.OrFlexWrapper{display:flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }] });
|
|
586
605
|
}
|
|
587
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
606
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OAuthComponent, decorators: [{
|
|
588
607
|
type: Component,
|
|
589
608
|
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"] }]
|
|
590
609
|
}], propDecorators: { googleClick: [{
|
|
@@ -607,9 +626,21 @@ class SignUpComponent {
|
|
|
607
626
|
border = '1px solid #66666680';
|
|
608
627
|
borderRadius = '24px';
|
|
609
628
|
height = 'auto';
|
|
610
|
-
priColor = '#FFE681';
|
|
611
629
|
textColor = '#333';
|
|
612
630
|
disabled = false;
|
|
631
|
+
// button styles
|
|
632
|
+
btnClass = '';
|
|
633
|
+
btnBgColor = '#FFE681';
|
|
634
|
+
btnColor = '';
|
|
635
|
+
btnBorder = '';
|
|
636
|
+
btnBorderRadius = '24px';
|
|
637
|
+
btnPd = '';
|
|
638
|
+
btnText = 'Create account';
|
|
639
|
+
//inputStyles
|
|
640
|
+
inputLabelColor = '';
|
|
641
|
+
inputBgColor = 'transparent';
|
|
642
|
+
inputBorder = '1px solid #66666659';
|
|
643
|
+
inputBorderRadius = '12px';
|
|
613
644
|
// links
|
|
614
645
|
termsLink = '';
|
|
615
646
|
privacyLink = '';
|
|
@@ -631,9 +662,18 @@ class SignUpComponent {
|
|
|
631
662
|
Validators.required,
|
|
632
663
|
Validators.minLength(8),
|
|
633
664
|
]),
|
|
665
|
+
Confirmpassword: new FormControl(null, [
|
|
666
|
+
Validators.required,
|
|
667
|
+
Validators.minLength(8),
|
|
668
|
+
]),
|
|
634
669
|
Terms: new FormControl(false, [Validators.requiredTrue]),
|
|
635
|
-
});
|
|
670
|
+
}, { validators: this.passwordMatchValidator });
|
|
636
671
|
}
|
|
672
|
+
passwordMatchValidator = (group) => {
|
|
673
|
+
const password = group.get('Password')?.value;
|
|
674
|
+
const confirmPassword = group.get('Confirmpassword')?.value;
|
|
675
|
+
return password === confirmPassword ? null : { passwordMismatch: true };
|
|
676
|
+
};
|
|
637
677
|
checkForm() {
|
|
638
678
|
return this.signUpForm.valid;
|
|
639
679
|
}
|
|
@@ -646,6 +686,7 @@ class SignUpComponent {
|
|
|
646
686
|
Lastname: this.signUpForm.controls['Lastname'].value,
|
|
647
687
|
Email: this.signUpForm.controls['Email'].value,
|
|
648
688
|
Password: this.signUpForm.controls['Password'].value,
|
|
689
|
+
Confirmpassword: this.signUpForm.controls['Confirmpassword'].value,
|
|
649
690
|
Terms: this.signUpForm.controls['Terms'].value,
|
|
650
691
|
};
|
|
651
692
|
this.formSubmit.emit(data);
|
|
@@ -670,12 +711,12 @@ class SignUpComponent {
|
|
|
670
711
|
'padding': this.pd
|
|
671
712
|
};
|
|
672
713
|
}
|
|
673
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
674
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
714
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignUpComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
715
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", 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", 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 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: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i2.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "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$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
675
716
|
}
|
|
676
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
717
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignUpComponent, decorators: [{
|
|
677
718
|
type: Component,
|
|
678
|
-
args: [{ selector: 'verben-sign-up', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{headlingClass}}\">\n {{headlingText}}\n </h2>\n <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n <verbena-input\n [label]=\"'First name'\"\n [labelColor]=\"
|
|
719
|
+
args: [{ selector: 'verben-sign-up', template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{headlingClass}}\">\n {{headlingText}}\n </h2>\n <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n <verbena-input\n [label]=\"'First name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Firstname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'First name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Lastname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'Last name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n 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"] }]
|
|
679
720
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { headlingText: [{
|
|
680
721
|
type: Input
|
|
681
722
|
}], width: [{
|
|
@@ -700,12 +741,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
700
741
|
type: Input
|
|
701
742
|
}], height: [{
|
|
702
743
|
type: Input
|
|
703
|
-
}], priColor: [{
|
|
704
|
-
type: Input
|
|
705
744
|
}], textColor: [{
|
|
706
745
|
type: Input
|
|
707
746
|
}], disabled: [{
|
|
708
747
|
type: Input
|
|
748
|
+
}], btnClass: [{
|
|
749
|
+
type: Input
|
|
750
|
+
}], btnBgColor: [{
|
|
751
|
+
type: Input
|
|
752
|
+
}], btnColor: [{
|
|
753
|
+
type: Input
|
|
754
|
+
}], btnBorder: [{
|
|
755
|
+
type: Input
|
|
756
|
+
}], btnBorderRadius: [{
|
|
757
|
+
type: Input
|
|
758
|
+
}], btnPd: [{
|
|
759
|
+
type: Input
|
|
760
|
+
}], btnText: [{
|
|
761
|
+
type: Input
|
|
762
|
+
}], inputLabelColor: [{
|
|
763
|
+
type: Input
|
|
764
|
+
}], inputBgColor: [{
|
|
765
|
+
type: Input
|
|
766
|
+
}], inputBorder: [{
|
|
767
|
+
type: Input
|
|
768
|
+
}], inputBorderRadius: [{
|
|
769
|
+
type: Input
|
|
709
770
|
}], termsLink: [{
|
|
710
771
|
type: Input
|
|
711
772
|
}], privacyLink: [{
|
|
@@ -721,11 +782,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
721
782
|
}] } });
|
|
722
783
|
|
|
723
784
|
class OAuthModule {
|
|
724
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
725
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
726
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
785
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
786
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: OAuthModule, declarations: [OAuthComponent], imports: [CommonModule, VerbenaInputModule, VerbenaButtonModule], exports: [OAuthComponent] });
|
|
787
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OAuthModule, imports: [CommonModule, VerbenaInputModule, VerbenaButtonModule] });
|
|
727
788
|
}
|
|
728
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
789
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OAuthModule, decorators: [{
|
|
729
790
|
type: NgModule,
|
|
730
791
|
args: [{
|
|
731
792
|
declarations: [OAuthComponent],
|
|
@@ -735,11 +796,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
735
796
|
}] });
|
|
736
797
|
|
|
737
798
|
class ButtonModule {
|
|
738
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
739
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
740
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
799
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
800
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [CommonModule, VerbenaButtonModule, FormsModule], exports: [ButtonComponent] });
|
|
801
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonModule, imports: [CommonModule, VerbenaButtonModule, FormsModule] });
|
|
741
802
|
}
|
|
742
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
803
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonModule, decorators: [{
|
|
743
804
|
type: NgModule,
|
|
744
805
|
args: [{
|
|
745
806
|
declarations: [ButtonComponent],
|
|
@@ -749,11 +810,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
749
810
|
}] });
|
|
750
811
|
|
|
751
812
|
class SignUpModule {
|
|
752
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
753
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
754
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
813
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignUpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
814
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: SignUpModule, declarations: [SignUpComponent], imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule], exports: [SignUpComponent] });
|
|
815
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignUpModule, imports: [CommonModule, FormsModule, VerbenaInputModule, ButtonModule, OAuthModule, ReactiveFormsModule] });
|
|
755
816
|
}
|
|
756
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
817
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignUpModule, decorators: [{
|
|
757
818
|
type: NgModule,
|
|
758
819
|
args: [{
|
|
759
820
|
declarations: [SignUpComponent],
|
|
@@ -764,7 +825,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
764
825
|
|
|
765
826
|
class SignInComponent {
|
|
766
827
|
fb;
|
|
767
|
-
headlingText = '
|
|
828
|
+
headlingText = 'Sign in';
|
|
768
829
|
width = '';
|
|
769
830
|
maxWidth = '';
|
|
770
831
|
margin = '';
|
|
@@ -779,6 +840,20 @@ class SignInComponent {
|
|
|
779
840
|
routerLink = '';
|
|
780
841
|
forgetPasswordClass = '';
|
|
781
842
|
headlingClass = '';
|
|
843
|
+
// button styles
|
|
844
|
+
btnClass = '';
|
|
845
|
+
btnBgColor = '#FFE681';
|
|
846
|
+
btnColor = '';
|
|
847
|
+
btnBorder = '';
|
|
848
|
+
btnBorderRadius = '24px';
|
|
849
|
+
btnPd = '';
|
|
850
|
+
btnText = 'Log in';
|
|
851
|
+
//inputStyles
|
|
852
|
+
inputLabelColor = '';
|
|
853
|
+
inputBgColor = 'transparent';
|
|
854
|
+
inputBorder = '1px solid #66666659';
|
|
855
|
+
inputBorderRadius = '12px';
|
|
856
|
+
termsErrorText = 'Please agree to the terms of use and privacy policy.';
|
|
782
857
|
formSubmit = new EventEmitter();
|
|
783
858
|
googleClick = new EventEmitter();
|
|
784
859
|
appleClick = new EventEmitter();
|
|
@@ -829,12 +904,12 @@ class SignInComponent {
|
|
|
829
904
|
'padding': this.pd
|
|
830
905
|
};
|
|
831
906
|
}
|
|
832
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
833
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
907
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignInComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
908
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SignInComponent, selector: "verben-sign-in", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", routerLink: "routerLink", forgetPasswordClass: "forgetPasswordClass", headlingClass: "headlingClass", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsErrorText: "termsErrorText" }, outputs: { formSubmit: "formSubmit", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\"> \n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div> \n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div class=\"pwdWrapper\"> \n <p clas=\"mb-0\"> <a [routerLink]=\"routerLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n </div>\n </div>\n\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 <verben-o-auth \n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n ></verben-o-auth>\n </form>\n </section>\n ", styles: ["a{text-decoration:underline}.flexWrapper{display:flex;flex-direction:column;gap:20px;margin-top:12px}.pwdWrapper{display:flex;justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: i2.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "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: OAuthComponent, selector: "verben-o-auth", outputs: ["googleClick", "appleClick"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
|
|
834
909
|
}
|
|
835
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
910
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignInComponent, decorators: [{
|
|
836
911
|
type: Component,
|
|
837
|
-
args: [{ selector: 'verben-sign-in', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\"> \n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"
|
|
912
|
+
args: [{ selector: 'verben-sign-in', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h2 class=\"{{headlingClass}}\">{{headlingText}}</h2>\n <form [formGroup]=\"loginForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\"> \n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div> \n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <div class=\"pwdWrapper\"> \n <p clas=\"mb-0\"> <a [routerLink]=\"routerLink\" class=\"{{forgetPasswordClass}}\">Forgot password</a></p>\n </div>\n </div>\n\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 <verben-o-auth \n (googleClick)=\"handleGoogleAuth()\"\n (appleClick)=\"handleAppleAuth()\"\n ></verben-o-auth>\n </form>\n </section>\n ", styles: ["a{text-decoration:underline}.flexWrapper{display:flex;flex-direction:column;gap:20px;margin-top:12px}.pwdWrapper{display:flex;justify-content:flex-end}\n"] }]
|
|
838
913
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { headlingText: [{
|
|
839
914
|
type: Input
|
|
840
915
|
}], width: [{
|
|
@@ -865,6 +940,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
865
940
|
type: Input
|
|
866
941
|
}], headlingClass: [{
|
|
867
942
|
type: Input
|
|
943
|
+
}], btnClass: [{
|
|
944
|
+
type: Input
|
|
945
|
+
}], btnBgColor: [{
|
|
946
|
+
type: Input
|
|
947
|
+
}], btnColor: [{
|
|
948
|
+
type: Input
|
|
949
|
+
}], btnBorder: [{
|
|
950
|
+
type: Input
|
|
951
|
+
}], btnBorderRadius: [{
|
|
952
|
+
type: Input
|
|
953
|
+
}], btnPd: [{
|
|
954
|
+
type: Input
|
|
955
|
+
}], btnText: [{
|
|
956
|
+
type: Input
|
|
957
|
+
}], inputLabelColor: [{
|
|
958
|
+
type: Input
|
|
959
|
+
}], inputBgColor: [{
|
|
960
|
+
type: Input
|
|
961
|
+
}], inputBorder: [{
|
|
962
|
+
type: Input
|
|
963
|
+
}], inputBorderRadius: [{
|
|
964
|
+
type: Input
|
|
965
|
+
}], termsErrorText: [{
|
|
966
|
+
type: Input
|
|
868
967
|
}], formSubmit: [{
|
|
869
968
|
type: Output
|
|
870
969
|
}], googleClick: [{
|
|
@@ -874,11 +973,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
874
973
|
}] } });
|
|
875
974
|
|
|
876
975
|
class SignInModule {
|
|
877
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
878
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
879
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
976
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignInModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
977
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: SignInModule, declarations: [SignInComponent], imports: [CommonModule, FormsModule, VerbenaInputModule, VerbenaButtonModule, RouterLink, OAuthModule, ButtonModule, ReactiveFormsModule], exports: [SignInComponent] });
|
|
978
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignInModule, imports: [CommonModule, FormsModule, VerbenaInputModule, VerbenaButtonModule, OAuthModule, ButtonModule, ReactiveFormsModule] });
|
|
880
979
|
}
|
|
881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
980
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignInModule, decorators: [{
|
|
882
981
|
type: NgModule,
|
|
883
982
|
args: [{
|
|
884
983
|
declarations: [SignInComponent],
|
|
@@ -890,6 +989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
890
989
|
class OtpInputComponent {
|
|
891
990
|
fb;
|
|
892
991
|
length = 6;
|
|
992
|
+
otpClass = '';
|
|
893
993
|
otpChange = new EventEmitter();
|
|
894
994
|
otpForm;
|
|
895
995
|
constructor(fb) {
|
|
@@ -938,14 +1038,16 @@ class OtpInputComponent {
|
|
|
938
1038
|
const otp = this.otpArray.value.join('');
|
|
939
1039
|
this.otpChange.emit(otp);
|
|
940
1040
|
}
|
|
941
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
942
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
1041
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OtpInputComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1042
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: OtpInputComponent, selector: "verben-otp-input", inputs: { length: "length", otpClass: "otpClass" }, outputs: { otpChange: "otpChange" }, ngImport: i0, template: "<form [formGroup]=\"otpForm\" >\n <div formArrayName=\"otpArray\" class=\"otp-container\">\n <input\n *ngFor=\"let control of otpArray.controls; let i = index\"\n [id]=\"'otp-input-' + i\"\n class=\"otp-input {{otpClass}}\"\n maxlength=\"1\"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n [formControlName]=\"i\"\n type=\"text\"\n />\n </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"], dependencies: [{ kind: "directive", type: i2$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }] });
|
|
943
1043
|
}
|
|
944
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1044
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OtpInputComponent, decorators: [{
|
|
945
1045
|
type: Component,
|
|
946
|
-
args: [{ selector: 'verben-otp-input', template: "<form [formGroup]=\"otpForm\" >\n <div formArrayName=\"otpArray\" class=\"otp-container\">\n <input\n *ngFor=\"let control of otpArray.controls; let i = index\"\n [id]=\"'otp-input-' + i\"\n class=\"otp-input\"\n maxlength=\"1\"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n [formControlName]=\"i\"\n type=\"text\"\n />\n </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"] }]
|
|
1046
|
+
args: [{ selector: 'verben-otp-input', template: "<form [formGroup]=\"otpForm\" >\n <div formArrayName=\"otpArray\" class=\"otp-container\">\n <input\n *ngFor=\"let control of otpArray.controls; let i = index\"\n [id]=\"'otp-input-' + i\"\n class=\"otp-input {{otpClass}}\"\n maxlength=\"1\"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n [formControlName]=\"i\"\n type=\"text\"\n />\n </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"] }]
|
|
947
1047
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { length: [{
|
|
948
1048
|
type: Input
|
|
1049
|
+
}], otpClass: [{
|
|
1050
|
+
type: Input
|
|
949
1051
|
}], otpChange: [{
|
|
950
1052
|
type: Output
|
|
951
1053
|
}] } });
|
|
@@ -954,6 +1056,7 @@ class TwoFactorAuthOtpComponent {
|
|
|
954
1056
|
fb;
|
|
955
1057
|
customClass = '';
|
|
956
1058
|
headlingClass = '';
|
|
1059
|
+
headlingText = 'Two Factor Authentication';
|
|
957
1060
|
paragraphClass = '';
|
|
958
1061
|
resendClass = '';
|
|
959
1062
|
width = '';
|
|
@@ -966,6 +1069,15 @@ class TwoFactorAuthOtpComponent {
|
|
|
966
1069
|
borderRadius = '24px';
|
|
967
1070
|
textColor = '#333';
|
|
968
1071
|
height = 'auto';
|
|
1072
|
+
length = 6;
|
|
1073
|
+
otpClass = '';
|
|
1074
|
+
btnClass = '';
|
|
1075
|
+
btnBgColor = '#FFE681';
|
|
1076
|
+
btnColor = '';
|
|
1077
|
+
btnBorder = '';
|
|
1078
|
+
btnBorderRadius = '24px';
|
|
1079
|
+
btnPd = '';
|
|
1080
|
+
btnText = 'Submit';
|
|
969
1081
|
otpValue = '';
|
|
970
1082
|
otpForm;
|
|
971
1083
|
buttonClick = new EventEmitter();
|
|
@@ -981,7 +1093,7 @@ class TwoFactorAuthOtpComponent {
|
|
|
981
1093
|
onOtpChange(value) {
|
|
982
1094
|
this.otpForm.get('otpValue')?.setValue(value);
|
|
983
1095
|
}
|
|
984
|
-
|
|
1096
|
+
submitData() {
|
|
985
1097
|
if (this.otpForm.valid) {
|
|
986
1098
|
this.buttonClick.emit(this.otpForm.get('otpValue')?.value);
|
|
987
1099
|
}
|
|
@@ -1003,16 +1115,18 @@ class TwoFactorAuthOtpComponent {
|
|
|
1003
1115
|
'padding': this.pd
|
|
1004
1116
|
};
|
|
1005
1117
|
}
|
|
1006
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1007
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
1118
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthOtpComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1119
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: TwoFactorAuthOtpComponent, selector: "verben-auth-otp", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", resendClass: "resendClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", length: "length", otpClass: "otpClass", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText" }, outputs: { buttonClick: "buttonClick", resend: "resend" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"otpWrapper\"> \n <p class=\"{{paragraphClass}}\">Enter the {{length}} digit code sent to your phone number</p>\n <verben-otp-input \n [length]=\"length\" \n (otpChange)=\"onOtpChange($event)\"\n [otpClass]=\"otpClass\"\n ></verben-otp-input>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n (buttonClick)=\"submitData()\"\n [disabled]=\"!otpForm.valid\"\n ></lib-button>\n <p class=\"resendWrapper\">\n Didn\u2019t get a code?\n <a class=\"{{resendClass}}\" (click)=\"resendOtp()\">Resend</a>\n </p>\n \n</section>", styles: [".otpWrapper{margin-bottom:20px;margin-top:15px}.resendWrapper{margin-top:10px;margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: OtpInputComponent, selector: "verben-otp-input", inputs: ["length", "otpClass"], outputs: ["otpChange"] }] });
|
|
1008
1120
|
}
|
|
1009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1121
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthOtpComponent, decorators: [{
|
|
1010
1122
|
type: Component,
|
|
1011
|
-
args: [{ selector: 'verben-auth-otp', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">
|
|
1123
|
+
args: [{ selector: 'verben-auth-otp', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"otpWrapper\"> \n <p class=\"{{paragraphClass}}\">Enter the {{length}} digit code sent to your phone number</p>\n <verben-otp-input \n [length]=\"length\" \n (otpChange)=\"onOtpChange($event)\"\n [otpClass]=\"otpClass\"\n ></verben-otp-input>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n (buttonClick)=\"submitData()\"\n [disabled]=\"!otpForm.valid\"\n ></lib-button>\n <p class=\"resendWrapper\">\n Didn\u2019t get a code?\n <a class=\"{{resendClass}}\" (click)=\"resendOtp()\">Resend</a>\n </p>\n \n</section>", styles: [".otpWrapper{margin-bottom:20px;margin-top:15px}.resendWrapper{margin-top:10px;margin-bottom:0!important}\n"] }]
|
|
1012
1124
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { customClass: [{
|
|
1013
1125
|
type: Input
|
|
1014
1126
|
}], headlingClass: [{
|
|
1015
1127
|
type: Input
|
|
1128
|
+
}], headlingText: [{
|
|
1129
|
+
type: Input
|
|
1016
1130
|
}], paragraphClass: [{
|
|
1017
1131
|
type: Input
|
|
1018
1132
|
}], resendClass: [{
|
|
@@ -1037,6 +1151,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1037
1151
|
type: Input
|
|
1038
1152
|
}], height: [{
|
|
1039
1153
|
type: Input
|
|
1154
|
+
}], length: [{
|
|
1155
|
+
type: Input
|
|
1156
|
+
}], otpClass: [{
|
|
1157
|
+
type: Input
|
|
1158
|
+
}], btnClass: [{
|
|
1159
|
+
type: Input
|
|
1160
|
+
}], btnBgColor: [{
|
|
1161
|
+
type: Input
|
|
1162
|
+
}], btnColor: [{
|
|
1163
|
+
type: Input
|
|
1164
|
+
}], btnBorder: [{
|
|
1165
|
+
type: Input
|
|
1166
|
+
}], btnBorderRadius: [{
|
|
1167
|
+
type: Input
|
|
1168
|
+
}], btnPd: [{
|
|
1169
|
+
type: Input
|
|
1170
|
+
}], btnText: [{
|
|
1171
|
+
type: Input
|
|
1040
1172
|
}], buttonClick: [{
|
|
1041
1173
|
type: Output
|
|
1042
1174
|
}], resend: [{
|
|
@@ -1044,11 +1176,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1044
1176
|
}] } });
|
|
1045
1177
|
|
|
1046
1178
|
class OtpInputModule {
|
|
1047
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1048
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
1049
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
1179
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OtpInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1180
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: OtpInputModule, declarations: [OtpInputComponent], imports: [CommonModule, FormsModule, VerbenaInputModule, RouterLink, ButtonModule, OAuthModule, ReactiveFormsModule], exports: [OtpInputComponent] });
|
|
1181
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OtpInputModule, imports: [CommonModule, FormsModule, VerbenaInputModule, ButtonModule, OAuthModule, ReactiveFormsModule] });
|
|
1050
1182
|
}
|
|
1051
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OtpInputModule, decorators: [{
|
|
1052
1184
|
type: NgModule,
|
|
1053
1185
|
args: [{
|
|
1054
1186
|
declarations: [OtpInputComponent],
|
|
@@ -1058,11 +1190,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1058
1190
|
}] });
|
|
1059
1191
|
|
|
1060
1192
|
class TwoFactorAuthOtpModule {
|
|
1061
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1062
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
1063
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
1193
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthOtpModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1194
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthOtpModule, declarations: [TwoFactorAuthOtpComponent], imports: [CommonModule, ButtonModule, OtpInputModule, RouterLink, ReactiveFormsModule], exports: [TwoFactorAuthOtpComponent] });
|
|
1195
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthOtpModule, imports: [CommonModule, ButtonModule, OtpInputModule, ReactiveFormsModule] });
|
|
1064
1196
|
}
|
|
1065
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1197
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthOtpModule, decorators: [{
|
|
1066
1198
|
type: NgModule,
|
|
1067
1199
|
args: [{
|
|
1068
1200
|
declarations: [TwoFactorAuthOtpComponent],
|
|
@@ -1074,6 +1206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1074
1206
|
class TwoFactorAuthSetupComponent {
|
|
1075
1207
|
customClass = '';
|
|
1076
1208
|
headlingClass = '';
|
|
1209
|
+
headlingText = 'Set Up Two Factor Authentication';
|
|
1077
1210
|
paragraphClass = '';
|
|
1078
1211
|
buttonClass = '';
|
|
1079
1212
|
width = '';
|
|
@@ -1112,16 +1245,18 @@ class TwoFactorAuthSetupComponent {
|
|
|
1112
1245
|
'padding': this.pd
|
|
1113
1246
|
};
|
|
1114
1247
|
}
|
|
1115
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
1248
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthSetupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: TwoFactorAuthSetupComponent, selector: "verben-two-factor-auth-setup", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", buttonClass: "buttonClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { smsClick: "smsClick", mailClick: "mailClick", skipClick: "skipClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"setUpBtnWrapper\">\n <verbena-button\n svg=\"2fa-mail\"\n [svgHeight]=\"16\"\n [svgWidth]=\"20\"\n text=\"Continue with Mail\"\n bgColor=\"white\"\n textColor=\"#333333\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n (click)=\"continueWithMail()\"\n ></verbena-button>\n <verbena-button\n svg=\"2fa-sms\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with SMS\"\n bgColor=\"white\"\n textColor=\"#333333\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n (click)=\"continueWithSMS()\"\n ></verbena-button>\n <div class=\"iconWrapper\" (click)=\"handleSkip()\"> \n <p class=\"{{paragraphClass}}\">Skip for now</p>\n <verben-svg \n icon=\"skip-forward\"\n [height]=\"24\"\n [width]=\"24\"\n />\n </div>\n</div>\n</section>", styles: [".setUpBtnWrapper{display:flex;flex-direction:column;gap:12px;margin-top:40px}.iconWrapper{display:flex;cursor:pointer;align-items:center;justify-content:end;gap:12px;margin-bottom:50px}.custom-button{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }] });
|
|
1117
1250
|
}
|
|
1118
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthSetupComponent, decorators: [{
|
|
1119
1252
|
type: Component,
|
|
1120
|
-
args: [{ selector: 'verben-two-factor-auth-setup', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">
|
|
1253
|
+
args: [{ selector: 'verben-two-factor-auth-setup', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"setUpBtnWrapper\">\n <verbena-button\n svg=\"2fa-mail\"\n [svgHeight]=\"16\"\n [svgWidth]=\"20\"\n text=\"Continue with Mail\"\n bgColor=\"white\"\n textColor=\"#333333\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n (click)=\"continueWithMail()\"\n ></verbena-button>\n <verbena-button\n svg=\"2fa-sms\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with SMS\"\n bgColor=\"white\"\n textColor=\"#333333\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n (click)=\"continueWithSMS()\"\n ></verbena-button>\n <div class=\"iconWrapper\" (click)=\"handleSkip()\"> \n <p class=\"{{paragraphClass}}\">Skip for now</p>\n <verben-svg \n icon=\"skip-forward\"\n [height]=\"24\"\n [width]=\"24\"\n />\n </div>\n</div>\n</section>", styles: [".setUpBtnWrapper{display:flex;flex-direction:column;gap:12px;margin-top:40px}.iconWrapper{display:flex;cursor:pointer;align-items:center;justify-content:end;gap:12px;margin-bottom:50px}.custom-button{font-weight:500}\n"] }]
|
|
1121
1254
|
}], propDecorators: { customClass: [{
|
|
1122
1255
|
type: Input
|
|
1123
1256
|
}], headlingClass: [{
|
|
1124
1257
|
type: Input
|
|
1258
|
+
}], headlingText: [{
|
|
1259
|
+
type: Input
|
|
1125
1260
|
}], paragraphClass: [{
|
|
1126
1261
|
type: Input
|
|
1127
1262
|
}], buttonClass: [{
|
|
@@ -1155,11 +1290,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1155
1290
|
}] } });
|
|
1156
1291
|
|
|
1157
1292
|
class TwoFactorAuthSetupModule {
|
|
1158
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1159
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
1160
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
1293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthSetupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1294
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthSetupModule, declarations: [TwoFactorAuthSetupComponent], imports: [CommonModule, VerbenaButtonModule, SvgModule], exports: [TwoFactorAuthSetupComponent] });
|
|
1295
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthSetupModule, imports: [CommonModule, VerbenaButtonModule, SvgModule] });
|
|
1161
1296
|
}
|
|
1162
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1297
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthSetupModule, decorators: [{
|
|
1163
1298
|
type: NgModule,
|
|
1164
1299
|
args: [{
|
|
1165
1300
|
declarations: [TwoFactorAuthSetupComponent],
|
|
@@ -1199,10 +1334,10 @@ class MailComponent {
|
|
|
1199
1334
|
'padding': this.pd
|
|
1200
1335
|
};
|
|
1201
1336
|
}
|
|
1202
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1203
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
1337
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1338
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", 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: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }] });
|
|
1204
1339
|
}
|
|
1205
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailComponent, decorators: [{
|
|
1206
1341
|
type: Component,
|
|
1207
1342
|
args: [{ selector: 'verben-mail-message', template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">Your e-mail has been verified!</h3>\n <lib-button \n text=\"Login\" \n buttonClass=\"\"\n (click)=\"goToLogin()\"\n ></lib-button> \n</section>\n" }]
|
|
1208
1343
|
}], propDecorators: { customClass: [{
|
|
@@ -1234,11 +1369,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1234
1369
|
}] } });
|
|
1235
1370
|
|
|
1236
1371
|
class MailModule {
|
|
1237
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1238
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
1239
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
1372
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1373
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: MailModule, declarations: [MailComponent], imports: [CommonModule, FormsModule, RouterLink, ButtonModule], exports: [MailComponent] });
|
|
1374
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailModule, imports: [CommonModule, FormsModule, ButtonModule] });
|
|
1240
1375
|
}
|
|
1241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1376
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailModule, decorators: [{
|
|
1242
1377
|
type: NgModule,
|
|
1243
1378
|
args: [{
|
|
1244
1379
|
declarations: [MailComponent],
|
|
@@ -1288,10 +1423,10 @@ class ForgotPasswordComponent {
|
|
|
1288
1423
|
};
|
|
1289
1424
|
this.onSubmit.emit(data);
|
|
1290
1425
|
}
|
|
1291
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1292
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
1426
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1427
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: ForgotPasswordComponent, selector: "verben-forgot-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor" }, outputs: { onSubmit: "onSubmit" }, ngImport: i0, template: "<div [formGroup]=\"this.forgotPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Email</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Email\" type=\"email\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }] });
|
|
1293
1428
|
}
|
|
1294
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
|
|
1295
1430
|
type: Component,
|
|
1296
1431
|
args: [{ selector: 'verben-forgot-password', template: "<div [formGroup]=\"this.forgotPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Email</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Email\" type=\"email\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"] }]
|
|
1297
1432
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { title: [{
|
|
@@ -1309,19 +1444,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1309
1444
|
}] } });
|
|
1310
1445
|
|
|
1311
1446
|
class ForgotPasswordModule {
|
|
1312
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1313
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
1447
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ForgotPasswordModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1448
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: ForgotPasswordModule, declarations: [ForgotPasswordComponent], imports: [FormsModule,
|
|
1314
1449
|
ReactiveFormsModule,
|
|
1315
1450
|
VerbenaInputModule,
|
|
1316
1451
|
VerbenaButtonModule,
|
|
1317
1452
|
CommonModule], exports: [ForgotPasswordComponent] });
|
|
1318
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
1453
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ForgotPasswordModule, imports: [FormsModule,
|
|
1319
1454
|
ReactiveFormsModule,
|
|
1320
1455
|
VerbenaInputModule,
|
|
1321
1456
|
VerbenaButtonModule,
|
|
1322
1457
|
CommonModule] });
|
|
1323
1458
|
}
|
|
1324
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
1459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ForgotPasswordModule, decorators: [{
|
|
1325
1460
|
type: NgModule,
|
|
1326
1461
|
args: [{
|
|
1327
1462
|
declarations: [ForgotPasswordComponent],
|
|
@@ -1336,6 +1471,446 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1336
1471
|
}]
|
|
1337
1472
|
}] });
|
|
1338
1473
|
|
|
1474
|
+
const columns$1 = [
|
|
1475
|
+
{
|
|
1476
|
+
id: 'createdAt',
|
|
1477
|
+
header: 'Created',
|
|
1478
|
+
accessorKey: 'CreatedAt',
|
|
1479
|
+
},
|
|
1480
|
+
{
|
|
1481
|
+
id: 'name',
|
|
1482
|
+
header: 'Name',
|
|
1483
|
+
accessorKey: 'Name',
|
|
1484
|
+
},
|
|
1485
|
+
{
|
|
1486
|
+
id: 'description',
|
|
1487
|
+
header: 'Description',
|
|
1488
|
+
accessorKey: 'Description',
|
|
1489
|
+
},
|
|
1490
|
+
{
|
|
1491
|
+
id: 'link',
|
|
1492
|
+
header: 'Link',
|
|
1493
|
+
accessorKey: 'Link',
|
|
1494
|
+
},
|
|
1495
|
+
{
|
|
1496
|
+
id: 'logo',
|
|
1497
|
+
header: 'Logo',
|
|
1498
|
+
accessorKey: 'Logo',
|
|
1499
|
+
},
|
|
1500
|
+
{ id: 'actions', header: 'Actions', accessorKey: 'Name' },
|
|
1501
|
+
];
|
|
1502
|
+
|
|
1503
|
+
const mockData$1 = new Array(10).fill(1).map((id, i) => ({
|
|
1504
|
+
Name: `Name ${id + i}`,
|
|
1505
|
+
Id: id,
|
|
1506
|
+
id: id.toString(),
|
|
1507
|
+
Description: `Sign in option ${id + i}`,
|
|
1508
|
+
Logo: `./assets/images/test-logo.png`,
|
|
1509
|
+
Link: `Link ${id + i}`,
|
|
1510
|
+
CreatedAt: new Date(),
|
|
1511
|
+
UpdatedAt: new Date(),
|
|
1512
|
+
State: ObjectState.New,
|
|
1513
|
+
Tenant: `Tenant ${id + i}`,
|
|
1514
|
+
}));
|
|
1515
|
+
|
|
1516
|
+
const baseStyle$1 = {
|
|
1517
|
+
width: '100%',
|
|
1518
|
+
fontFamily: '"Fraunces", serif',
|
|
1519
|
+
fontSize: '125%',
|
|
1520
|
+
whiteSpace: 'nowrap',
|
|
1521
|
+
margin: '0',
|
|
1522
|
+
border: '1px solid #D4A007',
|
|
1523
|
+
borderRadius: '16px',
|
|
1524
|
+
borderCollapse: 'separate',
|
|
1525
|
+
borderSpacing: '0',
|
|
1526
|
+
tableLayout: 'fixed',
|
|
1527
|
+
overflow: 'hidden',
|
|
1528
|
+
rows: {
|
|
1529
|
+
even: {
|
|
1530
|
+
backgroundColor: '#FDFDFD',
|
|
1531
|
+
},
|
|
1532
|
+
odd: {
|
|
1533
|
+
backgroundColor: '#F1F4FB',
|
|
1534
|
+
},
|
|
1535
|
+
height: '68px',
|
|
1536
|
+
},
|
|
1537
|
+
cells: {
|
|
1538
|
+
padding: '0.5rem 1rem',
|
|
1539
|
+
},
|
|
1540
|
+
header: {
|
|
1541
|
+
stickyTop: true,
|
|
1542
|
+
zIndex: 2,
|
|
1543
|
+
backgroundColor: '#EFF2FB',
|
|
1544
|
+
fontWeight: 'bold',
|
|
1545
|
+
textAlign: 'left',
|
|
1546
|
+
padding: '12px 16px',
|
|
1547
|
+
height: '40px',
|
|
1548
|
+
},
|
|
1549
|
+
footer: {
|
|
1550
|
+
stickyBottom: true,
|
|
1551
|
+
zIndex: 2,
|
|
1552
|
+
padding: '3px',
|
|
1553
|
+
},
|
|
1554
|
+
// body: {
|
|
1555
|
+
// background: '#fff',
|
|
1556
|
+
// padding: '4px 5px',
|
|
1557
|
+
// textAlign: 'center',
|
|
1558
|
+
// },
|
|
1559
|
+
// firstColumn: {
|
|
1560
|
+
// stickyLeft: true,
|
|
1561
|
+
// zIndex: 1,
|
|
1562
|
+
// },
|
|
1563
|
+
lastColumn: {
|
|
1564
|
+
stickyRight: true,
|
|
1565
|
+
zIndex: 1,
|
|
1566
|
+
},
|
|
1567
|
+
};
|
|
1568
|
+
|
|
1569
|
+
class SsoFormComponent {
|
|
1570
|
+
fb;
|
|
1571
|
+
isUploading = false;
|
|
1572
|
+
uploadedFileName = null;
|
|
1573
|
+
fileUploadError = null;
|
|
1574
|
+
videoElement;
|
|
1575
|
+
stream;
|
|
1576
|
+
startWebcam(e) {
|
|
1577
|
+
e.stopPropagation();
|
|
1578
|
+
navigator.mediaDevices.getUserMedia({ video: true })
|
|
1579
|
+
.then((stream) => {
|
|
1580
|
+
this.stream = stream;
|
|
1581
|
+
this.videoElement.nativeElement.srcObject = stream;
|
|
1582
|
+
})
|
|
1583
|
+
.catch(error => {
|
|
1584
|
+
console.error('Error accessing webcam:', error);
|
|
1585
|
+
});
|
|
1586
|
+
}
|
|
1587
|
+
set currentData(value) {
|
|
1588
|
+
if (value?.data) {
|
|
1589
|
+
this.form.patchValue({
|
|
1590
|
+
Description: value.data.Description || '',
|
|
1591
|
+
Name: value.data.Name || '',
|
|
1592
|
+
Link: value.data.Link || '',
|
|
1593
|
+
Logo: value.data.Logo || '',
|
|
1594
|
+
});
|
|
1595
|
+
}
|
|
1596
|
+
else {
|
|
1597
|
+
this.form.reset();
|
|
1598
|
+
}
|
|
1599
|
+
}
|
|
1600
|
+
switchView = new EventEmitter();
|
|
1601
|
+
form;
|
|
1602
|
+
constructor(fb) {
|
|
1603
|
+
this.fb = fb;
|
|
1604
|
+
this.form = this.fb.group({
|
|
1605
|
+
Description: [''],
|
|
1606
|
+
Name: [''],
|
|
1607
|
+
Link: [''],
|
|
1608
|
+
Logo: [''],
|
|
1609
|
+
});
|
|
1610
|
+
}
|
|
1611
|
+
ngOnInit() { }
|
|
1612
|
+
onSave() {
|
|
1613
|
+
if (this.form.valid) {
|
|
1614
|
+
// Emit save event with form value
|
|
1615
|
+
console.log('Form saved:', this.form.value);
|
|
1616
|
+
}
|
|
1617
|
+
}
|
|
1618
|
+
onDelete() {
|
|
1619
|
+
// Emit delete event
|
|
1620
|
+
console.log('Delete requested');
|
|
1621
|
+
}
|
|
1622
|
+
onFileSelected(event) {
|
|
1623
|
+
const input = event.target || this.form.controls["Logo"].value;
|
|
1624
|
+
if (input.files && input.files.length > 0) {
|
|
1625
|
+
const file = input.files[0];
|
|
1626
|
+
this.fileUploadError = null;
|
|
1627
|
+
if (!file) {
|
|
1628
|
+
this.isUploading = true;
|
|
1629
|
+
}
|
|
1630
|
+
if (file.size > 5000000) {
|
|
1631
|
+
this.fileUploadError = 'File size exceeds 5MB limit.';
|
|
1632
|
+
this.uploadedFileName = null;
|
|
1633
|
+
this.isUploading = false; // Reset isUploading state
|
|
1634
|
+
}
|
|
1635
|
+
else {
|
|
1636
|
+
this.uploadedFileName = file.name;
|
|
1637
|
+
}
|
|
1638
|
+
}
|
|
1639
|
+
else {
|
|
1640
|
+
this.isUploading = false;
|
|
1641
|
+
}
|
|
1642
|
+
}
|
|
1643
|
+
removeFile() {
|
|
1644
|
+
this.uploadedFileName = null;
|
|
1645
|
+
this.fileUploadError = null;
|
|
1646
|
+
const fileInput = document.getElementById('attachment');
|
|
1647
|
+
if (fileInput) {
|
|
1648
|
+
fileInput.value = '';
|
|
1649
|
+
}
|
|
1650
|
+
}
|
|
1651
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1652
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SsoFormComponent, selector: "lib-sso-form", inputs: { currentData: "currentData" }, outputs: { switchView: "switchView" }, viewQueries: [{ propertyName: "videoElement", first: true, predicate: ["video"], descendants: true, static: true }], ngImport: i0, template: "<form\n [formGroup]=\"form\"\n class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative\"\n>\n <verbena-input\n name=\"Name\"\n label=\"Name:\"\n formControlName=\"Name\"\n />\n <verbena-input\n label=\"Description:\"\n name=\"Description\"\n formControlName=\"Description\"\n />\n <verbena-input\n label=\"Link:\"\n name=\"Link\"\n formControlName=\"Link\"\n/>\n<span class=\"block my-2 \">Logo</span>\n<label [style.background-color]=\"'#f9f9f9'\" class=\"border cursor-pointer border-secondary-200 rounded-md w-full px-4 py-2 flex justify-between\">\n <span *ngIf=\"!uploadedFileName\">{{isUploading?\"uploading...\":\"Upload a photo\"}}</span>\n <span *ngIf=\"fileUploadError\" class=\"error\">{{ fileUploadError }}</span>\n <div *ngIf=\"uploadedFileName\" class=\"flex items-center text-sm gap-2 border border-primary rounded-lg px-3 \">\n <span>{{ uploadedFileName }}</span>\n <button\n [style.color]=\"'black'\"\n type=\"button\"\n (click)=\"removeFile()\"\n >\n ✕\n </button>\n </div>\n <input\nclass=\"sr-only\"\n[type]=\"'file'\"\n label=\"Logo:\"\n name=\"Logo\"\n accept=\"image/png\"\n formControlName=\"Logo\"\n [ngModel]=\"currentData?.data.Logo\"\n (change)=\"onFileSelected($event)\"\n [value]=\"form.controls['Logo'].value\"\n formControlName=\"Logo\"\n/>\n<span class=\"flex gap-2\">\n<span class=\"bg-primary flex w-6 h-6 rounded-md justify-center items-center\">\n <img src=\"./assets/icons/cam.png\" class=\"w-4\"/>\n</span>\n<span class=\"bg-primary flex w-6 h-6 rounded-md justify-center items-center\">\n <img src=\"./assets/icons/file.png\" class=\"w-3\"/>\n</span>\n</span>\n</label>\n\n <!-- buttons -->\n <div\n class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute\"\n style=\"\n display: flex;\n justify-content: space-between;\n position: absolute;\n padding: 8px 12px;\n right: 0;\n left: 0;\n bottom: 32;\n \"\n >\n <!-- <verbena-button\n text=\"Delete\"\n class=\"bg-secondary-200 text-[black]\"\n (click)=\"onDelete()\"\n />\n <verbena-button\n text=\"Save\"\n class=\"bg-primary text-[black]\"\n (click)=\"onSave()\"\n />\n\n <verbena-button\n text=\"Secondary Button\"\n styleType=\"secondary\"\n ></verbena-button> -->\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n [bgColor]=\"'#999999'\"\n [textColor]=\"'#404040'\"\n borderRadius=\"10px\"\n ></verbena-button>\n <verbena-button\n (click)=\"switchView.emit()\"\n text=\"Switch To Table\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n <verbena-button\n text=\"Save\"\n bgColor=\"#28a745\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n [bgColor]=\"'#FFE681'\"\n width=\"114px\"\n height=\"39px\"\n ></verbena-button>\n </div>\n</form>\n", styles: [".link::placeholder{color:red}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "component", type: i2.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"] }] });
|
|
1653
|
+
}
|
|
1654
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoFormComponent, decorators: [{
|
|
1655
|
+
type: Component,
|
|
1656
|
+
args: [{ selector: 'lib-sso-form', template: "<form\n [formGroup]=\"form\"\n class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative\"\n>\n <verbena-input\n name=\"Name\"\n label=\"Name:\"\n formControlName=\"Name\"\n />\n <verbena-input\n label=\"Description:\"\n name=\"Description\"\n formControlName=\"Description\"\n />\n <verbena-input\n label=\"Link:\"\n name=\"Link\"\n formControlName=\"Link\"\n/>\n<span class=\"block my-2 \">Logo</span>\n<label [style.background-color]=\"'#f9f9f9'\" class=\"border cursor-pointer border-secondary-200 rounded-md w-full px-4 py-2 flex justify-between\">\n <span *ngIf=\"!uploadedFileName\">{{isUploading?\"uploading...\":\"Upload a photo\"}}</span>\n <span *ngIf=\"fileUploadError\" class=\"error\">{{ fileUploadError }}</span>\n <div *ngIf=\"uploadedFileName\" class=\"flex items-center text-sm gap-2 border border-primary rounded-lg px-3 \">\n <span>{{ uploadedFileName }}</span>\n <button\n [style.color]=\"'black'\"\n type=\"button\"\n (click)=\"removeFile()\"\n >\n ✕\n </button>\n </div>\n <input\nclass=\"sr-only\"\n[type]=\"'file'\"\n label=\"Logo:\"\n name=\"Logo\"\n accept=\"image/png\"\n formControlName=\"Logo\"\n [ngModel]=\"currentData?.data.Logo\"\n (change)=\"onFileSelected($event)\"\n [value]=\"form.controls['Logo'].value\"\n formControlName=\"Logo\"\n/>\n<span class=\"flex gap-2\">\n<span class=\"bg-primary flex w-6 h-6 rounded-md justify-center items-center\">\n <img src=\"./assets/icons/cam.png\" class=\"w-4\"/>\n</span>\n<span class=\"bg-primary flex w-6 h-6 rounded-md justify-center items-center\">\n <img src=\"./assets/icons/file.png\" class=\"w-3\"/>\n</span>\n</span>\n</label>\n\n <!-- buttons -->\n <div\n class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute\"\n style=\"\n display: flex;\n justify-content: space-between;\n position: absolute;\n padding: 8px 12px;\n right: 0;\n left: 0;\n bottom: 32;\n \"\n >\n <!-- <verbena-button\n text=\"Delete\"\n class=\"bg-secondary-200 text-[black]\"\n (click)=\"onDelete()\"\n />\n <verbena-button\n text=\"Save\"\n class=\"bg-primary text-[black]\"\n (click)=\"onSave()\"\n />\n\n <verbena-button\n text=\"Secondary Button\"\n styleType=\"secondary\"\n ></verbena-button> -->\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Delete\"\n [bgColor]=\"'#999999'\"\n [textColor]=\"'#404040'\"\n borderRadius=\"10px\"\n ></verbena-button>\n <verbena-button\n (click)=\"switchView.emit()\"\n text=\"Switch To Table\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n <verbena-button\n text=\"Save\"\n bgColor=\"#28a745\"\n textColor=\"#404040\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n [bgColor]=\"'#FFE681'\"\n width=\"114px\"\n height=\"39px\"\n ></verbena-button>\n </div>\n</form>\n", styles: [".link::placeholder{color:red}\n"] }]
|
|
1657
|
+
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { videoElement: [{
|
|
1658
|
+
type: ViewChild,
|
|
1659
|
+
args: ['video', { static: true }]
|
|
1660
|
+
}], currentData: [{
|
|
1661
|
+
type: Input
|
|
1662
|
+
}], switchView: [{
|
|
1663
|
+
type: Output
|
|
1664
|
+
}] } });
|
|
1665
|
+
|
|
1666
|
+
class SsoComponent {
|
|
1667
|
+
cardDataView;
|
|
1668
|
+
dataView;
|
|
1669
|
+
columns = columns$1;
|
|
1670
|
+
data = mockData$1;
|
|
1671
|
+
styles = baseStyle$1;
|
|
1672
|
+
currentData = null;
|
|
1673
|
+
isGridView = true;
|
|
1674
|
+
selected = null;
|
|
1675
|
+
cardData = mockData$1.map(({ Name, Description, Link, Logo }) => ({
|
|
1676
|
+
selected: false,
|
|
1677
|
+
title: Name,
|
|
1678
|
+
data: { Name, Description, Link, Logo },
|
|
1679
|
+
body: [
|
|
1680
|
+
// { title: 'Name', value: Name??'' },
|
|
1681
|
+
{ title: 'Description', value: Description ?? '' },
|
|
1682
|
+
// { title: 'Logo', value: Logo ?? '' },
|
|
1683
|
+
// { title: 'Link', value: Link ?? '' },
|
|
1684
|
+
],
|
|
1685
|
+
children: [],
|
|
1686
|
+
}));
|
|
1687
|
+
openDetailView(name) {
|
|
1688
|
+
const cardItem = this.getCardDataByMailAddress(name);
|
|
1689
|
+
if (cardItem && this.cardDataView) {
|
|
1690
|
+
this.dataView.toggleView();
|
|
1691
|
+
this.cardData.forEach((item) => {
|
|
1692
|
+
item.selected = false;
|
|
1693
|
+
if (item.children) {
|
|
1694
|
+
item.children.forEach((child) => (child.selected = false));
|
|
1695
|
+
}
|
|
1696
|
+
});
|
|
1697
|
+
cardItem.selected = true;
|
|
1698
|
+
this.currentData = this.cardDataView.onItemClick(cardItem);
|
|
1699
|
+
}
|
|
1700
|
+
}
|
|
1701
|
+
getCardDataByMailAddress(name) {
|
|
1702
|
+
return this.cardData.find(({ data }) => data.Name === name);
|
|
1703
|
+
}
|
|
1704
|
+
onViewChange(isGridView) {
|
|
1705
|
+
this.isGridView = isGridView;
|
|
1706
|
+
// Reset selection when switching views
|
|
1707
|
+
if (this.currentData) {
|
|
1708
|
+
this.cardDataView?.clearData();
|
|
1709
|
+
this.currentData = null;
|
|
1710
|
+
}
|
|
1711
|
+
console.log('SELECTED', this.selected);
|
|
1712
|
+
if (this.selected) {
|
|
1713
|
+
this.cardDataView.onItemClick(this.selected);
|
|
1714
|
+
}
|
|
1715
|
+
}
|
|
1716
|
+
openFormView(index) {
|
|
1717
|
+
const item = this.cardData[index];
|
|
1718
|
+
console.log('ITEM = ', item);
|
|
1719
|
+
}
|
|
1720
|
+
handleExport(exportedData) {
|
|
1721
|
+
console.log('Exported data:', exportedData);
|
|
1722
|
+
this.downloadCSV(exportedData);
|
|
1723
|
+
}
|
|
1724
|
+
/**
|
|
1725
|
+
*
|
|
1726
|
+
* @param data Simple csv export for testing
|
|
1727
|
+
*/
|
|
1728
|
+
downloadCSV(data) {
|
|
1729
|
+
const headers = Object.keys(data[0]);
|
|
1730
|
+
const csvContent = [
|
|
1731
|
+
headers.join(','),
|
|
1732
|
+
...data.map((row) => headers.map((header) => row[header]).join(',')),
|
|
1733
|
+
].join('\n');
|
|
1734
|
+
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
|
1735
|
+
const link = document.createElement('a');
|
|
1736
|
+
if (link.download !== undefined) {
|
|
1737
|
+
const url = URL.createObjectURL(blob);
|
|
1738
|
+
link.setAttribute('href', url);
|
|
1739
|
+
link.setAttribute('download', 'export.csv');
|
|
1740
|
+
link.style.visibility = 'hidden';
|
|
1741
|
+
document.body.appendChild(link);
|
|
1742
|
+
link.click();
|
|
1743
|
+
document.body.removeChild(link);
|
|
1744
|
+
}
|
|
1745
|
+
}
|
|
1746
|
+
onSelectionChange(selectedRows) {
|
|
1747
|
+
console.log('Selection changed:', selectedRows);
|
|
1748
|
+
// Handle the selection change
|
|
1749
|
+
}
|
|
1750
|
+
/**
|
|
1751
|
+
* Copied over from card view doc until I understand usage
|
|
1752
|
+
*/
|
|
1753
|
+
selectedColumnCount = 0;
|
|
1754
|
+
selectedFilterTableCount = 0;
|
|
1755
|
+
isOPen = true;
|
|
1756
|
+
selectedSortCount = 0;
|
|
1757
|
+
showColumn = false;
|
|
1758
|
+
showSort = false;
|
|
1759
|
+
selectedAll = false;
|
|
1760
|
+
visibleColumns = columns$1.map((col) => ({
|
|
1761
|
+
checked: false,
|
|
1762
|
+
name: typeof col.header === 'string' ? col.header : col.id,
|
|
1763
|
+
type: DataFilterType.Bool,
|
|
1764
|
+
}));
|
|
1765
|
+
filterArray = [
|
|
1766
|
+
{
|
|
1767
|
+
name: 'Name',
|
|
1768
|
+
type: DataFilterType.String,
|
|
1769
|
+
checked: false,
|
|
1770
|
+
},
|
|
1771
|
+
{
|
|
1772
|
+
name: 'Description',
|
|
1773
|
+
type: DataFilterType.String,
|
|
1774
|
+
checked: false,
|
|
1775
|
+
},
|
|
1776
|
+
{
|
|
1777
|
+
name: 'Logo',
|
|
1778
|
+
type: DataFilterType.String,
|
|
1779
|
+
checked: false,
|
|
1780
|
+
},
|
|
1781
|
+
{
|
|
1782
|
+
name: 'Link',
|
|
1783
|
+
type: DataFilterType.String,
|
|
1784
|
+
checked: false,
|
|
1785
|
+
},
|
|
1786
|
+
{
|
|
1787
|
+
name: 'CreatedAt',
|
|
1788
|
+
type: DataFilterType.Date,
|
|
1789
|
+
checked: false,
|
|
1790
|
+
},
|
|
1791
|
+
];
|
|
1792
|
+
sortOptions = [
|
|
1793
|
+
{
|
|
1794
|
+
name: 'Name',
|
|
1795
|
+
type: DataFilterType.String,
|
|
1796
|
+
checked: false,
|
|
1797
|
+
},
|
|
1798
|
+
{
|
|
1799
|
+
name: 'Description',
|
|
1800
|
+
type: DataFilterType.String,
|
|
1801
|
+
checked: false,
|
|
1802
|
+
},
|
|
1803
|
+
{
|
|
1804
|
+
name: 'Link',
|
|
1805
|
+
type: DataFilterType.String,
|
|
1806
|
+
checked: false,
|
|
1807
|
+
},
|
|
1808
|
+
{
|
|
1809
|
+
name: 'Logo',
|
|
1810
|
+
type: DataFilterType.String,
|
|
1811
|
+
checked: false,
|
|
1812
|
+
},
|
|
1813
|
+
{
|
|
1814
|
+
name: 'CreatedAt',
|
|
1815
|
+
type: DataFilterType.Date,
|
|
1816
|
+
checked: false,
|
|
1817
|
+
},
|
|
1818
|
+
];
|
|
1819
|
+
clearData() {
|
|
1820
|
+
this.currentData = {};
|
|
1821
|
+
}
|
|
1822
|
+
loadMore() {
|
|
1823
|
+
this.cardData = this.cardData.concat(this.cardData);
|
|
1824
|
+
}
|
|
1825
|
+
onColumnChange(event) {
|
|
1826
|
+
this.showColumn = event;
|
|
1827
|
+
}
|
|
1828
|
+
onSortChange(event) {
|
|
1829
|
+
this.showSort = event;
|
|
1830
|
+
console.log(event);
|
|
1831
|
+
}
|
|
1832
|
+
onColumnsUpdated(updatedColumns) {
|
|
1833
|
+
this.onColumnChange(false);
|
|
1834
|
+
console.log(updatedColumns);
|
|
1835
|
+
this.selectedColumnCount = updatedColumns.length;
|
|
1836
|
+
}
|
|
1837
|
+
onSortUpdated(updatedSorts) {
|
|
1838
|
+
this.onSortChange(false);
|
|
1839
|
+
this.selectedSortCount = updatedSorts.length;
|
|
1840
|
+
console.log(updatedSorts);
|
|
1841
|
+
}
|
|
1842
|
+
onStateChange(event) {
|
|
1843
|
+
console.log(`State changed for ${event.key}:`, event.value);
|
|
1844
|
+
}
|
|
1845
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1846
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: SsoComponent, selector: "lib-sso", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div grid-content>\n <lib-data-table\n [data]=\"data\"\n [columns]=\"columns\"\n [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n <ng-container libColumn=\"createdAt\">\n <ng-template #cell let-value>\n {{ value | date }}\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"logo\">\n <ng-template #cell let-value>\n <img class=\"w-10\" [src]=\"value\"/>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"actions\">\n <ng-template #cell let-value let-deleteRow let-rowIndex>\n <div class=\"flex space-x-8\" style=\"display: flex; gap: 24px\">\n <verben-svg\n (click)=\"openDetailView(value)\"\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n class=\"cursor-pointer\"\n ></verben-svg>\n <!-- <button (click)=\"openDetailView(value)\">Open</button>\n <button (click)=\"selected = cardData[rowIndex]; vdv.toggleView()\">\n Switch\n </button> -->\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"deleteRow()\"\n class=\"cursor-pointer\"\n ></verben-svg>\n </div>\n </ng-template>\n <ng-template #header>\n <strong>Actions</strong>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div list-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n (loadMoreClick)=\"loadMore()\"\n #vdcv\n dataId=\"Link\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"20px\"\n >\n <verben-left-card-data-view class=\"\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"Link\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"cardData\"\n >\n <ng-template #card let-item>\n <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n <verben-svg\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"vlcd.showChildren(item)\"\n [ngClass]=\"vlcd.showToggle(item) ? 'visible' : 'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div\n (click)=\"currentData = vdcv.onItemClick(item)\"\n class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n >\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"flex flex-col py-2 px-4 w-full\">\n <div class=\"flex\">\n <span class=\"font-bold text-sm\">{{ item.title }}</span>\n </div>\n @for (ciItem of item.body; track ciItem.value) {\n <div class=\"flex items-center justify-between gap-2\"> \n <div>\n <span class=\"text-muted font-light text-xs\"\n >{{ ciItem.title }}:</span\n >\n <span class=\"text-black text-xs font-semibold\">{{ ciItem.value }}</span>\n </div>\n <img class=\"w-12\" [alt]=\"ciItem.title\" [src]=\"item.data.Logo\"/>\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n\n <verben-right-card-data-view>\n <ng-template #parent>\n <lib-sso-form\n [currentData]=\"currentData\"\n (switchView)=\"vdv.toggleView()\"\n ></lib-sso-form>\n </ng-template>\n </verben-right-card-data-view>\n\n <verben-card-data-view-footer class=\"float-right\">\n <div class=\"flex gap-2\">\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\n </div>\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n <div column-content>\n <verben-visible-column\n (columnsUpdated)=\"onColumnsUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"\n ></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"420px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"\n ></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table\n (selectedOptions)=\"onSortUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"\n ></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.bg-secondary-200{background-color:#e8eaf1}.flex-col{flex-direction:column}.items-center{align-items:center}.bg-primary{background-color:#d4a007}.border-primary{border:1px solid #d4a007}.rounded-lg{border-radius:20px}.w-3{width:6px}.rounded-tr-none{border-top-right-radius:0}.rounded-br-none{border-bottom-right-radius:0}.bg-secondary-100{background-color:#8080800e}.bg-secondary{background-color:#e8eaf1}.p-2{padding:6px}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "gridIcon", "listIcon", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "exportTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected"], outputs: ["viewChange", "stateChange"] }, { kind: "component", type: i2.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied"] }, { kind: "component", type: i2.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions"] }, { kind: "component", type: i2.DataExportComponent, selector: "lib-data-export", inputs: ["data"], outputs: ["exportDataEvent"] }, { kind: "component", type: i2.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth"], outputs: ["columnsUpdated"] }, { kind: "component", type: i2.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i2.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i2.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i2.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i2.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: SsoFormComponent, selector: "lib-sso-form", inputs: ["currentData"], outputs: ["switchView"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
|
|
1847
|
+
}
|
|
1848
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoComponent, decorators: [{
|
|
1849
|
+
type: Component,
|
|
1850
|
+
args: [{ selector: 'lib-sso', template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div grid-content>\n <lib-data-table\n [data]=\"data\"\n [columns]=\"columns\"\n [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n <ng-container libColumn=\"createdAt\">\n <ng-template #cell let-value>\n {{ value | date }}\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"logo\">\n <ng-template #cell let-value>\n <img class=\"w-10\" [src]=\"value\"/>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"actions\">\n <ng-template #cell let-value let-deleteRow let-rowIndex>\n <div class=\"flex space-x-8\" style=\"display: flex; gap: 24px\">\n <verben-svg\n (click)=\"openDetailView(value)\"\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#3479E9\"\n fill=\"white\"\n class=\"cursor-pointer\"\n ></verben-svg>\n <!-- <button (click)=\"openDetailView(value)\">Open</button>\n <button (click)=\"selected = cardData[rowIndex]; vdv.toggleView()\">\n Switch\n </button> -->\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n stroke=\"#E20000\"\n (click)=\"deleteRow()\"\n class=\"cursor-pointer\"\n ></verben-svg>\n </div>\n </ng-template>\n <ng-template #header>\n <strong>Actions</strong>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div list-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n (loadMoreClick)=\"loadMore()\"\n #vdcv\n dataId=\"Link\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"20px\"\n >\n <verben-left-card-data-view class=\"\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"Link\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"cardData\"\n >\n <ng-template #card let-item>\n <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n <verben-svg\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"vlcd.showChildren(item)\"\n [ngClass]=\"vlcd.showToggle(item) ? 'visible' : 'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div\n (click)=\"currentData = vdcv.onItemClick(item)\"\n class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n >\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"flex flex-col py-2 px-4 w-full\">\n <div class=\"flex\">\n <span class=\"font-bold text-sm\">{{ item.title }}</span>\n </div>\n @for (ciItem of item.body; track ciItem.value) {\n <div class=\"flex items-center justify-between gap-2\"> \n <div>\n <span class=\"text-muted font-light text-xs\"\n >{{ ciItem.title }}:</span\n >\n <span class=\"text-black text-xs font-semibold\">{{ ciItem.value }}</span>\n </div>\n <img class=\"w-12\" [alt]=\"ciItem.title\" [src]=\"item.data.Logo\"/>\n </div>\n }\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n\n <verben-right-card-data-view>\n <ng-template #parent>\n <lib-sso-form\n [currentData]=\"currentData\"\n (switchView)=\"vdv.toggleView()\"\n ></lib-sso-form>\n </ng-template>\n </verben-right-card-data-view>\n\n <verben-card-data-view-footer class=\"float-right\">\n <div class=\"flex gap-2\">\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\n </div>\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n <div column-content>\n <verben-visible-column\n (columnsUpdated)=\"onColumnsUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"\n ></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"420px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"\n ></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table\n (selectedOptions)=\"onSortUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"\n ></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n</div>\n", styles: [".flex{display:flex}.w-full{width:100%}.bg-secondary-200{background-color:#e8eaf1}.flex-col{flex-direction:column}.items-center{align-items:center}.bg-primary{background-color:#d4a007}.border-primary{border:1px solid #d4a007}.rounded-lg{border-radius:20px}.w-3{width:6px}.rounded-tr-none{border-top-right-radius:0}.rounded-br-none{border-bottom-right-radius:0}.bg-secondary-100{background-color:#8080800e}.bg-secondary{background-color:#e8eaf1}.p-2{padding:6px}\n"] }]
|
|
1851
|
+
}], propDecorators: { cardDataView: [{
|
|
1852
|
+
type: ViewChild,
|
|
1853
|
+
args: ['vdcv']
|
|
1854
|
+
}], dataView: [{
|
|
1855
|
+
type: ViewChild,
|
|
1856
|
+
args: ['vdv']
|
|
1857
|
+
}] } });
|
|
1858
|
+
|
|
1859
|
+
class SsoModule {
|
|
1860
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1861
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: SsoModule, declarations: [SsoComponent, SsoFormComponent], imports: [CommonModule,
|
|
1862
|
+
FormsModule,
|
|
1863
|
+
ReactiveFormsModule,
|
|
1864
|
+
DataViewModule,
|
|
1865
|
+
TableFilterModule,
|
|
1866
|
+
SortTableModule,
|
|
1867
|
+
DataExportModule,
|
|
1868
|
+
VisibleColumnModule,
|
|
1869
|
+
VerbenaButtonModule,
|
|
1870
|
+
CardDataViewModule,
|
|
1871
|
+
VerbenaInputModule,
|
|
1872
|
+
SvgModule,
|
|
1873
|
+
VerbenaTextareaModule,
|
|
1874
|
+
DataTableModule], exports: [SsoComponent] });
|
|
1875
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoModule, imports: [CommonModule,
|
|
1876
|
+
FormsModule,
|
|
1877
|
+
ReactiveFormsModule,
|
|
1878
|
+
DataViewModule,
|
|
1879
|
+
TableFilterModule,
|
|
1880
|
+
SortTableModule,
|
|
1881
|
+
DataExportModule,
|
|
1882
|
+
VisibleColumnModule,
|
|
1883
|
+
VerbenaButtonModule,
|
|
1884
|
+
CardDataViewModule,
|
|
1885
|
+
VerbenaInputModule,
|
|
1886
|
+
SvgModule,
|
|
1887
|
+
VerbenaTextareaModule,
|
|
1888
|
+
DataTableModule] });
|
|
1889
|
+
}
|
|
1890
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoModule, decorators: [{
|
|
1891
|
+
type: NgModule,
|
|
1892
|
+
args: [{
|
|
1893
|
+
declarations: [SsoComponent, SsoFormComponent],
|
|
1894
|
+
imports: [
|
|
1895
|
+
CommonModule,
|
|
1896
|
+
FormsModule,
|
|
1897
|
+
ReactiveFormsModule,
|
|
1898
|
+
DataViewModule,
|
|
1899
|
+
TableFilterModule,
|
|
1900
|
+
SortTableModule,
|
|
1901
|
+
DataExportModule,
|
|
1902
|
+
VisibleColumnModule,
|
|
1903
|
+
VerbenaButtonModule,
|
|
1904
|
+
CardDataViewModule,
|
|
1905
|
+
VerbenaInputModule,
|
|
1906
|
+
SvgModule,
|
|
1907
|
+
VerbenaTextareaModule,
|
|
1908
|
+
DataTableModule,
|
|
1909
|
+
],
|
|
1910
|
+
exports: [SsoComponent],
|
|
1911
|
+
}]
|
|
1912
|
+
}] });
|
|
1913
|
+
|
|
1339
1914
|
const columns = [
|
|
1340
1915
|
{
|
|
1341
1916
|
id: 'createdAt',
|
|
@@ -1360,14 +1935,6 @@ const columns = [
|
|
|
1360
1935
|
{ id: 'actions', header: 'Actions', accessorKey: 'MailAddress' },
|
|
1361
1936
|
];
|
|
1362
1937
|
|
|
1363
|
-
var ObjectState;
|
|
1364
|
-
(function (ObjectState) {
|
|
1365
|
-
ObjectState["New"] = "New";
|
|
1366
|
-
ObjectState["Changed"] = "Changed";
|
|
1367
|
-
ObjectState["Unchanged"] = "Unchanged";
|
|
1368
|
-
ObjectState["Removed"] = "Removed";
|
|
1369
|
-
})(ObjectState || (ObjectState = {}));
|
|
1370
|
-
|
|
1371
1938
|
var UserAccessRequestStatus;
|
|
1372
1939
|
(function (UserAccessRequestStatus) {
|
|
1373
1940
|
UserAccessRequestStatus[UserAccessRequestStatus["Pending"] = 0] = "Pending";
|
|
@@ -1384,11 +1951,11 @@ const mockData = new Array(10)
|
|
|
1384
1951
|
.fill(1)
|
|
1385
1952
|
.map((id, i) => ({
|
|
1386
1953
|
Name: `User ${id + i}`,
|
|
1387
|
-
Id: id,
|
|
1388
|
-
id: id.toString(),
|
|
1954
|
+
Id: id + i,
|
|
1955
|
+
id: (id + i).toString(),
|
|
1389
1956
|
MailAddress: `user${id + i}@mail.com`,
|
|
1390
1957
|
PhoneNumber: `+23480000000${id + i}`,
|
|
1391
|
-
Status: randomEnum(UserAccessRequestStatus),
|
|
1958
|
+
Status: randomEnum$1(UserAccessRequestStatus),
|
|
1392
1959
|
RoleID: roles[Math.floor(Math.random() * roles.length)].id,
|
|
1393
1960
|
Password: '1234567',
|
|
1394
1961
|
ExpireOn: new Date(),
|
|
@@ -1400,7 +1967,7 @@ const mockData = new Array(10)
|
|
|
1400
1967
|
State: ObjectState.New,
|
|
1401
1968
|
Tenant: `Tenant${id + i}`,
|
|
1402
1969
|
}));
|
|
1403
|
-
function randomEnum(anEnum) {
|
|
1970
|
+
function randomEnum$1(anEnum) {
|
|
1404
1971
|
const enumValues = Object.values(anEnum);
|
|
1405
1972
|
const randomIndex = Math.floor(Math.random() * enumValues.length);
|
|
1406
1973
|
return enumValues[randomIndex];
|
|
@@ -1459,6 +2026,52 @@ const baseStyle = {
|
|
|
1459
2026
|
},
|
|
1460
2027
|
};
|
|
1461
2028
|
|
|
2029
|
+
const SERVICE_CONFIG = new InjectionToken('ServiceConfig');
|
|
2030
|
+
class UserRequestApprovalService {
|
|
2031
|
+
// protected readonly baseUrl: string;
|
|
2032
|
+
resourceEndpoint;
|
|
2033
|
+
roles = [
|
|
2034
|
+
{ id: 'admin', name: 'Admin' },
|
|
2035
|
+
{ id: 'manager', name: 'Manager' },
|
|
2036
|
+
{ id: 'staff', name: 'Staff' },
|
|
2037
|
+
];
|
|
2038
|
+
constructor() {
|
|
2039
|
+
// this.baseUrl = environment.serviceUrl;
|
|
2040
|
+
// this.resourceEndpoint = config.resourceEndpoint;
|
|
2041
|
+
this.resourceEndpoint = '';
|
|
2042
|
+
}
|
|
2043
|
+
getMockUserRequests() {
|
|
2044
|
+
return new Array(10).fill(1).map((id, i) => ({
|
|
2045
|
+
Name: `User ${id + i}`,
|
|
2046
|
+
Id: id + i,
|
|
2047
|
+
id: (id + i).toString(),
|
|
2048
|
+
MailAddress: `user${id + i}@mail.com`,
|
|
2049
|
+
PhoneNumber: `+23480000000${id + i}`,
|
|
2050
|
+
Status: randomEnum(UserAccessRequestStatus),
|
|
2051
|
+
RoleID: this.roles[Math.floor(Math.random() * this.roles.length)].id,
|
|
2052
|
+
Password: '1234567',
|
|
2053
|
+
ExpireOn: new Date(),
|
|
2054
|
+
IsSeeded: false,
|
|
2055
|
+
OTPExpireOn: new Date(),
|
|
2056
|
+
Tenants: [],
|
|
2057
|
+
CreatedAt: new Date(),
|
|
2058
|
+
UpdatedAt: new Date(),
|
|
2059
|
+
State: ObjectState.New,
|
|
2060
|
+
Tenant: `Tenant${id + i}`,
|
|
2061
|
+
}));
|
|
2062
|
+
}
|
|
2063
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestApprovalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2064
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestApprovalService });
|
|
2065
|
+
}
|
|
2066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestApprovalService, decorators: [{
|
|
2067
|
+
type: Injectable
|
|
2068
|
+
}], ctorParameters: () => [] });
|
|
2069
|
+
function randomEnum(anEnum) {
|
|
2070
|
+
const enumValues = Object.values(anEnum);
|
|
2071
|
+
const randomIndex = Math.floor(Math.random() * enumValues.length);
|
|
2072
|
+
return enumValues[randomIndex];
|
|
2073
|
+
}
|
|
2074
|
+
|
|
1462
2075
|
class UserRequestFormComponent {
|
|
1463
2076
|
fb;
|
|
1464
2077
|
set currentData(value) {
|
|
@@ -1475,7 +2088,11 @@ class UserRequestFormComponent {
|
|
|
1475
2088
|
}
|
|
1476
2089
|
switchView = new EventEmitter();
|
|
1477
2090
|
form;
|
|
1478
|
-
roles =
|
|
2091
|
+
roles = [
|
|
2092
|
+
{ id: 'admin', name: 'Admin' },
|
|
2093
|
+
{ id: 'manager', name: 'Manager' },
|
|
2094
|
+
{ id: 'staff', name: 'Staff' },
|
|
2095
|
+
];
|
|
1479
2096
|
constructor(fb) {
|
|
1480
2097
|
this.fb = fb;
|
|
1481
2098
|
this.form = this.fb.group({
|
|
@@ -1496,12 +2113,12 @@ class UserRequestFormComponent {
|
|
|
1496
2113
|
// Emit delete event
|
|
1497
2114
|
console.log('Delete requested');
|
|
1498
2115
|
}
|
|
1499
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1500
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
2116
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
2117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserRequestFormComponent, selector: "lib-user-request-form", inputs: { currentData: "currentData" }, outputs: { switchView: "switchView" }, ngImport: i0, template: "<form\n [formGroup]=\"form\"\n class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n <verbena-input\n name=\"MailAddress\"\n label=\"Mail Address:\"\n formControlName=\"MailAddress\"\n />\n <verbena-input label=\"Name:\" name=\"Name\" type=\"text\" formControlName=\"Name\" />\n <verbena-input\n label=\"Phone Number:\"\n name=\"PhoneNumber\"\n type=\"tel\"\n formControlName=\"PhoneNumber\"\n />\n\n <div class=\"space-y-1\">\n <label for=\"role\">Role</label>\n\n <verben-drop-down\n label=\"Role\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n [filter]=\"true\"\n [showClear]=\"true\"\n placeholder=\"\"\n [(options)]=\"roles\"\n id=\"role\"\n optionLabel=\"name\"\n optionValue=\"id\"\n formControlName=\"RoleId\"\n class=\"form-control\"\n >\n </verben-drop-down>\n </div>\n\n <!-- buttons -->\n <div\n class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute\"\n style=\"\n display: flex;\n justify-content: space-between;\n position: absolute;\n padding: 8px 12px;\n right: 0;\n left: 0;\n bottom: 32;\n \"\n >\n <!-- <verbena-button\n text=\"Delete\"\n class=\"bg-secondary-200 text-[black]\"\n (click)=\"onDelete()\"\n />\n <verbena-button\n text=\"Save\"\n class=\"bg-primary text-[black]\"\n (click)=\"onSave()\"\n />\n\n <verbena-button\n text=\"Secondary Button\"\n styleType=\"secondary\"\n ></verbena-button> -->\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Reject\"\n styleType=\"danger\"\n borderRadius=\"10px\"\n ></verbena-button>\n <verbena-button\n (click)=\"switchView.emit()\"\n text=\"Switch To Table\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n <verbena-button\n text=\"Approve\"\n bgColor=\"#28a745\"\n textColor=\"white\"\n border=\"1px solid #28a745\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n ></verbena-button>\n </div>\n</form>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "component", type: i2.DropDownComponent, selector: "verben-drop-down", inputs: ["options", "width", "showHorizontalLine", "horizontalLineColor", "optionLabel", "optionSubLabel", "optionValue", "placeholder", "invalidMessage", "errorPosition", "loadMoreCaption", "display", "showClear", "lazyLoad", "styleClass", "group", "multiselect", "filter", "avoidDuplication", "filterBy", "debounceTime", "minChar", "disabled", "required", "load", "asyncLabel", "search"], outputs: ["optionsChange", "onChange", "onClick", "onClear"] }] });
|
|
1501
2118
|
}
|
|
1502
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestFormComponent, decorators: [{
|
|
1503
2120
|
type: Component,
|
|
1504
|
-
args: [{ selector: 'lib-user-request-form', template: "<form\n [formGroup]=\"form\"\n class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n <verbena-input\n name=\"MailAddress\"\n label=\"Mail Address:\"\n formControlName=\"MailAddress\"\n
|
|
2121
|
+
args: [{ selector: 'lib-user-request-form', template: "<form\n [formGroup]=\"form\"\n class=\"flex flex-col px-3 pb-3 rounded-xl h-full w-full relative space-y-4\"\n>\n <verbena-input\n name=\"MailAddress\"\n label=\"Mail Address:\"\n formControlName=\"MailAddress\"\n />\n <verbena-input label=\"Name:\" name=\"Name\" type=\"text\" formControlName=\"Name\" />\n <verbena-input\n label=\"Phone Number:\"\n name=\"PhoneNumber\"\n type=\"tel\"\n formControlName=\"PhoneNumber\"\n />\n\n <div class=\"space-y-1\">\n <label for=\"role\">Role</label>\n\n <verben-drop-down\n label=\"Role\"\n styleClass=\"w-full\"\n width=\"100%\"\n [multiselect]=\"false\"\n [filter]=\"true\"\n [showClear]=\"true\"\n placeholder=\"\"\n [(options)]=\"roles\"\n id=\"role\"\n optionLabel=\"name\"\n optionValue=\"id\"\n formControlName=\"RoleId\"\n class=\"form-control\"\n >\n </verben-drop-down>\n </div>\n\n <!-- buttons -->\n <div\n class=\"flex justify-between bottom-8 left-0 right-0 px-3 pb-2 absolute\"\n style=\"\n display: flex;\n justify-content: space-between;\n position: absolute;\n padding: 8px 12px;\n right: 0;\n left: 0;\n bottom: 32;\n \"\n >\n <!-- <verbena-button\n text=\"Delete\"\n class=\"bg-secondary-200 text-[black]\"\n (click)=\"onDelete()\"\n />\n <verbena-button\n text=\"Save\"\n class=\"bg-primary text-[black]\"\n (click)=\"onSave()\"\n />\n\n <verbena-button\n text=\"Secondary Button\"\n styleType=\"secondary\"\n ></verbena-button> -->\n <verbena-button\n width=\"114px\"\n height=\"39px\"\n text=\"Reject\"\n styleType=\"danger\"\n borderRadius=\"10px\"\n ></verbena-button>\n <verbena-button\n (click)=\"switchView.emit()\"\n text=\"Switch To Table\"\n styleType=\"ylw-outline\"\n ></verbena-button>\n <verbena-button\n text=\"Approve\"\n bgColor=\"#28a745\"\n textColor=\"white\"\n border=\"1px solid #28a745\"\n borderRadius=\"10px\"\n pd=\"10px 20px\"\n width=\"114px\"\n height=\"39px\"\n ></verbena-button>\n </div>\n</form>\n" }]
|
|
1505
2122
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { currentData: [{
|
|
1506
2123
|
type: Input
|
|
1507
2124
|
}], switchView: [{
|
|
@@ -1520,10 +2137,10 @@ class UserAccessRequestStatusBadgeComponent {
|
|
|
1520
2137
|
return { bgColor: '#827C7C', textColor: '#C3C3C3', label: 'Pending' };
|
|
1521
2138
|
}
|
|
1522
2139
|
}
|
|
1523
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1524
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.
|
|
2140
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestStatusBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2141
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: { status: "status" }, ngImport: i0, template: "<verbena-badge\n borderRadius=\"9px\"\n [bgColor]=\"badgeConfig().bgColor\"\n [textColor]=\"badgeConfig().textColor\"\n [text]=\"badgeConfig().label\"\n></verbena-badge>\n", styles: [""], dependencies: [{ kind: "component", type: i2.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }] });
|
|
1525
2142
|
}
|
|
1526
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestStatusBadgeComponent, decorators: [{
|
|
1527
2144
|
type: Component,
|
|
1528
2145
|
args: [{ selector: 'lib-user-access-request-status-badge', template: "<verbena-badge\n borderRadius=\"9px\"\n [bgColor]=\"badgeConfig().bgColor\"\n [textColor]=\"badgeConfig().textColor\"\n [text]=\"badgeConfig().label\"\n></verbena-badge>\n" }]
|
|
1529
2146
|
}], propDecorators: { status: [{
|
|
@@ -1531,10 +2148,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1531
2148
|
}] } });
|
|
1532
2149
|
|
|
1533
2150
|
class UserRequestApprovalComponent {
|
|
2151
|
+
cdr;
|
|
2152
|
+
service;
|
|
1534
2153
|
cardDataView;
|
|
1535
2154
|
dataView;
|
|
1536
|
-
columns =
|
|
1537
|
-
|
|
2155
|
+
columns = [
|
|
2156
|
+
{
|
|
2157
|
+
id: 'createdAt',
|
|
2158
|
+
header: 'Created',
|
|
2159
|
+
accessorKey: 'CreatedAt',
|
|
2160
|
+
},
|
|
2161
|
+
{
|
|
2162
|
+
id: 'user',
|
|
2163
|
+
header: 'Name',
|
|
2164
|
+
accessorKey: 'Name',
|
|
2165
|
+
},
|
|
2166
|
+
{
|
|
2167
|
+
id: 'mail',
|
|
2168
|
+
header: 'E-Mail',
|
|
2169
|
+
accessorKey: 'MailAddress',
|
|
2170
|
+
},
|
|
2171
|
+
{
|
|
2172
|
+
id: 'phone',
|
|
2173
|
+
header: 'Phone Number',
|
|
2174
|
+
accessorKey: 'PhoneNumber',
|
|
2175
|
+
},
|
|
2176
|
+
{ id: 'actions', header: 'Actions', accessorKey: 'MailAddress' },
|
|
2177
|
+
];
|
|
2178
|
+
// visibleColumnDef: WritableSignal<ColumnDefinition<UserAccessRequest>[]> =
|
|
2179
|
+
// signal(columns);
|
|
2180
|
+
visibleColumnDef = this.columns;
|
|
2181
|
+
data = [];
|
|
1538
2182
|
styles = baseStyle;
|
|
1539
2183
|
currentData = null;
|
|
1540
2184
|
isGridView = true;
|
|
@@ -1556,6 +2200,13 @@ class UserRequestApprovalComponent {
|
|
|
1556
2200
|
],
|
|
1557
2201
|
children: [],
|
|
1558
2202
|
}));
|
|
2203
|
+
constructor(cdr, service) {
|
|
2204
|
+
this.cdr = cdr;
|
|
2205
|
+
this.service = service;
|
|
2206
|
+
}
|
|
2207
|
+
ngOnInit() {
|
|
2208
|
+
this.data = this.service.getMockUserRequests();
|
|
2209
|
+
}
|
|
1559
2210
|
openDetailView(mailAddress) {
|
|
1560
2211
|
const cardItem = this.getCardDataByMailAddress(mailAddress);
|
|
1561
2212
|
if (cardItem && this.cardDataView) {
|
|
@@ -1697,6 +2348,16 @@ class UserRequestApprovalComponent {
|
|
|
1697
2348
|
}
|
|
1698
2349
|
onColumnsUpdated(updatedColumns) {
|
|
1699
2350
|
console.log(updatedColumns);
|
|
2351
|
+
const updatedColumnDef = [];
|
|
2352
|
+
updatedColumns.forEach((col) => {
|
|
2353
|
+
const matchingCol = this.columns.find((column) => column.header === col.name || column.id === col.name);
|
|
2354
|
+
if (matchingCol) {
|
|
2355
|
+
updatedColumnDef.push(matchingCol);
|
|
2356
|
+
}
|
|
2357
|
+
});
|
|
2358
|
+
console.log(updatedColumnDef);
|
|
2359
|
+
this.visibleColumnDef = [...updatedColumnDef];
|
|
2360
|
+
this.cdr.markForCheck();
|
|
1700
2361
|
this.onColumnChange(false);
|
|
1701
2362
|
this.selectedColumnCount = updatedColumns.length;
|
|
1702
2363
|
}
|
|
@@ -1708,13 +2369,13 @@ class UserRequestApprovalComponent {
|
|
|
1708
2369
|
onStateChange(event) {
|
|
1709
2370
|
console.log(`State changed for ${event.key}:`, event.value);
|
|
1710
2371
|
}
|
|
1711
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1712
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: UserRequestApprovalComponent, selector: "lib-user-request-approval", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isCreate: false\n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div grid-content>\n <lib-data-table\n [data]=\"data\"\n [columns]=\"columns\"\n [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n <ng-container libColumn=\"createdAt\">\n <ng-template #cell let-value>\n {{ value | date }}\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"actions\">\n <ng-template #cell let-value let-deleteRow let-rowIndex>\n <div class=\"flex gap-6\">\n <verben-svg\n (click)=\"openDetailView(value)\"\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n class=\"cursor-pointer\"\n ></verben-svg>\n <!-- <button (click)=\"openDetailView(value)\">Open</button>\n <button (click)=\"selected = cardData[rowIndex]; vdv.toggleView()\">\n Switch\n </button> -->\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"deleteRow()\"\n class=\"cursor-pointer\"\n ></verben-svg>\n </div>\n </ng-template>\n <ng-template #header>\n <strong>Actions</strong>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div list-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n (loadMoreClick)=\"loadMore()\"\n #vdcv\n dataId=\"MailAddress\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"20px\"\n >\n <verben-left-card-data-view class=\"\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"cardData\"\n >\n <ng-template #card let-item>\n <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n <verben-svg\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"vlcd.showChildren(item)\"\n [ngClass]=\"vlcd.showToggle(item) ? 'visible' : 'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div\n (click)=\"currentData = vdcv.onItemClick(item)\"\n class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n >\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"flex flex-col py-2 px-4 w-full\">\n <div class=\"flex items-center gap-4\">\n <div class=\"space-y-1\">\n <span class=\"font-semibold text-[#404040]\">{{\n item.title\n }}</span>\n <p class=\"flex items-center\">\n <label for=\"phone\" class=\"text-[10px] font-light\"\n >Phone Number:</label\n >\n <span id=\"phone\" class=\"text-sm font-medium\">{{\n item.data.PhoneNumber\n }}</span>\n </p>\n </div>\n\n <div class=\"space-y-1\">\n <p class=\"grid\">\n <label for=\"phone\" class=\"text-[10px] font-light\"\n >Role</label\n >\n <span id=\"phone\" class=\"text-sm font-medium\"\n >Manager</span\n >\n </p>\n <lib-user-access-request-status-badge\n [status]=\"item.data.Status\"\n ></lib-user-access-request-status-badge>\n </div>\n </div>\n\n <!-- <div class=\"flex\">\n <span class=\"font-normal text-sm\">{{ item.title }}</span>\n </div>\n @for (ciItem of item.body; track ciItem.value) {\n <div class=\"\">\n <span class=\"text-muted font-light text-xs\"\n >{{ ciItem.title }}:</span\n >\n <span class=\"text-black\">{{ ciItem.value }}</span>\n </div>\n } -->\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n\n <verben-right-card-data-view>\n <ng-template #parent>\n <lib-user-request-form\n [currentData]=\"currentData\"\n (switchView)=\"vdv.toggleView()\"\n ></lib-user-request-form>\n </ng-template>\n </verben-right-card-data-view>\n\n <verben-card-data-view-footer class=\"float-right\">\n <div class=\"flex gap-2\">\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\n </div>\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n <div column-content>\n <verben-visible-column\n (columnsUpdated)=\"onColumnsUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"\n ></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"420px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"\n ></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table\n (selectedOptions)=\"onSortUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"\n ></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i2.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "gridIcon", "listIcon", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "exportTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected"], outputs: ["viewChange", "stateChange"] }, { kind: "component", type: i2.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i2.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i2.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i2.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i2.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i2.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions"] }, { kind: "component", type: i2.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth"], outputs: ["columnsUpdated"] }, { kind: "component", type: i2.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied"] }, { kind: "component", type: i2.DataExportComponent, selector: "lib-data-export", inputs: ["data"], outputs: ["exportDataEvent"] }, { kind: "component", type: UserRequestFormComponent, selector: "lib-user-request-form", inputs: ["currentData"], outputs: ["switchView"] }, { kind: "component", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: ["status"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
|
|
2372
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestApprovalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: UserRequestApprovalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserRequestApprovalComponent, selector: "lib-user-request-approval", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isCreate: false\n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div grid-content>\n <lib-data-table\n [data]=\"data\"\n [columns]=\"visibleColumnDef\"\n [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n <ng-container libColumn=\"createdAt\">\n <ng-template #cell let-value>\n {{ value | date }}\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"actions\">\n <ng-template #cell let-value let-deleteRow let-rowIndex>\n <div class=\"flex gap-6\">\n <verben-svg\n (click)=\"openDetailView(value)\"\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n class=\"cursor-pointer\"\n ></verben-svg>\n <!-- <button (click)=\"openDetailView(value)\">Open</button>\n <button (click)=\"selected = cardData[rowIndex]; vdv.toggleView()\">\n Switch\n </button> -->\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"deleteRow()\"\n class=\"cursor-pointer\"\n ></verben-svg>\n </div>\n </ng-template>\n <ng-template #header>\n <strong>Actions</strong>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div list-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n (loadMoreClick)=\"loadMore()\"\n #vdcv\n dataId=\"MailAddress\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"20px\"\n >\n <verben-left-card-data-view class=\"\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"cardData\"\n >\n <ng-template #card let-item>\n <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n <verben-svg\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"vlcd.showChildren(item)\"\n [ngClass]=\"vlcd.showToggle(item) ? 'visible' : 'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div\n (click)=\"currentData = vdcv.onItemClick(item)\"\n class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n >\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"flex flex-col py-2 px-4 w-full\">\n <div class=\"flex items-center gap-4\">\n <div class=\"space-y-1\">\n <span class=\"font-semibold text-[#404040]\">{{\n item.title\n }}</span>\n <p class=\"flex items-center\">\n <label for=\"phone\" class=\"text-[10px] font-light\"\n >Phone Number:</label\n >\n <span id=\"phone\" class=\"text-sm font-medium\">{{\n item.data.PhoneNumber\n }}</span>\n </p>\n </div>\n\n <div class=\"space-y-1\">\n <p class=\"grid\">\n <label for=\"phone\" class=\"text-[10px] font-light\"\n >Role</label\n >\n <span id=\"phone\" class=\"text-sm font-medium\"\n >Manager</span\n >\n </p>\n <lib-user-access-request-status-badge\n [status]=\"item.data.Status\"\n ></lib-user-access-request-status-badge>\n </div>\n </div>\n\n <!-- <div class=\"flex\">\n <span class=\"font-normal text-sm\">{{ item.title }}</span>\n </div>\n @for (ciItem of item.body; track ciItem.value) {\n <div class=\"\">\n <span class=\"text-muted font-light text-xs\"\n >{{ ciItem.title }}:</span\n >\n <span class=\"text-black\">{{ ciItem.value }}</span>\n </div>\n } -->\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n\n <verben-right-card-data-view>\n <ng-template #parent>\n <lib-user-request-form\n [currentData]=\"currentData\"\n (switchView)=\"vdv.toggleView()\"\n ></lib-user-request-form>\n </ng-template>\n </verben-right-card-data-view>\n\n <verben-card-data-view-footer class=\"float-right\">\n <div class=\"flex gap-2\">\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\n </div>\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n <div column-content>\n <verben-visible-column\n (columnsUpdated)=\"onColumnsUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"\n ></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"420px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"\n ></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table\n (selectedOptions)=\"onSortUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"\n ></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DataTableComponent, selector: "lib-data-table", inputs: ["data", "columns", "styleConfig"], outputs: ["rowEdit", "rowSave", "rowDelete", "selectionChange"] }, { kind: "directive", type: i2.ColumnDirective, selector: "[libColumn]", inputs: ["libColumn"] }, { kind: "component", type: i2.SvgComponent, selector: "verben-svg", inputs: ["icon", "width", "height", "fill", "stroke", "size"] }, { kind: "component", type: i2.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "gridIcon", "listIcon", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "exportTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected"], outputs: ["viewChange", "stateChange"] }, { kind: "component", type: i2.CardDataViewComponent, selector: "verben-card-data-view", inputs: ["pd", "mg", "lHeight", "rHeight", "rWidth", "lWidth", "textColor", "lbgColor", "rbgColor", "border", "display", "borderRadius", "activeCss", "inActiveCss", "displayAsRow", "cardDataList", "dataId", "totalRecords", "footer", "noOfVisibleChildren", "onItemClick", "onCardChildClick"], outputs: ["loadMoreClick"] }, { kind: "component", type: i2.LeftCardDataComponent, selector: "verben-left-card-data", inputs: ["pd", "mg", "height", "weight", "activeCss", "inActiveCss", "cardDataList", "iconCollapse", "iconExpanded", "parent", "dataId"] }, { kind: "component", type: i2.LeftCardDataViewComponent, selector: "verben-left-card-data-view", inputs: ["cardDataList"] }, { kind: "component", type: i2.RightCardDataViewComponent, selector: "verben-right-card-data-view", inputs: ["parentData", "chilData", "meth"] }, { kind: "component", type: i2.CardDataViewFooterComponent, selector: "verben-card-data-view-footer" }, { kind: "component", type: i2.SortTableComponent, selector: "verben-sort-table", inputs: ["enableDragAndDrop", "sortOptions", "resetText", "displayedOptions", "propertyText", "showMoreText", "sortButtonText", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "containerHeight"], outputs: ["selectedOptions"] }, { kind: "component", type: i2.VisibleColumnComponent, selector: "verben-visible-column", inputs: ["columns", "items", "enableDragAndDrop", "displayedColumns", "showMore", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth"], outputs: ["columnsUpdated"] }, { kind: "component", type: i2.TableFilterComponent, selector: "verben-table-filter", inputs: ["filterOptions", "pd", "mg", "height", "width", "bgColor", "boxShadow", "textColor", "primaryColor", "secondaryColor", "tertiaryColor", "border", "borderRadius", "selectWidth", "maxFilterLength", "tooltip"], outputs: ["filtersApplied"] }, { kind: "component", type: i2.DataExportComponent, selector: "lib-data-export", inputs: ["data"], outputs: ["exportDataEvent"] }, { kind: "component", type: UserRequestFormComponent, selector: "lib-user-request-form", inputs: ["currentData"], outputs: ["switchView"] }, { kind: "component", type: UserAccessRequestStatusBadgeComponent, selector: "lib-user-access-request-status-badge", inputs: ["status"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
|
|
1713
2374
|
}
|
|
1714
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestApprovalComponent, decorators: [{
|
|
1715
2376
|
type: Component,
|
|
1716
|
-
args: [{ selector: 'lib-user-request-approval', template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isCreate: false\n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div grid-content>\n <lib-data-table\n [data]=\"data\"\n [columns]=\"
|
|
1717
|
-
}], propDecorators: { cardDataView: [{
|
|
2377
|
+
args: [{ selector: 'lib-user-request-approval', template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isCreate: false\n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div grid-content>\n <lib-data-table\n [data]=\"data\"\n [columns]=\"visibleColumnDef\"\n [styleConfig]=\"styles\"\n (selectionChange)=\"onSelectionChange($event)\"\n >\n <ng-container libColumn=\"createdAt\">\n <ng-template #cell let-value>\n {{ value | date }}\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"actions\">\n <ng-template #cell let-value let-deleteRow let-rowIndex>\n <div class=\"flex gap-6\">\n <verben-svg\n (click)=\"openDetailView(value)\"\n icon=\"edit\"\n [width]=\"15\"\n [height]=\"15\"\n class=\"cursor-pointer\"\n ></verben-svg>\n <!-- <button (click)=\"openDetailView(value)\">Open</button>\n <button (click)=\"selected = cardData[rowIndex]; vdv.toggleView()\">\n Switch\n </button> -->\n <verben-svg\n icon=\"delete\"\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"deleteRow()\"\n class=\"cursor-pointer\"\n ></verben-svg>\n </div>\n </ng-template>\n <ng-template #header>\n <strong>Actions</strong>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div list-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n (loadMoreClick)=\"loadMore()\"\n #vdcv\n dataId=\"MailAddress\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"20px\"\n >\n <verben-left-card-data-view class=\"\">\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl border-primary border-[1px]\"\n [cardDataList]=\"cardData\"\n >\n <ng-template #card let-item>\n <div (click)=\"currentData = vdcv.onItemClick(item)\" class=\"flex\">\n <verben-svg\n [width]=\"15\"\n [height]=\"15\"\n (click)=\"vlcd.showChildren(item)\"\n [ngClass]=\"vlcd.showToggle(item) ? 'visible' : 'invisible'\"\n class=\"items-center flex pr-1 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div\n (click)=\"currentData = vdcv.onItemClick(item)\"\n class=\"flex cursor-pointer w-full bg-secondary rounded-xl\"\n >\n <div\n class=\"w-3 rounded-xl rounded-tr-none rounded-br-none\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"flex flex-col py-2 px-4 w-full\">\n <div class=\"flex items-center gap-4\">\n <div class=\"space-y-1\">\n <span class=\"font-semibold text-[#404040]\">{{\n item.title\n }}</span>\n <p class=\"flex items-center\">\n <label for=\"phone\" class=\"text-[10px] font-light\"\n >Phone Number:</label\n >\n <span id=\"phone\" class=\"text-sm font-medium\">{{\n item.data.PhoneNumber\n }}</span>\n </p>\n </div>\n\n <div class=\"space-y-1\">\n <p class=\"grid\">\n <label for=\"phone\" class=\"text-[10px] font-light\"\n >Role</label\n >\n <span id=\"phone\" class=\"text-sm font-medium\"\n >Manager</span\n >\n </p>\n <lib-user-access-request-status-badge\n [status]=\"item.data.Status\"\n ></lib-user-access-request-status-badge>\n </div>\n </div>\n\n <!-- <div class=\"flex\">\n <span class=\"font-normal text-sm\">{{ item.title }}</span>\n </div>\n @for (ciItem of item.body; track ciItem.value) {\n <div class=\"\">\n <span class=\"text-muted font-light text-xs\"\n >{{ ciItem.title }}:</span\n >\n <span class=\"text-black\">{{ ciItem.value }}</span>\n </div>\n } -->\n </div>\n </div>\n </div>\n </ng-template>\n </verben-left-card-data>\n </verben-left-card-data-view>\n\n <verben-right-card-data-view>\n <ng-template #parent>\n <lib-user-request-form\n [currentData]=\"currentData\"\n (switchView)=\"vdv.toggleView()\"\n ></lib-user-request-form>\n </ng-template>\n </verben-right-card-data-view>\n\n <verben-card-data-view-footer class=\"float-right\">\n <div class=\"flex gap-2\">\n <span class=\"paginator-text\"\n >{{ cardData.length }} records loaded</span\n >\n <button (click)=\"loadMore()\" class=\"load-more\">Load more</button>\n </div>\n </verben-card-data-view-footer>\n </verben-card-data-view>\n </div>\n <div column-content>\n <verben-visible-column\n (columnsUpdated)=\"onColumnsUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n [columns]=\"visibleColumns\"\n [displayedColumns]=\"5\"\n ></verben-visible-column>\n </div>\n <div filter-content>\n <verben-table-filter\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"420px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [filterOptions]=\"filterArray\"\n [maxFilterLength]=\"3\"\n ></verben-table-filter>\n </div>\n <div sort-content>\n <verben-sort-table\n (selectedOptions)=\"onSortUpdated($event)\"\n [border]=\"'1px solid rgba(212, 160, 7, 1)'\"\n borderRadius=\"10px\"\n boxShadow=\"2px 2px 2px 0px silver\"\n bgColor=\"white\"\n width=\"400px\"\n textColor=\"black\"\n pd=\"1rem\"\n primaryColor=\"#FFE681\"\n secondaryColor=\"#3479E9\"\n tertiaryColor=\"#404040\"\n [enableDragAndDrop]=\"true\"\n [sortOptions]=\"sortOptions\"\n ></verben-sort-table>\n </div>\n <div export-content>\n <lib-data-export [data]=\"data\" (exportDataEvent)=\"handleExport($event)\">\n </lib-data-export>\n </div>\n </verben-data-view>\n</div>\n" }]
|
|
2378
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: UserRequestApprovalService }], propDecorators: { cardDataView: [{
|
|
1718
2379
|
type: ViewChild,
|
|
1719
2380
|
args: ['vdcv']
|
|
1720
2381
|
}], dataView: [{
|
|
@@ -1723,8 +2384,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1723
2384
|
}] } });
|
|
1724
2385
|
|
|
1725
2386
|
class LibUserRequestApprovalModule {
|
|
1726
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
1727
|
-
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.
|
|
2387
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: LibUserRequestApprovalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
2388
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: LibUserRequestApprovalModule, declarations: [UserRequestApprovalComponent,
|
|
1728
2389
|
UserRequestFormComponent,
|
|
1729
2390
|
UserAccessRequestStatusBadgeComponent], imports: [CommonModule,
|
|
1730
2391
|
DataTableModule,
|
|
@@ -1742,7 +2403,7 @@ class LibUserRequestApprovalModule {
|
|
|
1742
2403
|
VerbenaButtonModule,
|
|
1743
2404
|
VerbenaBadgeModule,
|
|
1744
2405
|
DropDownModule], exports: [UserRequestApprovalComponent] });
|
|
1745
|
-
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.
|
|
2406
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: LibUserRequestApprovalModule, providers: [UserRequestApprovalService], imports: [CommonModule,
|
|
1746
2407
|
DataTableModule,
|
|
1747
2408
|
CardModule,
|
|
1748
2409
|
SvgModule,
|
|
@@ -1759,7 +2420,7 @@ class LibUserRequestApprovalModule {
|
|
|
1759
2420
|
VerbenaBadgeModule,
|
|
1760
2421
|
DropDownModule] });
|
|
1761
2422
|
}
|
|
1762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
2423
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: LibUserRequestApprovalModule, decorators: [{
|
|
1763
2424
|
type: NgModule,
|
|
1764
2425
|
args: [{
|
|
1765
2426
|
declarations: [
|
|
@@ -1785,6 +2446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1785
2446
|
VerbenaBadgeModule,
|
|
1786
2447
|
DropDownModule,
|
|
1787
2448
|
],
|
|
2449
|
+
providers: [UserRequestApprovalService],
|
|
1788
2450
|
exports: [UserRequestApprovalComponent],
|
|
1789
2451
|
}]
|
|
1790
2452
|
}] });
|
|
@@ -1800,5 +2462,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
|
|
|
1800
2462
|
* Generated bundle index. Do not edit.
|
|
1801
2463
|
*/
|
|
1802
2464
|
|
|
1803
|
-
export {
|
|
2465
|
+
export { ForgotPasswordComponent, ForgotPasswordModule, LibUserRequestApprovalModule, MailComponent, MailModule, MailValidationComponent, MailValidationModule, ResetPasswordComponent, ResetPasswordModule, SERVICE_CONFIG, SignInComponent, SignInModule, SignUpComponent, SignUpModule, SsoComponent, SsoModule, TwoFactorAuthOtpComponent, TwoFactorAuthOtpModule, TwoFactorAuthSetupComponent, TwoFactorAuthSetupModule, UserRequestApprovalComponent, UserRequestApprovalService, UserRequestComponent, UserRequestModule };
|
|
1804
2466
|
//# sourceMappingURL=verben-authentication-ui.mjs.map
|