verben-authentication-ui 0.1.6 → 0.1.7
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/sign-in/sign-in.component.mjs +7 -2
- package/esm2022/lib/components/sign-up/sign-up.component.mjs +28 -3
- package/esm2022/lib/components/sso/helper.mjs +2 -2
- package/esm2022/lib/components/user-management/helper.mjs +2 -2
- package/esm2022/lib/components/user-management/user-management.component.mjs +20 -20
- package/esm2022/lib/components/user-request/user-request.component.mjs +35 -27
- package/esm2022/lib/components/user-request-approval/facades/user-access-request.facade.mjs +110 -0
- package/esm2022/lib/components/user-request-approval/helper.mjs +2 -2
- package/esm2022/lib/components/user-request-approval/services/user-access-request.service.mjs +62 -0
- package/esm2022/lib/components/user-request-approval/states/user-access-request.state.mjs +59 -0
- package/esm2022/lib/components/user-request-approval/user-request-approval.component.mjs +29 -11
- package/esm2022/lib/components/user-request-approval/user-request-approval.service.mjs +2 -2
- package/esm2022/lib/models/UserRequest.mjs +7 -2
- package/esm2022/lib/models/base.mjs +1 -1
- package/esm2022/lib/models/query-params.mjs +2 -0
- package/esm2022/lib/models/sign-up.mjs +1 -1
- package/esm2022/lib/services/http-web-request.service.mjs +20 -25
- package/fesm2022/verben-authentication-ui.mjs +369 -94
- package/fesm2022/verben-authentication-ui.mjs.map +1 -1
- package/lib/components/user-management/user-management.component.d.ts +0 -1
- package/lib/components/user-request/user-request.component.d.ts +1 -1
- package/lib/components/user-request-approval/facades/user-access-request.facade.d.ts +22 -0
- package/lib/components/user-request-approval/services/user-access-request.service.d.ts +42 -0
- package/lib/components/user-request-approval/states/user-access-request.state.d.ts +21 -0
- package/lib/components/user-request-approval/user-request-approval.component.d.ts +5 -2
- package/lib/models/UserRequest.d.ts +12 -3
- package/lib/models/base.d.ts +1 -1
- package/lib/models/query-params.d.ts +7 -0
- package/lib/models/sign-up.d.ts +3 -2
- package/lib/services/http-web-request.service.d.ts +6 -3
- package/package.json +2 -2
|
@@ -5,10 +5,11 @@ import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angu
|
|
|
5
5
|
import * as i1 from '@angular/common/http';
|
|
6
6
|
import * as i2 from 'verben-ng-ui';
|
|
7
7
|
import { UTIL_SERVICE, VerbenaInputModule, VerbenaButtonModule, SvgModule, DataFilterType, DataViewModule, TableFilterModule, SortTableModule, DataExportModule, VisibleColumnModule, CardDataViewModule, VerbenaTextareaModule, DataTableModule, CardModule, VerbenaBadgeModule, DropDownModule } from 'verben-ng-ui';
|
|
8
|
-
import * as
|
|
8
|
+
import * as i1$2 from '@angular/common';
|
|
9
9
|
import { CommonModule } from '@angular/common';
|
|
10
10
|
import * as i6 from '@angular/router';
|
|
11
11
|
import { RouterLink } from '@angular/router';
|
|
12
|
+
import { BehaviorSubject, from } from 'rxjs';
|
|
12
13
|
|
|
13
14
|
class ErrorResponse {
|
|
14
15
|
ErrorMsg;
|
|
@@ -48,12 +49,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
|
|
|
48
49
|
class HttpWebRequestService {
|
|
49
50
|
http;
|
|
50
51
|
envSvc;
|
|
52
|
+
notificationService;
|
|
51
53
|
isProd = false;
|
|
52
|
-
constructor(http, envSvc) {
|
|
54
|
+
constructor(http, envSvc, notificationService) {
|
|
53
55
|
this.http = http;
|
|
54
56
|
this.envSvc = envSvc;
|
|
57
|
+
this.notificationService = notificationService;
|
|
55
58
|
this.isProd = this.envSvc.environment.production;
|
|
56
59
|
}
|
|
60
|
+
handleError(err) {
|
|
61
|
+
this.notificationService.error('An error occurred.', { timeout: 3000 });
|
|
62
|
+
return new ErrorResponse(err.error
|
|
63
|
+
? err.error.ErrorMsg
|
|
64
|
+
? err.error.ErrorMsg
|
|
65
|
+
: err.error.errors
|
|
66
|
+
? err.error.errors.values.toString()
|
|
67
|
+
: ''
|
|
68
|
+
: err.status + ' ' + err.statusText);
|
|
69
|
+
}
|
|
57
70
|
get(url, baseUrl = this.envSvc.environment.AuthenticationAPI) {
|
|
58
71
|
const URL = baseUrl + `/${url}`;
|
|
59
72
|
return new Promise((resolve, reject) => {
|
|
@@ -65,13 +78,7 @@ class HttpWebRequestService {
|
|
|
65
78
|
})
|
|
66
79
|
.subscribe({
|
|
67
80
|
next: (data) => resolve(data),
|
|
68
|
-
error: (err) => resolve(
|
|
69
|
-
? err.error.ErrorMsg
|
|
70
|
-
? err.error.ErrorMsg
|
|
71
|
-
: err.error.errors
|
|
72
|
-
? err.error.errors.values.toString()
|
|
73
|
-
: ''
|
|
74
|
-
: err.status + ' ' + err.statusText)),
|
|
81
|
+
error: (err) => resolve(this.handleError(err)),
|
|
75
82
|
});
|
|
76
83
|
});
|
|
77
84
|
}
|
|
@@ -85,13 +92,7 @@ class HttpWebRequestService {
|
|
|
85
92
|
})
|
|
86
93
|
.subscribe({
|
|
87
94
|
next: (data) => resolve(data),
|
|
88
|
-
error: (err) => resolve(
|
|
89
|
-
? err.error.ErrorMsg
|
|
90
|
-
? err.error.ErrorMsg
|
|
91
|
-
: err.error.errors
|
|
92
|
-
? err.error.errors.values.toString()
|
|
93
|
-
: ''
|
|
94
|
-
: err.status + ' ' + err.statusText)),
|
|
95
|
+
error: (err) => resolve(this.handleError(err)),
|
|
95
96
|
});
|
|
96
97
|
});
|
|
97
98
|
}
|
|
@@ -99,13 +100,7 @@ class HttpWebRequestService {
|
|
|
99
100
|
return new Promise((resolve, reject) => {
|
|
100
101
|
this.http.post(baseUrl + '/' + url, formData).subscribe({
|
|
101
102
|
next: (data) => resolve(data),
|
|
102
|
-
error: (err) => resolve(
|
|
103
|
-
? err.error.ErrorMsg
|
|
104
|
-
? err.error.ErrorMsg
|
|
105
|
-
: err.error.errors
|
|
106
|
-
? err.error.errors.values.toString()
|
|
107
|
-
: ''
|
|
108
|
-
: err.status + ' ' + err.statusText)),
|
|
103
|
+
error: (err) => resolve(this.handleError(err)),
|
|
109
104
|
});
|
|
110
105
|
});
|
|
111
106
|
}
|
|
@@ -115,7 +110,7 @@ class HttpWebRequestService {
|
|
|
115
110
|
delete(url, baseUrl = this.envSvc.environment.AuthenticationAPI) {
|
|
116
111
|
return this.http.delete(baseUrl + '/' + url);
|
|
117
112
|
}
|
|
118
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: HttpWebRequestService, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
113
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: HttpWebRequestService, deps: [{ token: i1.HttpClient }, { token: EnvironmentService }, { token: i2.NotificationService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
119
114
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: HttpWebRequestService, providedIn: 'root' });
|
|
120
115
|
}
|
|
121
116
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: HttpWebRequestService, decorators: [{
|
|
@@ -123,7 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
|
|
|
123
118
|
args: [{
|
|
124
119
|
providedIn: 'root',
|
|
125
120
|
}]
|
|
126
|
-
}], ctorParameters: () => [{ type: i1.HttpClient }, { type: EnvironmentService }] });
|
|
121
|
+
}], ctorParameters: () => [{ type: i1.HttpClient }, { type: EnvironmentService }, { type: i2.NotificationService }] });
|
|
127
122
|
|
|
128
123
|
class UtilService {
|
|
129
124
|
parentUtilService;
|
|
@@ -230,7 +225,7 @@ class ResetPasswordComponent {
|
|
|
230
225
|
}
|
|
231
226
|
}
|
|
232
227
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ResetPasswordComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
|
|
233
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: ResetPasswordComponent, selector: "verben-reset-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", showOldPassword: "showOldPassword", firstTimeSet: "firstTimeSet", token: "token" }, outputs: { onSubmit: "onSubmit", onSubmitEnd: "onSubmitEnd" }, ngImport: i0, template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Old Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">New Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Confirm Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\"\n type=\"password\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type:
|
|
228
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: ResetPasswordComponent, selector: "verben-reset-password", inputs: { title: "title", subTitle: "subTitle", buttonCaption: "buttonCaption", buttonTextColor: "buttonTextColor", buttonBackgroundColor: "buttonBackgroundColor", showOldPassword: "showOldPassword", firstTimeSet: "firstTimeSet", token: "token" }, outputs: { onSubmit: "onSubmit", onSubmitEnd: "onSubmitEnd" }, ngImport: i0, template: "<div [formGroup]=\"this.resetPasswordForm\" class=\"reset-password-container flex flex-col\">\n <div class=\"reset-password-header flex flex-col\">\n <div class=\"reset-password-title\">{{title}}</div>\n <div class=\"reset-password-subtitle\">{{subTitle}}</div>\n </div>\n <div *ngIf=\"showOldPassword\" class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Old Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"OldPassword\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">New Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"Password\" type=\"password\"></verbena-input>\n </div>\n <div class=\"form-field flex flex-col\">\n <div class=\"form-field-caption\">Confirm Password</div>\n <verbena-input bgColor=\"white\" borderRadius=\"12px\" formControlName=\"ConfirmPassword\"\n type=\"password\"></verbena-input>\n </div>\n <verbena-button fontWeight=\"700\" (click)=\"submit()\" [text]=\"buttonCaption\" width=\"100%\" [textColor]=\"buttonTextColor\"\n [bgColor]=\"buttonBackgroundColor\" borderRadius=\"25px\" [disable]=\"!this.checkForm()\"></verbena-button>\n\n</div>\n", styles: ["*{font-family:sans-serif;font-size:16px}.flex{display:flex}.flex-col{flex-direction:column}.font-bold{font-weight:700}.justify-center{justify-content:center}.justify-end{justify-content:end}.align-items-center{align-items:center}.grid{display:grid}.verben-error-message{font-size:.8rem;color:red}.verben-input{border:1px solid #cbd5e1;outline:none;border-radius:5px;color:#334155;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s,outline-color .2s}.verben-input::placeholder{color:#64748b}.verben-input:hover{border:1px solid #697e97}.verben-input.disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input:disabled{opacity:1;background-color:light-dark(rgba(239,239,239,.3),rgba(59,59,59,.3));pointer-events:none;color:#64748b}.verben-input.focused{border-color:#3b82f6;outline:none}.verben-input:focus{border-color:#3b82f6;outline:none}.verben-input.ng-invalid{border-color:red}.verben-button{padding:8px 15px;border-radius:4px;border:none;text-align:center}.verben-button.primary{background-color:#ffe681}.verben-button.secondary{background-color:#d9d9d940}.reset-password-container{gap:25px;padding:50px;border:1px solid rgba(102,102,102,.5);box-shadow:4px 4px 4px #00000040;border-radius:24px}.reset-password-title{font-size:30px;font-weight:700}.reset-password-subtitle{font-size:14px;font-weight:500;color:#666}.form-field{gap:5px}.form-field-caption{color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2.VerbenaInputComponent, selector: "verbena-input", inputs: ["label", "placeHolder", "required", "svgPosition", "minLength", "maxLength", "type", "bgColor", "border", "borderRadius", "textColor", "value", "labelPosition", "labelColor", "disable", "min", "max", "showBorder", "showErrorMessage", "errorMessageColor", "errorBorderColor", "errorPosition", "svg", "svgWidth", "svgHeight", "svgColor", "capitalization", "inputContainerClass", "inputFieldClass", "inputWrapperClass", "customErrorMessages"], outputs: ["valueChange"] }, { kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
234
229
|
}
|
|
235
230
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ResetPasswordComponent, decorators: [{
|
|
236
231
|
type: Component,
|
|
@@ -285,6 +280,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
|
|
|
285
280
|
}]
|
|
286
281
|
}] });
|
|
287
282
|
|
|
283
|
+
var Status;
|
|
284
|
+
(function (Status) {
|
|
285
|
+
Status["InActive"] = "InActive";
|
|
286
|
+
Status["Active"] = "Active";
|
|
287
|
+
Status["Pending"] = "Pending";
|
|
288
|
+
})(Status || (Status = {}));
|
|
289
|
+
|
|
288
290
|
var ObjectState;
|
|
289
291
|
(function (ObjectState) {
|
|
290
292
|
ObjectState["New"] = "New";
|
|
@@ -298,8 +300,8 @@ class UserRequestComponent {
|
|
|
298
300
|
server;
|
|
299
301
|
utilService;
|
|
300
302
|
width = '500px';
|
|
301
|
-
headingTitle =
|
|
302
|
-
headingClass =
|
|
303
|
+
headingTitle = 'Request an account';
|
|
304
|
+
headingClass = 'font-medium text-[2rem] leading-[48px] text-[#333]';
|
|
303
305
|
customClass = '';
|
|
304
306
|
bgColor = '#fff';
|
|
305
307
|
boxShadow = '4px 4px 4px rgba(0, 0, 0, 0.25)';
|
|
@@ -312,7 +314,7 @@ class UserRequestComponent {
|
|
|
312
314
|
text = 'Send Request';
|
|
313
315
|
color = 'black';
|
|
314
316
|
btnBorder = '1px solid #FFE681';
|
|
315
|
-
btnBorderRadius =
|
|
317
|
+
btnBorderRadius = '40px';
|
|
316
318
|
btnBgColor = '#FFE681';
|
|
317
319
|
btnWidth = '100%';
|
|
318
320
|
btnPd = '10px 20px';
|
|
@@ -334,7 +336,7 @@ class UserRequestComponent {
|
|
|
334
336
|
Email: [null, [Validators.required, Validators.email]],
|
|
335
337
|
Password: [null, [Validators.required, Validators.minLength(8)]],
|
|
336
338
|
ConfirmPassword: [null, [Validators.required]],
|
|
337
|
-
Terms: [false, Validators.requiredTrue]
|
|
339
|
+
Terms: [false, Validators.requiredTrue],
|
|
338
340
|
}, { validators: this.passwordMatchValidator });
|
|
339
341
|
}
|
|
340
342
|
passwordMatchValidator(control) {
|
|
@@ -349,12 +351,12 @@ class UserRequestComponent {
|
|
|
349
351
|
return {
|
|
350
352
|
'background-color': this.bgColor,
|
|
351
353
|
'box-shadow': this.boxShadow,
|
|
352
|
-
|
|
354
|
+
border: this.border,
|
|
353
355
|
'border-radius': this.borderRadius,
|
|
354
|
-
|
|
356
|
+
color: this.textColor,
|
|
355
357
|
'max-width': this.width,
|
|
356
|
-
|
|
357
|
-
|
|
358
|
+
height: this.height,
|
|
359
|
+
padding: this.pd,
|
|
358
360
|
};
|
|
359
361
|
}
|
|
360
362
|
checkForm() {
|
|
@@ -370,23 +372,30 @@ class UserRequestComponent {
|
|
|
370
372
|
if (!this.checkForm()) {
|
|
371
373
|
return;
|
|
372
374
|
}
|
|
373
|
-
const payload = {
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
375
|
+
const payload = [{
|
|
376
|
+
Code: '',
|
|
377
|
+
FirstName: this.userRequestForm.controls['FirstName'].value,
|
|
378
|
+
LastName: this.userRequestForm.controls['LastName'].value,
|
|
379
|
+
MailAddress: this.userRequestForm.controls['Email'].value,
|
|
380
|
+
Password: this.userRequestForm.controls['Password'].value,
|
|
381
|
+
PhoneNumber: '',
|
|
382
|
+
OtherName: '',
|
|
383
|
+
Role: [],
|
|
384
|
+
Tags: [],
|
|
385
|
+
Status: Status.Pending,
|
|
386
|
+
UpdatedAt: new Date(),
|
|
387
|
+
CreatedAt: new Date(),
|
|
388
|
+
Id: '',
|
|
389
|
+
DataState: ObjectState.New,
|
|
390
|
+
TenantId: '',
|
|
391
|
+
ServiceName: '',
|
|
392
|
+
ActionBy: '',
|
|
393
|
+
Comment: ''
|
|
394
|
+
}];
|
|
387
395
|
this.formSubmit.emit(payload);
|
|
388
396
|
this.utilService.sendBI(true);
|
|
389
|
-
const res = await this.server.post(`User/
|
|
397
|
+
const res = await this.server.post(`User/SaveUserAccessRequests
|
|
398
|
+
`, payload);
|
|
390
399
|
this.utilService.sendBI(false);
|
|
391
400
|
if (res instanceof ErrorResponse) {
|
|
392
401
|
this.onSubmitResponseEnd.emit(res);
|
|
@@ -397,11 +406,11 @@ class UserRequestComponent {
|
|
|
397
406
|
}
|
|
398
407
|
}
|
|
399
408
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
|
|
400
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserRequestComponent, selector: "lib-user-request", inputs: { width: "width", headingTitle: "headingTitle", headingClass: "headingClass", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", text: "text", color: "color", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", googleClick: "googleClick", appleClick: "appleClick", onSubmitResponseEnd: "onSubmitResponseEnd" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{ headingClass }}\">\n {{ headingTitle }}\n </h2>\n\n <form\n [formGroup]=\"userRequestForm\"\n (ngSubmit)=\"submitForm()\"\n class=\"flex flex-col gap-5 mt-3\"\n >\n <verbena-input\n [label]=\"'First Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"FirstName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"LastName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'E-mail Address'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [customErrorMessages]=\"{\n required: 'Email address is required',\n email: 'Email address must be valid'\n }\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n formControlName=\"Password\"\n [required]=\"true\"\n [type]=\"'password'\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Confirm Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"ConfirmPassword\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [customErrorMessages]=\"{\n minLength:'Confirm Password must match password',\n required: 'Confirm Password is required and must match password',\n password: 'Password does not match',\n }\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <
|
|
409
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserRequestComponent, selector: "lib-user-request", inputs: { width: "width", headingTitle: "headingTitle", headingClass: "headingClass", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", text: "text", color: "color", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", googleClick: "googleClick", appleClick: "appleClick", onSubmitResponseEnd: "onSubmitResponseEnd" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{ headingClass }}\">\n {{ headingTitle }}\n </h2>\n\n <form\n [formGroup]=\"userRequestForm\"\n (ngSubmit)=\"submitForm()\"\n class=\"flex flex-col gap-5 mt-3\"\n >\n <verbena-input\n [label]=\"'First Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"FirstName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last Name'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"LastName\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'E-mail Address'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [customErrorMessages]=\"{\n required: 'Email address is required',\n email: 'Email address must be valid'\n }\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n formControlName=\"Password\"\n [required]=\"true\"\n [type]=\"'password'\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-input\n [label]=\"'Confirm Password'\"\n [labelColor]=\"'#666'\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"ConfirmPassword\"\n [showBorder]=\"true\"\n [bgColor]=\"'white'\"\n [minLength]=\"userRequestForm.controls['Password'].value?.length\"\n [border]=\"'1px solid #66666659'\"\n [borderRadius]=\"'12px'\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [customErrorMessages]=\"{\n minLength:'Confirm Password must match password',\n required: 'Confirm Password is required and must match password',\n password: 'Password does not match',\n }\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n\n <verbena-button\n [class]=\"'mt-6'\"\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.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: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
401
410
|
}
|
|
402
411
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestComponent, decorators: [{
|
|
403
412
|
type: Component,
|
|
404
|
-
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 <
|
|
413
|
+
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 <verbena-button\n [class]=\"'mt-6'\"\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"] }]
|
|
405
414
|
}], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: HttpWebRequestService }, { type: UtilService }], propDecorators: { width: [{
|
|
406
415
|
type: Input
|
|
407
416
|
}], headingTitle: [{
|
|
@@ -537,7 +546,7 @@ class MailValidationComponent {
|
|
|
537
546
|
this.login.emit();
|
|
538
547
|
}
|
|
539
548
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailValidationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
540
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MailValidationComponent, selector: "lib-mail-validation", inputs: { customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", width: "width", text: "text", textAlign: "textAlign", color: "color", textSize: "textSize", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd" }, outputs: { resendOtp: "resendOtp", proceedToNextStep: "proceedToNextStep", login: "login" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <div *ngIf=\"currentStep === 'linkSent'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Follow the link sent to your e-mail to verify your e-mail address\n </p>\n <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'verified'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified! You will be notified when your access has\n been authorized\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'accessGranted'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified!\n </p>\n <div class=\"mt-4\">\n <verbena-button\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n (click)=\"handleLogin()\"\n [width]=\"btnWidth\"\n textSize=\"'22px'\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n </div>\n </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.w-full{width:100%}\n"], dependencies: [{ kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type:
|
|
549
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MailValidationComponent, selector: "lib-mail-validation", inputs: { customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", pd: "pd", width: "width", text: "text", textAlign: "textAlign", color: "color", textSize: "textSize", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnBgColor: "btnBgColor", btnWidth: "btnWidth", btnPd: "btnPd" }, outputs: { resendOtp: "resendOtp", proceedToNextStep: "proceedToNextStep", login: "login" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <div *ngIf=\"currentStep === 'linkSent'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Follow the link sent to your e-mail to verify your e-mail address\n </p>\n <p class=\"mt-4\" (click)=\"handleResendOtp()\">\n Didn't get a link? <a href=\"#\" class=\"underline resend\">Resend</a>\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'verified'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified! You will be notified when your access has\n been authorized\n </p>\n </div>\n\n <div *ngIf=\"currentStep === 'accessGranted'\">\n <p [style.color]=\"textColor\" [style.font-size]=\"textSize\">\n Your e-mail has been verified!\n </p>\n <div class=\"mt-4\">\n <verbena-button\n [text]=\"text\"\n [bgColor]=\"btnBgColor\"\n [textColor]=\"color\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [pd]=\"btnPd\"\n (click)=\"handleLogin()\"\n [width]=\"btnWidth\"\n textSize=\"'22px'\"\n buttonClass=\"font-medium text-[22px] leading-[33px]\"\n ></verbena-button>\n </div>\n </div>\n</section>\n", styles: [".flex{display:flex}.overflow-hidden{overflow:hidden}.h-full{height:100%}.underline{text-decoration:underline}.mt-4{margin-top:1rem}.resend{color:#00f}.space-y-4>:not([hidden])~:not([hidden]){margin-top:1rem}.gap-1>:not([hidden])~:not([hidden]){gap:.25rem}.pt-3{padding-top:.75rem}.mt-5{margin-top:1.25rem}.border{border-width:1px}.rounded-xl{border-radius:.75rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.flex-col{flex-direction:column}.w-full{width:100%}\n"], dependencies: [{ kind: "component", type: i2.VerbenaButtonComponent, selector: "verbena-button", inputs: ["text", "icon", "svgPosition", "bgColor", "textColor", "border", "borderRadius", "pd", "width", "height", "fontSize", "fontWeight", "disable", "styleType", "svg", "svgWidth", "svgHeight", "svgColor", "buttonClass", "buttonTextClass"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
541
550
|
}
|
|
542
551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailValidationComponent, decorators: [{
|
|
543
552
|
type: Component,
|
|
@@ -629,7 +638,7 @@ class ButtonComponent {
|
|
|
629
638
|
this.buttonClick.emit();
|
|
630
639
|
}
|
|
631
640
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
632
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: ButtonComponent, selector: "lib-button", inputs: { text: "text", color: "color", border: "border", borderRadius: "borderRadius", bgColor: "bgColor", width: "width", pd: "pd", buttonClass: "buttonClass", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type:
|
|
641
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: ButtonComponent, selector: "lib-button", inputs: { text: "text", color: "color", border: "border", borderRadius: "borderRadius", bgColor: "bgColor", width: "width", pd: "pd", buttonClass: "buttonClass", disabled: "disabled" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<verbena-button\n[text]=\"text\"\n[bgColor]=\"bgColor\"\n[textColor]=\"color\"\n[border]=\"border\"\n[borderRadius]=\"borderRadius\"\n[pd]=\"pd\"\n[width]=\"width\"\n[disable]=\"disabled\"\n[ngStyle]=\"{'cursor': disabled ? 'not-allowed' : 'pointer' }\"\nbuttonClass=\"font-medium text-[22px] leading-[33px] {{buttonClass}}\"\n(click)=\"handleClick()\"\n></verbena-button>\n", styles: [".disable-btn{cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i1$2.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"] }] });
|
|
633
642
|
}
|
|
634
643
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
635
644
|
type: Component,
|
|
@@ -757,12 +766,36 @@ class SignUpComponent {
|
|
|
757
766
|
Lastname: this.signUpForm.controls['Lastname'].value,
|
|
758
767
|
Email: this.signUpForm.controls['Email'].value,
|
|
759
768
|
Password: this.signUpForm.controls['Password'].value,
|
|
760
|
-
Confirmpassword: this.signUpForm.controls['Confirmpassword'].value,
|
|
761
769
|
Terms: this.signUpForm.controls['Terms'].value,
|
|
770
|
+
Id: '61f7e48f0c651345677b7775',
|
|
771
|
+
CreatedAt: new Date(),
|
|
772
|
+
UpdatedAt: new Date(),
|
|
773
|
+
DataState: ObjectState.New,
|
|
774
|
+
id: '61f7e48f0c651345677b7775',
|
|
775
|
+
Tenant: 'James'
|
|
762
776
|
};
|
|
777
|
+
const payload = [
|
|
778
|
+
{
|
|
779
|
+
...data,
|
|
780
|
+
"Code": "123 ",
|
|
781
|
+
"ServiceName": "Test 1",
|
|
782
|
+
"MailAddress": data.Email,
|
|
783
|
+
"OtherName": "James",
|
|
784
|
+
"Status": "Inactive",
|
|
785
|
+
"PhoneNumber": "07012345678",
|
|
786
|
+
"TenantId": '61f7e48f0c651345677b7775',
|
|
787
|
+
"Role": ['tester'],
|
|
788
|
+
"Tags": [
|
|
789
|
+
{
|
|
790
|
+
"Name": "checker",
|
|
791
|
+
"IsOptional": true
|
|
792
|
+
}
|
|
793
|
+
],
|
|
794
|
+
}
|
|
795
|
+
];
|
|
763
796
|
this.formSubmit.emit(data);
|
|
764
797
|
this.utilService.sendBI(true);
|
|
765
|
-
const res = await this.server.post(`User/SaveUsers`,
|
|
798
|
+
const res = await this.server.post(`User/SaveUsers`, payload);
|
|
766
799
|
this.utilService.sendBI(false);
|
|
767
800
|
if (res instanceof ErrorResponse) {
|
|
768
801
|
this.onSubmitEnd.emit(res);
|
|
@@ -793,7 +826,7 @@ class SignUpComponent {
|
|
|
793
826
|
};
|
|
794
827
|
}
|
|
795
828
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignUpComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
|
|
796
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SignUpComponent, selector: "verben-sign-up", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", height: "height", textColor: "textColor", disabled: "disabled", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{headlingClass}}\">\n {{headlingText}}\n </h2>\n <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n <verbena-input\n [label]=\"'First name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Firstname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'First name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Lastname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'Last name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n 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:
|
|
829
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SignUpComponent, selector: "verben-sign-up", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", headlingClass: "headlingClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", height: "height", textColor: "textColor", disabled: "disabled", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsLink: "termsLink", privacyLink: "privacyLink", routerLink: "routerLink" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", googleClick: "googleClick", appleClick: "appleClick" }, ngImport: i0, template: "<section [ngStyle]=\"styles\" class=\"{{ customClass }}\">\n <h2 class=\"{{headlingClass}}\">\n {{headlingText}}\n </h2>\n <form [formGroup]=\"signUpForm\" (ngSubmit)=\"submit()\" class=\"flexWrapper\">\n <verbena-input\n [label]=\"'First name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Firstname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'First name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Last name'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'text'\"\n formControlName=\"Lastname\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n [customErrorMessages]=\"{required:'Last name is required'}\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Email'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'email'\"\n formControlName=\"Email\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n class=\"outline-none focus-none\"\n ></verbena-input>\n <verbena-input\n [label]=\"'Password'\"\n [labelColor]=\"inputLabelColor\"\n [placeHolder]=\"''\"\n [required]=\"true\"\n [type]=\"'password'\"\n formControlName=\"Password\"\n [showBorder]=\"true\"\n [bgColor]=\"inputBgColor\"\n [border]=\"inputBorder\"\n [borderRadius]=\"inputBorderRadius\"\n [showErrorMessage]=\"true\"\n [errorMessageColor]=\"'red'\"\n [errorBorderColor]=\"'red'\"\n [errorPosition]=\"'bottom'\"\n 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: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.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: i6.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"] }] });
|
|
797
830
|
}
|
|
798
831
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignUpComponent, decorators: [{
|
|
799
832
|
type: Component,
|
|
@@ -970,9 +1003,14 @@ class SignInComponent {
|
|
|
970
1003
|
Email: this.loginForm.controls['Email'].value,
|
|
971
1004
|
Password: this.loginForm.controls['Password'].value,
|
|
972
1005
|
};
|
|
1006
|
+
const payload = {
|
|
1007
|
+
"MailAddress": data.Email,
|
|
1008
|
+
"Password": data.Password,
|
|
1009
|
+
"LoginType": "InApp"
|
|
1010
|
+
};
|
|
973
1011
|
this.formSubmit.emit(data);
|
|
974
1012
|
this.utilService.sendBI(true);
|
|
975
|
-
const res = await this.server.post(`User/Login`,
|
|
1013
|
+
const res = await this.server.post(`User/Login`, payload);
|
|
976
1014
|
this.utilService.sendBI(false);
|
|
977
1015
|
if (res instanceof ErrorResponse) {
|
|
978
1016
|
this.onSubmitEnd.emit(res);
|
|
@@ -1003,7 +1041,7 @@ class SignInComponent {
|
|
|
1003
1041
|
};
|
|
1004
1042
|
}
|
|
1005
1043
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignInComponent, deps: [{ token: i1$1.FormBuilder }, { token: HttpWebRequestService }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1006
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SignInComponent, selector: "verben-sign-in", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", routerLink: "routerLink", forgetPasswordClass: "forgetPasswordClass", headlingClass: "headlingClass", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsErrorText: "termsErrorText" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", 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:
|
|
1044
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SignInComponent, selector: "verben-sign-in", inputs: { headlingText: "headlingText", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", customClass: "customClass", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", routerLink: "routerLink", forgetPasswordClass: "forgetPasswordClass", headlingClass: "headlingClass", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText", inputLabelColor: "inputLabelColor", inputBgColor: "inputBgColor", inputBorder: "inputBorder", inputBorderRadius: "inputBorderRadius", termsErrorText: "termsErrorText" }, outputs: { formSubmit: "formSubmit", onSubmitEnd: "onSubmitEnd", 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: i1$2.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: i6.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"] }] });
|
|
1007
1045
|
}
|
|
1008
1046
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SignInComponent, decorators: [{
|
|
1009
1047
|
type: Component,
|
|
@@ -1139,7 +1177,7 @@ class OtpInputComponent {
|
|
|
1139
1177
|
this.otpChange.emit(otp);
|
|
1140
1178
|
}
|
|
1141
1179
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OtpInputComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1142
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: OtpInputComponent, selector: "verben-otp-input", inputs: { length: "length", otpClass: "otpClass" }, outputs: { otpChange: "otpChange" }, ngImport: i0, template: "<form [formGroup]=\"otpForm\" >\n <div formArrayName=\"otpArray\" class=\"otp-container\">\n <input\n *ngFor=\"let control of otpArray.controls; let i = index\"\n [id]=\"'otp-input-' + i\"\n class=\"otp-input {{otpClass}}\"\n maxlength=\"1\"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n [formControlName]=\"i\"\n type=\"text\"\n />\n </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"], dependencies: [{ kind: "directive", type:
|
|
1180
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: OtpInputComponent, selector: "verben-otp-input", inputs: { length: "length", otpClass: "otpClass" }, outputs: { otpChange: "otpChange" }, ngImport: i0, template: "<form [formGroup]=\"otpForm\" >\n <div formArrayName=\"otpArray\" class=\"otp-container\">\n <input\n *ngFor=\"let control of otpArray.controls; let i = index\"\n [id]=\"'otp-input-' + i\"\n class=\"otp-input {{otpClass}}\"\n maxlength=\"1\"\n (input)=\"handleInput($event, i)\"\n (keydown)=\"handleKeydown($event, i)\"\n [formControlName]=\"i\"\n type=\"text\"\n />\n </div>\n</form>\n", styles: [".otp-container{display:flex;gap:15px}.otp-input{width:50px;height:46px;text-align:center;font-size:1.5rem;border:1px solid #66666658;border-radius:12px}.otp-input:focus{border-color:#ffe681;outline:none}\n"], dependencies: [{ kind: "directive", type: i1$2.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"] }] });
|
|
1143
1181
|
}
|
|
1144
1182
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: OtpInputComponent, decorators: [{
|
|
1145
1183
|
type: Component,
|
|
@@ -1216,7 +1254,7 @@ class TwoFactorAuthOtpComponent {
|
|
|
1216
1254
|
};
|
|
1217
1255
|
}
|
|
1218
1256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthOtpComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1219
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: TwoFactorAuthOtpComponent, selector: "verben-auth-otp", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", resendClass: "resendClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", length: "length", otpClass: "otpClass", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText" }, outputs: { buttonClick: "buttonClick", resend: "resend" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"otpWrapper\"> \n <p class=\"{{paragraphClass}}\">Enter the {{length}} digit code sent to your phone number</p>\n <verben-otp-input \n [length]=\"length\" \n (otpChange)=\"onOtpChange($event)\"\n [otpClass]=\"otpClass\"\n ></verben-otp-input>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n (buttonClick)=\"submitData()\"\n [disabled]=\"!otpForm.valid\"\n ></lib-button>\n <p class=\"resendWrapper\">\n Didn\u2019t get a code?\n <a class=\"{{resendClass}}\" (click)=\"resendOtp()\">Resend</a>\n </p>\n \n</section>", styles: [".otpWrapper{margin-bottom:20px;margin-top:15px}.resendWrapper{margin-top:10px;margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type:
|
|
1257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: TwoFactorAuthOtpComponent, selector: "verben-auth-otp", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", resendClass: "resendClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height", length: "length", otpClass: "otpClass", btnClass: "btnClass", btnBgColor: "btnBgColor", btnColor: "btnColor", btnBorder: "btnBorder", btnBorderRadius: "btnBorderRadius", btnPd: "btnPd", btnText: "btnText" }, outputs: { buttonClick: "buttonClick", resend: "resend" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"otpWrapper\"> \n <p class=\"{{paragraphClass}}\">Enter the {{length}} digit code sent to your phone number</p>\n <verben-otp-input \n [length]=\"length\" \n (otpChange)=\"onOtpChange($event)\"\n [otpClass]=\"otpClass\"\n ></verben-otp-input>\n </div>\n <lib-button \n [buttonClass]=\"btnClass\"\n [color]=\"btnColor\"\n [border]=\"btnBorder\"\n [borderRadius]=\"btnBorderRadius\"\n [bgColor]=\"btnBgColor\"\n [pd]=\"btnPd\"\n [text]=\"btnText\" \n (buttonClick)=\"submitData()\"\n [disabled]=\"!otpForm.valid\"\n ></lib-button>\n <p class=\"resendWrapper\">\n Didn\u2019t get a code?\n <a class=\"{{resendClass}}\" (click)=\"resendOtp()\">Resend</a>\n </p>\n \n</section>", styles: [".otpWrapper{margin-bottom:20px;margin-top:15px}.resendWrapper{margin-top:10px;margin-bottom:0!important}\n"], dependencies: [{ kind: "directive", type: i1$2.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"] }] });
|
|
1220
1258
|
}
|
|
1221
1259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthOtpComponent, decorators: [{
|
|
1222
1260
|
type: Component,
|
|
@@ -1346,7 +1384,7 @@ class TwoFactorAuthSetupComponent {
|
|
|
1346
1384
|
};
|
|
1347
1385
|
}
|
|
1348
1386
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthSetupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1349
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: TwoFactorAuthSetupComponent, selector: "verben-two-factor-auth-setup", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", buttonClass: "buttonClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { smsClick: "smsClick", mailClick: "mailClick", skipClick: "skipClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"setUpBtnWrapper\">\n <verbena-button\n svg=\"2fa-mail\"\n [svgHeight]=\"16\"\n [svgWidth]=\"20\"\n text=\"Continue with Mail\"\n bgColor=\"white\"\n textColor=\"#333333\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n (click)=\"continueWithMail()\"\n ></verbena-button>\n <verbena-button\n svg=\"2fa-sms\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with SMS\"\n bgColor=\"white\"\n textColor=\"#333333\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n (click)=\"continueWithSMS()\"\n ></verbena-button>\n <div class=\"iconWrapper\" (click)=\"handleSkip()\"> \n <p class=\"{{paragraphClass}}\">Skip for now</p>\n <verben-svg \n icon=\"skip-forward\"\n [height]=\"24\"\n [width]=\"24\"\n />\n </div>\n</div>\n</section>", styles: [".setUpBtnWrapper{display:flex;flex-direction:column;gap:12px;margin-top:40px}.iconWrapper{display:flex;cursor:pointer;align-items:center;justify-content:end;gap:12px;margin-bottom:50px}.custom-button{font-weight:500}\n"], dependencies: [{ kind: "directive", type:
|
|
1387
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: TwoFactorAuthSetupComponent, selector: "verben-two-factor-auth-setup", inputs: { customClass: "customClass", headlingClass: "headlingClass", headlingText: "headlingText", paragraphClass: "paragraphClass", buttonClass: "buttonClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { smsClick: "smsClick", mailClick: "mailClick", skipClick: "skipClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">{{headlingText}}</h3>\n <div class=\"setUpBtnWrapper\">\n <verbena-button\n svg=\"2fa-mail\"\n [svgHeight]=\"16\"\n [svgWidth]=\"20\"\n text=\"Continue with Mail\"\n bgColor=\"white\"\n textColor=\"#333333\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n buttonClass=\"font-normal text-[24px] leading-[29.05px] text-[#333]\"\n (click)=\"continueWithMail()\"\n ></verbena-button>\n <verbena-button\n svg=\"2fa-sms\"\n [svgHeight]=\"24\"\n [svgWidth]=\"24\"\n text=\"Continue with SMS\"\n bgColor=\"white\"\n textColor=\"#333333\"\n border=\"1px solid #333\"\n borderRadius=\"40px\"\n pd=\"10px 20px\"\n width=\"100%\"\n svgPosition=\"left\"\n (click)=\"continueWithSMS()\"\n ></verbena-button>\n <div class=\"iconWrapper\" (click)=\"handleSkip()\"> \n <p class=\"{{paragraphClass}}\">Skip for now</p>\n <verben-svg \n icon=\"skip-forward\"\n [height]=\"24\"\n [width]=\"24\"\n />\n </div>\n</div>\n</section>", styles: [".setUpBtnWrapper{display:flex;flex-direction:column;gap:12px;margin-top:40px}.iconWrapper{display:flex;cursor:pointer;align-items:center;justify-content:end;gap:12px;margin-bottom:50px}.custom-button{font-weight:500}\n"], dependencies: [{ kind: "directive", type: i1$2.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"] }] });
|
|
1350
1388
|
}
|
|
1351
1389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TwoFactorAuthSetupComponent, decorators: [{
|
|
1352
1390
|
type: Component,
|
|
@@ -1435,7 +1473,7 @@ class MailComponent {
|
|
|
1435
1473
|
};
|
|
1436
1474
|
}
|
|
1437
1475
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MailComponent, selector: "verben-mail-message", inputs: { customClass: "customClass", headlingClass: "headlingClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">Your e-mail has been verified!</h3>\n <lib-button \n text=\"Login\" \n buttonClass=\"\"\n (click)=\"goToLogin()\"\n ></lib-button> \n</section>\n", styles: [""], dependencies: [{ kind: "directive", type:
|
|
1476
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: MailComponent, selector: "verben-mail-message", inputs: { customClass: "customClass", headlingClass: "headlingClass", width: "width", maxWidth: "maxWidth", margin: "margin", pd: "pd", bgColor: "bgColor", boxShadow: "boxShadow", border: "border", borderRadius: "borderRadius", textColor: "textColor", height: "height" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<section\n[ngStyle]=\"styles\"\nclass=\"{{ customClass }}\"\n>\n <h3 class=\"{{headlingClass}}\">Your e-mail has been verified!</h3>\n <lib-button \n text=\"Login\" \n buttonClass=\"\"\n (click)=\"goToLogin()\"\n ></lib-button> \n</section>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "color", "border", "borderRadius", "bgColor", "width", "pd", "buttonClass", "disabled"], outputs: ["buttonClick"] }] });
|
|
1439
1477
|
}
|
|
1440
1478
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: MailComponent, decorators: [{
|
|
1441
1479
|
type: Component,
|
|
@@ -1626,7 +1664,7 @@ const mockData$2 = new Array(10).fill(1).map((id, i) => ({
|
|
|
1626
1664
|
Link: `Link ${id + i}`,
|
|
1627
1665
|
CreatedAt: new Date(),
|
|
1628
1666
|
UpdatedAt: new Date(),
|
|
1629
|
-
|
|
1667
|
+
DataState: ObjectState.New,
|
|
1630
1668
|
Tenant: `Tenant ${id + i}`,
|
|
1631
1669
|
}));
|
|
1632
1670
|
|
|
@@ -1741,7 +1779,7 @@ class SsoFormComponent {
|
|
|
1741
1779
|
}
|
|
1742
1780
|
}
|
|
1743
1781
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoFormComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1744
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SsoFormComponent, selector: "lib-sso-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\"\n>\n <verbena-input\n name=\"Name\"\n label=\"Name:\"\n formControlName=\"Name\"\n [(ngModel)]=\"currentData?.data.Name\"\n />\n <verbena-input\n label=\"Description:\"\n name=\"Description\"\n formControlName=\"Description\"\n [(ngModel)]=\"currentData?.data.Description\"\n />\n <verbena-input\n label=\"Link:\"\n name=\"Link\"\n formControlName=\"Link\"\n [(ngModel)]=\"currentData?.data.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\n id=\"logo\"\n[type]=\"'file'\"\n label=\"Logo:\"\n name=\"Logo\"\n accept=\"image/png\"\n formControlName=\"Logo\"\n (change)=\"onFileSelected($event)\"\n formControlName=\"Logo\"\n/>\n<span class=\"flex gap-2\">\n<span class=\"bg-primary flex icon-container rounded-md justify-center items-center\">\n <img src=\"./assets/icons/cam.png\" class=\"icon-width\"/>\n</span>\n<span class=\"bg-primary flex icon-container rounded-md justify-center items-center\">\n <img src=\"./assets/icons/file.png\" class=\"icon-width2\"/>\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: ["#logo{display:none}.icon-width{width:20px}.icon-width2{width:15px}.icon-container{width:30px;height:30px}\n"], dependencies: [{ kind: "directive", type:
|
|
1782
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: SsoFormComponent, selector: "lib-sso-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\"\n>\n <verbena-input\n name=\"Name\"\n label=\"Name:\"\n formControlName=\"Name\"\n [(ngModel)]=\"currentData?.data.Name\"\n />\n <verbena-input\n label=\"Description:\"\n name=\"Description\"\n formControlName=\"Description\"\n [(ngModel)]=\"currentData?.data.Description\"\n />\n <verbena-input\n label=\"Link:\"\n name=\"Link\"\n formControlName=\"Link\"\n [(ngModel)]=\"currentData?.data.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\n id=\"logo\"\n[type]=\"'file'\"\n label=\"Logo:\"\n name=\"Logo\"\n accept=\"image/png\"\n formControlName=\"Logo\"\n (change)=\"onFileSelected($event)\"\n formControlName=\"Logo\"\n/>\n<span class=\"flex gap-2\">\n<span class=\"bg-primary flex icon-container rounded-md justify-center items-center\">\n <img src=\"./assets/icons/cam.png\" class=\"icon-width\"/>\n</span>\n<span class=\"bg-primary flex icon-container rounded-md justify-center items-center\">\n <img src=\"./assets/icons/file.png\" class=\"icon-width2\"/>\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: ["#logo{display:none}.icon-width{width:20px}.icon-width2{width:15px}.icon-container{width:30px;height:30px}\n"], dependencies: [{ kind: "directive", type: i1$2.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"] }] });
|
|
1745
1783
|
}
|
|
1746
1784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoFormComponent, decorators: [{
|
|
1747
1785
|
type: Component,
|
|
@@ -1927,7 +1965,7 @@ class SsoComponent {
|
|
|
1927
1965
|
console.log(`State changed for ${event.key}:`, event.value);
|
|
1928
1966
|
}
|
|
1929
1967
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1930
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: SsoComponent, selector: "lib-sso", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isToggle: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 [cardIcon]=\"'list-view'\"\n [tableIcon]=\"'table-view'\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div table-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=\"logo-width\" [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 <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 card-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 >\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.data.Name }}</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\">{{ item.data.Description }}</span>\n </div>\n <img class=\"logo-width\" [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 mt-1\">\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}.logo-width{width:70px}\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", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { 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" }] });
|
|
1968
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.11", type: SsoComponent, selector: "lib-sso", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isToggle: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 [cardIcon]=\"'list-view'\"\n [tableIcon]=\"'table-view'\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div table-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=\"logo-width\" [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 <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 card-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 >\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.data.Name }}</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\">{{ item.data.Description }}</span>\n </div>\n <img class=\"logo-width\" [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 mt-1\">\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}.logo-width{width:70px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.DataViewComponent, selector: "verben-data-view", inputs: ["buttonClass", "iconClass", "activeIconClass", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { 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: i1$2.DatePipe, name: "date" }] });
|
|
1931
1969
|
}
|
|
1932
1970
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: SsoComponent, decorators: [{
|
|
1933
1971
|
type: Component,
|
|
@@ -2048,7 +2086,7 @@ const mockData$1 = new Array(10)
|
|
|
2048
2086
|
Tenants: [],
|
|
2049
2087
|
CreatedAt: new Date(),
|
|
2050
2088
|
UpdatedAt: new Date(),
|
|
2051
|
-
|
|
2089
|
+
DataState: ObjectState.New,
|
|
2052
2090
|
Tenant: `Tenant${id + i}`,
|
|
2053
2091
|
}));
|
|
2054
2092
|
function randomEnum$1(anEnum) {
|
|
@@ -2140,7 +2178,7 @@ class UserRequestApprovalService {
|
|
|
2140
2178
|
Tenants: [],
|
|
2141
2179
|
CreatedAt: new Date(),
|
|
2142
2180
|
UpdatedAt: new Date(),
|
|
2143
|
-
|
|
2181
|
+
DataState: ObjectState.New,
|
|
2144
2182
|
Tenant: `Tenant${id + i}`,
|
|
2145
2183
|
}));
|
|
2146
2184
|
}
|
|
@@ -2156,6 +2194,226 @@ function randomEnum(anEnum) {
|
|
|
2156
2194
|
return enumValues[randomIndex];
|
|
2157
2195
|
}
|
|
2158
2196
|
|
|
2197
|
+
class UserAccessRequestService {
|
|
2198
|
+
httpService;
|
|
2199
|
+
BASE_URL = 'User';
|
|
2200
|
+
constructor(httpService) {
|
|
2201
|
+
this.httpService = httpService;
|
|
2202
|
+
}
|
|
2203
|
+
/**
|
|
2204
|
+
* Get user access requests with pagination and sorting
|
|
2205
|
+
* @param skip Number of records to skip
|
|
2206
|
+
* @param limit Number of records to take
|
|
2207
|
+
* @param sortParam Sort parameter
|
|
2208
|
+
* @param sortOrder Sort order ('asc' or 'desc')
|
|
2209
|
+
* @returns Promise containing the user access requests
|
|
2210
|
+
*/
|
|
2211
|
+
getUserAccessRequests(skip, limit, sortParam, sortOrder) {
|
|
2212
|
+
const url = `${this.BASE_URL}/GetUserAccessRequests/${skip}/${limit}/${sortParam}/${sortOrder}`;
|
|
2213
|
+
return this.httpService.get(url);
|
|
2214
|
+
}
|
|
2215
|
+
/**
|
|
2216
|
+
* Get user access requests with additional parameter, pagination and sorting
|
|
2217
|
+
* @param param Search parameter
|
|
2218
|
+
* @param skip Number of records to skip
|
|
2219
|
+
* @param limit Number of records to take
|
|
2220
|
+
* @param sortParam Sort parameter
|
|
2221
|
+
* @param sortOrder Sort order ('asc' or 'desc')
|
|
2222
|
+
* @returns Promise containing the filtered user access requests
|
|
2223
|
+
*/
|
|
2224
|
+
getUserAccessRequestWithParam(param, skip, limit, sortParam, sortOrder) {
|
|
2225
|
+
const url = `${this.BASE_URL}/GetUserAccessRequestWithParam/${param}/${skip}/${limit}/${sortParam}/${sortOrder}`;
|
|
2226
|
+
return this.httpService.get(url);
|
|
2227
|
+
}
|
|
2228
|
+
/**
|
|
2229
|
+
* Save multiple user access requests
|
|
2230
|
+
* @param requests Array of user access requests to save
|
|
2231
|
+
* @returns Promise containing the save operation result
|
|
2232
|
+
*/
|
|
2233
|
+
saveUserAccessRequests(requests) {
|
|
2234
|
+
const url = `${this.BASE_URL}/SaveUserAccessRequests`;
|
|
2235
|
+
return this.httpService.post(url, requests);
|
|
2236
|
+
}
|
|
2237
|
+
/**
|
|
2238
|
+
* Delete multiple user access requests
|
|
2239
|
+
* @param requestIds Array of request IDs to delete
|
|
2240
|
+
* @returns Observable containing the delete operation result
|
|
2241
|
+
*/
|
|
2242
|
+
deleteUserAccessRequests(requestIds) {
|
|
2243
|
+
const url = `${this.BASE_URL}/DeleteUserAccessRequests`;
|
|
2244
|
+
return this.httpService.delete(`${url}?data=${requestIds.join(',')}`);
|
|
2245
|
+
}
|
|
2246
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestService, deps: [{ token: HttpWebRequestService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2247
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestService, providedIn: 'root' });
|
|
2248
|
+
}
|
|
2249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestService, decorators: [{
|
|
2250
|
+
type: Injectable,
|
|
2251
|
+
args: [{
|
|
2252
|
+
providedIn: 'root',
|
|
2253
|
+
}]
|
|
2254
|
+
}], ctorParameters: () => [{ type: HttpWebRequestService }] });
|
|
2255
|
+
|
|
2256
|
+
class UserAccessRequestState {
|
|
2257
|
+
updating$ = new BehaviorSubject(false);
|
|
2258
|
+
requests$ = new BehaviorSubject([]);
|
|
2259
|
+
queryParams$ = new BehaviorSubject({
|
|
2260
|
+
skip: 0,
|
|
2261
|
+
limit: 10,
|
|
2262
|
+
sortParam: 'createdDate',
|
|
2263
|
+
sortOrder: 'asc',
|
|
2264
|
+
});
|
|
2265
|
+
isUpdating$() {
|
|
2266
|
+
return this.updating$.asObservable();
|
|
2267
|
+
}
|
|
2268
|
+
setUpdating(isUpdating) {
|
|
2269
|
+
this.updating$.next(isUpdating);
|
|
2270
|
+
}
|
|
2271
|
+
getRequests$() {
|
|
2272
|
+
return this.requests$.asObservable();
|
|
2273
|
+
}
|
|
2274
|
+
setRequests(requests) {
|
|
2275
|
+
this.requests$.next(requests);
|
|
2276
|
+
}
|
|
2277
|
+
getQueryParams$() {
|
|
2278
|
+
return this.queryParams$.asObservable();
|
|
2279
|
+
}
|
|
2280
|
+
getQueryParamsValue() {
|
|
2281
|
+
return this.queryParams$.getValue();
|
|
2282
|
+
}
|
|
2283
|
+
updateQueryParams(params) {
|
|
2284
|
+
this.queryParams$.next({ ...this.queryParams$.getValue(), ...params });
|
|
2285
|
+
}
|
|
2286
|
+
addRequest(request) {
|
|
2287
|
+
const currentValue = this.requests$.getValue();
|
|
2288
|
+
this.requests$.next([...currentValue, request]);
|
|
2289
|
+
}
|
|
2290
|
+
updateRequest(updatedRequest) {
|
|
2291
|
+
const requests = this.requests$.getValue();
|
|
2292
|
+
const index = requests.findIndex((r) => r.Id === updatedRequest.Id);
|
|
2293
|
+
if (index !== -1) {
|
|
2294
|
+
requests[index] = updatedRequest;
|
|
2295
|
+
this.requests$.next([...requests]);
|
|
2296
|
+
}
|
|
2297
|
+
}
|
|
2298
|
+
removeRequest(requestId) {
|
|
2299
|
+
const currentValue = this.requests$.getValue();
|
|
2300
|
+
this.requests$.next(currentValue.filter((r) => r.Id !== requestId));
|
|
2301
|
+
}
|
|
2302
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestState, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2303
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestState, providedIn: 'root' });
|
|
2304
|
+
}
|
|
2305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestState, decorators: [{
|
|
2306
|
+
type: Injectable,
|
|
2307
|
+
args: [{
|
|
2308
|
+
providedIn: 'root',
|
|
2309
|
+
}]
|
|
2310
|
+
}] });
|
|
2311
|
+
|
|
2312
|
+
class UserAccessRequestFacade {
|
|
2313
|
+
userAccessRequestService;
|
|
2314
|
+
userAccessRequestState;
|
|
2315
|
+
constructor(userAccessRequestService, userAccessRequestState) {
|
|
2316
|
+
this.userAccessRequestService = userAccessRequestService;
|
|
2317
|
+
this.userAccessRequestState = userAccessRequestState;
|
|
2318
|
+
}
|
|
2319
|
+
isUpdating$() {
|
|
2320
|
+
return this.userAccessRequestState.isUpdating$();
|
|
2321
|
+
}
|
|
2322
|
+
getRequests$() {
|
|
2323
|
+
return this.userAccessRequestState.getRequests$();
|
|
2324
|
+
}
|
|
2325
|
+
getQueryParams$() {
|
|
2326
|
+
return this.userAccessRequestState.getQueryParams$();
|
|
2327
|
+
}
|
|
2328
|
+
async loadRequests() {
|
|
2329
|
+
try {
|
|
2330
|
+
this.userAccessRequestState.setUpdating(true);
|
|
2331
|
+
const params = this.userAccessRequestState.getQueryParamsValue();
|
|
2332
|
+
const requests = await this.userAccessRequestService.getUserAccessRequests(params.skip, params.limit, params.sortParam || 'createdDate', params.sortOrder);
|
|
2333
|
+
this.userAccessRequestState.setRequests(requests);
|
|
2334
|
+
}
|
|
2335
|
+
catch (error) {
|
|
2336
|
+
console.error('Failed to load requests:', error);
|
|
2337
|
+
throw error;
|
|
2338
|
+
}
|
|
2339
|
+
finally {
|
|
2340
|
+
this.userAccessRequestState.setUpdating(false);
|
|
2341
|
+
}
|
|
2342
|
+
}
|
|
2343
|
+
async loadRequestsWithParam(param) {
|
|
2344
|
+
try {
|
|
2345
|
+
this.userAccessRequestState.setUpdating(true);
|
|
2346
|
+
const params = this.userAccessRequestState.getQueryParamsValue();
|
|
2347
|
+
const requests = await this.userAccessRequestService.getUserAccessRequestWithParam(param, params.skip, params.limit, params.sortParam || 'createdDate', params.sortOrder);
|
|
2348
|
+
this.userAccessRequestState.setRequests(requests);
|
|
2349
|
+
}
|
|
2350
|
+
catch (error) {
|
|
2351
|
+
console.error('Failed to load requests with param:', error);
|
|
2352
|
+
throw error;
|
|
2353
|
+
}
|
|
2354
|
+
finally {
|
|
2355
|
+
this.userAccessRequestState.setUpdating(false);
|
|
2356
|
+
}
|
|
2357
|
+
}
|
|
2358
|
+
updateQueryParams(params) {
|
|
2359
|
+
this.userAccessRequestState.updateQueryParams(params);
|
|
2360
|
+
this.loadRequests();
|
|
2361
|
+
}
|
|
2362
|
+
async addRequest(request) {
|
|
2363
|
+
try {
|
|
2364
|
+
this.userAccessRequestState.setUpdating(true);
|
|
2365
|
+
const newRequest = { ...request };
|
|
2366
|
+
this.userAccessRequestState.addRequest(newRequest);
|
|
2367
|
+
await this.userAccessRequestService.saveUserAccessRequests([newRequest]);
|
|
2368
|
+
await this.loadRequests(); // Reload to get server-side changes
|
|
2369
|
+
}
|
|
2370
|
+
catch (error) {
|
|
2371
|
+
console.error('Failed to add request:', error);
|
|
2372
|
+
this.userAccessRequestState.removeRequest(request.Id);
|
|
2373
|
+
throw error;
|
|
2374
|
+
}
|
|
2375
|
+
finally {
|
|
2376
|
+
this.userAccessRequestState.setUpdating(false);
|
|
2377
|
+
}
|
|
2378
|
+
}
|
|
2379
|
+
async updateRequest(request) {
|
|
2380
|
+
try {
|
|
2381
|
+
this.userAccessRequestState.setUpdating(true);
|
|
2382
|
+
await this.userAccessRequestService.saveUserAccessRequests([request]);
|
|
2383
|
+
this.userAccessRequestState.updateRequest(request);
|
|
2384
|
+
}
|
|
2385
|
+
catch (error) {
|
|
2386
|
+
console.error('Failed to update request:', error);
|
|
2387
|
+
throw error;
|
|
2388
|
+
}
|
|
2389
|
+
finally {
|
|
2390
|
+
this.userAccessRequestState.setUpdating(false);
|
|
2391
|
+
}
|
|
2392
|
+
}
|
|
2393
|
+
async deleteRequest(requestId) {
|
|
2394
|
+
try {
|
|
2395
|
+
this.userAccessRequestState.setUpdating(true);
|
|
2396
|
+
await from(this.userAccessRequestService.deleteUserAccessRequests([requestId])).toPromise();
|
|
2397
|
+
this.userAccessRequestState.removeRequest(requestId);
|
|
2398
|
+
}
|
|
2399
|
+
catch (error) {
|
|
2400
|
+
console.error('Failed to delete request:', error);
|
|
2401
|
+
throw error;
|
|
2402
|
+
}
|
|
2403
|
+
finally {
|
|
2404
|
+
this.userAccessRequestState.setUpdating(false);
|
|
2405
|
+
}
|
|
2406
|
+
}
|
|
2407
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestFacade, deps: [{ token: UserAccessRequestService }, { token: UserAccessRequestState }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2408
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestFacade, providedIn: 'root' });
|
|
2409
|
+
}
|
|
2410
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserAccessRequestFacade, decorators: [{
|
|
2411
|
+
type: Injectable,
|
|
2412
|
+
args: [{
|
|
2413
|
+
providedIn: 'root',
|
|
2414
|
+
}]
|
|
2415
|
+
}], ctorParameters: () => [{ type: UserAccessRequestService }, { type: UserAccessRequestState }] });
|
|
2416
|
+
|
|
2159
2417
|
class UserRequestFormComponent {
|
|
2160
2418
|
fb;
|
|
2161
2419
|
set currentData(value) {
|
|
@@ -2234,6 +2492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
|
|
|
2234
2492
|
class UserRequestApprovalComponent {
|
|
2235
2493
|
cdr;
|
|
2236
2494
|
service;
|
|
2495
|
+
userAccessRequestFacade;
|
|
2237
2496
|
cardDataView;
|
|
2238
2497
|
dataView;
|
|
2239
2498
|
columns = [
|
|
@@ -2284,12 +2543,28 @@ class UserRequestApprovalComponent {
|
|
|
2284
2543
|
],
|
|
2285
2544
|
children: [],
|
|
2286
2545
|
}));
|
|
2287
|
-
constructor(cdr, service) {
|
|
2546
|
+
constructor(cdr, service, userAccessRequestFacade) {
|
|
2288
2547
|
this.cdr = cdr;
|
|
2289
2548
|
this.service = service;
|
|
2549
|
+
this.userAccessRequestFacade = userAccessRequestFacade;
|
|
2290
2550
|
}
|
|
2291
|
-
ngOnInit() {
|
|
2551
|
+
async ngOnInit() {
|
|
2292
2552
|
this.data = this.service.getMockUserRequests();
|
|
2553
|
+
try {
|
|
2554
|
+
await this.userAccessRequestFacade.loadRequests();
|
|
2555
|
+
}
|
|
2556
|
+
catch (error) {
|
|
2557
|
+
// Handle error
|
|
2558
|
+
}
|
|
2559
|
+
}
|
|
2560
|
+
// To search with parameter:
|
|
2561
|
+
async searchRequests(param) {
|
|
2562
|
+
try {
|
|
2563
|
+
await this.userAccessRequestFacade.loadRequestsWithParam(param);
|
|
2564
|
+
}
|
|
2565
|
+
catch (error) {
|
|
2566
|
+
// Handle error
|
|
2567
|
+
}
|
|
2293
2568
|
}
|
|
2294
2569
|
openDetailView(mailAddress) {
|
|
2295
2570
|
const cardItem = this.getCardDataByMailAddress(mailAddress);
|
|
@@ -2453,13 +2728,13 @@ class UserRequestApprovalComponent {
|
|
|
2453
2728
|
onStateChange(event) {
|
|
2454
2729
|
console.log(`State changed for ${event.key}:`, event.value);
|
|
2455
2730
|
}
|
|
2456
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestApprovalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: UserRequestApprovalService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2457
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserRequestApprovalComponent, selector: "lib-user-request-approval", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isCreate: false\n }\"\n [buttonClass]=\"'my-custom-button-class'\"\n [iconClass]=\"'my-icon-class'\"\n [activeIconClass]=\"'my-active-icon-class'\"\n [selectedColumnCount]=\"0\"\n [selectedSortCount]=\"0\"\n [selectedFilterTableCount]=\"0\"\n (viewChange)=\"onViewChange($event)\"\n (stateChange)=\"onStateChange($event)\"\n >\n <div table-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 >\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 card-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: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-\\[8px\\]{margin-top:8px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.rounded-\\[9px\\]{border-radius:9px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity))}.border-secondary-200{border-color:#d7dbe6}.bg-\\[\\#CAE1CC\\]{--tw-bg-opacity: 1;background-color:rgb(202 225 204 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.text-\\[13px\\]{font-size:13px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-\\[500\\]{font-weight:500}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#4ABB54\\]{--tw-text-opacity: 1;color:rgb(74 187 84 / var(--tw-text-opacity))}.text-\\[\\#666666\\]{--tw-text-opacity: 1;color:rgb(102 102 102 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}\n"], 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", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { 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" }] });
|
|
2731
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestApprovalComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: UserRequestApprovalService }, { token: UserAccessRequestFacade }], target: i0.ɵɵFactoryTarget.Component });
|
|
2732
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserRequestApprovalComponent, selector: "lib-user-request-approval", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-8\">\n <verben-data-view\n #vdv\n [viewState]=\"{\n isSearch: true,\n isColumn: true,\n isFilter: true,\n isSort: true,\n isExport: true,\n isSelect: true,\n isCreate: false,\n isToggle: 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 table-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>\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 card-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: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-\\[8px\\]{margin-top:8px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.rounded-\\[9px\\]{border-radius:9px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity))}.border-secondary-200{border-color:#d7dbe6}.bg-\\[\\#CAE1CC\\]{--tw-bg-opacity: 1;background-color:rgb(202 225 204 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.text-\\[13px\\]{font-size:13px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#4ABB54\\]{--tw-text-opacity: 1;color:rgb(74 187 84 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}\n"], dependencies: [{ kind: "directive", type: i1$2.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", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { 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: i1$2.DatePipe, name: "date" }] });
|
|
2458
2733
|
}
|
|
2459
2734
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserRequestApprovalComponent, decorators: [{
|
|
2460
2735
|
type: Component,
|
|
2461
|
-
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 table-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 >\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 card-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: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-\\[8px\\]{margin-top:8px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.rounded-\\[9px\\]{border-radius:9px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity))}.border-secondary-200{border-color:#d7dbe6}.bg-\\[\\#CAE1CC\\]{--tw-bg-opacity: 1;background-color:rgb(202 225 204 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.text-\\[13px\\]{font-size:13px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-\\[500\\]{font-weight:500}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#4ABB54\\]{--tw-text-opacity: 1;color:rgb(74 187 84 / var(--tw-text-opacity))}.text-\\[\\#666666\\]{--tw-text-opacity: 1;color:rgb(102 102 102 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}\n"] }]
|
|
2462
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: UserRequestApprovalService }], propDecorators: { cardDataView: [{
|
|
2736
|
+
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 isToggle: 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 table-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>\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 card-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: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-\\[8px\\]{margin-top:8px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.rounded-\\[9px\\]{border-radius:9px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity))}.border-secondary-200{border-color:#d7dbe6}.bg-\\[\\#CAE1CC\\]{--tw-bg-opacity: 1;background-color:rgb(202 225 204 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.text-\\[13px\\]{font-size:13px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#4ABB54\\]{--tw-text-opacity: 1;color:rgb(74 187 84 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}\n"] }]
|
|
2737
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: UserRequestApprovalService }, { type: UserAccessRequestFacade }], propDecorators: { cardDataView: [{
|
|
2463
2738
|
type: ViewChild,
|
|
2464
2739
|
args: ['vdcv']
|
|
2465
2740
|
}], dataView: [{
|
|
@@ -2596,7 +2871,7 @@ const mockData = new Array(10)
|
|
|
2596
2871
|
Role: ["Manager"],
|
|
2597
2872
|
CreatedAt: new Date(),
|
|
2598
2873
|
UpdatedAt: new Date(),
|
|
2599
|
-
|
|
2874
|
+
DataState: ObjectState.New,
|
|
2600
2875
|
Tenant: `Tenant${id + i}`,
|
|
2601
2876
|
}));
|
|
2602
2877
|
|
|
@@ -2736,7 +3011,7 @@ class UserManagementComponent {
|
|
|
2736
3011
|
Role: ["User"],
|
|
2737
3012
|
CreatedAt: new Date(),
|
|
2738
3013
|
UpdatedAt: new Date(),
|
|
2739
|
-
|
|
3014
|
+
DataState: ObjectState.New,
|
|
2740
3015
|
Tenant: `Tenant${newId}`
|
|
2741
3016
|
};
|
|
2742
3017
|
}
|
|
@@ -2937,22 +3212,22 @@ class UserManagementComponent {
|
|
|
2937
3212
|
this.cardData = [newCardData, ...this.cardData];
|
|
2938
3213
|
this.currentData = this.cardDataView.onItemClick(newCardData);
|
|
2939
3214
|
}
|
|
2940
|
-
toggleChildView(action) {
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
|
|
2947
|
-
|
|
2948
|
-
|
|
2949
|
-
|
|
2950
|
-
|
|
2951
|
-
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
|
|
2955
|
-
}
|
|
3215
|
+
// toggleChildView(action: string) {
|
|
3216
|
+
// if (action === 'create') {
|
|
3217
|
+
// const newCard: CardData = {
|
|
3218
|
+
// selected: false,
|
|
3219
|
+
// title: 'New Card', // Default title, change as needed
|
|
3220
|
+
// data: { Name: '', MailAddress: '', PhoneNumber: '' },
|
|
3221
|
+
// body: [
|
|
3222
|
+
// { title: 'Name', value: '' },
|
|
3223
|
+
// { title: 'E-Mail Address', value: '' },
|
|
3224
|
+
// { title: 'Phone Number', value: '' }
|
|
3225
|
+
// ],
|
|
3226
|
+
// children: []
|
|
3227
|
+
// };
|
|
3228
|
+
// this.cardData.push(newCard);
|
|
3229
|
+
// }
|
|
3230
|
+
// }
|
|
2956
3231
|
clearData() {
|
|
2957
3232
|
this.currentData = {};
|
|
2958
3233
|
}
|
|
@@ -3000,11 +3275,11 @@ class UserManagementComponent {
|
|
|
3000
3275
|
}
|
|
3001
3276
|
}
|
|
3002
3277
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3003
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserManagementComponent, selector: "lib-user-management", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-1 h-full\">\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: true,\n isToggle: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 table-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 >\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\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 <ng-container libColumn=\"status\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-deleteRow=\"deleteRow\"\n let-value=\"value\"\n >\n <verbena-badge\n borderRadius=\"20px\"\n width=\"121px\"\n text=\"{{value}}\"\n bgColor=\"#D6F3E6\"\n textColor=\"#2DB76F\"\n pd=\"5px 15px\"\n fontSize=\"16px\"\n >\n\n\n </verbena-badge>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"role\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-deleteRow=\"deleteRow\"\n let-value=\"value\"\n let-updateValue=\"updateValue\"\n >\n <!-- <verben-drop-down [minChar]=\"3\" [required]=\"true\" placeholder=\"Select Parent\"\n [asyncLabel]=\"this.getParentLabel.bind(this)\" invalidMessage=\"No value was provided\"\n width=\"120px\"\n (onChange)=\"onDropdownChange($event)\" [(ngModel)]=\"selectedParent\" optionLabel=\"Name\" optionValue=\"Id\"\n [options]=\"testParents\"></verben-drop-down> -->\n\n <verben-drop-down\n placeholder=\"Select Value\"\n width=\"120px\"\n (ngModelChange)=\"onDropdownChange($event)\"\n [options]=\"testParents\"\n optionLabel=\"Name\"\n optionValue=\"Name\"\n [ngModel]=\"value\"\n ></verben-drop-down>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n (loadMoreClick)=\"loadMore()\"\n #vdcv\n dataId=\"MailAddress\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n class=\"gap-1\"\n >\n <verben-left-card-data-view class=\"m-0 gap-2\" >\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl scroll-no border-primary border-[1px] gap-1 h-full justify-pp m-0 overflow-y-auto overflow-hidden\"\n [cardDataList]=\"cardData\"\n\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 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div\n (click)=\"currentData = vdcv.onItemClick(item)\"\n class=\"flex cursor-pointer bg-secondary rounded-xl overflow-hidden w-full\"\n >\n <div\n class=\"w-2 rounded-xl rounded-tr-none rounded-br-none overflow-hidden\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"flex flex-col py-[6px] pr-[3px] \">\n <div class=\"flex items-center gap-4\">\n <div class=\"pl-[13px]\">\n <span class=\"font-semibold text-[16px] 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-[13px] font-medium truncate text-wrap\">{{\n item.data.PhoneNumber\n }}</span>\n </p>\n </div>\n\n <div class=\" \">\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 <span class=\" bg-[#CAE1CC] text-center text-[#4ABB54] text-[13px] mt-[8px] rounded-[9px]\">\n {{item.data.Status}}\n </span>\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: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-\\[8px\\]{margin-top:8px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.rounded-\\[9px\\]{border-radius:9px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity))}.border-secondary-200{border-color:#d7dbe6}.bg-\\[\\#CAE1CC\\]{--tw-bg-opacity: 1;background-color:rgb(202 225 204 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.text-\\[13px\\]{font-size:13px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-\\[500\\]{font-weight:500}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#4ABB54\\]{--tw-text-opacity: 1;color:rgb(74 187 84 / var(--tw-text-opacity))}.text-\\[\\#666666\\]{--tw-text-opacity: 1;color:rgb(102 102 102 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.master-only-contanier{margin-top:0!important}.scroll-no::-webkit-scrollbar{width:4px}.scroll-no::-webkit-scrollbar-thumb{background:gray}.justify-pp{justify-content:start!important;margin-top:0!important}.toolbar{margin:0!important}@media screen and (max-width: 1024px){.scroll-no{padding:5px}}\n"], 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", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { 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: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }, { 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"] }, { kind: "component", type: UserManagementFormComponent, selector: "lib-user-request-form", inputs: ["currentData"], outputs: ["switchView"] }, { kind: "pipe", type: i2$1.DatePipe, name: "date" }] });
|
|
3278
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: UserManagementComponent, selector: "lib-user-management", viewQueries: [{ propertyName: "cardDataView", first: true, predicate: ["vdcv"], descendants: true }, { propertyName: "dataView", first: true, predicate: ["vdv"], descendants: true }], ngImport: i0, template: "<div class=\"space-y-1 h-full\">\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: true,\n isToggle: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 table-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 >\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\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 <ng-container libColumn=\"status\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-deleteRow=\"deleteRow\"\n let-value=\"value\"\n >\n <verbena-badge\n borderRadius=\"20px\"\n width=\"121px\"\n text=\"{{value}}\"\n bgColor=\"#D6F3E6\"\n textColor=\"#2DB76F\"\n pd=\"5px 15px\"\n fontSize=\"16px\"\n >\n\n\n </verbena-badge>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"role\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-deleteRow=\"deleteRow\"\n let-value=\"value\"\n let-updateValue=\"updateValue\"\n >\n <!-- <verben-drop-down [minChar]=\"3\" [required]=\"true\" placeholder=\"Select Parent\"\n [asyncLabel]=\"this.getParentLabel.bind(this)\" invalidMessage=\"No value was provided\"\n width=\"120px\"\n (onChange)=\"onDropdownChange($event)\" [(ngModel)]=\"selectedParent\" optionLabel=\"Name\" optionValue=\"Id\"\n [options]=\"testParents\"></verben-drop-down> -->\n\n <verben-drop-down\n placeholder=\"Select Value\"\n width=\"120px\"\n (ngModelChange)=\"onDropdownChange($event)\"\n [options]=\"testParents\"\n optionLabel=\"Name\"\n optionValue=\"Name\"\n [ngModel]=\"value\"\n ></verben-drop-down>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n (loadMoreClick)=\"loadMore()\"\n #vdcv\n dataId=\"MailAddress\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n class=\"gap-1\"\n >\n <verben-left-card-data-view class=\"m-0 gap-2\" >\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl scroll-no border-primary border-[1px] gap-1 h-full justify-pp m-0 overflow-y-auto overflow-hidden\"\n [cardDataList]=\"cardData\"\n\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 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div\n (click)=\"currentData = vdcv.onItemClick(item)\"\n class=\"flex cursor-pointer bg-secondary rounded-xl overflow-hidden w-full\"\n >\n <div\n class=\"w-2 rounded-xl rounded-tr-none rounded-br-none overflow-hidden\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"flex flex-col py-[6px] pr-[3px] \">\n <div class=\"flex items-center gap-4\">\n <div class=\"pl-[13px]\">\n <span class=\"font-semibold text-[16px] 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-[13px] font-medium truncate text-wrap\">{{\n item.data.PhoneNumber\n }}</span>\n </p>\n </div>\n\n <div class=\" \">\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 <span class=\" bg-[#CAE1CC] text-center text-[#4ABB54] text-[13px] mt-[8px] rounded-[9px]\">\n {{item.data.Status}}\n </span>\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: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-\\[8px\\]{margin-top:8px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.rounded-\\[9px\\]{border-radius:9px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity))}.border-secondary-200{border-color:#d7dbe6}.bg-\\[\\#CAE1CC\\]{--tw-bg-opacity: 1;background-color:rgb(202 225 204 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.text-\\[13px\\]{font-size:13px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#4ABB54\\]{--tw-text-opacity: 1;color:rgb(74 187 84 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.master-only-contanier{margin-top:0!important}.scroll-no::-webkit-scrollbar{width:4px}.scroll-no::-webkit-scrollbar-thumb{background:gray}.justify-pp{justify-content:start!important;margin-top:0!important}.toolbar{margin:0!important}@media screen and (max-width: 1024px){.scroll-no{padding:5px}}\n"], dependencies: [{ kind: "directive", type: i1$2.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", "columnCustomClass", "filterCustomClass", "sortCustomClass", "exportCustomClass", "selectCustomClass", "zIndex", "createCustomClass", "tableIcon", "cardIcon", "cardClass", "tableClass", "searchKey", "searchValue", "viewState", "searchTemplate", "columnTemplate", "filterTemplate", "sortTemplate", "exportTemplate", "createTemplate", "selectedColumnCount", "selectedSortCount", "selectedFilterTableCount", "inputWidth", "showColumnChild", "showSortChild", "showFilterChild", "showExportChild", "create", "showSelected", "isTableView"], outputs: ["viewChange", "stateChange", "onSearchChange"] }, { 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: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.VerbenaBadgeComponent, selector: "verbena-badge", inputs: ["text", "bgColor", "textColor", "borderRadius", "pd", "fontSize", "width", "height"] }, { 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"] }, { kind: "component", type: UserManagementFormComponent, selector: "lib-user-request-form", inputs: ["currentData"], outputs: ["switchView"] }, { kind: "pipe", type: i1$2.DatePipe, name: "date" }] });
|
|
3004
3279
|
}
|
|
3005
3280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: UserManagementComponent, decorators: [{
|
|
3006
3281
|
type: Component,
|
|
3007
|
-
args: [{ selector: 'lib-user-management', template: "<div class=\"space-y-1 h-full\">\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: true,\n isToggle: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 table-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 >\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\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 <ng-container libColumn=\"status\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-deleteRow=\"deleteRow\"\n let-value=\"value\"\n >\n <verbena-badge\n borderRadius=\"20px\"\n width=\"121px\"\n text=\"{{value}}\"\n bgColor=\"#D6F3E6\"\n textColor=\"#2DB76F\"\n pd=\"5px 15px\"\n fontSize=\"16px\"\n >\n\n\n </verbena-badge>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"role\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-deleteRow=\"deleteRow\"\n let-value=\"value\"\n let-updateValue=\"updateValue\"\n >\n <!-- <verben-drop-down [minChar]=\"3\" [required]=\"true\" placeholder=\"Select Parent\"\n [asyncLabel]=\"this.getParentLabel.bind(this)\" invalidMessage=\"No value was provided\"\n width=\"120px\"\n (onChange)=\"onDropdownChange($event)\" [(ngModel)]=\"selectedParent\" optionLabel=\"Name\" optionValue=\"Id\"\n [options]=\"testParents\"></verben-drop-down> -->\n\n <verben-drop-down\n placeholder=\"Select Value\"\n width=\"120px\"\n (ngModelChange)=\"onDropdownChange($event)\"\n [options]=\"testParents\"\n optionLabel=\"Name\"\n optionValue=\"Name\"\n [ngModel]=\"value\"\n ></verben-drop-down>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n (loadMoreClick)=\"loadMore()\"\n #vdcv\n dataId=\"MailAddress\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n class=\"gap-1\"\n >\n <verben-left-card-data-view class=\"m-0 gap-2\" >\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl scroll-no border-primary border-[1px] gap-1 h-full justify-pp m-0 overflow-y-auto overflow-hidden\"\n [cardDataList]=\"cardData\"\n\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 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div\n (click)=\"currentData = vdcv.onItemClick(item)\"\n class=\"flex cursor-pointer bg-secondary rounded-xl overflow-hidden w-full\"\n >\n <div\n class=\"w-2 rounded-xl rounded-tr-none rounded-br-none overflow-hidden\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"flex flex-col py-[6px] pr-[3px] \">\n <div class=\"flex items-center gap-4\">\n <div class=\"pl-[13px]\">\n <span class=\"font-semibold text-[16px] 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-[13px] font-medium truncate text-wrap\">{{\n item.data.PhoneNumber\n }}</span>\n </p>\n </div>\n\n <div class=\" \">\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 <span class=\" bg-[#CAE1CC] text-center text-[#4ABB54] text-[13px] mt-[8px] rounded-[9px]\">\n {{item.data.Status}}\n </span>\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: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-\\[8px\\]{margin-top:8px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.rounded-\\[9px\\]{border-radius:9px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity))}.border-secondary-200{border-color:#d7dbe6}.bg-\\[\\#CAE1CC\\]{--tw-bg-opacity: 1;background-color:rgb(202 225 204 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.text-\\[13px\\]{font-size:13px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-\\[500\\]{font-weight:500}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#4ABB54\\]{--tw-text-opacity: 1;color:rgb(74 187 84 / var(--tw-text-opacity))}.text-\\[\\#666666\\]{--tw-text-opacity: 1;color:rgb(102 102 102 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.master-only-contanier{margin-top:0!important}.scroll-no::-webkit-scrollbar{width:4px}.scroll-no::-webkit-scrollbar-thumb{background:gray}.justify-pp{justify-content:start!important;margin-top:0!important}.toolbar{margin:0!important}@media screen and (max-width: 1024px){.scroll-no{padding:5px}}\n"] }]
|
|
3282
|
+
args: [{ selector: 'lib-user-management', template: "<div class=\"space-y-1 h-full\">\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: true,\n isToggle: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 table-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 >\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\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 <ng-container libColumn=\"status\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-deleteRow=\"deleteRow\"\n let-value=\"value\"\n >\n <verbena-badge\n borderRadius=\"20px\"\n width=\"121px\"\n text=\"{{value}}\"\n bgColor=\"#D6F3E6\"\n textColor=\"#2DB76F\"\n pd=\"5px 15px\"\n fontSize=\"16px\"\n >\n\n\n </verbena-badge>\n </ng-template>\n </ng-container>\n <ng-container libColumn=\"role\">\n <ng-template\n #cell\n let-isEditing=\"isEditing\"\n let-toggleRowEdit=\"toggleRowEdit\"\n let-deleteRow=\"deleteRow\"\n let-value=\"value\"\n let-updateValue=\"updateValue\"\n >\n <!-- <verben-drop-down [minChar]=\"3\" [required]=\"true\" placeholder=\"Select Parent\"\n [asyncLabel]=\"this.getParentLabel.bind(this)\" invalidMessage=\"No value was provided\"\n width=\"120px\"\n (onChange)=\"onDropdownChange($event)\" [(ngModel)]=\"selectedParent\" optionLabel=\"Name\" optionValue=\"Id\"\n [options]=\"testParents\"></verben-drop-down> -->\n\n <verben-drop-down\n placeholder=\"Select Value\"\n width=\"120px\"\n (ngModelChange)=\"onDropdownChange($event)\"\n [options]=\"testParents\"\n optionLabel=\"Name\"\n optionValue=\"Name\"\n [ngModel]=\"value\"\n ></verben-drop-down>\n </ng-template>\n </ng-container>\n </lib-data-table>\n </div>\n <div card-content>\n <verben-card-data-view\n borderRadius=\"12px\"\n (loadMoreClick)=\"loadMore()\"\n #vdcv\n dataId=\"MailAddress\"\n border=\"5px\"\n [cardDataList]=\"cardData\"\n rbgColor=\"#f5f6f9\"\n mg=\"0px\"\n class=\"gap-1\"\n >\n <verben-left-card-data-view class=\"m-0 gap-2\" >\n <verben-left-card-data\n #vlcd\n [parent]=\"vdcv\"\n dataId=\"MailAddress\"\n class=\"bg-secondary-100 rounded-xl scroll-no border-primary border-[1px] gap-1 h-full justify-pp m-0 overflow-y-auto overflow-hidden\"\n [cardDataList]=\"cardData\"\n\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 cursor-pointer\"\n [icon]=\"item.isChildrenExpanded ? 'minus' : 'plus'\"\n />\n <div\n (click)=\"currentData = vdcv.onItemClick(item)\"\n class=\"flex cursor-pointer bg-secondary rounded-xl overflow-hidden w-full\"\n >\n <div\n class=\"w-2 rounded-xl rounded-tr-none rounded-br-none overflow-hidden\"\n [ngClass]=\"\n item.selected ? 'bg-primary' : 'bg-secondary-200'\n \"\n ></div>\n <div class=\"flex flex-col py-[6px] pr-[3px] \">\n <div class=\"flex items-center gap-4\">\n <div class=\"pl-[13px]\">\n <span class=\"font-semibold text-[16px] 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-[13px] font-medium truncate text-wrap\">{{\n item.data.PhoneNumber\n }}</span>\n </p>\n </div>\n\n <div class=\" \">\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 <span class=\" bg-[#CAE1CC] text-center text-[#4ABB54] text-[13px] mt-[8px] rounded-[9px]\">\n {{item.data.Status}}\n </span>\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: ["*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: \"\"}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.bottom-8{bottom:2rem}.left-0{left:0}.right-0{right:0}.float-right{float:right}.m-0{margin:0}.my-2{margin-top:.5rem;margin-bottom:.5rem}.mb-0{margin-bottom:0}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-\\[8px\\]{margin-top:8px}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.w-2{width:.5rem}.w-3{width:.75rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.space-x-8>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-wrap{text-wrap:wrap}.break-all{word-break:break-all}.rounded-\\[9px\\]{border-radius:9px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-br-none{border-bottom-right-radius:0}.rounded-tr-none{border-top-right-radius:0}.border,.border-\\[1px\\]{border-width:1px}.border-primary{--tw-border-opacity: 1;border-color:rgb(212 160 7 / var(--tw-border-opacity))}.border-secondary-200{border-color:#d7dbe6}.bg-\\[\\#CAE1CC\\]{--tw-bg-opacity: 1;background-color:rgb(202 225 204 / var(--tw-bg-opacity))}.bg-primary{--tw-bg-opacity: 1;background-color:rgb(212 160 7 / var(--tw-bg-opacity))}.bg-secondary{--tw-bg-opacity: 1;background-color:rgb(232 234 241 / var(--tw-bg-opacity))}.bg-secondary-100{--tw-bg-opacity: 1;background-color:rgb(245 246 249 / var(--tw-bg-opacity))}.bg-secondary-200{background-color:#d7dbe6}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-\\[6px\\]{padding-top:6px;padding-bottom:6px}.pb-2{padding-bottom:.5rem}.pb-3{padding-bottom:.75rem}.pl-\\[13px\\]{padding-left:13px}.pr-1{padding-right:.25rem}.pr-\\[3px\\]{padding-right:3px}.text-center{text-align:center}.text-\\[10px\\]{font-size:10px}.text-\\[13px\\]{font-size:13px}.text-\\[16px\\]{font-size:16px}.text-\\[22px\\]{font-size:22px}.text-\\[24px\\]{font-size:24px}.text-\\[2rem\\]{font-size:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-6{line-height:1.5rem}.leading-\\[29\\.05px\\]{line-height:29.05px}.leading-\\[33px\\]{line-height:33px}.leading-\\[48px\\]{line-height:48px}.text-\\[\\#333\\]{--tw-text-opacity: 1;color:rgb(51 51 51 / var(--tw-text-opacity))}.text-\\[\\#404040\\]{--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity))}.text-\\[\\#4ABB54\\]{--tw-text-opacity: 1;color:rgb(74 187 84 / var(--tw-text-opacity))}.text-\\[black\\]{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-muted{color:#0009}.underline{text-decoration-line:underline}.outline-none{outline:2px solid transparent;outline-offset:2px}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.master-only-contanier{margin-top:0!important}.scroll-no::-webkit-scrollbar{width:4px}.scroll-no::-webkit-scrollbar-thumb{background:gray}.justify-pp{justify-content:start!important;margin-top:0!important}.toolbar{margin:0!important}@media screen and (max-width: 1024px){.scroll-no{padding:5px}}\n"] }]
|
|
3008
3283
|
}], propDecorators: { cardDataView: [{
|
|
3009
3284
|
type: ViewChild,
|
|
3010
3285
|
args: ['vdcv']
|
|
@@ -3085,5 +3360,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImpo
|
|
|
3085
3360
|
* Generated bundle index. Do not edit.
|
|
3086
3361
|
*/
|
|
3087
3362
|
|
|
3088
|
-
export { ENVIRONMENT, EnvironmentService, ForgotPasswordComponent, ForgotPasswordModule, LibUserManagementModule, LibUserRequestApprovalModule, MailComponent, MailModule, MailValidationComponent, MailValidationModule, ResetPasswordComponent, ResetPasswordModule, SERVICE_CONFIG, SignInComponent, SignInModule, SignUpComponent, SignUpModule, SsoComponent, SsoModule, TwoFactorAuthOtpComponent, TwoFactorAuthOtpModule, TwoFactorAuthSetupComponent, TwoFactorAuthSetupModule, UserManagementComponent, UserRequestApprovalComponent, UserRequestApprovalService, UserRequestComponent, UserRequestModule };
|
|
3363
|
+
export { ENVIRONMENT, EnvironmentService, ForgotPasswordComponent, ForgotPasswordModule, LibUserManagementModule, LibUserRequestApprovalModule, MailComponent, MailModule, MailValidationComponent, MailValidationModule, ResetPasswordComponent, ResetPasswordModule, SERVICE_CONFIG, SignInComponent, SignInModule, SignUpComponent, SignUpModule, SsoComponent, SsoModule, Status, TwoFactorAuthOtpComponent, TwoFactorAuthOtpModule, TwoFactorAuthSetupComponent, TwoFactorAuthSetupModule, UserManagementComponent, UserRequestApprovalComponent, UserRequestApprovalService, UserRequestComponent, UserRequestModule };
|
|
3089
3364
|
//# sourceMappingURL=verben-authentication-ui.mjs.map
|