@testgorilla/tgo-ui 0.0.32 → 0.0.34
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/README.md +0 -2
- package/components/banner-action/banner-action.component.d.ts +3 -3
- package/components/create-account/create-account.component.d.ts +5 -1
- package/components/create-account/create-account.constant.d.ts +1 -0
- package/components/create-account/create-account.model.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 +6 -6
- 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 +14 -14
- package/esm2020/components/create-account/create-account.component.module.mjs +4 -4
- package/esm2020/components/create-account/create-account.constant.mjs +3 -2
- package/esm2020/components/create-account/create-account.model.mjs +1 -1
- 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 +3 -3
- 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 +3 -3
- 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 +4 -4
- 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 +155 -155
- package/fesm2015/testgorilla-tgo-ui.mjs.map +1 -1
- package/fesm2020/testgorilla-tgo-ui.mjs +155 -155
- package/fesm2020/testgorilla-tgo-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/utils/validators.utils.d.ts +4 -0
|
@@ -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,18 +185,18 @@ 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", svgImg: "svgImg" }, outputs: { buttonClickedEvent: "buttonClickedEvent" }, ngImport: i0, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n <div class=\"text\">\n <img *ngIf=\"svgImg\" class=\"svg-img\" [src]=\"svgImg\" alt=\"statusLogo\">\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 .svg-img{height:32px;width:32px;margin-right:16px}\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
|
-
args: [{ selector: 'ui-banner-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n <div class=\"text\">\n <
|
|
192
|
+
args: [{ selector: 'ui-banner-action', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div id=\"banner-action\" [style.background-color]=\"backgroundColor\">\n <div class=\"text\">\n <img *ngIf=\"svgImg\" class=\"svg-img\" [src]=\"svgImg\" alt=\"statusLogo\">\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 .svg-img{height:32px;width:32px;margin-right:16px}\n"] }]
|
|
193
193
|
}], ctorParameters: function () { return []; }, propDecorators: { text: [{
|
|
194
194
|
type: Input
|
|
195
195
|
}], backgroundColor: [{
|
|
196
196
|
type: Input
|
|
197
197
|
}], buttonLabel: [{
|
|
198
198
|
type: Input
|
|
199
|
-
}],
|
|
199
|
+
}], svgImg: [{
|
|
200
200
|
type: Input
|
|
201
201
|
}], buttonClickedEvent: [{
|
|
202
202
|
type: Output
|
|
@@ -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,12 +287,20 @@ 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.',
|
|
293
300
|
email_label: 'Email',
|
|
294
301
|
password_label: 'Password',
|
|
295
|
-
terms_conditions: '
|
|
302
|
+
terms_conditions: 'I have read and I accept the ',
|
|
303
|
+
terms_conditions_link_label: 'terms of use',
|
|
296
304
|
button_label: 'Next',
|
|
297
305
|
have_career_passport: 'Already have a Career Passport?',
|
|
298
306
|
login: 'Log in here',
|
|
@@ -383,15 +391,15 @@ class FieldComponent {
|
|
|
383
391
|
}
|
|
384
392
|
}
|
|
385
393
|
}
|
|
386
|
-
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
387
|
-
FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
394
|
+
FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
395
|
+
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: [
|
|
388
396
|
{
|
|
389
397
|
provide: NG_VALUE_ACCESSOR,
|
|
390
398
|
useExisting: forwardRef(() => FieldComponent),
|
|
391
399
|
multi: true,
|
|
392
400
|
},
|
|
393
401
|
], 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 });
|
|
394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponent, decorators: [{
|
|
395
403
|
type: Component,
|
|
396
404
|
args: [{ selector: 'ui-field', encapsulation: ViewEncapsulation.None, providers: [
|
|
397
405
|
{
|
|
@@ -426,19 +434,16 @@ class CreateAccountComponent {
|
|
|
426
434
|
// TODO: Some properties and methods are ignored on purpose because of a current issue with compodoc and angular 13
|
|
427
435
|
// https://github.com/storybookjs/storybook/issues/16865
|
|
428
436
|
// https://github.com/storybookjs/storybook/issues/17004
|
|
437
|
+
/**
|
|
438
|
+
* @ignore
|
|
439
|
+
*/
|
|
440
|
+
this.termsOfusePath = 'https://www.testgorilla.com/terms/';
|
|
429
441
|
/**
|
|
430
442
|
* @ignore
|
|
431
443
|
*/
|
|
432
444
|
this.registerForm = this.fb.group({
|
|
433
445
|
username: ['', [Validators.required, Validators.email]],
|
|
434
|
-
password: [
|
|
435
|
-
'',
|
|
436
|
-
[
|
|
437
|
-
Validators.required,
|
|
438
|
-
Validators.minLength(12),
|
|
439
|
-
Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,-./:;<=>?@^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/),
|
|
440
|
-
],
|
|
441
|
-
],
|
|
446
|
+
password: ['', ValidatorsUtil.validatePassword()],
|
|
442
447
|
agree_terms_and_conditions: [false, [Validators.requiredTrue]],
|
|
443
448
|
});
|
|
444
449
|
/**
|
|
@@ -502,12 +507,14 @@ class CreateAccountComponent {
|
|
|
502
507
|
this.formErrors[field][0] = '';
|
|
503
508
|
}
|
|
504
509
|
}
|
|
505
|
-
CreateAccountComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
506
|
-
CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
507
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
510
|
+
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 });
|
|
511
|
+
CreateAccountComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CreateAccountComponent, selector: "ui-create-account", inputs: { termsOfusePath: "termsOfusePath", 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\">\n {{ i18n.terms_conditions }}\n <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>.\n </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=\"link\" (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 .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link: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 });
|
|
512
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponent, decorators: [{
|
|
508
513
|
type: Component,
|
|
509
|
-
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\"
|
|
510
|
-
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: {
|
|
514
|
+
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\">\n {{ i18n.terms_conditions }}\n <a class=\"link\" [href]=\"termsOfusePath\" target=\"_blank\">{{ i18n.terms_conditions_link_label }}</a>.\n </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=\"link\" (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 .link{font-weight:600;cursor:pointer;color:#46a997;text-decoration:none}.form-box .link:hover{text-decoration:underline}.row{display:flex;flex-direction:row}.row.space-between{justify-content:space-between}\n"] }]
|
|
515
|
+
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { termsOfusePath: [{
|
|
516
|
+
type: Input
|
|
517
|
+
}], formErrors: [{
|
|
511
518
|
type: Input
|
|
512
519
|
}], loading: [{
|
|
513
520
|
type: Input
|
|
@@ -521,10 +528,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
521
528
|
|
|
522
529
|
class FieldComponentModule {
|
|
523
530
|
}
|
|
524
|
-
FieldComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
525
|
-
FieldComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
526
|
-
FieldComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
527
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
531
|
+
FieldComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
532
|
+
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] });
|
|
533
|
+
FieldComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, providers: [], imports: [[CommonModule, MatFormFieldModule, MatInputModule, MatIconModule, FormsModule, ReactiveFormsModule]] });
|
|
534
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentModule, decorators: [{
|
|
528
535
|
type: NgModule,
|
|
529
536
|
args: [{
|
|
530
537
|
declarations: [FieldComponent],
|
|
@@ -536,8 +543,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
536
543
|
|
|
537
544
|
class CreateAccountComponentModule {
|
|
538
545
|
}
|
|
539
|
-
CreateAccountComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
540
|
-
CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
546
|
+
CreateAccountComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
547
|
+
CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, declarations: [CreateAccountComponent], imports: [CommonModule,
|
|
541
548
|
FormsModule,
|
|
542
549
|
ReactiveFormsModule,
|
|
543
550
|
FieldComponentModule,
|
|
@@ -545,7 +552,7 @@ CreateAccountComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
|
|
|
545
552
|
MatCheckboxModule,
|
|
546
553
|
MatPasswordStrengthModule,
|
|
547
554
|
LogoComponentModule], exports: [CreateAccountComponent] });
|
|
548
|
-
CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
555
|
+
CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, providers: [], imports: [[
|
|
549
556
|
CommonModule,
|
|
550
557
|
FormsModule,
|
|
551
558
|
ReactiveFormsModule,
|
|
@@ -555,7 +562,7 @@ CreateAccountComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.
|
|
|
555
562
|
MatPasswordStrengthModule,
|
|
556
563
|
LogoComponentModule,
|
|
557
564
|
]] });
|
|
558
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreateAccountComponentModule, decorators: [{
|
|
559
566
|
type: NgModule,
|
|
560
567
|
args: [{
|
|
561
568
|
declarations: [CreateAccountComponent],
|
|
@@ -590,14 +597,7 @@ class CreatePasswordComponent {
|
|
|
590
597
|
* @ignore
|
|
591
598
|
*/
|
|
592
599
|
this.createPasswordForm = this.fb.group({
|
|
593
|
-
password: [
|
|
594
|
-
'',
|
|
595
|
-
[
|
|
596
|
-
Validators.required,
|
|
597
|
-
Validators.minLength(12),
|
|
598
|
-
Validators.pattern(/^(?=\D*\d)(?=[^a-z]*[a-z])(?=.*[#$%&'()*+,-./:;<=>?@^_~|"`{}\[\]])(?=[^A-Z]*[A-Z]).{12,}$/),
|
|
599
|
-
],
|
|
600
|
-
],
|
|
600
|
+
password: ['', ValidatorsUtil.validatePassword()],
|
|
601
601
|
});
|
|
602
602
|
/**
|
|
603
603
|
* @ignore
|
|
@@ -647,9 +647,9 @@ class CreatePasswordComponent {
|
|
|
647
647
|
this.formErrors[field][0] = '';
|
|
648
648
|
}
|
|
649
649
|
}
|
|
650
|
-
CreatePasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
651
|
-
CreatePasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
652
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
650
|
+
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 });
|
|
651
|
+
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 });
|
|
652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponent, decorators: [{
|
|
653
653
|
type: Component,
|
|
654
654
|
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"] }]
|
|
655
655
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
@@ -664,15 +664,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
664
664
|
|
|
665
665
|
class CreatePasswordComponentModule {
|
|
666
666
|
}
|
|
667
|
-
CreatePasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
668
|
-
CreatePasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
667
|
+
CreatePasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
668
|
+
CreatePasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, declarations: [CreatePasswordComponent], imports: [CommonModule,
|
|
669
669
|
FormsModule,
|
|
670
670
|
ReactiveFormsModule,
|
|
671
671
|
FieldComponentModule,
|
|
672
672
|
ButtonComponentModule,
|
|
673
673
|
MatPasswordStrengthModule,
|
|
674
674
|
LogoComponentModule], exports: [CreatePasswordComponent] });
|
|
675
|
-
CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
675
|
+
CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, providers: [], imports: [[
|
|
676
676
|
CommonModule,
|
|
677
677
|
FormsModule,
|
|
678
678
|
ReactiveFormsModule,
|
|
@@ -681,7 +681,7 @@ CreatePasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
|
|
|
681
681
|
MatPasswordStrengthModule,
|
|
682
682
|
LogoComponentModule,
|
|
683
683
|
]] });
|
|
684
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CreatePasswordComponentModule, decorators: [{
|
|
685
685
|
type: NgModule,
|
|
686
686
|
args: [{
|
|
687
687
|
declarations: [CreatePasswordComponent],
|
|
@@ -711,9 +711,9 @@ class DialogComponent {
|
|
|
711
711
|
this.dialogRef.close();
|
|
712
712
|
}
|
|
713
713
|
}
|
|
714
|
-
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
715
|
-
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
716
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
714
|
+
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 });
|
|
715
|
+
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 });
|
|
716
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponent, decorators: [{
|
|
717
717
|
type: Component,
|
|
718
718
|
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"] }]
|
|
719
719
|
}], ctorParameters: function () {
|
|
@@ -739,9 +739,9 @@ class DialogService {
|
|
|
739
739
|
return this.matDialog.open(dialogComponent, Object.assign({ panelClass: 'ui-dialog' }, config));
|
|
740
740
|
}
|
|
741
741
|
}
|
|
742
|
-
DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
743
|
-
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.
|
|
744
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
742
|
+
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 });
|
|
743
|
+
DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogService });
|
|
744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogService, decorators: [{
|
|
745
745
|
type: Injectable
|
|
746
746
|
}], ctorParameters: function () { return [{ type: i1$4.MatDialog }]; } });
|
|
747
747
|
|
|
@@ -757,19 +757,19 @@ class LaunchDialogComponent {
|
|
|
757
757
|
this.dialogService.open(DialogComponent);
|
|
758
758
|
}
|
|
759
759
|
}
|
|
760
|
-
LaunchDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
761
|
-
LaunchDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
760
|
+
LaunchDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LaunchDialogComponent, deps: [{ token: DialogService }], target: i0.ɵɵFactoryTarget.Component });
|
|
761
|
+
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 });
|
|
762
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LaunchDialogComponent, decorators: [{
|
|
763
763
|
type: Component,
|
|
764
764
|
args: [{ selector: 'ui-launch-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-button [label]=\"'Launch modal'\" (onClickEvent)=\"openModal()\"></ui-button>" }]
|
|
765
765
|
}], ctorParameters: function () { return [{ type: DialogService }]; } });
|
|
766
766
|
|
|
767
767
|
class DialogComponentModule {
|
|
768
768
|
}
|
|
769
|
-
DialogComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
770
|
-
DialogComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
771
|
-
DialogComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
772
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
769
|
+
DialogComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
770
|
+
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] });
|
|
771
|
+
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] });
|
|
772
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentModule, decorators: [{
|
|
773
773
|
type: NgModule,
|
|
774
774
|
args: [{
|
|
775
775
|
declarations: [DialogComponent, LaunchDialogComponent],
|
|
@@ -847,9 +847,9 @@ class ForgotPasswordComponent {
|
|
|
847
847
|
this.formErrors[field][0] = '';
|
|
848
848
|
}
|
|
849
849
|
}
|
|
850
|
-
ForgotPasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
851
|
-
ForgotPasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
852
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
850
|
+
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 });
|
|
851
|
+
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 });
|
|
852
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponent, decorators: [{
|
|
853
853
|
type: Component,
|
|
854
854
|
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"] }]
|
|
855
855
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { formErrors: [{
|
|
@@ -866,15 +866,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
866
866
|
|
|
867
867
|
class ForgotPasswordComponentModule {
|
|
868
868
|
}
|
|
869
|
-
ForgotPasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
870
|
-
ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
869
|
+
ForgotPasswordComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
870
|
+
ForgotPasswordComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, declarations: [ForgotPasswordComponent], imports: [CommonModule,
|
|
871
871
|
FormsModule,
|
|
872
872
|
ReactiveFormsModule,
|
|
873
873
|
FieldComponentModule,
|
|
874
874
|
ButtonComponentModule,
|
|
875
875
|
MatIconModule,
|
|
876
876
|
LogoComponentModule], exports: [ForgotPasswordComponent] });
|
|
877
|
-
ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
877
|
+
ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, providers: [], imports: [[
|
|
878
878
|
CommonModule,
|
|
879
879
|
FormsModule,
|
|
880
880
|
ReactiveFormsModule,
|
|
@@ -883,7 +883,7 @@ ForgotPasswordComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12
|
|
|
883
883
|
MatIconModule,
|
|
884
884
|
LogoComponentModule,
|
|
885
885
|
]] });
|
|
886
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
886
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ForgotPasswordComponentModule, decorators: [{
|
|
887
887
|
type: NgModule,
|
|
888
888
|
args: [{
|
|
889
889
|
declarations: [ForgotPasswordComponent],
|
|
@@ -953,9 +953,9 @@ class LabelComponent {
|
|
|
953
953
|
this.size = LabelSizeEnum.SMALL;
|
|
954
954
|
}
|
|
955
955
|
}
|
|
956
|
-
LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
957
|
-
LabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
958
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
956
|
+
LabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
957
|
+
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 });
|
|
958
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponent, decorators: [{
|
|
959
959
|
type: Component,
|
|
960
960
|
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"] }]
|
|
961
961
|
}], ctorParameters: function () { return []; }, propDecorators: { backgroundColor: [{
|
|
@@ -972,10 +972,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
972
972
|
|
|
973
973
|
class LabelComponentModule {
|
|
974
974
|
}
|
|
975
|
-
LabelComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
976
|
-
LabelComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
977
|
-
LabelComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
975
|
+
LabelComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
976
|
+
LabelComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, declarations: [LabelComponent], imports: [CommonModule], exports: [LabelComponent] });
|
|
977
|
+
LabelComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, providers: [], imports: [[CommonModule]] });
|
|
978
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LabelComponentModule, decorators: [{
|
|
979
979
|
type: NgModule,
|
|
980
980
|
args: [{
|
|
981
981
|
declarations: [LabelComponent],
|
|
@@ -1074,9 +1074,9 @@ class LoginComponent {
|
|
|
1074
1074
|
this.formErrors[field] = '';
|
|
1075
1075
|
}
|
|
1076
1076
|
}
|
|
1077
|
-
LoginComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1078
|
-
LoginComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1079
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1077
|
+
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 });
|
|
1078
|
+
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 });
|
|
1079
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponent, decorators: [{
|
|
1080
1080
|
type: Component,
|
|
1081
1081
|
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"] }]
|
|
1082
1082
|
}], ctorParameters: function () { return [{ type: i1$3.FormBuilder }]; }, propDecorators: { loading: [{
|
|
@@ -1093,15 +1093,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1093
1093
|
|
|
1094
1094
|
class LoginComponentModule {
|
|
1095
1095
|
}
|
|
1096
|
-
LoginComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1097
|
-
LoginComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1096
|
+
LoginComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1097
|
+
LoginComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, declarations: [LoginComponent], imports: [CommonModule,
|
|
1098
1098
|
FormsModule,
|
|
1099
1099
|
ReactiveFormsModule,
|
|
1100
1100
|
FieldComponentModule,
|
|
1101
1101
|
ButtonComponentModule,
|
|
1102
1102
|
MatCheckboxModule,
|
|
1103
1103
|
LogoComponentModule], exports: [LoginComponent] });
|
|
1104
|
-
LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1104
|
+
LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, providers: [], imports: [[
|
|
1105
1105
|
CommonModule,
|
|
1106
1106
|
FormsModule,
|
|
1107
1107
|
ReactiveFormsModule,
|
|
@@ -1110,7 +1110,7 @@ LoginComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
|
|
|
1110
1110
|
MatCheckboxModule,
|
|
1111
1111
|
LogoComponentModule,
|
|
1112
1112
|
]] });
|
|
1113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoginComponentModule, decorators: [{
|
|
1114
1114
|
type: NgModule,
|
|
1115
1115
|
args: [{
|
|
1116
1116
|
declarations: [LoginComponent],
|
|
@@ -1171,11 +1171,11 @@ class NavbarComponent {
|
|
|
1171
1171
|
this.logoutEvent.emit();
|
|
1172
1172
|
}
|
|
1173
1173
|
}
|
|
1174
|
-
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1175
|
-
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1176
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1174
|
+
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1175
|
+
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:600;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 });
|
|
1176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponent, decorators: [{
|
|
1177
1177
|
type: Component,
|
|
1178
|
-
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:
|
|
1178
|
+
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:600;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"] }]
|
|
1179
1179
|
}], ctorParameters: function () { return []; }, propDecorators: { routes: [{
|
|
1180
1180
|
type: Input
|
|
1181
1181
|
}], activedRoute: [{
|
|
@@ -1190,15 +1190,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1190
1190
|
|
|
1191
1191
|
class NavbarComponentModule {
|
|
1192
1192
|
}
|
|
1193
|
-
NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1194
|
-
NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1193
|
+
NavbarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1194
|
+
NavbarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, declarations: [NavbarComponent], imports: [CommonModule,
|
|
1195
1195
|
MatToolbarModule,
|
|
1196
1196
|
MatIconModule,
|
|
1197
1197
|
MatButtonModule,
|
|
1198
1198
|
MatRippleModule,
|
|
1199
1199
|
MatMenuModule,
|
|
1200
1200
|
LogoComponentModule], exports: [NavbarComponent] });
|
|
1201
|
-
NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1201
|
+
NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, providers: [], imports: [[
|
|
1202
1202
|
CommonModule,
|
|
1203
1203
|
MatToolbarModule,
|
|
1204
1204
|
MatIconModule,
|
|
@@ -1207,7 +1207,7 @@ NavbarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", v
|
|
|
1207
1207
|
MatMenuModule,
|
|
1208
1208
|
LogoComponentModule,
|
|
1209
1209
|
]] });
|
|
1210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1210
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavbarComponentModule, decorators: [{
|
|
1211
1211
|
type: NgModule,
|
|
1212
1212
|
args: [{
|
|
1213
1213
|
declarations: [NavbarComponent],
|
|
@@ -1236,9 +1236,9 @@ class NavigationComponent {
|
|
|
1236
1236
|
this.goBackClickedEvent.emit();
|
|
1237
1237
|
}
|
|
1238
1238
|
}
|
|
1239
|
-
NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1240
|
-
NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1241
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1239
|
+
NavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1240
|
+
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 });
|
|
1241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponent, decorators: [{
|
|
1242
1242
|
type: Component,
|
|
1243
1243
|
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"] }]
|
|
1244
1244
|
}], ctorParameters: function () { return []; }, propDecorators: { title: [{
|
|
@@ -1253,10 +1253,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1253
1253
|
|
|
1254
1254
|
class NavigationComponentModule {
|
|
1255
1255
|
}
|
|
1256
|
-
NavigationComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1257
|
-
NavigationComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1258
|
-
NavigationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1256
|
+
NavigationComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1257
|
+
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] });
|
|
1258
|
+
NavigationComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, providers: [], imports: [[CommonModule, MatIconModule, MatButtonModule, LabelComponentModule]] });
|
|
1259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationComponentModule, decorators: [{
|
|
1260
1260
|
type: NgModule,
|
|
1261
1261
|
args: [{
|
|
1262
1262
|
declarations: [NavigationComponent],
|
|
@@ -1305,9 +1305,9 @@ class PaginatorComponent {
|
|
|
1305
1305
|
this.paginatorChangedEvent.emit(paginator);
|
|
1306
1306
|
}
|
|
1307
1307
|
}
|
|
1308
|
-
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1309
|
-
PaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1308
|
+
PaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1309
|
+
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 });
|
|
1310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponent, decorators: [{
|
|
1311
1311
|
type: Component,
|
|
1312
1312
|
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"] }]
|
|
1313
1313
|
}], ctorParameters: function () { return []; }, propDecorators: { length: [{
|
|
@@ -1320,10 +1320,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1320
1320
|
|
|
1321
1321
|
class PaginatorComponentModule {
|
|
1322
1322
|
}
|
|
1323
|
-
PaginatorComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1324
|
-
PaginatorComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1325
|
-
PaginatorComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1323
|
+
PaginatorComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1324
|
+
PaginatorComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, declarations: [PaginatorComponent], imports: [CommonModule, MatPaginatorModule], exports: [PaginatorComponent] });
|
|
1325
|
+
PaginatorComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, providers: [], imports: [[CommonModule, MatPaginatorModule]] });
|
|
1326
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PaginatorComponentModule, decorators: [{
|
|
1327
1327
|
type: NgModule,
|
|
1328
1328
|
args: [{
|
|
1329
1329
|
declarations: [PaginatorComponent],
|
|
@@ -1336,9 +1336,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1336
1336
|
class ProgressBarComponent {
|
|
1337
1337
|
constructor() { }
|
|
1338
1338
|
}
|
|
1339
|
-
ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1340
|
-
ProgressBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.
|
|
1341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1339
|
+
ProgressBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1340
|
+
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 });
|
|
1341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
1342
1342
|
type: Component,
|
|
1343
1343
|
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"] }]
|
|
1344
1344
|
}], ctorParameters: function () { return []; }, propDecorators: { color: [{
|
|
@@ -1353,10 +1353,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1353
1353
|
|
|
1354
1354
|
class ProgressBarComponentModule {
|
|
1355
1355
|
}
|
|
1356
|
-
ProgressBarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1357
|
-
ProgressBarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1358
|
-
ProgressBarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1359
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1356
|
+
ProgressBarComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1357
|
+
ProgressBarComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, declarations: [ProgressBarComponent], imports: [CommonModule, MatProgressBarModule], exports: [ProgressBarComponent] });
|
|
1358
|
+
ProgressBarComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, providers: [], imports: [[CommonModule, MatProgressBarModule]] });
|
|
1359
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProgressBarComponentModule, decorators: [{
|
|
1360
1360
|
type: NgModule,
|
|
1361
1361
|
args: [{
|
|
1362
1362
|
declarations: [ProgressBarComponent],
|
|
@@ -1387,9 +1387,9 @@ class DataPropertyGetterPipe {
|
|
|
1387
1387
|
return obj;
|
|
1388
1388
|
}
|
|
1389
1389
|
}
|
|
1390
|
-
DataPropertyGetterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1391
|
-
DataPropertyGetterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.
|
|
1392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1390
|
+
DataPropertyGetterPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataPropertyGetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
1391
|
+
DataPropertyGetterPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataPropertyGetterPipe, name: "dataPropertyGetter" });
|
|
1392
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataPropertyGetterPipe, decorators: [{
|
|
1393
1393
|
type: Pipe,
|
|
1394
1394
|
args: [{
|
|
1395
1395
|
name: 'dataPropertyGetter',
|
|
@@ -1435,9 +1435,9 @@ class DynamicComponentDirective {
|
|
|
1435
1435
|
this.subscription.unsubscribe();
|
|
1436
1436
|
}
|
|
1437
1437
|
}
|
|
1438
|
-
DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1439
|
-
DynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.
|
|
1440
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1438
|
+
DynamicComponentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DynamicComponentDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1439
|
+
DynamicComponentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: DynamicComponentDirective, selector: "[dynamicComponent]", inputs: { dynamicComponent: "dynamicComponent" }, ngImport: i0 });
|
|
1440
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DynamicComponentDirective, decorators: [{
|
|
1441
1441
|
type: Directive,
|
|
1442
1442
|
args: [{
|
|
1443
1443
|
selector: '[dynamicComponent]',
|
|
@@ -1553,8 +1553,8 @@ class TableComponent {
|
|
|
1553
1553
|
this.dataSourceDetail = new MatTableDataSource(rowData);
|
|
1554
1554
|
}
|
|
1555
1555
|
}
|
|
1556
|
-
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1557
|
-
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: [
|
|
1556
|
+
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponent, deps: [{ token: DataPropertyGetterPipe }], target: i0.ɵɵFactoryTarget.Component });
|
|
1557
|
+
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: [
|
|
1558
1558
|
trigger('expandDetail', [
|
|
1559
1559
|
state('collapsed, void', style({ height: '0px' })),
|
|
1560
1560
|
state('expanded', style({ height: '*' })),
|
|
@@ -1562,7 +1562,7 @@ TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
|
|
|
1562
1562
|
transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1563
1563
|
]),
|
|
1564
1564
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1565
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1565
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponent, decorators: [{
|
|
1566
1566
|
type: Component,
|
|
1567
1567
|
args: [{ selector: 'ui-table', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
|
|
1568
1568
|
trigger('expandDetail', [
|
|
@@ -1571,7 +1571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1571
1571
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1572
1572
|
transition('expanded <=> void', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
|
1573
1573
|
]),
|
|
1574
|
-
], 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"] }]
|
|
1574
|
+
], 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"] }]
|
|
1575
1575
|
}], ctorParameters: function () { return [{ type: DataPropertyGetterPipe }]; }, propDecorators: { matSort: [{
|
|
1576
1576
|
type: ViewChild,
|
|
1577
1577
|
args: [MatSort]
|
|
@@ -1593,10 +1593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1593
1593
|
|
|
1594
1594
|
class TableComponentModule {
|
|
1595
1595
|
}
|
|
1596
|
-
TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.
|
|
1597
|
-
TableComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.
|
|
1598
|
-
TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.
|
|
1599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.
|
|
1596
|
+
TableComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1597
|
+
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] });
|
|
1598
|
+
TableComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, providers: [DataPropertyGetterPipe], imports: [[CommonModule, MatTableModule, MatSortModule, MatIconModule, MatTooltipModule]] });
|
|
1599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TableComponentModule, decorators: [{
|
|
1600
1600
|
type: NgModule,
|
|
1601
1601
|
args: [{
|
|
1602
1602
|
declarations: [TableComponent, DataPropertyGetterPipe, DynamicComponentDirective],
|