verben-authentication-ui 0.0.4 → 0.0.5
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/otp-input/otp-input.component.mjs +6 -3
- package/esm2022/lib/components/sign-in/sign-in.component.mjs +42 -4
- package/esm2022/lib/components/sign-up/sign-up.component.mjs +49 -7
- 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 +34 -4
- package/esm2022/lib/components/two-factor-auth-setup/two-factor-auth-setup.component.mjs +6 -3
- package/esm2022/lib/components/user-request/user-request.component.mjs +23 -11
- package/esm2022/lib/components/user-request-approval/helper.mjs +3 -3
- package/esm2022/lib/components/user-request-approval/user-request-approval.component.mjs +57 -12
- package/esm2022/lib/components/user-request-approval/user-request-approval.module.mjs +4 -2
- 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 +8 -5
- 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/public-api.mjs +5 -2
- package/fesm2022/verben-authentication-ui.mjs +711 -49
- 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 +1 -1
- 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';
|
|
@@ -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
333
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
317
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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" }, 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=\"
|
|
334
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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
336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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,6 +384,8 @@ 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 {
|
|
@@ -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);
|
|
@@ -671,11 +712,11 @@ class SignUpComponent {
|
|
|
671
712
|
};
|
|
672
713
|
}
|
|
673
714
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignUpComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
674
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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",
|
|
715
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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
717
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: [{
|
|
@@ -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();
|
|
@@ -830,11 +905,11 @@ class SignInComponent {
|
|
|
830
905
|
};
|
|
831
906
|
}
|
|
832
907
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SignInComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
833
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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" }, 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]=\"
|
|
908
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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
910
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: [{
|
|
@@ -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) {
|
|
@@ -939,13 +1039,15 @@ class OtpInputComponent {
|
|
|
939
1039
|
this.otpChange.emit(otp);
|
|
940
1040
|
}
|
|
941
1041
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: OtpInputComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
942
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: OtpInputComponent, selector: "verben-otp-input", inputs: { length: "length" }, 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\"\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"] }] });
|
|
1042
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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
1044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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
|
}
|
|
@@ -1004,15 +1116,17 @@ class TwoFactorAuthOtpComponent {
|
|
|
1004
1116
|
};
|
|
1005
1117
|
}
|
|
1006
1118
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthOtpComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1007
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TwoFactorAuthOtpComponent, selector: "verben-auth-otp", inputs: { customClass: "customClass", headlingClass: "headlingClass", paragraphClass: "paragraphClass", resendClass: "resendClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { buttonClick: "buttonClick", resend: "resend" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">
|
|
1119
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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
1121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: [{
|
|
@@ -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 = '';
|
|
@@ -1113,15 +1246,17 @@ class TwoFactorAuthSetupComponent {
|
|
|
1113
1246
|
};
|
|
1114
1247
|
}
|
|
1115
1248
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: TwoFactorAuthSetupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: TwoFactorAuthSetupComponent, selector: "verben-two-factor-auth-setup", inputs: { customClass: "customClass", headlingClass: "headlingClass", 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}}\">
|
|
1249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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
1251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: [{
|
|
@@ -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.9", 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.9", 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.9", 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.9", ngImport: i0, type: SsoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1846
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", 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.9", 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.9", ngImport: i0, type: SsoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1861
|
+
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", 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.9", 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.9", 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.9", ngImport: i0, type: UserRequestApprovalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2064
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestApprovalService });
|
|
2065
|
+
}
|
|
2066
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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({
|
|
@@ -1497,11 +2114,11 @@ class UserRequestFormComponent {
|
|
|
1497
2114
|
console.log('Delete requested');
|
|
1498
2115
|
}
|
|
1499
2116
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: UserRequestFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1500
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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
|
|
2117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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
2119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: [{
|
|
@@ -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.9", ngImport: i0, type: UserRequestApprovalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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.9", 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.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]=\"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
2375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", 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: [{
|
|
@@ -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.9", ngImport: i0, type: LibUserRequestApprovalModule, imports: [CommonModule,
|
|
2406
|
+
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: LibUserRequestApprovalModule, providers: [UserRequestApprovalService], imports: [CommonModule,
|
|
1746
2407
|
DataTableModule,
|
|
1747
2408
|
CardModule,
|
|
1748
2409
|
SvgModule,
|
|
@@ -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
|