@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';
|
|
@@ -377,46 +378,55 @@ class NavbarComponent {
|
|
|
377
378
|
*/
|
|
378
379
|
this.activedRoute = '';
|
|
379
380
|
/**
|
|
380
|
-
* User first name and last name
|
|
381
|
+
* User first name and last name
|
|
381
382
|
*
|
|
382
383
|
* @type {string}
|
|
383
384
|
* @memberof NavbarComponent
|
|
384
385
|
*/
|
|
385
|
-
this.
|
|
386
|
+
this.userName = '';
|
|
386
387
|
/**
|
|
387
388
|
* @ignore
|
|
388
389
|
*/
|
|
389
390
|
this.navigateEvent = new EventEmitter();
|
|
391
|
+
/**
|
|
392
|
+
* @ignore
|
|
393
|
+
*/
|
|
394
|
+
this.logoutEvent = new EventEmitter();
|
|
390
395
|
}
|
|
391
396
|
navigate(routeId) {
|
|
392
397
|
this.navigateEvent.emit(`/${routeId}`);
|
|
393
398
|
}
|
|
399
|
+
logout() {
|
|
400
|
+
this.logoutEvent.emit();
|
|
401
|
+
}
|
|
394
402
|
}
|
|
395
403
|
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
396
|
-
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavbarComponent, selector: "ui-navbar", inputs: { routes: "routes", activedRoute: "activedRoute",
|
|
404
|
+
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 });
|
|
397
405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
398
406
|
type: Component,
|
|
399
|
-
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-toolbar>\n <div class=\"custom-toolbar row\">\n
|
|
407
|
+
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"] }]
|
|
400
408
|
}], ctorParameters: function () { return []; }, propDecorators: { routes: [{
|
|
401
409
|
type: Input
|
|
402
410
|
}], activedRoute: [{
|
|
403
411
|
type: Input
|
|
404
|
-
}],
|
|
412
|
+
}], userName: [{
|
|
405
413
|
type: Input
|
|
406
414
|
}], navigateEvent: [{
|
|
407
415
|
type: Output
|
|
416
|
+
}], logoutEvent: [{
|
|
417
|
+
type: Output
|
|
408
418
|
}] } });
|
|
409
419
|
|
|
410
420
|
class NavbarComponentModule {
|
|
411
421
|
}
|
|
412
422
|
NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
413
|
-
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] });
|
|
414
|
-
NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule]] });
|
|
423
|
+
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] });
|
|
424
|
+
NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule, MatMenuModule]] });
|
|
415
425
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, decorators: [{
|
|
416
426
|
type: NgModule,
|
|
417
427
|
args: [{
|
|
418
428
|
declarations: [NavbarComponent],
|
|
419
|
-
imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule],
|
|
429
|
+
imports: [CommonModule, MatToolbarModule, MatIconModule, MatButtonModule, MatRippleModule, MatMenuModule],
|
|
420
430
|
exports: [NavbarComponent],
|
|
421
431
|
providers: [],
|
|
422
432
|
}]
|
|
@@ -455,10 +465,10 @@ class PaginatorComponent {
|
|
|
455
465
|
}
|
|
456
466
|
}
|
|
457
467
|
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
458
|
-
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;
|
|
468
|
+
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 });
|
|
459
469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
460
470
|
type: Component,
|
|
461
|
-
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;
|
|
471
|
+
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"] }]
|
|
462
472
|
}], ctorParameters: function () { return []; }, propDecorators: { length: [{
|
|
463
473
|
type: Input
|
|
464
474
|
}], defaultPageSize: [{
|
|
@@ -492,7 +502,7 @@ class RegisterComponent {
|
|
|
492
502
|
* @ignore
|
|
493
503
|
*/
|
|
494
504
|
this.registerForm = this.fb.group({
|
|
495
|
-
|
|
505
|
+
username: ['', [Validators.required, Validators.email]],
|
|
496
506
|
password: [
|
|
497
507
|
'',
|
|
498
508
|
[
|
|
@@ -507,8 +517,8 @@ class RegisterComponent {
|
|
|
507
517
|
* @ignore
|
|
508
518
|
*/
|
|
509
519
|
this.formErrors = {
|
|
510
|
-
|
|
511
|
-
password: '',
|
|
520
|
+
username: [''],
|
|
521
|
+
password: [''],
|
|
512
522
|
};
|
|
513
523
|
/**
|
|
514
524
|
* @ignore
|
|
@@ -526,51 +536,39 @@ class RegisterComponent {
|
|
|
526
536
|
submit() {
|
|
527
537
|
var _a, _b;
|
|
528
538
|
this.submitEvent.emit({
|
|
529
|
-
username: (_a = this.registerForm.get('
|
|
539
|
+
username: (_a = this.registerForm.get('username')) === null || _a === void 0 ? void 0 : _a.value,
|
|
530
540
|
password: (_b = this.registerForm.get('password')) === null || _b === void 0 ? void 0 : _b.value,
|
|
531
541
|
});
|
|
532
542
|
}
|
|
533
543
|
login() {
|
|
534
544
|
this.loginEvent.emit();
|
|
535
545
|
}
|
|
536
|
-
getErrorMessage(field) {
|
|
537
|
-
if (this.registerForm.controls[field].touched) {
|
|
538
|
-
if (this.registerForm.controls[field].hasError('required')) {
|
|
539
|
-
return 'This field is required';
|
|
540
|
-
}
|
|
541
|
-
if (this.registerForm.controls[field].hasError('email')) {
|
|
542
|
-
return 'Enter a valid email';
|
|
543
|
-
}
|
|
544
|
-
if (field === 'password' && this.registerForm.controls[field].hasError('pattern')) {
|
|
545
|
-
return 'Password is not valid';
|
|
546
|
-
}
|
|
547
|
-
}
|
|
548
|
-
return;
|
|
549
|
-
}
|
|
550
546
|
checkErrors(field) {
|
|
551
547
|
if (this.registerForm.controls[field].touched) {
|
|
552
548
|
if (this.registerForm.controls[field].hasError('required')) {
|
|
553
|
-
this.formErrors[field] = 'This field is required';
|
|
549
|
+
this.formErrors[field][0] = 'This field is required';
|
|
554
550
|
return;
|
|
555
551
|
}
|
|
556
552
|
if (this.registerForm.controls[field].hasError('email')) {
|
|
557
|
-
this.formErrors[field] = 'Enter a valid email';
|
|
553
|
+
this.formErrors[field][0] = 'Enter a valid email';
|
|
558
554
|
return;
|
|
559
555
|
}
|
|
560
556
|
if (field === 'password' && this.registerForm.controls[field].hasError('pattern')) {
|
|
561
|
-
this.formErrors.password = 'Password is invalid';
|
|
557
|
+
this.formErrors.password[0] = 'Password is invalid';
|
|
562
558
|
return;
|
|
563
559
|
}
|
|
564
560
|
}
|
|
565
|
-
this.formErrors[field] = '';
|
|
561
|
+
this.formErrors[field][0] = '';
|
|
566
562
|
}
|
|
567
563
|
}
|
|
568
564
|
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 });
|
|
569
|
-
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=\"
|
|
565
|
+
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 });
|
|
570
566
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: RegisterComponent, decorators: [{
|
|
571
567
|
type: Component,
|
|
572
|
-
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=\"
|
|
573
|
-
}], ctorParameters: function () { return [{ type: i1$2.FormBuilder }]; }, propDecorators: {
|
|
568
|
+
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"] }]
|
|
569
|
+
}], ctorParameters: function () { return [{ type: i1$2.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
570
|
+
type: Input
|
|
571
|
+
}], loading: [{
|
|
574
572
|
type: Input
|
|
575
573
|
}], submitEvent: [{
|
|
576
574
|
type: Output
|
|
@@ -742,10 +740,10 @@ class TableComponent {
|
|
|
742
740
|
}
|
|
743
741
|
}
|
|
744
742
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
745
|
-
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
|
|
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.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 });
|
|
746
744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, decorators: [{
|
|
747
745
|
type: Component,
|
|
748
|
-
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
|
|
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.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"] }]
|
|
749
747
|
}], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { sort: [{
|
|
750
748
|
type: ViewChild,
|
|
751
749
|
args: [MatSort, { static: true }]
|