@testgorilla/tgo-ui 0.0.31 → 0.0.33
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/field/field.component.d.ts +1 -0
- package/esm2020/components/banner/banner.component.mjs +3 -3
- package/esm2020/components/banner/banner.component.module.mjs +4 -4
- package/esm2020/components/banner-action/banner-action.component.mjs +3 -3
- package/esm2020/components/banner-action/banner-action.component.module.mjs +4 -4
- package/esm2020/components/button/button.component.mjs +3 -3
- package/esm2020/components/button/button.component.module.mjs +4 -4
- package/esm2020/components/card/card.component.mjs +3 -3
- package/esm2020/components/card/card.component.module.mjs +4 -4
- package/esm2020/components/create-account/create-account.component.mjs +6 -12
- package/esm2020/components/create-account/create-account.component.module.mjs +4 -4
- package/esm2020/components/create-password/create-password.component.mjs +6 -13
- package/esm2020/components/create-password/create-password.component.module.mjs +4 -4
- package/esm2020/components/dialog/dialog.component.mjs +3 -3
- package/esm2020/components/dialog/dialog.component.module.mjs +4 -4
- package/esm2020/components/dialog/dialog.service.mjs +3 -3
- package/esm2020/components/dialog/launch-dialog.component.mjs +3 -3
- package/esm2020/components/field/field.component.mjs +12 -9
- package/esm2020/components/field/field.component.module.mjs +4 -4
- package/esm2020/components/forgot-password/forgot-password.component.mjs +3 -3
- package/esm2020/components/forgot-password/forgot-password.component.module.mjs +4 -4
- package/esm2020/components/label/label.component.mjs +3 -3
- package/esm2020/components/label/label.component.module.mjs +4 -4
- package/esm2020/components/login/login.component.mjs +5 -5
- package/esm2020/components/login/login.component.module.mjs +4 -4
- package/esm2020/components/logo/logo.component.mjs +3 -3
- package/esm2020/components/logo/logo.component.module.mjs +4 -4
- package/esm2020/components/navbar/navbar.component.mjs +3 -3
- package/esm2020/components/navbar/navbar.component.module.mjs +4 -4
- package/esm2020/components/navigation/navigation.component.mjs +3 -3
- package/esm2020/components/navigation/navigation.component.module.mjs +4 -4
- package/esm2020/components/paginator/paginator.component.mjs +3 -3
- package/esm2020/components/paginator/paginator.component.module.mjs +4 -4
- package/esm2020/components/progress-bar/progress-bar.component.mjs +3 -3
- package/esm2020/components/progress-bar/progress-bar.component.module.mjs +4 -4
- package/esm2020/components/table/directives/dynamic-component.directive.mjs +3 -3
- package/esm2020/components/table/pipes/data-property-getter.mjs +3 -3
- package/esm2020/components/table/table.component.mjs +5 -5
- package/esm2020/components/table/table.component.module.mjs +4 -4
- package/esm2020/utils/validators.utils.mjs +8 -0
- package/fesm2015/testgorilla-tgo-ui.mjs +151 -155
- package/fesm2015/testgorilla-tgo-ui.mjs.map +1 -1
- package/fesm2020/testgorilla-tgo-ui.mjs +151 -155
- package/fesm2020/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/utils/validators.utils.d.ts +4 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, forwardRef, ViewEncapsulation, Optional, Inject, Injectable, Pipe, Directive, ViewChild } from '@angular/core';
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input, NgModule, EventEmitter, Output, forwardRef, ViewEncapsulation, HostBinding, Optional, Inject, Injectable, Pipe, Directive, 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';
|
|
@@ -11,7 +11,7 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
|
11
11
|
import * as i1$1 from '@angular/material/card';
|
|
12
12
|
import { MatCardModule } from '@angular/material/card';
|
|
13
13
|
import * as i1$3 from '@angular/forms';
|
|
14
|
-
import {
|
|
14
|
+
import { Validators, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
15
15
|
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';
|
|
@@ -68,9 +68,9 @@ class BannerComponent {
|
|
|
68
68
|
this.icon = 'error_outline';
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
|
-
BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
72
|
-
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
71
|
+
BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
72
|
+
BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BannerComponent, selector: "ui-banner", inputs: { backgroundColor: "backgroundColor", text: "text", icon: "icon" }, ngImport: i0, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n <mat-icon>{{ icon }}</mat-icon>\n <span>{{ text }}</span>\n</div>", styles: ["#banner{height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"], components: [{ type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponent, decorators: [{
|
|
74
74
|
type: Component,
|
|
75
75
|
args: [{ selector: 'ui-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner\" [style.background-color]=\"backgroundColor\">\n <mat-icon>{{ icon }}</mat-icon>\n <span>{{ text }}</span>\n</div>", styles: ["#banner{height:48px;padding:0 160px;color:#000;font-weight:600;font-size:14px;display:flex;align-items:center}#banner mat-icon{margin-right:16px}\n"] }]
|
|
76
76
|
}], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
|
|
@@ -83,10 +83,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
83
83
|
|
|
84
84
|
class BannerComponentModule {
|
|
85
85
|
}
|
|
86
|
-
BannerComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
87
|
-
BannerComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
88
|
-
BannerComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
86
|
+
BannerComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
87
|
+
BannerComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponentModule, declarations: [BannerComponent], imports: [CommonModule, MatIconModule], exports: [BannerComponent] });
|
|
88
|
+
BannerComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponentModule, providers: [], imports: [[CommonModule, MatIconModule]] });
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerComponentModule, decorators: [{
|
|
90
90
|
type: NgModule,
|
|
91
91
|
args: [{
|
|
92
92
|
declarations: [BannerComponent],
|
|
@@ -141,9 +141,9 @@ class ButtonComponent {
|
|
|
141
141
|
this.onClickEvent.emit();
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
|
-
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
145
|
-
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
146
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
144
|
+
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
145
|
+
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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\" aria-label=\"loading\" 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"] }] });
|
|
146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
147
147
|
type: Component,
|
|
148
148
|
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\" aria-label=\"loading\" 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"] }]
|
|
149
149
|
}], propDecorators: { color: [{
|
|
@@ -185,9 +185,9 @@ class BannerActionComponent {
|
|
|
185
185
|
this.buttonClickedEvent.emit();
|
|
186
186
|
}
|
|
187
187
|
}
|
|
188
|
-
BannerActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
189
|
-
BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
190
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
188
|
+
BannerActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
189
|
+
BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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 });
|
|
190
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponent, decorators: [{
|
|
191
191
|
type: Component,
|
|
192
192
|
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"] }]
|
|
193
193
|
}], ctorParameters: function () { return []; }, propDecorators: { text: [{
|
|
@@ -204,10 +204,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
204
204
|
|
|
205
205
|
class ButtonComponentModule {
|
|
206
206
|
}
|
|
207
|
-
ButtonComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
208
|
-
ButtonComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
209
|
-
ButtonComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
207
|
+
ButtonComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
208
|
+
ButtonComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponentModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], exports: [ButtonComponent] });
|
|
209
|
+
ButtonComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponentModule, providers: [], imports: [[CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule]] });
|
|
210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonComponentModule, decorators: [{
|
|
211
211
|
type: NgModule,
|
|
212
212
|
args: [{
|
|
213
213
|
declarations: [ButtonComponent],
|
|
@@ -219,10 +219,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
219
219
|
|
|
220
220
|
class BannerActionComponentModule {
|
|
221
221
|
}
|
|
222
|
-
BannerActionComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
223
|
-
BannerActionComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
224
|
-
BannerActionComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
225
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
222
|
+
BannerActionComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
223
|
+
BannerActionComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponentModule, declarations: [BannerActionComponent], imports: [CommonModule, MatIconModule, ButtonComponentModule], exports: [BannerActionComponent] });
|
|
224
|
+
BannerActionComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponentModule, providers: [], imports: [[CommonModule, MatIconModule, ButtonComponentModule]] });
|
|
225
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BannerActionComponentModule, decorators: [{
|
|
226
226
|
type: NgModule,
|
|
227
227
|
args: [{
|
|
228
228
|
declarations: [BannerActionComponent],
|
|
@@ -235,9 +235,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
235
235
|
class LogoComponent {
|
|
236
236
|
constructor() { }
|
|
237
237
|
}
|
|
238
|
-
LogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
239
|
-
LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
240
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
238
|
+
LogoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
239
|
+
LogoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LogoComponent, selector: "ui-logo", ngImport: i0, template: "<img src=\"/images/testgorilla.svg\" alt=\"testGorillaLogo\">\n", styles: [":host{display:inline-flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponent, decorators: [{
|
|
241
241
|
type: Component,
|
|
242
242
|
args: [{ selector: 'ui-logo', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img src=\"/images/testgorilla.svg\" alt=\"testGorillaLogo\">\n", styles: [":host{display:inline-flex}\n"] }]
|
|
243
243
|
}], ctorParameters: function () { return []; } });
|
|
@@ -248,9 +248,9 @@ class CardComponent {
|
|
|
248
248
|
this.subTitle = '';
|
|
249
249
|
}
|
|
250
250
|
}
|
|
251
|
-
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
252
|
-
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
251
|
+
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
252
|
+
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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%;width:100%;word-wrap:break-word}.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 });
|
|
253
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponent, decorators: [{
|
|
254
254
|
type: Component,
|
|
255
255
|
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%;width:100%;word-wrap:break-word}.container .mat-card-subtitle{color:#000;font-weight:400;font-size:16px;line-height:135%}\n"] }]
|
|
256
256
|
}], propDecorators: { title: [{
|
|
@@ -261,10 +261,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
261
261
|
|
|
262
262
|
class LogoComponentModule {
|
|
263
263
|
}
|
|
264
|
-
LogoComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
265
|
-
LogoComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
266
|
-
LogoComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
267
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
264
|
+
LogoComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
265
|
+
LogoComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponentModule, declarations: [LogoComponent], exports: [LogoComponent] });
|
|
266
|
+
LogoComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponentModule, imports: [[]] });
|
|
267
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LogoComponentModule, decorators: [{
|
|
268
268
|
type: NgModule,
|
|
269
269
|
args: [{
|
|
270
270
|
declarations: [LogoComponent],
|
|
@@ -275,10 +275,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
275
275
|
|
|
276
276
|
class CardComponentModule {
|
|
277
277
|
}
|
|
278
|
-
CardComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
279
|
-
CardComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
280
|
-
CardComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
281
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
278
|
+
CardComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
279
|
+
CardComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponentModule, declarations: [CardComponent], imports: [CommonModule, MatCardModule, LogoComponentModule], exports: [CardComponent] });
|
|
280
|
+
CardComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponentModule, imports: [[CommonModule, MatCardModule, LogoComponentModule]] });
|
|
281
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CardComponentModule, decorators: [{
|
|
282
282
|
type: NgModule,
|
|
283
283
|
args: [{
|
|
284
284
|
declarations: [CardComponent],
|
|
@@ -287,6 +287,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
287
287
|
}]
|
|
288
288
|
}] });
|
|
289
289
|
|
|
290
|
+
const PASSWORD_REGEX = /^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,\-./:;<=>?@!^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/;
|
|
291
|
+
class ValidatorsUtil {
|
|
292
|
+
static validatePassword() {
|
|
293
|
+
return [Validators.required, Validators.minLength(12), Validators.pattern(PASSWORD_REGEX)];
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
|
|
290
297
|
const CREATE_ACCOUNT_i18n = {
|
|
291
298
|
title: 'Create your Career Passport',
|
|
292
299
|
subtitle: 'Enter the email address to which you received an assessment invite.',
|
|
@@ -300,6 +307,7 @@ const CREATE_ACCOUNT_i18n = {
|
|
|
300
307
|
|
|
301
308
|
class FieldComponent {
|
|
302
309
|
constructor() {
|
|
310
|
+
this.class = 'ui-field';
|
|
303
311
|
/**
|
|
304
312
|
* Form field label
|
|
305
313
|
*
|
|
@@ -382,24 +390,26 @@ class FieldComponent {
|
|
|
382
390
|
}
|
|
383
391
|
}
|
|
384
392
|
}
|
|
385
|
-
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
386
|
-
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
393
|
+
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
394
|
+
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FieldComponent, selector: "ui-field", inputs: { label: "label", preffixIcon: "preffixIcon", suffixIcon: "suffixIcon", required: "required", hint: "hint", error: "error", placeholder: "placeholder", type: "type" }, host: { properties: { "class": "this.class" } }, providers: [
|
|
387
395
|
{
|
|
388
396
|
provide: NG_VALUE_ACCESSOR,
|
|
389
397
|
useExisting: forwardRef(() => FieldComponent),
|
|
390
398
|
multi: true,
|
|
391
399
|
},
|
|
392
|
-
], ngImport: i0, template: "<
|
|
393
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
400
|
+
], ngImport: i0, template: "<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 matInput [value]=\"value\" [disabled]=\"isDisabled\" [type]=\"type\" (input)=\"onInput($event)\" />\n <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n <mat-hint *ngIf=\"hint && !error\" [innerHTML]=\"hint\"></mat-hint>\n <mat-hint class=\"error\" *ngIf=\"error\" [innerHTML]=\"error\"></mat-hint>\n</mat-form-field>\n", styles: [".ui-field .mat-form-field{margin-top:0;width:100%}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{height:48px;align-items:center}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline{height:48px}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{border-top:.54375em solid transparent}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-input-element{height:23px}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label{margin-top:-.1em}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label mat-label{font-size:14px;line-height:20px}.ui-field .mat-form-field.mat-form-field-should-float .mat-form-field-label{margin-top:2px}.ui-field .mat-form-field.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.ui-field .mat-form-field .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.39375em) scale(.75)}.ui-field .mat-form-field .error{color:#cb7b7a}.ui-field .mat-form-field .error a{color:#46a997;text-decoration:none}\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"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
401
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponent, decorators: [{
|
|
394
402
|
type: Component,
|
|
395
|
-
args: [{ selector: 'ui-field', providers: [
|
|
403
|
+
args: [{ selector: 'ui-field', encapsulation: ViewEncapsulation.None, providers: [
|
|
396
404
|
{
|
|
397
405
|
provide: NG_VALUE_ACCESSOR,
|
|
398
406
|
useExisting: forwardRef(() => FieldComponent),
|
|
399
407
|
multi: true,
|
|
400
408
|
},
|
|
401
|
-
], template: "<
|
|
402
|
-
}], ctorParameters: function () { return []; }, propDecorators: {
|
|
409
|
+
], template: "<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 matInput [value]=\"value\" [disabled]=\"isDisabled\" [type]=\"type\" (input)=\"onInput($event)\" />\n <mat-icon matSuffix *ngIf=\"suffixIcon\" (click)=\"suffixIconClicked()\">{{ suffixIcon }}</mat-icon>\n <mat-hint *ngIf=\"hint && !error\" [innerHTML]=\"hint\"></mat-hint>\n <mat-hint class=\"error\" *ngIf=\"error\" [innerHTML]=\"error\"></mat-hint>\n</mat-form-field>\n", styles: [".ui-field .mat-form-field{margin-top:0;width:100%}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex{height:48px;align-items:center}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline{height:48px}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix{border-top:.54375em solid transparent}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-input-element{height:23px}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label{margin-top:-.1em}.ui-field .mat-form-field .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-infix .mat-form-field-label mat-label{font-size:14px;line-height:20px}.ui-field .mat-form-field.mat-form-field-should-float .mat-form-field-label{margin-top:2px}.ui-field .mat-form-field.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.ui-field .mat-form-field .mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.39375em) scale(.75)}.ui-field .mat-form-field .error{color:#cb7b7a}.ui-field .mat-form-field .error a{color:#46a997;text-decoration:none}\n"] }]
|
|
410
|
+
}], ctorParameters: function () { return []; }, propDecorators: { class: [{
|
|
411
|
+
type: HostBinding
|
|
412
|
+
}], label: [{
|
|
403
413
|
type: Input
|
|
404
414
|
}], preffixIcon: [{
|
|
405
415
|
type: Input
|
|
@@ -428,14 +438,7 @@ class CreateAccountComponent {
|
|
|
428
438
|
*/
|
|
429
439
|
this.registerForm = this.fb.group({
|
|
430
440
|
username: ['', [Validators.required, Validators.email]],
|
|
431
|
-
password: [
|
|
432
|
-
'',
|
|
433
|
-
[
|
|
434
|
-
Validators.required,
|
|
435
|
-
Validators.minLength(12),
|
|
436
|
-
Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,-./:;<=>?@^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/),
|
|
437
|
-
],
|
|
438
|
-
],
|
|
441
|
+
password: ['', ValidatorsUtil.validatePassword()],
|
|
439
442
|
agree_terms_and_conditions: [false, [Validators.requiredTrue]],
|
|
440
443
|
});
|
|
441
444
|
/**
|
|
@@ -498,9 +501,9 @@ class CreateAccountComponent {
|
|
|
498
501
|
this.formErrors[field][0] = '';
|
|
499
502
|
}
|
|
500
503
|
}
|
|
501
|
-
CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
502
|
-
CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
503
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
504
|
+
CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
505
|
+
CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CreateAccountComponent, selector: "ui-create-account", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", loginEvent: "loginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"username\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [error]=\"formErrors.username[0]\"\n (ngModelChange)=\"checkErrors('username')\"\n ></ui-field>\n </div>\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [error]=\"formErrors.password[0]\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <div class=\"password-strength-container\">\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n </div>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div class=\"terms-conditions-container\">\n <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"registerForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (onClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div>\n {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</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 });
|
|
506
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponent, decorators: [{
|
|
504
507
|
type: Component,
|
|
505
508
|
args: [{ selector: 'ui-create-account', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <div class=\"subtitle\">{{ i18n.subtitle }}</div>\n <form [formGroup]=\"registerForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"username\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [error]=\"formErrors.username[0]\"\n (ngModelChange)=\"checkErrors('username')\"\n ></ui-field>\n </div>\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [error]=\"formErrors.password[0]\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <div class=\"password-strength-container\">\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"registerForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n </div>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div class=\"terms-conditions-container\">\n <mat-checkbox formControlName=\"agree_terms_and_conditions\">{{ i18n.terms_conditions }}</mat-checkbox>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"registerForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (onClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div>\n {{ i18n.have_career_passport }} <span class=\"log-in\" (click)=\"login()\">{{ i18n.login }}</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"] }]
|
|
506
509
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
@@ -517,10 +520,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
517
520
|
|
|
518
521
|
class FieldComponentModule {
|
|
519
522
|
}
|
|
520
|
-
FieldComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
521
|
-
FieldComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
522
|
-
FieldComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
523
|
+
FieldComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
524
|
+
FieldComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, declarations: [FieldComponent], imports: [CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule], exports: [FieldComponent] });
|
|
525
|
+
FieldComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, providers: [], imports: [[CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule]] });
|
|
526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, decorators: [{
|
|
524
527
|
type: NgModule,
|
|
525
528
|
args: [{
|
|
526
529
|
declarations: [FieldComponent],
|
|
@@ -532,8 +535,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
532
535
|
|
|
533
536
|
class CreateAccountComponentModule {
|
|
534
537
|
}
|
|
535
|
-
CreateAccountComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
536
|
-
CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
538
|
+
CreateAccountComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
539
|
+
CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, declarations: [CreateAccountComponent], imports: [CommonModule,
|
|
537
540
|
FormsModule,
|
|
538
541
|
ReactiveFormsModule,
|
|
539
542
|
FieldComponentModule,
|
|
@@ -541,7 +544,7 @@ CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
|
|
|
541
544
|
MatCheckboxModule,
|
|
542
545
|
MatPasswordStrengthModule,
|
|
543
546
|
LogoComponentModule], exports: [CreateAccountComponent] });
|
|
544
|
-
CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
547
|
+
CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, providers: [], imports: [[
|
|
545
548
|
CommonModule,
|
|
546
549
|
FormsModule,
|
|
547
550
|
ReactiveFormsModule,
|
|
@@ -551,7 +554,7 @@ CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
|
|
|
551
554
|
MatPasswordStrengthModule,
|
|
552
555
|
LogoComponentModule,
|
|
553
556
|
]] });
|
|
554
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, decorators: [{
|
|
555
558
|
type: NgModule,
|
|
556
559
|
args: [{
|
|
557
560
|
declarations: [CreateAccountComponent],
|
|
@@ -586,14 +589,7 @@ class CreatePasswordComponent {
|
|
|
586
589
|
* @ignore
|
|
587
590
|
*/
|
|
588
591
|
this.createPasswordForm = this.fb.group({
|
|
589
|
-
password: [
|
|
590
|
-
'',
|
|
591
|
-
[
|
|
592
|
-
Validators.required,
|
|
593
|
-
Validators.minLength(12),
|
|
594
|
-
Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,-./:;<=>?@^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/),
|
|
595
|
-
],
|
|
596
|
-
],
|
|
592
|
+
password: ['', ValidatorsUtil.validatePassword()],
|
|
597
593
|
});
|
|
598
594
|
/**
|
|
599
595
|
* @ignore
|
|
@@ -642,9 +638,9 @@ class CreatePasswordComponent {
|
|
|
642
638
|
this.formErrors[field][0] = '';
|
|
643
639
|
}
|
|
644
640
|
}
|
|
645
|
-
CreatePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
646
|
-
CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
641
|
+
CreatePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
642
|
+
CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CreatePasswordComponent, selector: "ui-create-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [error]=\"formErrors.password[0]\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"createPasswordForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button\"\n [disabled]=\"createPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (onClickEvent)=\"submit()\"\n ></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 });
|
|
643
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponent, decorators: [{
|
|
648
644
|
type: Component,
|
|
649
645
|
args: [{ selector: 'ui-create-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"createPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [error]=\"formErrors.password[0]\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n <mat-password-strength\n [min]=\"12\"\n #passwordComponentWithValidation\n [password]=\"createPasswordForm.controls['password'].value\"\n aria-hidden=\"true\"\n >\n </mat-password-strength>\n <mat-password-strength-info [passwordComponent]=\"passwordComponentWithValidation\"> </mat-password-strength-info>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button\"\n [disabled]=\"createPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (onClickEvent)=\"submit()\"\n ></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"] }]
|
|
650
646
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
@@ -659,15 +655,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
659
655
|
|
|
660
656
|
class CreatePasswordComponentModule {
|
|
661
657
|
}
|
|
662
|
-
CreatePasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
663
|
-
CreatePasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
658
|
+
CreatePasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
659
|
+
CreatePasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, declarations: [CreatePasswordComponent], imports: [CommonModule,
|
|
664
660
|
FormsModule,
|
|
665
661
|
ReactiveFormsModule,
|
|
666
662
|
FieldComponentModule,
|
|
667
663
|
ButtonComponentModule,
|
|
668
664
|
MatPasswordStrengthModule,
|
|
669
665
|
LogoComponentModule], exports: [CreatePasswordComponent] });
|
|
670
|
-
CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
666
|
+
CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, providers: [], imports: [[
|
|
671
667
|
CommonModule,
|
|
672
668
|
FormsModule,
|
|
673
669
|
ReactiveFormsModule,
|
|
@@ -676,7 +672,7 @@ CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
|
|
|
676
672
|
MatPasswordStrengthModule,
|
|
677
673
|
LogoComponentModule,
|
|
678
674
|
]] });
|
|
679
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
675
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, decorators: [{
|
|
680
676
|
type: NgModule,
|
|
681
677
|
args: [{
|
|
682
678
|
declarations: [CreatePasswordComponent],
|
|
@@ -706,9 +702,9 @@ class DialogComponent {
|
|
|
706
702
|
this.dialogRef.close();
|
|
707
703
|
}
|
|
708
704
|
}
|
|
709
|
-
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
710
|
-
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
711
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
705
|
+
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponent, deps: [{ token: MAT_DIALOG_DATA, optional: true }, { token: i1$4.MatDialogRef, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
706
|
+
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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 });
|
|
707
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponent, decorators: [{
|
|
712
708
|
type: Component,
|
|
713
709
|
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"] }]
|
|
714
710
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
@@ -735,9 +731,9 @@ class DialogService {
|
|
|
735
731
|
});
|
|
736
732
|
}
|
|
737
733
|
}
|
|
738
|
-
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
739
|
-
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.
|
|
740
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
734
|
+
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogService, deps: [{ token: i1$4.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
735
|
+
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogService });
|
|
736
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogService, decorators: [{
|
|
741
737
|
type: Injectable
|
|
742
738
|
}], ctorParameters: function () { return [{ type: i1$4.MatDialog }]; } });
|
|
743
739
|
|
|
@@ -753,19 +749,19 @@ class LaunchDialogComponent {
|
|
|
753
749
|
this.dialogService.open(DialogComponent);
|
|
754
750
|
}
|
|
755
751
|
}
|
|
756
|
-
LaunchDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
757
|
-
LaunchDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
758
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
752
|
+
LaunchDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LaunchDialogComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
753
|
+
LaunchDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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 });
|
|
754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LaunchDialogComponent, decorators: [{
|
|
759
755
|
type: Component,
|
|
760
756
|
args: [{ selector: 'ui-launch-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-button [label]=\"'Launch modal'\" (onClickEvent)=\"openModal()\"></ui-button>" }]
|
|
761
757
|
}], ctorParameters: function () { return [{ type: DialogService }]; } });
|
|
762
758
|
|
|
763
759
|
class DialogComponentModule {
|
|
764
760
|
}
|
|
765
|
-
DialogComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
766
|
-
DialogComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
767
|
-
DialogComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
768
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
761
|
+
DialogComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
762
|
+
DialogComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, declarations: [DialogComponent, LaunchDialogComponent], imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule], exports: [MatDialogModule] });
|
|
763
|
+
DialogComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, providers: [DialogService], imports: [[CommonModule, MatIconModule, MatDialogModule, MatButtonModule, ButtonComponentModule], MatDialogModule] });
|
|
764
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, decorators: [{
|
|
769
765
|
type: NgModule,
|
|
770
766
|
args: [{
|
|
771
767
|
declarations: [DialogComponent, LaunchDialogComponent],
|
|
@@ -842,9 +838,9 @@ class ForgotPasswordComponent {
|
|
|
842
838
|
this.formErrors[field][0] = '';
|
|
843
839
|
}
|
|
844
840
|
}
|
|
845
|
-
ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
846
|
-
ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
847
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
841
|
+
ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
842
|
+
ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ForgotPasswordComponent, selector: "ui-forgot-password", inputs: { formErrors: "formErrors", loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", backToLoginEvent: "backToLoginEvent" }, ngImport: i0, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [error]=\"formErrors.email[0]\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"forgotPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (onClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>{{ i18n.back_to_login }}</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 });
|
|
843
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
|
|
848
844
|
type: Component,
|
|
849
845
|
args: [{ selector: 'ui-forgot-password', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"form-box\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"forgotPasswordForm\">\n <div class=\"field\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [error]=\"formErrors.email[0]\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div></div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"forgotPasswordForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (onClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"back-login\" (click)=\"backToLogin()\">\n <mat-icon>arrow_back</mat-icon>\n <span>{{ i18n.back_to_login }}</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"] }]
|
|
850
846
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
@@ -861,15 +857,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
861
857
|
|
|
862
858
|
class ForgotPasswordComponentModule {
|
|
863
859
|
}
|
|
864
|
-
ForgotPasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
865
|
-
ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
860
|
+
ForgotPasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
861
|
+
ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, declarations: [ForgotPasswordComponent], imports: [CommonModule,
|
|
866
862
|
FormsModule,
|
|
867
863
|
ReactiveFormsModule,
|
|
868
864
|
FieldComponentModule,
|
|
869
865
|
ButtonComponentModule,
|
|
870
866
|
MatIconModule,
|
|
871
867
|
LogoComponentModule], exports: [ForgotPasswordComponent] });
|
|
872
|
-
ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
868
|
+
ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, providers: [], imports: [[
|
|
873
869
|
CommonModule,
|
|
874
870
|
FormsModule,
|
|
875
871
|
ReactiveFormsModule,
|
|
@@ -878,7 +874,7 @@ ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
|
|
|
878
874
|
MatIconModule,
|
|
879
875
|
LogoComponentModule,
|
|
880
876
|
]] });
|
|
881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, decorators: [{
|
|
882
878
|
type: NgModule,
|
|
883
879
|
args: [{
|
|
884
880
|
declarations: [ForgotPasswordComponent],
|
|
@@ -948,9 +944,9 @@ class LabelComponent {
|
|
|
948
944
|
this.size = LabelSizeEnum.SMALL;
|
|
949
945
|
}
|
|
950
946
|
}
|
|
951
|
-
LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
952
|
-
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
953
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
947
|
+
LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
948
|
+
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LabelComponent, selector: "ui-label", inputs: { backgroundColor: "backgroundColor", textColor: "textColor", title: "title", description: "description", size: "size" }, ngImport: i0, template: "<div\n class=\"label\"\n [ngStyle]=\"{ 'background-color': backgroundColor, color: textColor }\"\n [ngClass]=\"{\n small: size === LabelSizeEnum.SMALL,\n medium: size === LabelSizeEnum.MEDIUM,\n large: size === LabelSizeEnum.LARGE,\n big: size === LabelSizeEnum.BIG,\n huge: size === LabelSizeEnum.HUGE\n }\"\n>\n <div [innerHTML]=\"title\"></div>\n <div [innerHTML]=\"description\" class=\"description\" *ngIf=\"description && size === LabelSizeEnum.HUGE\"></div>\n</div>\n", styles: [".label{display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;min-height:16px}.label.medium{padding:2px 8px;font-size:12px;min-height:20px}.label.large{padding:8px 12px;font-size:14px;min-height:32px}.label.big{padding:8px 16px;font-size:14px;min-height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;min-height:48px;width:100%;max-width:166px;align-items:start}.label.huge .description{font-weight:400;font-size:12px;line-height:16px;padding-top:10px}\n"], 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
949
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponent, decorators: [{
|
|
954
950
|
type: Component,
|
|
955
951
|
args: [{ selector: 'ui-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"label\"\n [ngStyle]=\"{ 'background-color': backgroundColor, color: textColor }\"\n [ngClass]=\"{\n small: size === LabelSizeEnum.SMALL,\n medium: size === LabelSizeEnum.MEDIUM,\n large: size === LabelSizeEnum.LARGE,\n big: size === LabelSizeEnum.BIG,\n huge: size === LabelSizeEnum.HUGE\n }\"\n>\n <div [innerHTML]=\"title\"></div>\n <div [innerHTML]=\"description\" class=\"description\" *ngIf=\"description && size === LabelSizeEnum.HUGE\"></div>\n</div>\n", styles: [".label{display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:600;border-radius:4px;width:-moz-fit-content;width:fit-content}.label.small{padding:0 8px;font-size:10px;min-height:16px}.label.medium{padding:2px 8px;font-size:12px;min-height:20px}.label.large{padding:8px 12px;font-size:14px;min-height:32px}.label.big{padding:8px 16px;font-size:14px;min-height:32px}.label.huge{padding:16px;font-size:12px;font-weight:700;min-height:48px;width:100%;max-width:166px;align-items:start}.label.huge .description{font-weight:400;font-size:12px;line-height:16px;padding-top:10px}\n"] }]
|
|
956
952
|
}], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
|
|
@@ -967,10 +963,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
967
963
|
|
|
968
964
|
class LabelComponentModule {
|
|
969
965
|
}
|
|
970
|
-
LabelComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
971
|
-
LabelComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
972
|
-
LabelComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
973
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
966
|
+
LabelComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
967
|
+
LabelComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, declarations: [LabelComponent], imports: [CommonModule], exports: [LabelComponent] });
|
|
968
|
+
LabelComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, providers: [], imports: [[CommonModule]] });
|
|
969
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, decorators: [{
|
|
974
970
|
type: NgModule,
|
|
975
971
|
args: [{
|
|
976
972
|
declarations: [LabelComponent],
|
|
@@ -1068,11 +1064,11 @@ class LoginComponent {
|
|
|
1068
1064
|
this.formErrors[field] = '';
|
|
1069
1065
|
}
|
|
1070
1066
|
}
|
|
1071
|
-
LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1072
|
-
LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1073
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1067
|
+
LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponent, deps: [{ token: i1$3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
|
|
1068
|
+
LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LoginComponent, selector: "ui-login", inputs: { loading: "loading", i18n: "i18n" }, outputs: { submitEvent: "submitEvent", forgotPasswordEvent: "forgotPasswordEvent", createAccountEvent: "createAccountEvent" }, ngImport: i0, template: "<div class=\"ui-login-container\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n <div class=\"field-email\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [error]=\"formErrors.email\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div class=\"field-password\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [error]=\"formErrors.password\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n </div>\n <div class=\"actions\">\n <div>\n <mat-checkbox formControlName=\"remember_me\">{{ i18n.remember_me }}</mat-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"loginForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (onClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"create-account-wrapper\">\n <p>\n {{ i18n.not_have_account }}\n <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n </p>\n </div>\n </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:40px 24px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\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 });
|
|
1069
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponent, decorators: [{
|
|
1074
1070
|
type: Component,
|
|
1075
|
-
args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"
|
|
1071
|
+
args: [{ selector: 'ui-login', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ui-login-container\">\n <ui-logo></ui-logo>\n <div class=\"title\">{{ i18n.title }}</div>\n <form [formGroup]=\"loginForm\" class=\"form-wrapper\">\n <div class=\"field-email\">\n <ui-field\n formControlName=\"email\"\n [label]=\"i18n.email_label\"\n [type]=\"'email'\"\n [required]=\"true\"\n [error]=\"formErrors.email\"\n (ngModelChange)=\"checkErrors('email')\"\n ></ui-field>\n </div>\n <div class=\"field-password\">\n <ui-field\n formControlName=\"password\"\n [label]=\"i18n.password_label\"\n [type]=\"'password'\"\n [required]=\"true\"\n [error]=\"formErrors.password\"\n (ngModelChange)=\"checkErrors('password')\"\n ></ui-field>\n </div>\n <div class=\"actions\">\n <div>\n <mat-checkbox formControlName=\"remember_me\">{{ i18n.remember_me }}</mat-checkbox>\n </div>\n <div class=\"forgot-password\" (click)=\"forgotPassword()\">{{ i18n.forgot_password }}</div>\n </div>\n <div class=\"submit-button\">\n <ui-button\n [label]=\"i18n.button_label\"\n [disabled]=\"loginForm.invalid\"\n [fullWidth]=\"true\"\n [loading]=\"loading\"\n (onClickEvent)=\"submit()\"\n ></ui-button>\n </div>\n <div class=\"create-account-wrapper\">\n <p>\n {{ i18n.not_have_account }}\n <span class=\"create-account\" (click)=\"createAccount()\">{{ i18n.create_account }}</span>\n </p>\n </div>\n </form>\n</div>\n", styles: [".ui-login-container{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,auto);max-width:672px;max-height:594px;height:100%;width:100%;padding:40px 24px;background:#ffffff}.ui-login-container ui-logo{grid-column:1/5;grid-row:1/2}.ui-login-container .title{grid-column:1/5;grid-row:2/3;font-weight:700;font-size:22px;line-height:29.7px;margin:40px 0 24px;letter-spacing:-.04em}.ui-login-container .form-wrapper{grid-column:1/5;grid-row:3/8;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,auto)}.ui-login-container .form-wrapper .field-email{grid-column:1/5;grid-row:1/2}.ui-login-container .form-wrapper .field-password{grid-column:1/5;grid-row:2/3}.ui-login-container .form-wrapper .actions{grid-column:1/5;grid-row:3/4;display:flex;height:-moz-fit-content;height:fit-content;max-height:20px;justify-content:space-between;margin-top:3px}.ui-login-container .form-wrapper .actions .forgot-password{cursor:pointer;font-weight:700;text-decoration:underline}.ui-login-container .form-wrapper .submit-button{margin-top:40px;grid-column:1/5;grid-row:4/5}.ui-login-container .form-wrapper .create-account-wrapper{margin-top:24px;grid-column:1/5;grid-row:5/6}.ui-login-container .form-wrapper .create-account-wrapper p{margin:0;line-height:19.07px}.ui-login-container .form-wrapper .create-account-wrapper .create-account{color:#46a997;cursor:pointer}.ui-login-container .form-wrapper .create-account-wrapper .create-account:hover{text-decoration:underline}@media (min-width: 1024px){.ui-login-container{box-shadow:0 8px 16px #0000001a;border-radius:8px;padding:80px}}\n"] }]
|
|
1076
1072
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { loading: [{
|
|
1077
1073
|
type: Input
|
|
1078
1074
|
}], i18n: [{
|
|
@@ -1087,15 +1083,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1087
1083
|
|
|
1088
1084
|
class LoginComponentModule {
|
|
1089
1085
|
}
|
|
1090
|
-
LoginComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1091
|
-
LoginComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1086
|
+
LoginComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1087
|
+
LoginComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, declarations: [LoginComponent], imports: [CommonModule,
|
|
1092
1088
|
FormsModule,
|
|
1093
1089
|
ReactiveFormsModule,
|
|
1094
1090
|
FieldComponentModule,
|
|
1095
1091
|
ButtonComponentModule,
|
|
1096
1092
|
MatCheckboxModule,
|
|
1097
1093
|
LogoComponentModule], exports: [LoginComponent] });
|
|
1098
|
-
LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1094
|
+
LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, providers: [], imports: [[
|
|
1099
1095
|
CommonModule,
|
|
1100
1096
|
FormsModule,
|
|
1101
1097
|
ReactiveFormsModule,
|
|
@@ -1104,7 +1100,7 @@ LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
|
|
|
1104
1100
|
MatCheckboxModule,
|
|
1105
1101
|
LogoComponentModule,
|
|
1106
1102
|
]] });
|
|
1107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, decorators: [{
|
|
1108
1104
|
type: NgModule,
|
|
1109
1105
|
args: [{
|
|
1110
1106
|
declarations: [LoginComponent],
|
|
@@ -1165,9 +1161,9 @@ class NavbarComponent {
|
|
|
1165
1161
|
this.logoutEvent.emit();
|
|
1166
1162
|
}
|
|
1167
1163
|
}
|
|
1168
|
-
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1169
|
-
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1164
|
+
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1165
|
+
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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 });
|
|
1166
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
1171
1167
|
type: Component,
|
|
1172
1168
|
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"] }]
|
|
1173
1169
|
}], ctorParameters: function () { return []; }, propDecorators: { routes: [{
|
|
@@ -1184,15 +1180,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1184
1180
|
|
|
1185
1181
|
class NavbarComponentModule {
|
|
1186
1182
|
}
|
|
1187
|
-
NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1188
|
-
NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1183
|
+
NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1184
|
+
NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
|
|
1189
1185
|
MatToolbarModule,
|
|
1190
1186
|
MatIconModule,
|
|
1191
1187
|
MatButtonModule,
|
|
1192
1188
|
MatRippleModule,
|
|
1193
1189
|
MatMenuModule,
|
|
1194
1190
|
LogoComponentModule], exports: [NavbarComponent] });
|
|
1195
|
-
NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1191
|
+
NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[
|
|
1196
1192
|
CommonModule,
|
|
1197
1193
|
MatToolbarModule,
|
|
1198
1194
|
MatIconModule,
|
|
@@ -1201,7 +1197,7 @@ NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
|
|
|
1201
1197
|
MatMenuModule,
|
|
1202
1198
|
LogoComponentModule,
|
|
1203
1199
|
]] });
|
|
1204
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, decorators: [{
|
|
1205
1201
|
type: NgModule,
|
|
1206
1202
|
args: [{
|
|
1207
1203
|
declarations: [NavbarComponent],
|
|
@@ -1230,9 +1226,9 @@ class NavigationComponent {
|
|
|
1230
1226
|
this.goBackClickedEvent.emit();
|
|
1231
1227
|
}
|
|
1232
1228
|
}
|
|
1233
|
-
NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1234
|
-
NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1229
|
+
NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1230
|
+
NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationComponent, selector: "ui-navigation", inputs: { title: "title", subtitle: "subtitle", labelItem: "labelItem" }, outputs: { goBackClickedEvent: "goBackClickedEvent" }, ngImport: i0, template: "<div class=\"navigation\">\n <button aria-label=\"Go back\" mat-icon-button (click)=\"goBackClicked()\">\n <mat-icon aria-hidden=\"true\">arrow_back</mat-icon>\n </button>\n <div class=\"content\">\n <div class=\"title\">\n <span >{{ title }}</span>\n <div class=\"status\" *ngIf=\"labelItem\">\n <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n </ui-label>\n </div>\n </div>\n <div class=\"subtitle\">\n {{ subtitle }}\n </div>\n </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"], components: [{ type: i1.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: LabelComponent, selector: "ui-label", inputs: ["backgroundColor", "textColor", "title", "description", "size"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponent, decorators: [{
|
|
1236
1232
|
type: Component,
|
|
1237
1233
|
args: [{ selector: 'ui-navigation', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"navigation\">\n <button aria-label=\"Go back\" mat-icon-button (click)=\"goBackClicked()\">\n <mat-icon aria-hidden=\"true\">arrow_back</mat-icon>\n </button>\n <div class=\"content\">\n <div class=\"title\">\n <span >{{ title }}</span>\n <div class=\"status\" *ngIf=\"labelItem\">\n <ui-label [backgroundColor]=\"labelItem.backgroundColor\" [textColor]=\"labelItem.textColor\"\n [title]=\"labelItem.title\" [size]=\"labelItem.size\">\n </ui-label>\n </div>\n </div>\n <div class=\"subtitle\">\n {{ subtitle }}\n </div>\n </div>\n</div>\n", styles: [".navigation{width:100%;display:flex;align-items:center}.navigation mat-icon{color:#000}.navigation .content{margin-left:32px;display:flex;flex-direction:column}.navigation .content .title{color:#000;font-weight:700;font-size:20px;display:flex;align-items:center;margin-bottom:8px}.navigation .content .title .status{margin-left:8px}.navigation .content .subtitle{color:#528593;font-weight:700;font-size:14px}\n"] }]
|
|
1238
1234
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
@@ -1247,10 +1243,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1247
1243
|
|
|
1248
1244
|
class NavigationComponentModule {
|
|
1249
1245
|
}
|
|
1250
|
-
NavigationComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1251
|
-
NavigationComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1252
|
-
NavigationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1253
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1246
|
+
NavigationComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1247
|
+
NavigationComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, declarations: [NavigationComponent], imports: [CommonModule, MatIconModule, MatButtonModule, LabelComponentModule], exports: [NavigationComponent] });
|
|
1248
|
+
NavigationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, providers: [], imports: [[CommonModule, MatIconModule, MatButtonModule, LabelComponentModule]] });
|
|
1249
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, decorators: [{
|
|
1254
1250
|
type: NgModule,
|
|
1255
1251
|
args: [{
|
|
1256
1252
|
declarations: [NavigationComponent],
|
|
@@ -1299,9 +1295,9 @@ class PaginatorComponent {
|
|
|
1299
1295
|
this.paginatorChangedEvent.emit(paginator);
|
|
1300
1296
|
}
|
|
1301
1297
|
}
|
|
1302
|
-
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1303
|
-
PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1304
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1298
|
+
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1299
|
+
PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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]=\"pageSizeOptions\"\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 });
|
|
1300
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
1305
1301
|
type: Component,
|
|
1306
1302
|
args: [{ selector: 'ui-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator [length]=\"length\"\n [pageSize]=\"defaultPageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\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"] }]
|
|
1307
1303
|
}], ctorParameters: function () { return []; }, propDecorators: { length: [{
|
|
@@ -1314,10 +1310,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1314
1310
|
|
|
1315
1311
|
class PaginatorComponentModule {
|
|
1316
1312
|
}
|
|
1317
|
-
PaginatorComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1318
|
-
PaginatorComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1319
|
-
PaginatorComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1320
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1313
|
+
PaginatorComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1314
|
+
PaginatorComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, declarations: [PaginatorComponent], imports: [CommonModule, MatPaginatorModule], exports: [PaginatorComponent] });
|
|
1315
|
+
PaginatorComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, providers: [], imports: [[CommonModule, MatPaginatorModule]] });
|
|
1316
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, decorators: [{
|
|
1321
1317
|
type: NgModule,
|
|
1322
1318
|
args: [{
|
|
1323
1319
|
declarations: [PaginatorComponent],
|
|
@@ -1330,9 +1326,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1330
1326
|
class ProgressBarComponent {
|
|
1331
1327
|
constructor() { }
|
|
1332
1328
|
}
|
|
1333
|
-
ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1334
|
-
ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1335
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1329
|
+
ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1330
|
+
ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", 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 aria-label=\"Progress bar\"\n title=\"progress-bar\"\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 });
|
|
1331
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
1336
1332
|
type: Component,
|
|
1337
1333
|
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 aria-label=\"Progress bar\"\n title=\"progress-bar\"\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"] }]
|
|
1338
1334
|
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
|
|
@@ -1347,10 +1343,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1347
1343
|
|
|
1348
1344
|
class ProgressBarComponentModule {
|
|
1349
1345
|
}
|
|
1350
|
-
ProgressBarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1351
|
-
ProgressBarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1352
|
-
ProgressBarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1346
|
+
ProgressBarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1347
|
+
ProgressBarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, declarations: [ProgressBarComponent], imports: [CommonModule, MatProgressBarModule], exports: [ProgressBarComponent] });
|
|
1348
|
+
ProgressBarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, providers: [], imports: [[CommonModule, MatProgressBarModule]] });
|
|
1349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, decorators: [{
|
|
1354
1350
|
type: NgModule,
|
|
1355
1351
|
args: [{
|
|
1356
1352
|
declarations: [ProgressBarComponent],
|
|
@@ -1381,9 +1377,9 @@ class DataPropertyGetterPipe {
|
|
|
1381
1377
|
return obj;
|
|
1382
1378
|
}
|
|
1383
1379
|
}
|
|
1384
|
-
DataPropertyGetterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1385
|
-
DataPropertyGetterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.
|
|
1386
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1380
|
+
DataPropertyGetterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataPropertyGetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1381
|
+
DataPropertyGetterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataPropertyGetterPipe, name: "dataPropertyGetter" });
|
|
1382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataPropertyGetterPipe, decorators: [{
|
|
1387
1383
|
type: Pipe,
|
|
1388
1384
|
args: [{
|
|
1389
1385
|
name: 'dataPropertyGetter',
|
|
@@ -1428,9 +1424,9 @@ class DynamicComponentDirective {
|
|
|
1428
1424
|
this.subscription.unsubscribe();
|
|
1429
1425
|
}
|
|
1430
1426
|
}
|
|
1431
|
-
DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1432
|
-
DynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.
|
|
1433
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1427
|
+
DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1428
|
+
DynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: { dynamicComponent: "dynamicComponent" }, ngImport: i0 });
|
|
1429
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DynamicComponentDirective, decorators: [{
|
|
1434
1430
|
type: Directive,
|
|
1435
1431
|
args: [{
|
|
1436
1432
|
selector: '[dynamicComponent]',
|
|
@@ -1546,8 +1542,8 @@ class TableComponent {
|
|
|
1546
1542
|
this.dataSourceDetail = new MatTableDataSource(rowData);
|
|
1547
1543
|
}
|
|
1548
1544
|
}
|
|
1549
|
-
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1550
|
-
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" }, 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, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+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;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></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, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+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 [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\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 [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.function?.(element)}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <ng-template\n [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n <span>{{tableColumn.headerName | uppercase}}</span>\n <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n </div>\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-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}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).row-clickable{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 .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{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{visibility:collapse}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: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], 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: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { 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: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "uppercase": i5.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe }, animations: [
|
|
1545
|
+
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
1546
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TableComponent, selector: "ui-table", inputs: { tableDetails: "tableDetails", tableData: "tableData", tableColumns: "tableColumns", tableDetailColumns: "tableDetailColumns" }, 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; let i = index\" [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, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></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; let i = index\" [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, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\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 [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\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 [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.function?.(element)}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <ng-template\n [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n <span>{{tableColumn.headerName | uppercase}}</span>\n <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n </div>\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-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}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).row-clickable{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 .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{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{visibility:collapse}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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i2$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: 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: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.MatCellDef, selector: "[matCellDef]" }, { type: i2$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { 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: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: ["dynamicComponent"] }, { type: i5.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i7.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }], pipes: { "uppercase": i5.UpperCasePipe, "dataPropertyGetter": DataPropertyGetterPipe }, animations: [
|
|
1551
1547
|
trigger('expandDetail', [
|
|
1552
1548
|
state('collapsed, void', style({ height: '0px' })),
|
|
1553
1549
|
state('expanded', style({ height: '*' })),
|
|
@@ -1555,7 +1551,7 @@ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
1555
1551
|
transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1556
1552
|
]),
|
|
1557
1553
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1558
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1554
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponent, decorators: [{
|
|
1559
1555
|
type: Component,
|
|
1560
1556
|
args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1561
1557
|
trigger('expandDetail', [
|
|
@@ -1564,7 +1560,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1564
1560
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1565
1561
|
transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1566
1562
|
]),
|
|
1567
|
-
], 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, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+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;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></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, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+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 [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\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 [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.function?.(element)}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <ng-template\n [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n <span>{{tableColumn.headerName | uppercase}}</span>\n <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n </div>\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-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}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).row-clickable{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 .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{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{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"] }]
|
|
1563
|
+
], template: "<table *ngIf=\"!tableDetails\" mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSort($event)\">\n <ng-container *ngFor=\"let tableColumn of tableColumns; let i = index\" [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, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', onRowClickEvent.observed && i === tableColumns.length - 1 ? 'row-detail': '']\">\n <ng-container *ngTemplateOutlet=\"tableDataTpl; context: {element, tableColumn}\"></ng-container>\n <mat-icon *ngIf=\"onRowClickEvent.observed && i === tableColumns.length - 1\" class=\"row-detail-icon\">navigate_next</mat-icon>\n </td>\n </ng-container>\n <tr mat-header-row *matHeaderRowDef=\"columnsToDisplay\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: columnsToDisplay;\" [ngClass]=\"{'row-clickable': onRowClickEvent.observed}\"></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; let i = index\" [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, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-container>\n <ng-template #notSortable>\n <th mat-header-cell *matHeaderCellDef [ngStyle]=\"{width: tableColumn.styles?.width, minWidth: tableColumn.styles?.['min-width']}\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'th-'+tableColumn.styles?.alignment : ''\">\n <ng-container *ngTemplateOutlet=\"tableHeader; context: {tableColumn}\"></ng-container>\n </th>\n </ng-template>\n <td mat-cell *matCellDef=\"let element\" (click)=\"onRowClick(element)\"\n [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"[tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : '', i === 0 ? 'row-expand' : '']\">\n <mat-icon *ngIf=\"i === 0\" class=\"row-expand-icon\">{{ element === elementDetail ? 'expand_less' : 'expand_more' }}</mat-icon>\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 [align]=\"tableColumn.styles?.alignment\"\n [ngClass]=\"tableColumn.styles?.alignment ? 'td-'+tableColumn.styles?.alignment : ''\"\n [ngStyle]=\"{padding: tableColumn.styles?.padding}\">\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 [ngClass]=\"{'expanded-row': elementDetail === element, 'row-clickable': tableDetails}\"\n (click)=\"toggleRow(element)\">\n </tr>\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"detail-row\"></tr>\n</table>\n\n<ng-template #tableDataTpl let-element=\"element\" let-tableColumn=\"tableColumn\">\n <div class=\"align-wrapper\">\n <ng-container [ngSwitch]=\"tableColumn.type\">\n <ng-container *ngSwitchCase=\"DataType.FIELD\">\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.FUNCTION\">\n {{tableColumn.function?.(element)}}\n </ng-container>\n <ng-container *ngSwitchCase=\"DataType.RENDERER\">\n <ng-template\n [dynamicComponent]=\"tableColumn.renderer?.(element)\">\n </ng-template>\n </ng-container>\n <ng-container *ngSwitchDefault>\n {{element | dataPropertyGetter: tableColumn.field}}\n </ng-container>\n </ng-container>\n </div>\n</ng-template>\n\n<ng-template #tableHeader let-tableColumn=\"tableColumn\">\n <div class=\"tooltip\" [ngStyle]=\"{'justify-content': tableColumn.styles?.alignment}\" [ngClass]=\"tableColumn.styles?.alignment\">\n <span>{{tableColumn.headerName | uppercase}}</span>\n <mat-icon *ngIf=\"tableColumn.headerTooltip\" [matTooltip]=\"tableColumn.headerTooltip\" class=\"tooltip-icon\" (click)=\"$event.stopPropagation()\">help</mat-icon>\n </div>\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-header-cell .tooltip{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center}table .mat-header-cell .tooltip mat-icon{color:#1f5260;font-size:18px;position:relative;top:3px;left:4px;cursor:pointer}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).row-clickable{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 .row-detail{display:flex;justify-content:space-between}table .row-detail-icon{align-self:center;font-size:16px;height:16px;width:16px}table .row-expand{display:flex}table .row-expand-icon{align-self:center;font-size:14px;height:14px;width:14px;margin-right:8px}table .align-wrapper{display:flex}table td.td-right{text-align:right}table td.td-right .align-wrapper{justify-content:end}table td.td-left{text-align:left}table td.td-left .align-wrapper{justify-content:start}table td.td-center{text-align:center}table td.td-center .align-wrapper{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{visibility:collapse}table .element-detail table .mat-cell{border-width:0px}\n"] }]
|
|
1568
1564
|
}], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { matSort: [{
|
|
1569
1565
|
type: ViewChild,
|
|
1570
1566
|
args: [MatSort]
|
|
@@ -1586,10 +1582,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1586
1582
|
|
|
1587
1583
|
class TableComponentModule {
|
|
1588
1584
|
}
|
|
1589
|
-
TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1590
|
-
TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1591
|
-
TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1585
|
+
TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1586
|
+
TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective], imports: [CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule], exports: [TableComponent] });
|
|
1587
|
+
TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule]] });
|
|
1588
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, decorators: [{
|
|
1593
1589
|
type: NgModule,
|
|
1594
1590
|
args: [{
|
|
1595
1591
|
declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective],
|