@testgorilla/tgo-ui 0.0.18 → 0.0.21
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/.github/README.md +66 -0
- package/README.md +0 -48
- package/components/progress-bar/progress-bar.component.d.ts +36 -0
- package/components/progress-bar/progress-bar.component.module.d.ts +9 -0
- package/components/table/table.component.d.ts +2 -6
- package/components/table/table.component.module.d.ts +2 -3
- package/components/table/table.model.d.ts +20 -13
- package/esm2020/components/banner/banner.component.mjs +4 -4
- package/esm2020/components/banner-action/banner-action.component.mjs +4 -4
- package/esm2020/components/create-account/create-account.component.mjs +4 -4
- package/esm2020/components/create-password/create-password.component.mjs +4 -4
- package/esm2020/components/forgot-password/forgot-password.component.mjs +4 -4
- package/esm2020/components/login/login.component.mjs +4 -4
- package/esm2020/components/navbar/navbar.component.mjs +4 -4
- package/esm2020/components/navigation/navigation.component.mjs +4 -4
- package/esm2020/components/paginator/paginator.component.mjs +4 -4
- package/esm2020/components/progress-bar/progress-bar.component.mjs +22 -0
- package/esm2020/components/progress-bar/progress-bar.component.module.mjs +20 -0
- package/esm2020/components/status/status.component.mjs +4 -4
- package/esm2020/components/table/table.component.mjs +9 -14
- package/esm2020/components/table/table.component.module.mjs +4 -5
- package/esm2020/components/table/table.model.mjs +16 -13
- package/esm2020/public-api.mjs +4 -1
- package/fesm2015/testgorilla-tgo-ui.mjs +82 -50
- package/fesm2015/testgorilla-tgo-ui.mjs.map +1 -1
- package/fesm2020/testgorilla-tgo-ui.mjs +82 -50
- package/fesm2020/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -3
- package/public-api.d.ts +2 -0
- package/src/assets/images/check.svg +3 -0
- package/src/theme/_core.scss +20 -0
- package/src/theme/_typography.scss +58 -0
- package/src/theme/_variables.scss +3 -1
- package/src/theme/{base.scss → theme.scss} +4 -32
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy,
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, forwardRef, Pipe, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/material/icon';
|
|
4
4
|
import { MatIconModule } from '@angular/material/icon';
|
|
5
5
|
import * as i5 from '@angular/common';
|
|
@@ -27,12 +27,12 @@ import { MatMenuModule } from '@angular/material/menu';
|
|
|
27
27
|
import { MatRippleModule } from '@angular/material/core';
|
|
28
28
|
import * as i1$5 from '@angular/material/paginator';
|
|
29
29
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
30
|
+
import * as i1$6 from '@angular/material/progress-bar';
|
|
31
|
+
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
30
32
|
import * as i3$2 from '@angular/material/sort';
|
|
31
33
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
32
34
|
import * as i2$1 from '@angular/material/table';
|
|
33
35
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
34
|
-
import * as i6 from 'ngx-date-fns';
|
|
35
|
-
import { DateFnsModule } from 'ngx-date-fns';
|
|
36
36
|
|
|
37
37
|
class BannerComponent {
|
|
38
38
|
constructor() {
|
|
@@ -63,10 +63,10 @@ class BannerComponent {
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
66
|
-
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerComponent, selector: "ui-banner", inputs: { backgroundColor: "backgroundColor", text: "text", icon: "icon" }, ngImport: i0, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n <mat-icon>{{ icon }}</mat-icon>\n <span>{{ text }}</span>\n</div>", styles: ["#banner{height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
66
|
+
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerComponent, selector: "ui-banner", inputs: { backgroundColor: "backgroundColor", text: "text", icon: "icon" }, ngImport: i0, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n <mat-icon>{{ icon }}</mat-icon>\n <span>{{ text }}</span>\n</div>", styles: ["#banner{height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
67
67
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerComponent, decorators: [{
|
|
68
68
|
type: Component,
|
|
69
|
-
args: [{ selector: 'ui-banner', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
69
|
+
args: [{ selector: 'ui-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n <mat-icon>{{ icon }}</mat-icon>\n <span>{{ text }}</span>\n</div>", styles: ["#banner{height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"] }]
|
|
70
70
|
}], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
|
|
71
71
|
type: Input
|
|
72
72
|
}], text: [{
|
|
@@ -180,10 +180,10 @@ class BannerActionComponent {
|
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
182
|
BannerActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
183
|
-
BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerActionComponent, selector: "ui-banner-action", inputs: { text: "text", backgroundColor: "backgroundColor", buttonLabel: "buttonLabel", emoji: "emoji" }, outputs: { buttonClickedEvent: "buttonClickedEvent" }, ngImport: i0, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n <div class=\"text\">\n <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n <span>{{ text }}</span>\n </div>\n <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"], components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
183
|
+
BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: BannerActionComponent, selector: "ui-banner-action", inputs: { text: "text", backgroundColor: "backgroundColor", buttonLabel: "buttonLabel", emoji: "emoji" }, outputs: { buttonClickedEvent: "buttonClickedEvent" }, ngImport: i0, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n <div class=\"text\">\n <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n <span>{{ text }}</span>\n </div>\n <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"], components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
184
184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerActionComponent, decorators: [{
|
|
185
185
|
type: Component,
|
|
186
|
-
args: [{ selector: 'ui-banner-action', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
186
|
+
args: [{ selector: 'ui-banner-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n <div class=\"text\">\n <span *ngIf=\"emoji\" class=\"emoji\">{{ emoji }}</span>\n <span>{{ text }}</span>\n </div>\n <ui-button [iconName]=\"'east'\" [iconPosition]=\"'right'\" [label]=\"buttonLabel\" (onClickEvent)=\"buttonClicked()\" *ngIf=\"buttonLabel\"></ui-button>\n</div>", styles: ["#banner-action{height:72px;padding:0 16px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center;background:#FFFFFF;border:2px solid #276678;box-shadow:0 8px 16px #0000001a;border-radius:8px}#banner-action .text{width:100%;display:flex;align-items:center}#banner-action .text .emoji{font-size:24px;margin-right:12px}\n"] }]
|
|
187
187
|
}], ctorParameters: function () { return []; }, propDecorators: { text: [{
|
|
188
188
|
type: Input
|
|
189
189
|
}], backgroundColor: [{
|
|
@@ -462,10 +462,10 @@ class CreateAccountComponent {
|
|
|
462
462
|
}
|
|
463
463
|
}
|
|
464
464
|
CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
465
|
-
CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreateAccountComponent, selector: "ui-create-account", 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$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i3$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i4$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
465
|
+
CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreateAccountComponent, selector: "ui-create-account", 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$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i3$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i4$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
466
466
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponent, decorators: [{
|
|
467
467
|
type: Component,
|
|
468
|
-
args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
468
|
+
args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
469
469
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
470
470
|
type: Input
|
|
471
471
|
}], loading: [{
|
|
@@ -582,10 +582,10 @@ class CreatePasswordComponent {
|
|
|
582
582
|
}
|
|
583
583
|
}
|
|
584
584
|
CreatePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
585
|
-
CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Please create a new password</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field formControlName=\"password\" [placeholder]=\"'Set 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]=\"createPasswordForm.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 </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Set new password'\" [disabled]=\"createPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\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;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}\n"], components: [{ type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i3$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i3$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
585
|
+
CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Please create a new password</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field formControlName=\"password\" [placeholder]=\"'Set 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]=\"createPasswordForm.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 </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Set new password'\" [disabled]=\"createPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\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;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}\n"], components: [{ type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i3$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i3$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
586
586
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponent, decorators: [{
|
|
587
587
|
type: Component,
|
|
588
|
-
args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
588
|
+
args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Please create a new password</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field formControlName=\"password\" [placeholder]=\"'Set 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]=\"createPasswordForm.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 </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Set new password'\" [disabled]=\"createPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\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;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}\n"] }]
|
|
589
589
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
590
590
|
type: Input
|
|
591
591
|
}], loading: [{
|
|
@@ -682,10 +682,10 @@ class ForgotPasswordComponent {
|
|
|
682
682
|
}
|
|
683
683
|
}
|
|
684
684
|
ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
685
|
-
ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Reset your password</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field formControlName=\"email\" [placeholder]=\"'Email'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email[0]\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n </div>\n <div>\n </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Send reset link'\" [disabled]=\"forgotPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>Back to log in</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;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0 40px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], components: [{ type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
685
|
+
ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Reset your password</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field formControlName=\"email\" [placeholder]=\"'Email'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email[0]\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n </div>\n <div>\n </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Send reset link'\" [disabled]=\"forgotPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>Back to log in</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;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0 40px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"], components: [{ type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
686
686
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
|
|
687
687
|
type: Component,
|
|
688
|
-
args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
688
|
+
args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Reset your password</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field formControlName=\"email\" [placeholder]=\"'Email'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email[0]\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n </div>\n <div>\n </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Send reset link'\" [disabled]=\"forgotPasswordForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>Back to log in</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;margin-bottom:24px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0 40px}.form-box .back-login{display:flex;align-content:center;color:#46a997;cursor:pointer}.form-box .back-login mat-icon{margin-right:8px}.form-box .back-login span{padding-top:2px;font-weight:700}\n"] }]
|
|
689
689
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
690
690
|
type: Input
|
|
691
691
|
}], loading: [{
|
|
@@ -777,10 +777,10 @@ class LoginComponent {
|
|
|
777
777
|
}
|
|
778
778
|
}
|
|
779
779
|
LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
780
|
-
LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Log in to your Career Passport</div>\n <form [formGroup]=\"loginForm\">\n <div class=\"field\">\n <ui-field formControlName=\"email\" [placeholder]=\"'Email address'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n </div>\n <div class=\"field\">\n <ui-field formControlName=\"password\" [placeholder]=\"'Password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n </div>\n <div class=\"row space-between\">\n <div>\n <mat-checkbox formControlName=\"remember_me\">Keep me logged in</mat-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">Forgot password?</div>\n </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Log in'\" [disabled]=\"loginForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n </div>\n <div>\n Don't have an account? <span class=\"create-account\" (click)=\"createAccount()\">Create one 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;margin-bottom:32px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.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: i4$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
780
|
+
LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Log in to your Career Passport</div>\n <form [formGroup]=\"loginForm\">\n <div class=\"field\">\n <ui-field formControlName=\"email\" [placeholder]=\"'Email address'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n </div>\n <div class=\"field\">\n <ui-field formControlName=\"password\" [placeholder]=\"'Password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n </div>\n <div class=\"row space-between\">\n <div>\n <mat-checkbox formControlName=\"remember_me\">Keep me logged in</mat-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">Forgot password?</div>\n </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Log in'\" [disabled]=\"loginForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n </div>\n <div>\n Don't have an account? <span class=\"create-account\" (click)=\"createAccount()\">Create one 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;margin-bottom:32px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.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: i4$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$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
781
781
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponent, decorators: [{
|
|
782
782
|
type: Component,
|
|
783
|
-
args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
783
|
+
args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <img class=\"logo\" src=\"/images/testgorilla.svg\">\n <div class=\"title\">Log in to your Career Passport</div>\n <form [formGroup]=\"loginForm\">\n <div class=\"field\">\n <ui-field formControlName=\"email\" [placeholder]=\"'Email address'\" [type]=\"'email'\" [required]=\"true\" [error]=\"formErrors.email\" (ngModelChange)=\"checkErrors('email')\"></ui-field>\n </div>\n <div class=\"field\">\n <ui-field formControlName=\"password\" [placeholder]=\"'Password'\" [type]=\"'password'\" [required]=\"true\" [error]=\"formErrors.password\" (ngModelChange)=\"checkErrors('password')\"></ui-field>\n </div>\n <div class=\"row space-between\">\n <div>\n <mat-checkbox formControlName=\"remember_me\">Keep me logged in</mat-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">Forgot password?</div>\n </div>\n <div class=\"submit-button\">\n <ui-button [label]=\"'Log in'\" [disabled]=\"loginForm.invalid\" [fullWidth]=\"true\" [loading]=\"loading\" (onClickEvent)=\"submit()\"></ui-button>\n </div>\n <div>\n Don't have an account? <span class=\"create-account\" (click)=\"createAccount()\">Create one 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;margin-bottom:32px}.form-box .field{width:100%}.form-box .submit-button{margin:24px 0}.form-box mat-checkbox{font-weight:400}.form-box .forgot-password,.form-box .create-account{font-weight:600;font-size:15px;cursor:pointer}.form-box .forgot-password:hover,.form-box .create-account:hover{text-decoration:underline}.form-box .create-account{color:#46a997}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
|
|
784
784
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { loading: [{
|
|
785
785
|
type: Input
|
|
786
786
|
}], submitEvent: [{
|
|
@@ -869,10 +869,10 @@ class NavbarComponent {
|
|
|
869
869
|
}
|
|
870
870
|
}
|
|
871
871
|
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
872
|
-
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:900}.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$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i1.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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
872
|
+
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:900}.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$4.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i1.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: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
873
873
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
874
874
|
type: Component,
|
|
875
|
-
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
875
|
+
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, 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:900}.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"] }]
|
|
876
876
|
}], ctorParameters: function () { return []; }, propDecorators: { routes: [{
|
|
877
877
|
type: Input
|
|
878
878
|
}], activedRoute: [{
|
|
@@ -929,10 +929,10 @@ class StatusComponent {
|
|
|
929
929
|
}
|
|
930
930
|
}
|
|
931
931
|
StatusComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
932
|
-
StatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StatusComponent, selector: "ui-status", inputs: { backgroundColor: "backgroundColor", color: "color", title: "title" }, ngImport: i0, template: "<div class=\"label\" [ngStyle]=\"{'background-color': backgroundColor, 'color': color}\">\n {{ title }}\n</div>\n", styles: [".label{
|
|
932
|
+
StatusComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: StatusComponent, selector: "ui-status", inputs: { backgroundColor: "backgroundColor", color: "color", title: "title" }, ngImport: i0, template: "<div class=\"label\" [ngStyle]=\"{'background-color': backgroundColor, 'color': color}\">\n {{ title }}\n</div>\n", styles: [".label{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 8px;font-weight:600;font-size:10px;border-radius:4px;width:-moz-fit-content;width:fit-content;height:16px}\n"], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
933
933
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: StatusComponent, decorators: [{
|
|
934
934
|
type: Component,
|
|
935
|
-
args: [{ selector: 'ui-status', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
935
|
+
args: [{ selector: 'ui-status', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label\" [ngStyle]=\"{'background-color': backgroundColor, 'color': color}\">\n {{ title }}\n</div>\n", styles: [".label{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:0 8px;font-weight:600;font-size:10px;border-radius:4px;width:-moz-fit-content;width:fit-content;height:16px}\n"] }]
|
|
936
936
|
}], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
|
|
937
937
|
type: Input
|
|
938
938
|
}], color: [{
|
|
@@ -953,10 +953,10 @@ class NavigationComponent {
|
|
|
953
953
|
}
|
|
954
954
|
}
|
|
955
955
|
NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
956
|
-
NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", statusItem: "statusItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div
|
|
956
|
+
NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", statusItem: "statusItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div class=\"navigation\">\n <button mat-icon-button (click)=\"goBackClicked()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <div class=\"content\">\n <div class=\"title\">\n <span>{{ title }}</span>\n <div class=\"status\" *ngIf=\"statusItem\">\n <ui-status [backgroundColor]=\"statusItem.backgroundColor\" [color]=\"statusItem.color\" [title]=\"statusItem.title\">\n </ui-status>\n </div>\n </div>\n <div class=\"subtitle\">\n {{ subtitle }}\n </div>\n </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"], components: [{ type: i1.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: StatusComponent, selector: "ui-status", inputs: ["backgroundColor", "color", "title"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
957
957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, decorators: [{
|
|
958
958
|
type: Component,
|
|
959
|
-
args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
959
|
+
args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navigation\">\n <button mat-icon-button (click)=\"goBackClicked()\">\n <mat-icon>arrow_back</mat-icon>\n </button>\n <div class=\"content\">\n <div class=\"title\">\n <span>{{ title }}</span>\n <div class=\"status\" *ngIf=\"statusItem\">\n <ui-status [backgroundColor]=\"statusItem.backgroundColor\" [color]=\"statusItem.color\" [title]=\"statusItem.title\">\n </ui-status>\n </div>\n </div>\n <div class=\"subtitle\">\n {{ subtitle }}\n </div>\n </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"] }]
|
|
960
960
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
961
961
|
type: Input
|
|
962
962
|
}], subtitle: [{
|
|
@@ -1030,10 +1030,10 @@ class PaginatorComponent {
|
|
|
1030
1030
|
}
|
|
1031
1031
|
}
|
|
1032
1032
|
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1033
|
-
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$5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
1033
|
+
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$5.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1034
1034
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
1035
1035
|
type: Component,
|
|
1036
|
-
args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1036
|
+
args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
1037
1037
|
}], ctorParameters: function () { return []; }, propDecorators: { length: [{
|
|
1038
1038
|
type: Input
|
|
1039
1039
|
}], defaultPageSize: [{
|
|
@@ -1057,18 +1057,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1057
1057
|
}]
|
|
1058
1058
|
}] });
|
|
1059
1059
|
|
|
1060
|
-
|
|
1061
|
-
(
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1060
|
+
class ProgressBarComponent {
|
|
1061
|
+
constructor() { }
|
|
1062
|
+
}
|
|
1063
|
+
ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1064
|
+
ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: { color: "color", mode: "mode", value: "value", buffer: "buffer" }, ngImport: i0, template: "<mat-progress-bar\n class=\"progress-bar\"\n [color]=\"color ?? 'accent'\"\n [mode]=\"mode\"\n [value]=\"value\"\n [bufferValue]=\"buffer\"\n [ngClass]=\"{defaultColor: !color}\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"], components: [{ type: i1$6.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1065
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
1066
|
+
type: Component,
|
|
1067
|
+
args: [{ selector: 'ui-progress-bar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-progress-bar\n class=\"progress-bar\"\n [color]=\"color ?? 'accent'\"\n [mode]=\"mode\"\n [value]=\"value\"\n [bufferValue]=\"buffer\"\n [ngClass]=\"{defaultColor: !color}\"\n></mat-progress-bar>\n", styles: ["mat-progress-bar{height:8px;border-radius:33px}mat-progress-bar.defaultColor ::ng-deep .mat-progress-bar-fill:after{background-color:#888!important}\n"] }]
|
|
1068
|
+
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
|
|
1069
|
+
type: Input
|
|
1070
|
+
}], mode: [{
|
|
1071
|
+
type: Input
|
|
1072
|
+
}], value: [{
|
|
1073
|
+
type: Input
|
|
1074
|
+
}], buffer: [{
|
|
1075
|
+
type: Input
|
|
1076
|
+
}] } });
|
|
1077
|
+
|
|
1078
|
+
class ProgressBarComponentModule {
|
|
1079
|
+
}
|
|
1080
|
+
ProgressBarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1081
|
+
ProgressBarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponentModule, declarations: [ProgressBarComponent], imports: [CommonModule, MatProgressBarModule], exports: [ProgressBarComponent] });
|
|
1082
|
+
ProgressBarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponentModule, providers: [], imports: [[CommonModule, MatProgressBarModule]] });
|
|
1083
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponentModule, decorators: [{
|
|
1084
|
+
type: NgModule,
|
|
1085
|
+
args: [{
|
|
1086
|
+
declarations: [ProgressBarComponent],
|
|
1087
|
+
imports: [CommonModule, MatProgressBarModule],
|
|
1088
|
+
exports: [ProgressBarComponent],
|
|
1089
|
+
providers: [],
|
|
1090
|
+
}]
|
|
1091
|
+
}] });
|
|
1092
|
+
|
|
1093
|
+
var ColumnType;
|
|
1094
|
+
(function (ColumnType) {
|
|
1095
|
+
ColumnType["DATE"] = "date";
|
|
1096
|
+
ColumnType["STRING"] = "string";
|
|
1097
|
+
ColumnType["LABEL"] = "label";
|
|
1098
|
+
ColumnType["PERCENTAGE"] = "percentage";
|
|
1099
|
+
ColumnType["CHECK"] = "check";
|
|
1100
|
+
ColumnType["FUNCTION"] = "function";
|
|
1101
|
+
})(ColumnType || (ColumnType = {}));
|
|
1102
|
+
var ColumnAlignment;
|
|
1103
|
+
(function (ColumnAlignment) {
|
|
1104
|
+
ColumnAlignment["LEFT"] = "left";
|
|
1105
|
+
ColumnAlignment["RIGHT"] = "right";
|
|
1106
|
+
ColumnAlignment["CENTER"] = "center";
|
|
1107
|
+
})(ColumnAlignment || (ColumnAlignment = {}));
|
|
1072
1108
|
|
|
1073
1109
|
class DataPropertyGetterPipe {
|
|
1074
1110
|
transform(obj, keyName = '') {
|
|
@@ -1123,11 +1159,7 @@ class TableComponent {
|
|
|
1123
1159
|
/**
|
|
1124
1160
|
* @ignore
|
|
1125
1161
|
*/
|
|
1126
|
-
this.DataType =
|
|
1127
|
-
/**
|
|
1128
|
-
* @ignore
|
|
1129
|
-
*/
|
|
1130
|
-
this.DateFormat = DateFormat;
|
|
1162
|
+
this.DataType = ColumnType;
|
|
1131
1163
|
/**
|
|
1132
1164
|
* Data structure to select which columns should be rendered and their capabilities
|
|
1133
1165
|
*
|
|
@@ -1162,12 +1194,12 @@ class TableComponent {
|
|
|
1162
1194
|
}
|
|
1163
1195
|
}
|
|
1164
1196
|
ngOnInit() {
|
|
1165
|
-
this.displayedColumns = this.tableColumns.map((tableColumn) => tableColumn.
|
|
1197
|
+
this.displayedColumns = this.tableColumns.map((tableColumn) => tableColumn.headerName);
|
|
1166
1198
|
}
|
|
1167
1199
|
onSort(sortParams) {
|
|
1168
|
-
const columnSort = this.tableColumns.find((column) => column.
|
|
1169
|
-
if (columnSort?.
|
|
1170
|
-
sortParams.active = columnSort?.
|
|
1200
|
+
const columnSort = this.tableColumns.find((column) => column.headerName === sortParams.active);
|
|
1201
|
+
if (columnSort?.field) {
|
|
1202
|
+
sortParams.active = columnSort?.field;
|
|
1171
1203
|
}
|
|
1172
1204
|
this.onSortEvent.emit(sortParams);
|
|
1173
1205
|
}
|
|
@@ -1184,10 +1216,10 @@ class TableComponent {
|
|
|
1184
1216
|
}
|
|
1185
1217
|
}
|
|
1186
1218
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
1187
|
-
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.
|
|
1219
|
+
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.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{tableColumn.headerName | uppercase}}\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{tableColumn.headerName | uppercase}}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n [align]=\"tableColumn.styles?.alignment\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.STRING\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.DATE\">\n <span>{{(element | dataPropertyGetter:tableColumn.field) | date:'mediumDate'}}</span>\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.PERCENTAGE\">\n {{(element | dataPropertyGetter: tableColumn.field) !== ''\n ? (element | dataPropertyGetter:tableColumn.field)+'%'\n : ''}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.LABEL\">\n <ng-container\n *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.field]}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.CHECK\">\n <img src=\"/images/check.svg\">\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.valueGetter?.(element)}}\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\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 <ui-status [backgroundColor]=\"label?.backgroundColor\" [color]=\"label?.color\" [title]=\"label?.title\"></ui-status>\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;padding:16px}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5;cursor:pointer}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}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$2.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"] }, { type: StatusComponent, selector: "ui-status", inputs: ["backgroundColor", "color", "title"] }], directives: [{ type: i3$2.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i5.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: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }], pipes: { "uppercase": i5.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe, "date": i5.DatePipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1188
1220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, decorators: [{
|
|
1189
1221
|
type: Component,
|
|
1190
|
-
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.
|
|
1222
|
+
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.headerName\">\n <ng-container *ngIf=\"tableColumn.sortable; else notSortable\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" [mat-sort-header]=\"tableColumn.field || ''\"\n arrowPosition=\"after\" [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{tableColumn.headerName | uppercase}}\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{tableColumn.headerName | uppercase}}\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n [align]=\"tableColumn.styles?.alignment\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.STRING\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.DATE\">\n <span>{{(element | dataPropertyGetter:tableColumn.field) | date:'mediumDate'}}</span>\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.PERCENTAGE\">\n {{(element | dataPropertyGetter: tableColumn.field) !== ''\n ? (element | dataPropertyGetter:tableColumn.field)+'%'\n : ''}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.LABEL\">\n <ng-container\n *ngTemplateOutlet=\"label; context: {label: statusOptions[element | dataPropertyGetter: tableColumn.field]}\">\n </ng-container>\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.CHECK\">\n <img src=\"/images/check.svg\">\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.valueGetter?.(element)}}\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\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 <ui-status [backgroundColor]=\"label?.backgroundColor\" [color]=\"label?.color\" [title]=\"label?.title\"></ui-status>\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;padding:16px}table .mat-cell{padding:16px;text-align:justify}table td,table th,table .mat-row{border-width:.5px}table .mat-row:hover{background-color:#ecf6f5;cursor:pointer}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}table th.th-right{text-align:right}table th.th-right ::ng-deep .mat-sort-header-container{justify-content:end}table th.th-left{text-align:left}table th.th-left ::ng-deep .mat-sort-header-container{justify-content:start}table th.th-center{text-align:center}table th.th-center ::ng-deep .mat-sort-header-container{justify-content:center}\n"] }]
|
|
1191
1223
|
}], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { sort: [{
|
|
1192
1224
|
type: ViewChild,
|
|
1193
1225
|
args: [MatSort, { static: true }]
|
|
@@ -1206,13 +1238,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1206
1238
|
class TableComponentModule {
|
|
1207
1239
|
}
|
|
1208
1240
|
TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1209
|
-
TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe], imports: [CommonModule, MatTableModule, MatSortModule,
|
|
1210
|
-
TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule,
|
|
1241
|
+
TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe], imports: [CommonModule, MatTableModule, MatSortModule, StatusComponentModule], exports: [TableComponent] });
|
|
1242
|
+
TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule, StatusComponentModule]] });
|
|
1211
1243
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponentModule, decorators: [{
|
|
1212
1244
|
type: NgModule,
|
|
1213
1245
|
args: [{
|
|
1214
1246
|
declarations: [TableComponent, DataPropertyGetterPipe],
|
|
1215
|
-
imports: [CommonModule, MatTableModule, MatSortModule,
|
|
1247
|
+
imports: [CommonModule, MatTableModule, MatSortModule, StatusComponentModule],
|
|
1216
1248
|
exports: [TableComponent],
|
|
1217
1249
|
providers: [DataPropertyGetterPipe],
|
|
1218
1250
|
}]
|
|
@@ -1224,5 +1256,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1224
1256
|
* Generated bundle index. Do not edit.
|
|
1225
1257
|
*/
|
|
1226
1258
|
|
|
1227
|
-
export { BannerActionComponent, BannerActionComponentModule, BannerComponent, BannerComponentModule, CardComponent, CardComponentModule, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe,
|
|
1259
|
+
export { BannerActionComponent, BannerActionComponentModule, BannerComponent, BannerComponentModule, CardComponent, CardComponentModule, ColumnAlignment, ColumnType, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, FieldComponent, FieldComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, StatusComponent, StatusComponentModule, TableComponent, TableComponentModule };
|
|
1228
1260
|
//# sourceMappingURL=testgorilla-tgo-ui.mjs.map
|