@testgorilla/tgo-ui 0.0.9 → 0.0.13
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/components/navbar/navbar.component.d.ts +8 -3
- package/components/navbar/navbar.component.module.d.ts +2 -1
- package/components/register/register.component.d.ts +3 -4
- package/esm2020/components/navbar/navbar.component.mjs +19 -8
- package/esm2020/components/navbar/navbar.component.module.mjs +8 -7
- package/esm2020/components/paginator/paginator.component.mjs +2 -2
- package/esm2020/components/register/register.component.mjs +14 -26
- package/esm2020/components/table/table.component.mjs +3 -3
- package/fesm2015/testgorilla-tgo-ui.mjs +38 -40
- package/fesm2015/testgorilla-tgo-ui.mjs.map +1 -1
- package/fesm2020/testgorilla-tgo-ui.mjs +38 -40
- package/fesm2020/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/theme/base.scss +10 -0
|
@@ -18,13 +18,14 @@ import * as i3 from '@angular/material/progress-spinner';
|
|
|
18
18
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
19
19
|
import * as i1$3 from '@angular/material/toolbar';
|
|
20
20
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i4$2 from '@angular/material/menu';
|
|
22
|
+
import { MatMenuModule } from '@angular/material/menu';
|
|
22
23
|
import { MatRippleModule } from '@angular/material/core';
|
|
23
24
|
import * as i1$4 from '@angular/material/paginator';
|
|
24
25
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
25
|
-
import * as i3$
|
|
26
|
+
import * as i3$2 from '@angular-material-extensions/password-strength';
|
|
26
27
|
import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
|
|
27
|
-
import * as i3$
|
|
28
|
+
import * as i3$3 from '@angular/material/sort';
|
|
28
29
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
29
30
|
import * as i2$1 from '@angular/material/table';
|
|
30
31
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
@@ -376,46 +377,55 @@ class NavbarComponent {
|
|
|
376
377
|
*/
|
|
377
378
|
this.activedRoute = '';
|
|
378
379
|
/**
|
|
379
|
-
* User first name and last name
|
|
380
|
+
* User first name and last name
|
|
380
381
|
*
|
|
381
382
|
* @type {string}
|
|
382
383
|
* @memberof NavbarComponent
|
|
383
384
|
*/
|
|
384
|
-
this.
|
|
385
|
+
this.userName = '';
|
|
385
386
|
/**
|
|
386
387
|
* @ignore
|
|
387
388
|
*/
|
|
388
389
|
this.navigateEvent = new EventEmitter();
|
|
390
|
+
/**
|
|
391
|
+
* @ignore
|
|
392
|
+
*/
|
|
393
|
+
this.logoutEvent = new EventEmitter();
|
|
389
394
|
}
|
|
390
395
|
navigate(routeId) {
|
|
391
396
|
this.navigateEvent.emit(`/${routeId}`);
|
|
392
397
|
}
|
|
398
|
+
logout() {
|
|
399
|
+
this.logoutEvent.emit();
|
|
400
|
+
}
|
|
393
401
|
}
|
|
394
402
|
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
395
|
-
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute",
|
|
403
|
+
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute", userName: "userName" }, outputs: { navigateEvent: "navigateEvent", logoutEvent: "logoutEvent" }, ngImport: i0, template: "<mat-toolbar>\n <div class=\"custom-toolbar row\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n <div class=\"navigation row\">\n <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n <span>{{ route.title }}</span>\n </a>\n </div>\n <div class=\"actions\">\n <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n {{ userName }}\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"logout()\">\n <mat-icon>logout</mat-icon>\n Log out\n </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:bolder}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"], components: [{ type: i1$3.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i1$1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
396
404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
397
405
|
type: Component,
|
|
398
|
-
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n <div class=\"custom-toolbar row\">\n
|
|
406
|
+
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n <div class=\"custom-toolbar row\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\" (click)=\"navigate('')\">\n <div class=\"navigation row\">\n <a *ngFor=\"let route of routes\" (click)=\"navigate(route.id)\" [ngClass]=\"{'active': activedRoute === route.id}\">\n <span>{{ route.title }}</span>\n </a>\n </div>\n <div class=\"actions\">\n <button mat-button class=\"profile-menu\" [matMenuTriggerFor]=\"menu\">\n {{ userName }}\n <mat-icon>expand_more</mat-icon>\n </button>\n </div>\n </div>\n</mat-toolbar>\n\n<mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"logout()\">\n <mat-icon>logout</mat-icon>\n Log out\n </button>\n</mat-menu>", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 160px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar .logo{width:140px;cursor:pointer}.mat-toolbar .custom-toolbar .navigation{height:100%;margin-left:70px}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;width:161px;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{box-shadow:inset 0 5px 0 -1px #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:bolder}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:16px}.mat-toolbar .custom-toolbar .actions{width:100%;display:flex;align-items:center;justify-content:flex-end}.mat-toolbar .custom-toolbar .actions .profile-menu{font-weight:400;font-size:14px;height:100%;margin-right:-20px}.mat-toolbar .custom-toolbar .actions .profile-menu mat-icon{font-size:16px;position:relative;top:3px;left:3px}.row{display:flex;flex-direction:row}\n"] }]
|
|
399
407
|
}], ctorParameters: function () { return []; }, propDecorators: { routes: [{
|
|
400
408
|
type: Input
|
|
401
409
|
}], activedRoute: [{
|
|
402
410
|
type: Input
|
|
403
|
-
}],
|
|
411
|
+
}], userName: [{
|
|
404
412
|
type: Input
|
|
405
413
|
}], navigateEvent: [{
|
|
406
414
|
type: Output
|
|
415
|
+
}], logoutEvent: [{
|
|
416
|
+
type: Output
|
|
407
417
|
}] } });
|
|
408
418
|
|
|
409
419
|
class NavbarComponentModule {
|
|
410
420
|
}
|
|
411
421
|
NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
412
|
-
NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule], exports: [NavbarComponent] });
|
|
413
|
-
NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule]] });
|
|
422
|
+
NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule, MatMenuModule], exports: [NavbarComponent] });
|
|
423
|
+
NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule, MatMenuModule]] });
|
|
414
424
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, decorators: [{
|
|
415
425
|
type: NgModule,
|
|
416
426
|
args: [{
|
|
417
427
|
declarations: [NavbarComponent],
|
|
418
|
-
imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule],
|
|
428
|
+
imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule, MatMenuModule],
|
|
419
429
|
exports: [NavbarComponent],
|
|
420
430
|
providers: [],
|
|
421
431
|
}]
|
|
@@ -454,10 +464,10 @@ class PaginatorComponent {
|
|
|
454
464
|
}
|
|
455
465
|
}
|
|
456
466
|
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
457
|
-
PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"[10, 25, 50]\"\n (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;
|
|
467
|
+
PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PaginatorComponent, selector: "ui-paginator", inputs: { length: "length", defaultPageSize: "defaultPageSize" }, outputs: { paginatorChangedEvent: "paginatorChangedEvent" }, ngImport: i0, template: "<mat-paginator [length]=\"length\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"[10, 25, 50]\"\n (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"], components: [{ type: i1$4.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
458
468
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
459
469
|
type: Component,
|
|
460
|
-
args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"[10, 25, 50]\"\n (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;
|
|
470
|
+
args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-paginator [length]=\"length\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"[10, 25, 50]\"\n (page)=\"paginatorChanged($event)\">\n</mat-paginator>", styles: ["mat-paginator{border-radius:0 0 8px 8px}mat-paginator .mat-paginator-outer-container{border-radius:0 0 8px 8px;font-weight:400;font-size:14px;line-height:16px;color:#000}mat-paginator .mat-paginator-outer-container .mat-paginator-container{padding:0}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-select-value-text{font-size:14px}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions{height:100%}mat-paginator .mat-paginator-outer-container .mat-paginator-container .mat-paginator-range-actions button{height:100%;width:70px;border-radius:0}\n"] }]
|
|
461
471
|
}], ctorParameters: function () { return []; }, propDecorators: { length: [{
|
|
462
472
|
type: Input
|
|
463
473
|
}], defaultPageSize: [{
|
|
@@ -491,7 +501,7 @@ class RegisterComponent {
|
|
|
491
501
|
* @ignore
|
|
492
502
|
*/
|
|
493
503
|
this.registerForm = this.fb.group({
|
|
494
|
-
|
|
504
|
+
username: ['', [Validators.required, Validators.email]],
|
|
495
505
|
password: [
|
|
496
506
|
'',
|
|
497
507
|
[
|
|
@@ -506,8 +516,8 @@ class RegisterComponent {
|
|
|
506
516
|
* @ignore
|
|
507
517
|
*/
|
|
508
518
|
this.formErrors = {
|
|
509
|
-
|
|
510
|
-
password: '',
|
|
519
|
+
username: [''],
|
|
520
|
+
password: [''],
|
|
511
521
|
};
|
|
512
522
|
/**
|
|
513
523
|
* @ignore
|
|
@@ -524,51 +534,39 @@ class RegisterComponent {
|
|
|
524
534
|
ngOnInit() { }
|
|
525
535
|
submit() {
|
|
526
536
|
this.submitEvent.emit({
|
|
527
|
-
username: this.registerForm.get('
|
|
537
|
+
username: this.registerForm.get('username')?.value,
|
|
528
538
|
password: this.registerForm.get('password')?.value,
|
|
529
539
|
});
|
|
530
540
|
}
|
|
531
541
|
login() {
|
|
532
542
|
this.loginEvent.emit();
|
|
533
543
|
}
|
|
534
|
-
getErrorMessage(field) {
|
|
535
|
-
if (this.registerForm.controls[field].touched) {
|
|
536
|
-
if (this.registerForm.controls[field].hasError('required')) {
|
|
537
|
-
return 'This field is required';
|
|
538
|
-
}
|
|
539
|
-
if (this.registerForm.controls[field].hasError('email')) {
|
|
540
|
-
return 'Enter a valid email';
|
|
541
|
-
}
|
|
542
|
-
if (field === 'password' && this.registerForm.controls[field].hasError('pattern')) {
|
|
543
|
-
return 'Password is not valid';
|
|
544
|
-
}
|
|
545
|
-
}
|
|
546
|
-
return;
|
|
547
|
-
}
|
|
548
544
|
checkErrors(field) {
|
|
549
545
|
if (this.registerForm.controls[field].touched) {
|
|
550
546
|
if (this.registerForm.controls[field].hasError('required')) {
|
|
551
|
-
this.formErrors[field] = 'This field is required';
|
|
547
|
+
this.formErrors[field][0] = 'This field is required';
|
|
552
548
|
return;
|
|
553
549
|
}
|
|
554
550
|
if (this.registerForm.controls[field].hasError('email')) {
|
|
555
|
-
this.formErrors[field] = 'Enter a valid email';
|
|
551
|
+
this.formErrors[field][0] = 'Enter a valid email';
|
|
556
552
|
return;
|
|
557
553
|
}
|
|
558
554
|
if (field === 'password' && this.registerForm.controls[field].hasError('pattern')) {
|
|
559
|
-
this.formErrors.password = 'Password is invalid';
|
|
555
|
+
this.formErrors.password[0] = 'Password is invalid';
|
|
560
556
|
return;
|
|
561
557
|
}
|
|
562
558
|
}
|
|
563
|
-
this.formErrors[field] = '';
|
|
559
|
+
this.formErrors[field][0] = '';
|
|
564
560
|
}
|
|
565
561
|
}
|
|
566
562
|
RegisterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RegisterComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
567
|
-
RegisterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RegisterComponent, selector: "ui-register", inputs: { loading: "loading" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Create your Career Passport</div>\n <div class=\"subtitle\">Enter the email address to which you received an assessment invite.</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field formControlName=\"
|
|
563
|
+
RegisterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: RegisterComponent, selector: "ui-register", inputs: { formErrors: "formErrors", loading: "loading" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Create your Career Passport</div>\n <div class=\"subtitle\">Enter the email address to which you received an assessment invite.</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field formControlName=\"username\" [placeholder]=\"'Email'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.username[0]\" (ngModelChange)=\"checkErrors('username')\"></ui-field>\n </div>\n <div class=\"field\">\n <ui-field formControlName=\"password\" [placeholder]=\"'Password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password[0]\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n >\n </mat-password-strength>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\">\n </mat-password-strength-info>\n </div>\n <div>\n <mat-checkbox formControlName=\"agree_terms_and_conditions\">Agree to Terms & Conditions</mat-checkbox>\n </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Next'\" [disabled]=\"registerForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n </div>\n <div>\n Already have a Career Passport? <span class=\"log-in\" (click)=\"login()\">Log in here</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px}.form-box .subtitle{margin:16px 0}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"], components: [{ type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i3$2.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i3$2.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
568
564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RegisterComponent, decorators: [{
|
|
569
565
|
type: Component,
|
|
570
|
-
args: [{ selector: 'ui-register', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Create your Career Passport</div>\n <div class=\"subtitle\">Enter the email address to which you received an assessment invite.</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field formControlName=\"
|
|
571
|
-
}], ctorParameters: function () { return [{ type: i1$2.FormBuilder }]; }, propDecorators: {
|
|
566
|
+
args: [{ selector: 'ui-register', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Create your Career Passport</div>\n <div class=\"subtitle\">Enter the email address to which you received an assessment invite.</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field formControlName=\"username\" [placeholder]=\"'Email'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.username[0]\" (ngModelChange)=\"checkErrors('username')\"></ui-field>\n </div>\n <div class=\"field\">\n <ui-field formControlName=\"password\" [placeholder]=\"'Password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password[0]\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n >\n </mat-password-strength>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\">\n </mat-password-strength-info>\n </div>\n <div>\n <mat-checkbox formControlName=\"agree_terms_and_conditions\">Agree to Terms & Conditions</mat-checkbox>\n </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Next'\" [disabled]=\"registerForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n </div>\n <div>\n Already have a Career Passport? <span class=\"log-in\" (click)=\"login()\">Log in here</span>\n </div>\n </form>\n</div>\n", styles: [".form-box{width:672px;padding:64px;background:#ffffff;box-shadow:0 8px 16px #0000001a;border-radius:8px;margin:auto;color:#000}.form-box .logo{width:180px;position:relative;right:9px;margin-bottom:16px}.form-box .title{font-weight:700;font-size:22px}.form-box .subtitle{margin:16px 0}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .log-in{font-weight:600;font-size:15px;cursor:pointer;color:#46a997}.form-box .log-in:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
|
|
567
|
+
}], ctorParameters: function () { return [{ type: i1$2.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
568
|
+
type: Input
|
|
569
|
+
}], loading: [{
|
|
572
570
|
type: Input
|
|
573
571
|
}], submitEvent: [{
|
|
574
572
|
type: Output
|
|
@@ -740,10 +738,10 @@ class TableComponent {
|
|
|
740
738
|
}
|
|
741
739
|
}
|
|
742
740
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
743
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableData: "tableData", tableColumns: "tableColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n arrowPosition=\"after\">\n {{tableColumn.name | uppercase}}\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef>\n {{tableColumn.name | uppercase}}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n <ng-container [ngSwitch]=\"tableColumn.dataType\">\n <ng-container *ngSwitchCase=\"DataType.String\">\n {{element | dataPropertyGetter: tableColumn.dataKey}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.Date\">\n <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd
|
|
741
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableData: "tableData", tableColumns: "tableColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent" }, viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n arrowPosition=\"after\">\n {{tableColumn.name | uppercase}}\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef>\n {{tableColumn.name | uppercase}}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n <ng-container [ngSwitch]=\"tableColumn.dataType\">\n <ng-container *ngSwitchCase=\"DataType.String\">\n {{element | dataPropertyGetter: tableColumn.dataKey}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.Date\">\n <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.Percentage\">\n {{element | dataPropertyGetter: tableColumn.dataKey}}%\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.Label\">\n <ng-container\n *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.dataKey}}\n </ng-container>\n </ng-container>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n {{ label?.title }}\n </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i3$3.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i2$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "uppercase": i4.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe, "dfnsFormat": i5.FormatPipe, "dfnsParseIso": i5.ParseIsoPipe, "dfnsFormatDistanceToNow": i5.FormatDistanceToNowPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
744
742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, decorators: [{
|
|
745
743
|
type: Component,
|
|
746
|
-
args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n arrowPosition=\"after\">\n {{tableColumn.name | uppercase}}\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef>\n {{tableColumn.name | uppercase}}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n <ng-container [ngSwitch]=\"tableColumn.dataType\">\n <ng-container *ngSwitchCase=\"DataType.String\">\n {{element | dataPropertyGetter: tableColumn.dataKey}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.Date\">\n <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd
|
|
744
|
+
args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n <ng-container *ngFor=\"let tableColumn of tableColumns\" [matColumnDef]=\"tableColumn.name\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.dataKey || ''\"\n arrowPosition=\"after\">\n {{tableColumn.name | uppercase}}\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef>\n {{tableColumn.name | uppercase}}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\">\n <ng-container [ngSwitch]=\"tableColumn.dataType\">\n <ng-container *ngSwitchCase=\"DataType.String\">\n {{element | dataPropertyGetter: tableColumn.dataKey}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.Date\">\n <span *ngIf=\"tableColumn.dateFormat === DateFormat.Short\">{{(element | dataPropertyGetter:\n tableColumn.dataKey) | dfnsParseIso | dfnsFormat: 'dd.MM.yyyy'}}</span>\n <span *ngIf=\"tableColumn.dateFormat === DateFormat.TimeAgo\">{{(element | dataPropertyGetter:\n tableColumn.dataKey) | dfnsParseIso | dfnsFormatDistanceToNow: timeAgoOptions}}</span>\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.Percentage\">\n {{element | dataPropertyGetter: tableColumn.dataKey}}%\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.Label\">\n <ng-container\n *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.dataKey]}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.dataKey}}\n </ng-container>\n </ng-container>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<ng-template #label let-label=\"label\">\n <span class=\"label\" [ngStyle]=\"{'background-color': label?.backgroundColor, 'color': label?.color}\">\n {{ label?.title }}\n </span>\n</ng-template>\n", styles: ["table{width:100%;overflow:hidden;border-radius:8px 8px 0 0;-webkit-user-select:none;user-select:none}table .mat-header-cell{font-weight:700;color:#000}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5}table ::ng-deep .mat-sort-header-arrow{color:#276678}table .label.active{background-color:#46a997;color:#fff}table .label{padding:0 8px;width:-moz-fit-content;width:fit-content;font-weight:600;font-size:10px;border-radius:4px;background-color:#e9f0f1;color:#000}\n"] }]
|
|
747
745
|
}], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { sort: [{
|
|
748
746
|
type: ViewChild,
|
|
749
747
|
args: [MatSort, { static: true }]
|