@testgorilla/tgo-ui 0.0.21 → 0.0.23
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/button/button.component.d.ts +4 -5
- package/components/button/button.model.d.ts +1 -0
- package/components/create-account/create-account.component.module.d.ts +2 -1
- package/components/create-password/create-password.component.module.d.ts +2 -1
- package/components/dialog/dialog.component.d.ts +11 -0
- package/components/dialog/dialog.component.module.d.ts +13 -0
- package/components/dialog/dialog.model.d.ts +4 -0
- package/components/dialog/dialog.service.d.ts +13 -0
- package/components/dialog/launch-dialog.component.d.ts +9 -0
- package/components/forgot-password/forgot-password.component.module.d.ts +2 -1
- package/components/login/login.component.module.d.ts +2 -1
- package/components/navbar/navbar.component.module.d.ts +2 -1
- package/components/table/table.component.d.ts +47 -20
- package/components/table/table.model.d.ts +15 -8
- package/esm2020/components/banner-action/banner-action.component.mjs +3 -3
- package/esm2020/components/button/button.component.mjs +5 -5
- package/esm2020/components/button/button.model.mjs +1 -1
- package/esm2020/components/card/card.component.mjs +2 -2
- package/esm2020/components/create-account/create-account.component.mjs +8 -7
- package/esm2020/components/create-account/create-account.component.module.mjs +6 -2
- package/esm2020/components/create-password/create-password.component.mjs +7 -6
- package/esm2020/components/create-password/create-password.component.module.mjs +6 -2
- package/esm2020/components/dialog/dialog.component.mjs +32 -0
- package/esm2020/components/dialog/dialog.component.module.mjs +25 -0
- package/esm2020/components/dialog/dialog.model.mjs +2 -0
- package/esm2020/components/dialog/dialog.service.mjs +24 -0
- package/esm2020/components/dialog/launch-dialog.component.mjs +24 -0
- package/esm2020/components/field/field.component.mjs +3 -3
- package/esm2020/components/forgot-password/forgot-password.component.mjs +7 -6
- package/esm2020/components/forgot-password/forgot-password.component.module.mjs +27 -4
- package/esm2020/components/login/login.component.mjs +7 -6
- package/esm2020/components/login/login.component.module.mjs +6 -2
- package/esm2020/components/logo/logo.component.mjs +3 -3
- package/esm2020/components/navbar/navbar.component.mjs +8 -7
- package/esm2020/components/navbar/navbar.component.module.mjs +27 -4
- package/esm2020/components/table/table.component.mjs +83 -26
- package/esm2020/components/table/table.model.mjs +3 -5
- package/esm2020/public-api.mjs +4 -1
- package/fesm2015/testgorilla-tgo-ui.mjs +261 -71
- package/fesm2015/testgorilla-tgo-ui.mjs.map +1 -1
- package/fesm2020/testgorilla-tgo-ui.mjs +262 -71
- package/fesm2020/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +2 -2
- package/public-api.d.ts +2 -0
- package/src/assets/images/testgorilla.svg +9 -1
- package/src/assets/images/check.svg +0 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, forwardRef, Pipe, ViewChild } from '@angular/core';
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, forwardRef, ViewEncapsulation, Optional, Inject, Injectable, 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';
|
|
@@ -16,20 +16,23 @@ import * as i1$2 from '@angular/material/form-field';
|
|
|
16
16
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
17
17
|
import * as i4 from '@angular/material/input';
|
|
18
18
|
import { MatInputModule } from '@angular/material/input';
|
|
19
|
-
import * as
|
|
19
|
+
import * as i4$1 from '@angular-material-extensions/password-strength';
|
|
20
20
|
import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
|
|
21
|
-
import * as
|
|
21
|
+
import * as i5$1 from '@angular/material/checkbox';
|
|
22
22
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
23
|
-
import * as i1$4 from '@angular/material/
|
|
23
|
+
import * as i1$4 from '@angular/material/dialog';
|
|
24
|
+
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
25
|
+
import * as i1$5 from '@angular/material/toolbar';
|
|
24
26
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
25
|
-
import * as
|
|
27
|
+
import * as i5$2 from '@angular/material/menu';
|
|
26
28
|
import { MatMenuModule } from '@angular/material/menu';
|
|
27
29
|
import { MatRippleModule } from '@angular/material/core';
|
|
28
|
-
import * as i1$
|
|
30
|
+
import * as i1$6 from '@angular/material/paginator';
|
|
29
31
|
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
30
|
-
import * as i1$
|
|
32
|
+
import * as i1$7 from '@angular/material/progress-bar';
|
|
31
33
|
import { MatProgressBarModule } from '@angular/material/progress-bar';
|
|
32
|
-
import
|
|
34
|
+
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
35
|
+
import * as i3$1 from '@angular/material/sort';
|
|
33
36
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
34
37
|
import * as i2$1 from '@angular/material/table';
|
|
35
38
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
|
|
@@ -95,7 +98,7 @@ class ButtonComponent {
|
|
|
95
98
|
/**
|
|
96
99
|
* Background color of the button while in active state
|
|
97
100
|
*
|
|
98
|
-
* @type {
|
|
101
|
+
* @type {ButtonColor}
|
|
99
102
|
* @memberof ButtonComponent
|
|
100
103
|
*/
|
|
101
104
|
this.color = 'primary';
|
|
@@ -124,7 +127,7 @@ class ButtonComponent {
|
|
|
124
127
|
*/
|
|
125
128
|
this.loading = false;
|
|
126
129
|
/**
|
|
127
|
-
*
|
|
130
|
+
* Indicator of the button width
|
|
128
131
|
*
|
|
129
132
|
* @memberof ButtonComponent
|
|
130
133
|
*/
|
|
@@ -136,10 +139,10 @@ class ButtonComponent {
|
|
|
136
139
|
}
|
|
137
140
|
}
|
|
138
141
|
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
139
|
-
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonComponent, selector: "ui-button", inputs: { color: "color", label: "label", iconPosition: "iconPosition", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth" }, outputs: { onClickEvent: "onClickEvent" }, ngImport: i0, template: "
|
|
142
|
+
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonComponent, selector: "ui-button", inputs: { color: "color", label: "label", iconPosition: "iconPosition", iconName: "iconName", disabled: "disabled", loading: "loading", fullWidth: "fullWidth" }, outputs: { onClickEvent: "onClickEvent" }, ngImport: i0, template: "<button mat-flat-button [ngStyle]=\"{'width': fullWidth ? '100%' : 'auto'}\" [ngClass]=\"{'primary': color === 'primary', 'secondary' : color === 'secondary', 'tertiary' : color === 'tertiary' }\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" >\n <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n ><mat-icon>{{ iconName }}</mat-icon></span\n >\n <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n ><mat-icon>{{ iconName }}</mat-icon></span\n >\n </div>\n <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\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: i3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i5.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
140
143
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
141
144
|
type: Component,
|
|
142
|
-
args: [{ selector: 'ui-button', template: "
|
|
145
|
+
args: [{ selector: 'ui-button', template: "<button mat-flat-button [ngStyle]=\"{'width': fullWidth ? '100%' : 'auto'}\" [ngClass]=\"{'primary': color === 'primary', 'secondary' : color === 'secondary', 'tertiary' : color === 'tertiary' }\" [disabled]=\"disabled || loading\" (click)=\"onClick()\" >\n <div class=\"label-icon-wrapper\" [ngClass]=\"{ hidden: loading }\">\n <span class=\"icon icon-left\" *ngIf=\"iconPosition === 'left'\"\n ><mat-icon>{{ iconName }}</mat-icon></span\n >\n <span [ngClass]=\"{ 'label-without-icon': iconName === '', 'label-with-icon': iconName !== '' }\">{{ label }}</span>\n <span class=\"icon icon-right\" *ngIf=\"iconPosition === 'right'\"\n ><mat-icon>{{ iconName }}</mat-icon></span\n >\n </div>\n <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.primary{background-color:#46a997;color:#fff}button.primary.mat-flat-button.mat-button-disabled{background-color:#a2d4cb!important}button.secondary{background-color:#ededed;color:#000}button.secondary.mat-flat-button.mat-button-disabled{background-color:#f6f6f6!important;color:#000!important}button.tertiary{background-color:inherit;border-color:inherit;color:#46a997}button.tertiary.mat-flat-button.mat-button-disabled{background-color:inherit!important;border-color:inherit!important;color:#a2d4cb!important}button .label-icon-wrapper{display:flex;justify-content:center}button .label-icon-wrapper .label-without-icon{margin:0 16px;line-height:16px}button .label-icon-wrapper .label-with-icon{margin:0;line-height:16px}button .label-icon-wrapper .mat-icon{font-size:16px;height:16px;width:16px}button .label-icon-wrapper .icon-left{margin:0 16px 0 0}button .label-icon-wrapper .icon-right{margin:0 0 0 16px}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"] }]
|
|
143
146
|
}], propDecorators: { color: [{
|
|
144
147
|
type: Input
|
|
145
148
|
}], label: [{
|
|
@@ -180,10 +183,10 @@ class BannerActionComponent {
|
|
|
180
183
|
}
|
|
181
184
|
}
|
|
182
185
|
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 });
|
|
186
|
+
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\" [fullWidth]=\"false\" (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
187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: BannerActionComponent, decorators: [{
|
|
185
188
|
type: Component,
|
|
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"] }]
|
|
189
|
+
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\" [fullWidth]=\"false\" (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
190
|
}], ctorParameters: function () { return []; }, propDecorators: { text: [{
|
|
188
191
|
type: Input
|
|
189
192
|
}], backgroundColor: [{
|
|
@@ -230,10 +233,10 @@ class LogoComponent {
|
|
|
230
233
|
constructor() { }
|
|
231
234
|
}
|
|
232
235
|
LogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
233
|
-
LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LogoComponent, selector: "ui-logo", ngImport: i0, template: "<img
|
|
236
|
+
LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LogoComponent, selector: "ui-logo", ngImport: i0, template: "<img src=\"/images/testgorilla.svg\">\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
234
237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LogoComponent, decorators: [{
|
|
235
238
|
type: Component,
|
|
236
|
-
args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img
|
|
239
|
+
args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img src=\"/images/testgorilla.svg\">\n", styles: [":host{display:inline-flex}\n"] }]
|
|
237
240
|
}], ctorParameters: function () { return []; } });
|
|
238
241
|
|
|
239
242
|
class CardComponent {
|
|
@@ -243,10 +246,10 @@ class CardComponent {
|
|
|
243
246
|
}
|
|
244
247
|
}
|
|
245
248
|
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
246
|
-
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CardComponent, selector: "ui-card", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0, template: "<mat-card class=\"container\">\n <ui-logo class=\"logo\"></ui-logo>\n <mat-card-title>{{title}}</mat-card-title>\n <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:
|
|
249
|
+
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: CardComponent, selector: "ui-card", inputs: { title: "title", subTitle: "subTitle" }, ngImport: i0, template: "<mat-card class=\"container\">\n <ui-logo class=\"logo\"></ui-logo>\n <mat-card-title>{{title}}</mat-card-title>\n <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .logo{margin-bottom:40px}.container .mat-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%}.container .mat-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"], components: [{ type: i1$1.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: LogoComponent, selector: "ui-logo" }], directives: [{ type: i1$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { type: i1$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
247
250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CardComponent, decorators: [{
|
|
248
251
|
type: Component,
|
|
249
|
-
args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"container\">\n <ui-logo class=\"logo\"></ui-logo>\n <mat-card-title>{{title}}</mat-card-title>\n <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:
|
|
252
|
+
args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-card class=\"container\">\n <ui-logo class=\"logo\"></ui-logo>\n <mat-card-title>{{title}}</mat-card-title>\n <mat-card-subtitle>{{subTitle}}</mat-card-subtitle>\n</mat-card>\n", styles: [".container{width:672px;box-sizing:border-box;padding:80px!important}.container .logo{margin-bottom:40px}.container .mat-card-title{margin-bottom:24px;font-weight:700;font-size:22px;line-height:135%}.container .mat-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"] }]
|
|
250
253
|
}], propDecorators: { title: [{
|
|
251
254
|
type: Input
|
|
252
255
|
}], subTitle: [{
|
|
@@ -365,7 +368,7 @@ FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
365
368
|
useExisting: forwardRef(() => FieldComponent),
|
|
366
369
|
multi: true,
|
|
367
370
|
},
|
|
368
|
-
], ngImport: i0, template: "<div class=\"column\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n
|
|
371
|
+
], ngImport: i0, template: "<div class=\"column\">\n <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n <input\n matInput\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"isDisabled\"\n [type]=\"type\"\n (input)=\"onInput($event)\"\n />\n <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n <mat-hint *ngIf=\"hint && !error\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"error\">{{ error }}</mat-hint>\n </mat-form-field>\n</div>\n", styles: [".mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:20px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.column{display:flex;flex-direction:column}\n"], components: [{ type: i1$2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.MatLabel, selector: "mat-label" }, { type: i1$2.MatPrefix, selector: "[matPrefix]" }, { type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$2.MatSuffix, selector: "[matSuffix]" }, { type: i1$2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
|
|
369
372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponent, decorators: [{
|
|
370
373
|
type: Component,
|
|
371
374
|
args: [{ selector: 'ui-field', providers: [
|
|
@@ -374,7 +377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
374
377
|
useExisting: forwardRef(() => FieldComponent),
|
|
375
378
|
multi: true,
|
|
376
379
|
},
|
|
377
|
-
], template: "<div class=\"column\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n
|
|
380
|
+
], template: "<div class=\"column\">\n <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n <input\n matInput\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n [disabled]=\"isDisabled\"\n [type]=\"type\"\n (input)=\"onInput($event)\"\n />\n <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n <mat-hint *ngIf=\"hint && !error\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"error\">{{ error }}</mat-hint>\n </mat-form-field>\n</div>\n", styles: [".mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:20px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.column{display:flex;flex-direction:column}\n"] }]
|
|
378
381
|
}], ctorParameters: function () { return []; }, propDecorators: { label: [{
|
|
379
382
|
type: Input
|
|
380
383
|
}], preffixIcon: [{
|
|
@@ -463,10 +466,10 @@ class CreateAccountComponent {
|
|
|
463
466
|
}
|
|
464
467
|
}
|
|
465
468
|
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 });
|
|
466
|
-
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 <
|
|
469
|
+
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 <ui-logo></ui-logo>\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 <div class=\"password-strength-container\">\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n >\n </mat-password-strength>\n </div>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\">\n </mat-password-strength-info>\n </div>\n <div class=\"terms-conditions-container\">\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 .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.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: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$1.MatPasswordStrengthInfoComponent, selector: "mat-password-strength-info", inputs: ["passwordComponent", "enableScoreInfo", "lowerCaseCriteriaMsg", "upperCaseCriteriaMsg", "digitsCriteriaMsg", "specialCharsCriteriaMsg", "customCharsCriteriaMsg", "minCharsCriteriaMsg", "matIconDone", "matIconError"], exportAs: ["matPasswordStrengthInfo"] }, { type: i5$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 });
|
|
467
470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponent, decorators: [{
|
|
468
471
|
type: Component,
|
|
469
|
-
args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <
|
|
472
|
+
args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\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 <div class=\"password-strength-container\">\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n >\n </mat-password-strength>\n </div>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\">\n </mat-password-strength-info>\n </div>\n <div class=\"terms-conditions-container\">\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 .title{font-weight:700;font-size:22px;line-height:29.7px;margin-top:40px}.form-box .subtitle{font-weight:400;font-size:16px;line-height:21.6px;margin:24px 0}.form-box .field{width:100%}.form-box .password-strength-container{margin:2.7px 0 1px}.form-box .terms-conditions-container{margin-top:9px}.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"] }]
|
|
470
473
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
471
474
|
type: Input
|
|
472
475
|
}], loading: [{
|
|
@@ -501,7 +504,8 @@ CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
|
|
|
501
504
|
FieldComponentModule,
|
|
502
505
|
ButtonComponentModule,
|
|
503
506
|
MatCheckboxModule,
|
|
504
|
-
MatPasswordStrengthModule
|
|
507
|
+
MatPasswordStrengthModule,
|
|
508
|
+
LogoComponentModule], exports: [CreateAccountComponent] });
|
|
505
509
|
CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponentModule, providers: [], imports: [[
|
|
506
510
|
CommonModule,
|
|
507
511
|
FormsModule,
|
|
@@ -510,6 +514,7 @@ CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
|
|
|
510
514
|
ButtonComponentModule,
|
|
511
515
|
MatCheckboxModule,
|
|
512
516
|
MatPasswordStrengthModule,
|
|
517
|
+
LogoComponentModule,
|
|
513
518
|
]] });
|
|
514
519
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreateAccountComponentModule, decorators: [{
|
|
515
520
|
type: NgModule,
|
|
@@ -523,6 +528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
523
528
|
ButtonComponentModule,
|
|
524
529
|
MatCheckboxModule,
|
|
525
530
|
MatPasswordStrengthModule,
|
|
531
|
+
LogoComponentModule,
|
|
526
532
|
],
|
|
527
533
|
exports: [CreateAccountComponent],
|
|
528
534
|
providers: [],
|
|
@@ -584,10 +590,10 @@ class CreatePasswordComponent {
|
|
|
584
590
|
}
|
|
585
591
|
}
|
|
586
592
|
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 });
|
|
587
|
-
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 <
|
|
593
|
+
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 <ui-logo></ui-logo>\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 .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i4$1.MatPasswordStrengthComponent, selector: "mat-password-strength", inputs: ["password", "externalError", "enableLengthRule", "enableLowerCaseLetterRule", "enableUpperCaseLetterRule", "enableDigitRule", "enableSpecialCharRule", "min", "max", "customValidator", "warnThreshold", "accentThreshold"], outputs: ["onStrengthChanged"], exportAs: ["matPasswordStrength"] }, { type: i4$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 });
|
|
588
594
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponent, decorators: [{
|
|
589
595
|
type: Component,
|
|
590
|
-
args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <
|
|
596
|
+
args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\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 .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin-top:25px}\n"] }]
|
|
591
597
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
592
598
|
type: Input
|
|
593
599
|
}], loading: [{
|
|
@@ -604,7 +610,8 @@ CreatePasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12
|
|
|
604
610
|
ReactiveFormsModule,
|
|
605
611
|
FieldComponentModule,
|
|
606
612
|
ButtonComponentModule,
|
|
607
|
-
MatPasswordStrengthModule
|
|
613
|
+
MatPasswordStrengthModule,
|
|
614
|
+
LogoComponentModule], exports: [CreatePasswordComponent] });
|
|
608
615
|
CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponentModule, providers: [], imports: [[
|
|
609
616
|
CommonModule,
|
|
610
617
|
FormsModule,
|
|
@@ -612,6 +619,7 @@ CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
|
|
|
612
619
|
FieldComponentModule,
|
|
613
620
|
ButtonComponentModule,
|
|
614
621
|
MatPasswordStrengthModule,
|
|
622
|
+
LogoComponentModule,
|
|
615
623
|
]] });
|
|
616
624
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CreatePasswordComponentModule, decorators: [{
|
|
617
625
|
type: NgModule,
|
|
@@ -624,12 +632,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
624
632
|
FieldComponentModule,
|
|
625
633
|
ButtonComponentModule,
|
|
626
634
|
MatPasswordStrengthModule,
|
|
635
|
+
LogoComponentModule,
|
|
627
636
|
],
|
|
628
637
|
exports: [CreatePasswordComponent],
|
|
629
638
|
providers: [],
|
|
630
639
|
}]
|
|
631
640
|
}] });
|
|
632
641
|
|
|
642
|
+
class DialogComponent {
|
|
643
|
+
// TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
|
|
644
|
+
// https://github.com/storybookjs/storybook/issues/16865
|
|
645
|
+
// https://github.com/storybookjs/storybook/issues/17004
|
|
646
|
+
constructor(data, dialogRef) {
|
|
647
|
+
this.data = data;
|
|
648
|
+
this.dialogRef = dialogRef;
|
|
649
|
+
}
|
|
650
|
+
dismiss() {
|
|
651
|
+
this.dialogRef.close();
|
|
652
|
+
}
|
|
653
|
+
}
|
|
654
|
+
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$4.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
655
|
+
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialogComponent, selector: "ui-dialog", ngImport: i0, template: "<ng-container>\n <div mat-dialog-title class=\"title\">\n Styles of a default modal\n <div>\n <button mat-icon-button (click)=\"dismiss()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </div>\n <mat-dialog-content>\n <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum odio fugit ipsa amet nam dolores reiciendis quod aliquam nulla.</p>\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, quis nemo voluptatem delectus sed atque corporis perspiciatis fugit reiciendis nobis, accusantium omnis! Iste aliquam totam magnam dignissimos deleniti. Repellat ipsam sit mollitia, aspernatur maiores sint, ea deserunt exercitationem ullam veniam nisi minus inventore officiis tenetur culpa, hic voluptates fuga voluptatum.</p>\n <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima magnam, doloribus iusto nam illum saepe quisquam esse sit sequi possimus vel? Autem vero cum dolores nobis unde, tenetur minima natus?</p>\n </mat-dialog-content>\n</ng-container>\n", styles: [".ui-dialog .mat-dialog-container{border-radius:8px;padding:32px}.title{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\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"] }], directives: [{ type: i1$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponent, decorators: [{
|
|
657
|
+
type: Component,
|
|
658
|
+
args: [{ selector: 'ui-dialog', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container>\n <div mat-dialog-title class=\"title\">\n Styles of a default modal\n <div>\n <button mat-icon-button (click)=\"dismiss()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </div>\n <mat-dialog-content>\n <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora rerum odio fugit ipsa amet nam dolores reiciendis quod aliquam nulla.</p>\n <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, quis nemo voluptatem delectus sed atque corporis perspiciatis fugit reiciendis nobis, accusantium omnis! Iste aliquam totam magnam dignissimos deleniti. Repellat ipsam sit mollitia, aspernatur maiores sint, ea deserunt exercitationem ullam veniam nisi minus inventore officiis tenetur culpa, hic voluptates fuga voluptatum.</p>\n <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima magnam, doloribus iusto nam illum saepe quisquam esse sit sequi possimus vel? Autem vero cum dolores nobis unde, tenetur minima natus?</p>\n </mat-dialog-content>\n</ng-container>\n", styles: [".ui-dialog .mat-dialog-container{border-radius:8px;padding:32px}.title{display:flex;flex-direction:row;justify-content:space-between;align-items:center}\n"] }]
|
|
659
|
+
}], ctorParameters: function () {
|
|
660
|
+
return [{ type: undefined, decorators: [{
|
|
661
|
+
type: Optional
|
|
662
|
+
}, {
|
|
663
|
+
type: Inject,
|
|
664
|
+
args: [MAT_DIALOG_DATA]
|
|
665
|
+
}] }, { type: i1$4.MatDialogRef, decorators: [{
|
|
666
|
+
type: Optional
|
|
667
|
+
}] }];
|
|
668
|
+
} });
|
|
669
|
+
|
|
670
|
+
class DialogService {
|
|
671
|
+
/**
|
|
672
|
+
* Constructor
|
|
673
|
+
*/
|
|
674
|
+
constructor(matDialog) {
|
|
675
|
+
this.matDialog = matDialog;
|
|
676
|
+
}
|
|
677
|
+
open(dialogComponent, config) {
|
|
678
|
+
// Open the dialog using UI custom styles
|
|
679
|
+
return this.matDialog.open(dialogComponent, Object.assign({ panelClass: 'ui-dialog' }, config));
|
|
680
|
+
}
|
|
681
|
+
}
|
|
682
|
+
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogService, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
683
|
+
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogService });
|
|
684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogService, decorators: [{
|
|
685
|
+
type: Injectable
|
|
686
|
+
}], ctorParameters: function () { return [{ type: i1$4.MatDialog }]; } });
|
|
687
|
+
|
|
688
|
+
class LaunchDialogComponent {
|
|
689
|
+
// TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
|
|
690
|
+
// https://github.com/storybookjs/storybook/issues/16865
|
|
691
|
+
// https://github.com/storybookjs/storybook/issues/17004
|
|
692
|
+
constructor(dialogService) {
|
|
693
|
+
this.dialogService = dialogService;
|
|
694
|
+
this.openModal();
|
|
695
|
+
}
|
|
696
|
+
openModal() {
|
|
697
|
+
this.dialogService.open(DialogComponent);
|
|
698
|
+
}
|
|
699
|
+
}
|
|
700
|
+
LaunchDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LaunchDialogComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
701
|
+
LaunchDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: LaunchDialogComponent, selector: "ui-launch-dialog", ngImport: i0, template: "<ui-button [label]=\"'Launch modal'\" (onClickEvent)=\"openModal()\"></ui-button>", components: [{ type: ButtonComponent, selector: "ui-button", inputs: ["color", "label", "iconPosition", "iconName", "disabled", "loading", "fullWidth"], outputs: ["onClickEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
702
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LaunchDialogComponent, decorators: [{
|
|
703
|
+
type: Component,
|
|
704
|
+
args: [{ selector: 'ui-launch-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-button [label]=\"'Launch modal'\" (onClickEvent)=\"openModal()\"></ui-button>" }]
|
|
705
|
+
}], ctorParameters: function () { return [{ type: DialogService }]; } });
|
|
706
|
+
|
|
707
|
+
class DialogComponentModule {
|
|
708
|
+
}
|
|
709
|
+
DialogComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
710
|
+
DialogComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponentModule, declarations: [DialogComponent, LaunchDialogComponent], imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule], exports: [MatDialogModule] });
|
|
711
|
+
DialogComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponentModule, providers: [DialogService], imports: [[CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule], MatDialogModule] });
|
|
712
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialogComponentModule, decorators: [{
|
|
713
|
+
type: NgModule,
|
|
714
|
+
args: [{
|
|
715
|
+
declarations: [DialogComponent, LaunchDialogComponent],
|
|
716
|
+
imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule],
|
|
717
|
+
exports: [MatDialogModule],
|
|
718
|
+
providers: [DialogService],
|
|
719
|
+
}]
|
|
720
|
+
}] });
|
|
721
|
+
|
|
633
722
|
class ForgotPasswordComponent {
|
|
634
723
|
constructor(fb) {
|
|
635
724
|
this.fb = fb;
|
|
@@ -685,10 +774,10 @@ class ForgotPasswordComponent {
|
|
|
685
774
|
}
|
|
686
775
|
}
|
|
687
776
|
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 });
|
|
688
|
-
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 <
|
|
777
|
+
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 <ui-logo></ui-logo>\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 .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.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: LogoComponent, selector: "ui-logo" }, { 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 });
|
|
689
778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
|
|
690
779
|
type: Component,
|
|
691
|
-
args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <
|
|
780
|
+
args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\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 .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 21px}.form-box .field{width:100%}.form-box .submit-button{margin:3px 0 24px}.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"] }]
|
|
692
781
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
693
782
|
type: Input
|
|
694
783
|
}], loading: [{
|
|
@@ -702,13 +791,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
702
791
|
class ForgotPasswordComponentModule {
|
|
703
792
|
}
|
|
704
793
|
ForgotPasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
705
|
-
ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, declarations: [ForgotPasswordComponent], imports: [CommonModule,
|
|
706
|
-
|
|
794
|
+
ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, declarations: [ForgotPasswordComponent], imports: [CommonModule,
|
|
795
|
+
FormsModule,
|
|
796
|
+
ReactiveFormsModule,
|
|
797
|
+
FieldComponentModule,
|
|
798
|
+
ButtonComponentModule,
|
|
799
|
+
MatIconModule,
|
|
800
|
+
LogoComponentModule], exports: [ForgotPasswordComponent] });
|
|
801
|
+
ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, providers: [], imports: [[
|
|
802
|
+
CommonModule,
|
|
803
|
+
FormsModule,
|
|
804
|
+
ReactiveFormsModule,
|
|
805
|
+
FieldComponentModule,
|
|
806
|
+
ButtonComponentModule,
|
|
807
|
+
MatIconModule,
|
|
808
|
+
LogoComponentModule,
|
|
809
|
+
]] });
|
|
707
810
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ForgotPasswordComponentModule, decorators: [{
|
|
708
811
|
type: NgModule,
|
|
709
812
|
args: [{
|
|
710
813
|
declarations: [ForgotPasswordComponent],
|
|
711
|
-
imports: [
|
|
814
|
+
imports: [
|
|
815
|
+
CommonModule,
|
|
816
|
+
FormsModule,
|
|
817
|
+
ReactiveFormsModule,
|
|
818
|
+
FieldComponentModule,
|
|
819
|
+
ButtonComponentModule,
|
|
820
|
+
MatIconModule,
|
|
821
|
+
LogoComponentModule,
|
|
822
|
+
],
|
|
712
823
|
exports: [ForgotPasswordComponent],
|
|
713
824
|
providers: [],
|
|
714
825
|
}]
|
|
@@ -781,10 +892,10 @@ class LoginComponent {
|
|
|
781
892
|
}
|
|
782
893
|
}
|
|
783
894
|
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 });
|
|
784
|
-
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 <
|
|
895
|
+
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 <ui-logo></ui-logo>\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 .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin:40px 0 24px}.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;margin-top:3px}.row.space-between{justify-content:space-between}\n"], components: [{ type: LogoComponent, selector: "ui-logo" }, { type: FieldComponent, selector: "ui-field", inputs: ["label", "preffixIcon", "suffixIcon", "required", "hint", "error", "placeholder", "type"] }, { type: i5$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 });
|
|
785
896
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponent, decorators: [{
|
|
786
897
|
type: Component,
|
|
787
|
-
args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <
|
|
898
|
+
args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\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 .title{font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px}.form-box .field{width:100%}.form-box .submit-button{margin:40px 0 24px}.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;margin-top:3px}.row.space-between{justify-content:space-between}\n"] }]
|
|
788
899
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { loading: [{
|
|
789
900
|
type: Input
|
|
790
901
|
}], submitEvent: [{
|
|
@@ -803,7 +914,8 @@ LoginComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
|
|
|
803
914
|
ReactiveFormsModule,
|
|
804
915
|
FieldComponentModule,
|
|
805
916
|
ButtonComponentModule,
|
|
806
|
-
MatCheckboxModule
|
|
917
|
+
MatCheckboxModule,
|
|
918
|
+
LogoComponentModule], exports: [LoginComponent] });
|
|
807
919
|
LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponentModule, providers: [], imports: [[
|
|
808
920
|
CommonModule,
|
|
809
921
|
FormsModule,
|
|
@@ -811,6 +923,7 @@ LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
|
|
|
811
923
|
FieldComponentModule,
|
|
812
924
|
ButtonComponentModule,
|
|
813
925
|
MatCheckboxModule,
|
|
926
|
+
LogoComponentModule,
|
|
814
927
|
]] });
|
|
815
928
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LoginComponentModule, decorators: [{
|
|
816
929
|
type: NgModule,
|
|
@@ -823,6 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
823
936
|
FieldComponentModule,
|
|
824
937
|
ButtonComponentModule,
|
|
825
938
|
MatCheckboxModule,
|
|
939
|
+
LogoComponentModule,
|
|
826
940
|
],
|
|
827
941
|
exports: [LoginComponent],
|
|
828
942
|
providers: [],
|
|
@@ -873,10 +987,10 @@ class NavbarComponent {
|
|
|
873
987
|
}
|
|
874
988
|
}
|
|
875
989
|
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
876
|
-
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 <
|
|
990
|
+
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 <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\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>power_settings_new</mat-icon>\n Log out\n </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.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$5.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: LogoComponent, selector: "ui-logo" }, { 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: i5$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i5$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: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
877
991
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
878
992
|
type: Component,
|
|
879
|
-
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar>\n <div class=\"custom-toolbar row\">\n <
|
|
993
|
+
args: [{ selector: 'ui-navbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar>\n <div class=\"custom-toolbar row\">\n <ui-logo class=\"logo\" (click)=\"navigate('')\"></ui-logo>\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>power_settings_new</mat-icon>\n Log out\n </button>\n</mat-menu>\n", styles: [".mat-toolbar{height:80px!important;background-color:#fff!important;padding:0 192px!important}.mat-toolbar .custom-toolbar{width:100%;height:100%;background-color:#fff}.mat-toolbar .custom-toolbar ui-logo.logo{cursor:pointer;width:105px;height:32px;align-self:center;flex:1 0 216px}.mat-toolbar .custom-toolbar .navigation{height:100%}.mat-toolbar .custom-toolbar .navigation a{display:flex;align-items:center;height:100%;background:#fff;cursor:pointer}.mat-toolbar .custom-toolbar .navigation a.active{border-top:2px solid #276678}.mat-toolbar .custom-toolbar .navigation a.active span{font-weight:700}.mat-toolbar .custom-toolbar .navigation a span{width:100%;text-align:center;font-weight:400;font-size:14px;line-height:16px}.mat-toolbar .custom-toolbar .navigation a:not(:first-of-type){margin-left:32px}.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"] }]
|
|
880
994
|
}], ctorParameters: function () { return []; }, propDecorators: { routes: [{
|
|
881
995
|
type: Input
|
|
882
996
|
}], activedRoute: [{
|
|
@@ -892,13 +1006,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
892
1006
|
class NavbarComponentModule {
|
|
893
1007
|
}
|
|
894
1008
|
NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
895
|
-
NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
|
|
896
|
-
|
|
1009
|
+
NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
|
|
1010
|
+
MatToolbarModule,
|
|
1011
|
+
MatIconModule,
|
|
1012
|
+
MatButtonModule,
|
|
1013
|
+
MatRippleModule,
|
|
1014
|
+
MatMenuModule,
|
|
1015
|
+
LogoComponentModule], exports: [NavbarComponent] });
|
|
1016
|
+
NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[
|
|
1017
|
+
CommonModule,
|
|
1018
|
+
MatToolbarModule,
|
|
1019
|
+
MatIconModule,
|
|
1020
|
+
MatButtonModule,
|
|
1021
|
+
MatRippleModule,
|
|
1022
|
+
MatMenuModule,
|
|
1023
|
+
LogoComponentModule,
|
|
1024
|
+
]] });
|
|
897
1025
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavbarComponentModule, decorators: [{
|
|
898
1026
|
type: NgModule,
|
|
899
1027
|
args: [{
|
|
900
1028
|
declarations: [NavbarComponent],
|
|
901
|
-
imports: [
|
|
1029
|
+
imports: [
|
|
1030
|
+
CommonModule,
|
|
1031
|
+
MatToolbarModule,
|
|
1032
|
+
MatIconModule,
|
|
1033
|
+
MatButtonModule,
|
|
1034
|
+
MatRippleModule,
|
|
1035
|
+
MatMenuModule,
|
|
1036
|
+
LogoComponentModule,
|
|
1037
|
+
],
|
|
902
1038
|
exports: [NavbarComponent],
|
|
903
1039
|
providers: [],
|
|
904
1040
|
}]
|
|
@@ -1034,7 +1170,7 @@ class PaginatorComponent {
|
|
|
1034
1170
|
}
|
|
1035
1171
|
}
|
|
1036
1172
|
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1037
|
-
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$
|
|
1173
|
+
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$6.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1038
1174
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
1039
1175
|
type: Component,
|
|
1040
1176
|
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"] }]
|
|
@@ -1065,7 +1201,7 @@ class ProgressBarComponent {
|
|
|
1065
1201
|
constructor() { }
|
|
1066
1202
|
}
|
|
1067
1203
|
ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1068
|
-
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$
|
|
1204
|
+
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$7.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 });
|
|
1069
1205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
1070
1206
|
type: Component,
|
|
1071
1207
|
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"] }]
|
|
@@ -1096,12 +1232,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1096
1232
|
|
|
1097
1233
|
var ColumnType;
|
|
1098
1234
|
(function (ColumnType) {
|
|
1099
|
-
ColumnType["
|
|
1100
|
-
ColumnType["STRING"] = "string";
|
|
1235
|
+
ColumnType["FIELD"] = "field";
|
|
1101
1236
|
ColumnType["LABEL"] = "label";
|
|
1102
|
-
ColumnType["PERCENTAGE"] = "percentage";
|
|
1103
|
-
ColumnType["CHECK"] = "check";
|
|
1104
1237
|
ColumnType["FUNCTION"] = "function";
|
|
1238
|
+
ColumnType["RENDERER"] = "renderer";
|
|
1105
1239
|
})(ColumnType || (ColumnType = {}));
|
|
1106
1240
|
var ColumnAlignment;
|
|
1107
1241
|
(function (ColumnAlignment) {
|
|
@@ -1143,27 +1277,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1143
1277
|
class TableComponent {
|
|
1144
1278
|
constructor(dataPropertyGetterPipe) {
|
|
1145
1279
|
this.dataPropertyGetterPipe = dataPropertyGetterPipe;
|
|
1146
|
-
// TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
|
|
1147
|
-
// https://github.com/storybookjs/storybook/issues/16865
|
|
1148
|
-
// https://github.com/storybookjs/storybook/issues/17004
|
|
1149
1280
|
/**
|
|
1150
1281
|
* @ignore
|
|
1151
1282
|
*/
|
|
1152
|
-
this.
|
|
1153
|
-
addSuffix: true,
|
|
1154
|
-
};
|
|
1155
|
-
/**
|
|
1156
|
-
* @ignore
|
|
1157
|
-
*/
|
|
1158
|
-
this.dataSource = new MatTableDataSource([]);
|
|
1159
|
-
/**
|
|
1160
|
-
* @ignore
|
|
1161
|
-
*/
|
|
1162
|
-
this.displayedColumns = [];
|
|
1163
|
-
/**
|
|
1164
|
-
* @ignore
|
|
1165
|
-
*/
|
|
1166
|
-
this.DataType = ColumnType;
|
|
1283
|
+
this.tableDetails = false;
|
|
1167
1284
|
/**
|
|
1168
1285
|
* Data structure to select which columns should be rendered and their capabilities
|
|
1169
1286
|
*
|
|
@@ -1185,6 +1302,40 @@ class TableComponent {
|
|
|
1185
1302
|
* @ignore
|
|
1186
1303
|
*/
|
|
1187
1304
|
this.onRowClickEvent = new EventEmitter();
|
|
1305
|
+
/**
|
|
1306
|
+
* @ignore
|
|
1307
|
+
*/
|
|
1308
|
+
this.onDetailRowClickEvent = new EventEmitter();
|
|
1309
|
+
/**
|
|
1310
|
+
* @ignore
|
|
1311
|
+
*/
|
|
1312
|
+
this.dataSource = new MatTableDataSource([]);
|
|
1313
|
+
/**
|
|
1314
|
+
* @ignore
|
|
1315
|
+
*/
|
|
1316
|
+
this.dataSourceDetail = new MatTableDataSource([]);
|
|
1317
|
+
/**
|
|
1318
|
+
* @ignore
|
|
1319
|
+
*/
|
|
1320
|
+
this.columnsToDisplay = [];
|
|
1321
|
+
/**
|
|
1322
|
+
* @ignore
|
|
1323
|
+
*/
|
|
1324
|
+
this.columnsDetailToDisplay = [];
|
|
1325
|
+
/**
|
|
1326
|
+
* @ignore
|
|
1327
|
+
*/
|
|
1328
|
+
this.DataType = ColumnType;
|
|
1329
|
+
}
|
|
1330
|
+
// TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
|
|
1331
|
+
// https://github.com/storybookjs/storybook/issues/16865
|
|
1332
|
+
// https://github.com/storybookjs/storybook/issues/17004
|
|
1333
|
+
/**
|
|
1334
|
+
* @ignore
|
|
1335
|
+
*/
|
|
1336
|
+
set matSort(matSort) {
|
|
1337
|
+
this.dataSource.sort = matSort;
|
|
1338
|
+
this.dataSource.sortingDataAccessor = (item, property) => this.dataPropertyGetterPipe.transform(item, property);
|
|
1188
1339
|
}
|
|
1189
1340
|
/**
|
|
1190
1341
|
* Data to be rendered
|
|
@@ -1198,7 +1349,10 @@ class TableComponent {
|
|
|
1198
1349
|
}
|
|
1199
1350
|
}
|
|
1200
1351
|
ngOnInit() {
|
|
1201
|
-
this.
|
|
1352
|
+
this.columnsToDisplay = this.tableColumns.map((tableColumn) => tableColumn.headerName);
|
|
1353
|
+
if (this.tableDetailColumns) {
|
|
1354
|
+
this.columnsDetailToDisplay = this.tableDetailColumns.columnDefs.map((tableColumn) => tableColumn.headerName);
|
|
1355
|
+
}
|
|
1202
1356
|
}
|
|
1203
1357
|
onSort(sortParams) {
|
|
1204
1358
|
const columnSort = this.tableColumns.find((column) => column.headerName === sortParams.active);
|
|
@@ -1210,33 +1364,69 @@ class TableComponent {
|
|
|
1210
1364
|
onRowClick(rowParams) {
|
|
1211
1365
|
this.onRowClickEvent.emit(rowParams);
|
|
1212
1366
|
}
|
|
1367
|
+
onDetailRowClick(rowParams) {
|
|
1368
|
+
this.onDetailRowClickEvent.emit(rowParams);
|
|
1369
|
+
}
|
|
1370
|
+
toggleRow(element) {
|
|
1371
|
+
this.elementDetail = this.elementDetail === element ? null : element;
|
|
1372
|
+
if (this.elementDetail) {
|
|
1373
|
+
this.tableDetailColumns.setDetailRowData({
|
|
1374
|
+
data: element,
|
|
1375
|
+
setDetailDataSource: this.setTableDetailDataSource.bind(this),
|
|
1376
|
+
});
|
|
1377
|
+
}
|
|
1378
|
+
}
|
|
1213
1379
|
/**
|
|
1214
1380
|
* @ignore
|
|
1215
1381
|
*/
|
|
1216
1382
|
setTableDataSource(data) {
|
|
1217
1383
|
this.dataSource = new MatTableDataSource(data);
|
|
1218
|
-
|
|
1219
|
-
|
|
1384
|
+
}
|
|
1385
|
+
/**
|
|
1386
|
+
* @ignore
|
|
1387
|
+
*/
|
|
1388
|
+
setTableDetailDataSource(rowData) {
|
|
1389
|
+
this.dataSourceDetail = new MatTableDataSource(rowData);
|
|
1220
1390
|
}
|
|
1221
1391
|
}
|
|
1222
1392
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
1223
|
-
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 });
|
|
1393
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns", statusOptions: "statusOptions" }, outputs: { onSortEvent: "onSortEvent", onRowClickEvent: "onRowClickEvent", onDetailRowClickEvent: "onDetailRowClickEvent" }, viewQueries: [{ propertyName: "matSort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<table *ngIf=\"!tableDetails\" 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 *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n multiTemplateDataRows>\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 *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n <table mat-table [dataSource]=\"dataSourceDetail\">\n <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.headerName\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{tableColumn.headerName | uppercase}}\n </th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n [align]=\"tableColumn.styles?.alignment\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n </table>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></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\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n\n <!-- TODO: LABEL type is Deprecated. Use RENDERER Type instead. -->\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\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.function?.(element)}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <div [innerHTML]=\"tableColumn.renderer?.(element)\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n</ng-template>\n", styles: ["table{cursor:initial;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:not(.element-detail .mat-row){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}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{display:none}table .element-detail table .mat-cell{border-width:0px}\n"], components: [{ type: i2$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i3$1.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: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.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: 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i2$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "uppercase": i5.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe }, animations: [
|
|
1394
|
+
trigger('expandDetail', [
|
|
1395
|
+
state('collapsed, void', style({ height: '0px' })),
|
|
1396
|
+
state('expanded', style({ height: '*' })),
|
|
1397
|
+
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1398
|
+
transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1399
|
+
]),
|
|
1400
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1224
1401
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableComponent, decorators: [{
|
|
1225
1402
|
type: Component,
|
|
1226
|
-
args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1227
|
-
|
|
1403
|
+
args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1404
|
+
trigger('expandDetail', [
|
|
1405
|
+
state('collapsed, void', style({ height: '0px' })),
|
|
1406
|
+
state('expanded', style({ height: '*' })),
|
|
1407
|
+
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1408
|
+
transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1409
|
+
]),
|
|
1410
|
+
], template: "<table *ngIf=\"!tableDetails\" 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 *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\"></tr>\n</table>\n\n<table *ngIf=\"tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\"\n multiTemplateDataRows>\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 *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <!-- Expanded Content Column -->\n <ng-container matColumnDef=\"expandedDetail\">\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"columnsToDisplay.length\">\n <div class=\"element-detail\" *ngIf=\"dataSourceDetail.data.length\"\n [@expandDetail]=\"element === elementDetail ? 'expanded' : 'collapsed'\">\n <table mat-table [dataSource]=\"dataSourceDetail\">\n <ng-container *ngFor=\"let tableColumn of tableDetailColumns.columnDefs\"\n [matColumnDef]=\"tableColumn.headerName\">\n <th mat-header-cell *matHeaderCellDef=\"let element\" arrowPosition=\"after\"\n [ngStyle]=\"{width: tableColumn.styles?.width}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n {{tableColumn.headerName | uppercase}}\n </th>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onDetailRowClick(element)\"\n [ngStyle]=\"{width: tableColumn.styles?.width, 'text-align': tableColumn.styles?.alignment}\"\n [align]=\"tableColumn.styles?.alignment\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsDetailToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let rowDetail; columns: columnsDetailToDisplay;\"></tr>\n </table>\n </div>\n </td>\n </ng-container>\n\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let element; columns: columnsToDisplay;\" class=\"element-row\"\n [class.expanded-row]=\"elementDetail === element\" (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></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\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n\n <!-- TODO: LABEL type is Deprecated. Use RENDERER Type instead. -->\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\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.function?.(element)}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <div [innerHTML]=\"tableColumn.renderer?.(element)\"></div>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n</ng-template>\n", styles: ["table{cursor:initial;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:not(.element-detail .mat-row){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}table tr.detail-row{height:0}table tr.element-row:not(.expanded-row):hover{background:whitesmoke}table tr.element-row:not(.expanded-row):active{background:#efefef}table .element-row td{border-bottom-width:0}table .mat-column-expandedDetail{padding:0}table .element-detail{overflow:hidden;display:flex}table .element-detail table{background-color:#f6f6f6}table .element-detail table .mat-header-row{display:none}table .element-detail table .mat-cell{border-width:0px}\n"] }]
|
|
1411
|
+
}], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { matSort: [{
|
|
1228
1412
|
type: ViewChild,
|
|
1229
|
-
args: [MatSort
|
|
1413
|
+
args: [MatSort]
|
|
1414
|
+
}], tableDetails: [{
|
|
1415
|
+
type: Input
|
|
1230
1416
|
}], tableData: [{
|
|
1231
1417
|
type: Input
|
|
1232
1418
|
}], tableColumns: [{
|
|
1233
1419
|
type: Input
|
|
1420
|
+
}], tableDetailColumns: [{
|
|
1421
|
+
type: Input
|
|
1234
1422
|
}], statusOptions: [{
|
|
1235
1423
|
type: Input
|
|
1236
1424
|
}], onSortEvent: [{
|
|
1237
1425
|
type: Output
|
|
1238
1426
|
}], onRowClickEvent: [{
|
|
1239
1427
|
type: Output
|
|
1428
|
+
}], onDetailRowClickEvent: [{
|
|
1429
|
+
type: Output
|
|
1240
1430
|
}] } });
|
|
1241
1431
|
|
|
1242
1432
|
class TableComponentModule {
|
|
@@ -1260,5 +1450,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1260
1450
|
* Generated bundle index. Do not edit.
|
|
1261
1451
|
*/
|
|
1262
1452
|
|
|
1263
|
-
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 };
|
|
1453
|
+
export { BannerActionComponent, BannerActionComponentModule, BannerComponent, BannerComponentModule, CardComponent, CardComponentModule, ColumnAlignment, ColumnType, CreateAccountComponent, CreateAccountComponentModule, CreatePasswordComponent, CreatePasswordComponentModule, DataPropertyGetterPipe, DialogComponentModule, DialogService, FieldComponent, FieldComponentModule, ForgotPasswordComponent, ForgotPasswordComponentModule, LoginComponent, LoginComponentModule, LogoComponent, LogoComponentModule, NavbarComponent, NavbarComponentModule, NavigationComponent, NavigationComponentModule, PaginatorComponent, PaginatorComponentModule, ProgressBarComponent, ProgressBarComponentModule, StatusComponent, StatusComponentModule, TableComponent, TableComponentModule };
|
|
1264
1454
|
//# sourceMappingURL=testgorilla-tgo-ui.mjs.map
|