@testgorilla/tgo-ui 0.0.4 → 0.0.7

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.
Files changed (36) hide show
  1. package/README.md +6 -4
  2. package/components/button/button.component.d.ts +55 -0
  3. package/components/button/button.component.module.d.ts +11 -0
  4. package/components/button/button.model.d.ts +1 -0
  5. package/components/field/field.component.d.ts +102 -0
  6. package/components/field/field.component.module.d.ts +12 -0
  7. package/components/login/login.component.d.ts +34 -0
  8. package/components/login/login.component.module.d.ts +12 -0
  9. package/components/login/login.model.d.ts +5 -0
  10. package/components/navbar/navbar.component.d.ts +2 -2
  11. package/components/navbar/{navbar.types.d.ts → navbar.model.d.ts} +0 -0
  12. package/components/table/table.component.d.ts +15 -6
  13. package/components/table/{table.types.d.ts → table.model.d.ts} +11 -2
  14. package/esm2020/components/button/button.component.mjs +78 -0
  15. package/esm2020/components/button/button.component.module.mjs +22 -0
  16. package/esm2020/components/button/button.model.mjs +2 -0
  17. package/esm2020/components/field/field.component.mjs +119 -0
  18. package/esm2020/components/field/field.component.module.mjs +23 -0
  19. package/esm2020/components/login/login.component.mjs +76 -0
  20. package/esm2020/components/login/login.component.module.mjs +42 -0
  21. package/esm2020/components/login/login.model.mjs +2 -0
  22. package/esm2020/components/navbar/navbar.component.mjs +7 -9
  23. package/esm2020/components/navbar/{navbar.types.mjs → navbar.model.mjs} +1 -1
  24. package/esm2020/components/table/table.component.mjs +21 -10
  25. package/esm2020/components/table/table.model.mjs +13 -0
  26. package/esm2020/public-api.mjs +9 -3
  27. package/esm2020/shared/pipes/dataPropertyGetter.mjs +3 -3
  28. package/fesm2015/testgorilla-tgo-ui.mjs +365 -26
  29. package/fesm2015/testgorilla-tgo-ui.mjs.map +1 -1
  30. package/fesm2020/testgorilla-tgo-ui.mjs +364 -26
  31. package/fesm2020/testgorilla-tgo-ui.mjs.map +1 -1
  32. package/package.json +1 -1
  33. package/public-api.d.ts +6 -2
  34. package/shared/pipes/dataPropertyGetter.d.ts +4 -7
  35. package/src/theme/base.scss +1 -0
  36. package/esm2020/components/table/table.types.mjs +0 -13
package/README.md CHANGED
@@ -2,9 +2,11 @@
2
2
 
3
3
  # Components
4
4
  * Button
5
- * Table
6
- * Paginator
5
+ * Field
6
+ * Login
7
7
  * NavBar
8
+ * Paginator
9
+ * Table
8
10
 
9
11
  ## Storybook Development Server
10
12
 
@@ -33,7 +35,7 @@ We are using playwright on top of storybook to capture the visual differences. C
33
35
  In order to update the existing snapshots, we need to use DOCKER to update, since updating from mac or windows has its own effect on the rendering, we might want to use the following way to update the snapshots to be consistant with CI.
34
36
 
35
37
  ```
36
- docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.22.0-focal /bin/bash
38
+ docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:latest /bin/bash
37
39
  npm install
38
40
  npx playwright test e2e/common.spec.ts --update-snapshots
39
41
  ```
@@ -41,7 +43,7 @@ npx playwright test e2e/common.spec.ts --update-snapshots
41
43
  In order to execute the visual tests, we need to use same docker so that the screenshots are aligned with the same OS.
42
44
 
43
45
  ```
44
- docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.22.0-focal /bin/bash
46
+ docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:latest /bin/bash
45
47
  npm install
46
48
  npx playwright test e2e/common.spec.ts
47
49
  ```
@@ -0,0 +1,55 @@
1
+ import { EventEmitter } from '@angular/core';
2
+ import { ThemePalette } from '@angular/material/core';
3
+ import { IconPositionOptions } from './button.model';
4
+ import * as i0 from "@angular/core";
5
+ export declare class ButtonComponent {
6
+ /**
7
+ * Background color of the button while in active state
8
+ *
9
+ * @type {ThemePalette}
10
+ * @memberof ButtonComponent
11
+ */
12
+ color: ThemePalette;
13
+ /**
14
+ * Text content to appear on the button
15
+ *
16
+ * @memberof ButtonComponent
17
+ */
18
+ label: string;
19
+ /**
20
+ * Positioning of the icon (when existant)
21
+ *
22
+ * @type {IconPositionOptions}
23
+ * @memberof ButtonComponent
24
+ */
25
+ iconPosition: IconPositionOptions;
26
+ /**
27
+ * Name of the material icon
28
+ *
29
+ * @memberof ButtonComponent
30
+ */
31
+ iconName: string;
32
+ /**
33
+ * Indicator if the button should be disabled
34
+ *
35
+ * @memberof ButtonComponent
36
+ */
37
+ disabled: boolean;
38
+ /**
39
+ * Indicator if the loading icon should be shown after a click on the button
40
+ *
41
+ * @memberof ButtonComponent
42
+ */
43
+ loadingOnClick: boolean;
44
+ /**
45
+ * If the button will have width 100%
46
+ *
47
+ * @memberof ButtonComponent
48
+ */
49
+ fullWidth: boolean;
50
+ onClickEvent: EventEmitter<void>;
51
+ loading: boolean;
52
+ onClick(): void;
53
+ static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
54
+ static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ui-button", never, { "color": "color"; "label": "label"; "iconPosition": "iconPosition"; "iconName": "iconName"; "disabled": "disabled"; "loadingOnClick": "loadingOnClick"; "fullWidth": "fullWidth"; }, { "onClickEvent": "onClickEvent"; }, never, never>;
55
+ }
@@ -0,0 +1,11 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./button.component";
3
+ import * as i2 from "@angular/common";
4
+ import * as i3 from "@angular/material/button";
5
+ import * as i4 from "@angular/material/icon";
6
+ import * as i5 from "@angular/material/progress-spinner";
7
+ export declare class ButtonComponentModule {
8
+ static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponentModule, never>;
9
+ static ɵmod: i0.ɵɵNgModuleDeclaration<ButtonComponentModule, [typeof i1.ButtonComponent], [typeof i2.CommonModule, typeof i3.MatButtonModule, typeof i4.MatIconModule, typeof i5.MatProgressSpinnerModule], [typeof i1.ButtonComponent]>;
10
+ static ɵinj: i0.ɵɵInjectorDeclaration<ButtonComponentModule>;
11
+ }
@@ -0,0 +1 @@
1
+ export declare type IconPositionOptions = 'left' | 'right' | undefined;
@@ -0,0 +1,102 @@
1
+ import { OnInit } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ export declare class FieldComponent implements OnInit {
4
+ /**
5
+ * Form field label
6
+ *
7
+ * @type {string}
8
+ * @memberof FieldComponent
9
+ */
10
+ label: string;
11
+ /**
12
+ * Preffix icon (before input text)
13
+ *
14
+ * @type {string}
15
+ * @memberof FieldComponent
16
+ */
17
+ preffixIcon: string;
18
+ /**
19
+ * Suffix icon (after input text)
20
+ *
21
+ * @type {string}
22
+ * @memberof FieldComponent
23
+ */
24
+ suffixIcon: string;
25
+ /**
26
+ * Input is required or not
27
+ *
28
+ * @type {boolean}
29
+ * @memberof FieldComponent
30
+ */
31
+ required: boolean;
32
+ /**
33
+ * Hint text
34
+ *
35
+ * @type {string}
36
+ * @memberof FieldComponent
37
+ */
38
+ hint: string;
39
+ /**
40
+ * Error text (will replace hint)
41
+ *
42
+ * @type {string}
43
+ * @memberof FieldComponent
44
+ */
45
+ error: string | undefined;
46
+ /**
47
+ * Input placeholder
48
+ *
49
+ * @type {string}
50
+ * @memberof FieldComponent
51
+ */
52
+ placeholder: string;
53
+ /**
54
+ * Input type
55
+ *
56
+ * @type {string}
57
+ * @memberof FieldComponent
58
+ */
59
+ type: string;
60
+ /**
61
+ * Input value
62
+ *
63
+ * @type {string}
64
+ * @memberof FieldComponent
65
+ */
66
+ value: string;
67
+ /**
68
+ * Determines if input is disabled
69
+ *
70
+ * @type {boolean}
71
+ * @memberof FieldComponent
72
+ */
73
+ isDisabled: boolean;
74
+ /**
75
+ * Determines if field will be a password input. Will work if input type is set to 'password'
76
+ *
77
+ * @type {boolean}
78
+ * @memberof FieldComponent
79
+ */
80
+ passwordField: boolean;
81
+ /**
82
+ * @ignore
83
+ */
84
+ onChange: (_: any) => void;
85
+ /**
86
+ * @ignore
87
+ */
88
+ onTouch: () => void;
89
+ constructor();
90
+ ngOnInit(): void;
91
+ /**
92
+ * @ignore
93
+ */
94
+ onInput(event: any): void;
95
+ writeValue(value: any): void;
96
+ registerOnChange(fn: any): void;
97
+ registerOnTouched(fn: any): void;
98
+ setDisabledState(isDisabled: boolean): void;
99
+ suffixIconClicked(): void;
100
+ static ɵfac: i0.ɵɵFactoryDeclaration<FieldComponent, never>;
101
+ static ɵcmp: i0.ɵɵComponentDeclaration<FieldComponent, "ui-field", never, { "label": "label"; "preffixIcon": "preffixIcon"; "suffixIcon": "suffixIcon"; "required": "required"; "hint": "hint"; "error": "error"; "placeholder": "placeholder"; "type": "type"; }, {}, never, never>;
102
+ }
@@ -0,0 +1,12 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./field.component";
3
+ import * as i2 from "@angular/common";
4
+ import * as i3 from "@angular/material/form-field";
5
+ import * as i4 from "@angular/material/input";
6
+ import * as i5 from "@angular/material/icon";
7
+ import * as i6 from "@angular/forms";
8
+ export declare class FieldComponentModule {
9
+ static ɵfac: i0.ɵɵFactoryDeclaration<FieldComponentModule, never>;
10
+ static ɵmod: i0.ɵɵNgModuleDeclaration<FieldComponentModule, [typeof i1.FieldComponent], [typeof i2.CommonModule, typeof i3.MatFormFieldModule, typeof i4.MatInputModule, typeof i5.MatIconModule, typeof i6.FormsModule, typeof i6.ReactiveFormsModule], [typeof i1.FieldComponent]>;
11
+ static ɵinj: i0.ɵɵInjectorDeclaration<FieldComponentModule>;
12
+ }
@@ -0,0 +1,34 @@
1
+ import { EventEmitter, OnInit } from '@angular/core';
2
+ import { FormBuilder } from '@angular/forms';
3
+ import { LoginCredentials } from './login.model';
4
+ import * as i0 from "@angular/core";
5
+ export declare class LoginComponent implements OnInit {
6
+ private fb;
7
+ /**
8
+ * @ignore
9
+ */
10
+ loginForm: import("@angular/forms").FormGroup;
11
+ /**
12
+ * @ignore
13
+ */
14
+ submitEvent: EventEmitter<LoginCredentials>;
15
+ /**
16
+ * @ignore
17
+ */
18
+ forgotPasswordEvent: EventEmitter<void>;
19
+ /**
20
+ * @ignore
21
+ */
22
+ createAccountEvent: EventEmitter<void>;
23
+ /**
24
+ * @ignore
25
+ */
26
+ ngOnInit(): void;
27
+ constructor(fb: FormBuilder);
28
+ submit(): void;
29
+ forgotPassword(): void;
30
+ createAccount(): void;
31
+ getErrorMessage(field: string): string | undefined;
32
+ static ɵfac: i0.ɵɵFactoryDeclaration<LoginComponent, never>;
33
+ static ɵcmp: i0.ɵɵComponentDeclaration<LoginComponent, "ui-login", never, {}, { "submitEvent": "submitEvent"; "forgotPasswordEvent": "forgotPasswordEvent"; "createAccountEvent": "createAccountEvent"; }, never, never>;
34
+ }
@@ -0,0 +1,12 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./login.component";
3
+ import * as i2 from "@angular/common";
4
+ import * as i3 from "@angular/forms";
5
+ import * as i4 from "../field/field.component.module";
6
+ import * as i5 from "../button/button.component.module";
7
+ import * as i6 from "@angular/material/checkbox";
8
+ export declare class LoginComponentModule {
9
+ static ɵfac: i0.ɵɵFactoryDeclaration<LoginComponentModule, never>;
10
+ static ɵmod: i0.ɵɵNgModuleDeclaration<LoginComponentModule, [typeof i1.LoginComponent], [typeof i2.CommonModule, typeof i3.FormsModule, typeof i3.ReactiveFormsModule, typeof i4.FieldComponentModule, typeof i5.ButtonComponentModule, typeof i6.MatCheckboxModule], [typeof i1.LoginComponent]>;
11
+ static ɵinj: i0.ɵɵInjectorDeclaration<LoginComponentModule>;
12
+ }
@@ -0,0 +1,5 @@
1
+ export interface LoginCredentials {
2
+ username: string;
3
+ password: string;
4
+ remember_me: boolean;
5
+ }
@@ -1,5 +1,5 @@
1
1
  import { EventEmitter } from '@angular/core';
2
- import { IRoute } from './navbar.types';
2
+ import { IRoute } from './navbar.model';
3
3
  import * as i0 from "@angular/core";
4
4
  export declare class NavbarComponent {
5
5
  /**
@@ -29,7 +29,7 @@ export declare class NavbarComponent {
29
29
  */
30
30
  navigateEvent: EventEmitter<string>;
31
31
  constructor();
32
- navigate(route: IRoute): void;
32
+ navigate(routeId: string): void;
33
33
  static ɵfac: i0.ɵɵFactoryDeclaration<NavbarComponent, never>;
34
34
  static ɵcmp: i0.ɵɵComponentDeclaration<NavbarComponent, "ui-navbar", never, { "routes": "routes"; "activedRoute": "activedRoute"; "userInitials": "userInitials"; }, { "navigateEvent": "navigateEvent"; }, never, never>;
35
35
  }
@@ -2,10 +2,16 @@ import { EventEmitter, OnInit } from '@angular/core';
2
2
  import { MatSort, Sort } from '@angular/material/sort';
3
3
  import { MatTableDataSource } from '@angular/material/table';
4
4
  import { DataPropertyGetterPipe } from '../../shared/pipes/dataPropertyGetter';
5
- import { DataType, DateFormat, IDataSource, ITableColumn } from './table.types';
5
+ import { DataType, DateFormat, IDataSource, IStatusOptions, ITableColumn } from './table.model';
6
6
  import * as i0 from "@angular/core";
7
7
  export declare class TableComponent<T extends IDataSource> implements OnInit {
8
8
  private dataPropertyGetterPipe;
9
+ /**
10
+ * @ignore
11
+ */
12
+ readonly timeAgoOptions: {
13
+ addSuffix: boolean;
14
+ };
9
15
  /**
10
16
  * @ignore
11
17
  */
@@ -39,20 +45,23 @@ export declare class TableComponent<T extends IDataSource> implements OnInit {
39
45
  * @type {ITableColumn}
40
46
  * @memberof TableComponent
41
47
  */
42
- tableColumns: ITableColumn[];
48
+ tableColumns: ITableColumn<T>[];
43
49
  /**
50
+ * @type {IStatusOptions}
51
+ * @memberof TableComponent
44
52
  * @ignore
45
53
  */
46
- onSortEvent: EventEmitter<Sort>;
54
+ statusOptions: IStatusOptions;
47
55
  /**
48
56
  * @ignore
49
57
  */
50
- onRowClickEvent: EventEmitter<any>;
58
+ onSortEvent: EventEmitter<Sort>;
51
59
  /**
52
60
  * @ignore
53
61
  */
62
+ onRowClickEvent: EventEmitter<any>;
54
63
  ngOnInit(): void;
55
- constructor(dataPropertyGetterPipe: DataPropertyGetterPipe<T>);
64
+ constructor(dataPropertyGetterPipe: DataPropertyGetterPipe);
56
65
  onSort(sortParams: Sort): void;
57
66
  onRowClick(rowParams: any): void;
58
67
  /**
@@ -60,5 +69,5 @@ export declare class TableComponent<T extends IDataSource> implements OnInit {
60
69
  */
61
70
  private setTableDataSource;
62
71
  static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
63
- static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "ui-table", never, { "tableData": "tableData"; "tableColumns": "tableColumns"; }, { "onSortEvent": "onSortEvent"; "onRowClickEvent": "onRowClickEvent"; }, never, never>;
72
+ static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "ui-table", never, { "tableData": "tableData"; "tableColumns": "tableColumns"; "statusOptions": "statusOptions"; }, { "onSortEvent": "onSortEvent"; "onRowClickEvent": "onRowClickEvent"; }, never, never>;
64
73
  }
@@ -1,13 +1,22 @@
1
1
  export declare type IDataSource = {
2
2
  [key: string]: any;
3
3
  };
4
- export interface ITableColumn {
4
+ export interface ITableColumn<T> {
5
5
  name: string;
6
- dataKey: string;
6
+ dataKey?: string;
7
+ dataFunction?: (v: T) => string;
7
8
  sortable?: boolean;
8
9
  dataType?: DataType;
9
10
  dateFormat?: DateFormat;
10
11
  }
12
+ export interface IStatusOptions {
13
+ [key: string]: IStatusOptionItem;
14
+ }
15
+ export interface IStatusOptionItem {
16
+ title: string;
17
+ color: string;
18
+ backgroundColor: string;
19
+ }
11
20
  export declare enum DataType {
12
21
  Date = "date",
13
22
  String = "string",
@@ -0,0 +1,78 @@
1
+ import { Component, EventEmitter, Input, Output } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ import * as i1 from "@angular/material/button";
4
+ import * as i2 from "@angular/material/icon";
5
+ import * as i3 from "@angular/material/progress-spinner";
6
+ import * as i4 from "@angular/common";
7
+ export class ButtonComponent {
8
+ constructor() {
9
+ /**
10
+ * Background color of the button while in active state
11
+ *
12
+ * @type {ThemePalette}
13
+ * @memberof ButtonComponent
14
+ */
15
+ this.color = 'primary';
16
+ /**
17
+ * Text content to appear on the button
18
+ *
19
+ * @memberof ButtonComponent
20
+ */
21
+ this.label = '';
22
+ /**
23
+ * Name of the material icon
24
+ *
25
+ * @memberof ButtonComponent
26
+ */
27
+ this.iconName = '';
28
+ /**
29
+ * Indicator if the button should be disabled
30
+ *
31
+ * @memberof ButtonComponent
32
+ */
33
+ this.disabled = false;
34
+ /**
35
+ * Indicator if the loading icon should be shown after a click on the button
36
+ *
37
+ * @memberof ButtonComponent
38
+ */
39
+ this.loadingOnClick = false;
40
+ /**
41
+ * If the button will have width 100%
42
+ *
43
+ * @memberof ButtonComponent
44
+ */
45
+ this.fullWidth = false;
46
+ this.onClickEvent = new EventEmitter();
47
+ this.loading = false;
48
+ }
49
+ onClick() {
50
+ if (this.loadingOnClick) {
51
+ this.loading = true;
52
+ }
53
+ this.onClickEvent.emit();
54
+ }
55
+ }
56
+ ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
57
+ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonComponent, selector: "ui-button", inputs: { color: "color", label: "label", iconPosition: "iconPosition", iconName: "iconName", disabled: "disabled", loadingOnClick: "loadingOnClick", fullWidth: "fullWidth" }, outputs: { onClickEvent: "onClickEvent" }, ngImport: i0, template: "<!--The button component for testgorilla-->\n<button mat-flat-button [color]=\"color\" [disabled]=\"disabled\" (click)=\"onClick()\" [ngClass]=\"{'w-full': fullWidth}\">\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\n <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.w-full{width:100%;text-align:center}button:hover{background-color:#388779}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 .label-icon-wrapper .mat-flat-button.mat-button-disabled{background-color:#a2d4cb;color:#fff}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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
58
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, decorators: [{
59
+ type: Component,
60
+ args: [{ selector: 'ui-button', template: "<!--The button component for testgorilla-->\n<button mat-flat-button [color]=\"color\" [disabled]=\"disabled\" (click)=\"onClick()\" [ngClass]=\"{'w-full': fullWidth}\">\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\n <mat-spinner *ngIf=\"loading\" class=\"position-spinner\" mode=\"indeterminate\" diameter=\"16\"></mat-spinner>\n</button>\n", styles: ["button{padding:16px}button.w-full{width:100%;text-align:center}button:hover{background-color:#388779}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 .label-icon-wrapper .mat-flat-button.mat-button-disabled{background-color:#a2d4cb;color:#fff}button .position-spinner{width:16px;height:16px;display:inline-flex;margin-top:-16px}\n"] }]
61
+ }], propDecorators: { color: [{
62
+ type: Input
63
+ }], label: [{
64
+ type: Input
65
+ }], iconPosition: [{
66
+ type: Input
67
+ }], iconName: [{
68
+ type: Input
69
+ }], disabled: [{
70
+ type: Input
71
+ }], loadingOnClick: [{
72
+ type: Input
73
+ }], fullWidth: [{
74
+ type: Input
75
+ }], onClickEvent: [{
76
+ type: Output
77
+ }] } });
78
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL2J1dHRvbi9idXR0b24uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7Ozs7QUFTdkUsTUFBTSxPQUFPLGVBQWU7SUFMNUI7UUFNRTs7Ozs7V0FLRztRQUNNLFVBQUssR0FBaUIsU0FBUyxDQUFDO1FBRXpDOzs7O1dBSUc7UUFDTSxVQUFLLEdBQUcsRUFBRSxDQUFDO1FBVXBCOzs7O1dBSUc7UUFDTSxhQUFRLEdBQUcsRUFBRSxDQUFDO1FBRXZCOzs7O1dBSUc7UUFDTSxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRTFCOzs7O1dBSUc7UUFDTSxtQkFBYyxHQUFHLEtBQUssQ0FBQztRQUVoQzs7OztXQUlHO1FBQ00sY0FBUyxHQUFHLEtBQUssQ0FBQztRQUVqQixpQkFBWSxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBRXRFLFlBQU8sR0FBRyxLQUFLLENBQUM7S0FTakI7SUFQQyxPQUFPO1FBQ0wsSUFBSSxJQUFJLENBQUMsY0FBYyxFQUFFO1lBQ3ZCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1NBQ3JCO1FBRUQsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUMzQixDQUFDOzs2R0E5RFUsZUFBZTtpR0FBZixlQUFlLDRRQ1Q1Qix5dkJBY0E7NEZETGEsZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxXQUFXOzhCQVdaLEtBQUs7c0JBQWIsS0FBSztnQkFPRyxLQUFLO3NCQUFiLEtBQUs7Z0JBUUcsWUFBWTtzQkFBcEIsS0FBSztnQkFPRyxRQUFRO3NCQUFoQixLQUFLO2dCQU9HLFFBQVE7c0JBQWhCLEtBQUs7Z0JBT0csY0FBYztzQkFBdEIsS0FBSztnQkFPRyxTQUFTO3NCQUFqQixLQUFLO2dCQUVJLFlBQVk7c0JBQXJCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGhlbWVQYWxldHRlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY29yZSc7XG5pbXBvcnQgeyBJY29uUG9zaXRpb25PcHRpb25zIH0gZnJvbSAnLi9idXR0b24ubW9kZWwnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd1aS1idXR0b24nLFxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vYnV0dG9uLmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIEJ1dHRvbkNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBCYWNrZ3JvdW5kIGNvbG9yIG9mIHRoZSBidXR0b24gd2hpbGUgaW4gYWN0aXZlIHN0YXRlXG4gICAqXG4gICAqIEB0eXBlIHtUaGVtZVBhbGV0dGV9XG4gICAqIEBtZW1iZXJvZiBCdXR0b25Db21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGNvbG9yOiBUaGVtZVBhbGV0dGUgPSAncHJpbWFyeSc7XG5cbiAgLyoqXG4gICAqIFRleHQgY29udGVudCB0byBhcHBlYXIgb24gdGhlIGJ1dHRvblxuICAgKlxuICAgKiBAbWVtYmVyb2YgQnV0dG9uQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBsYWJlbCA9ICcnO1xuXG4gIC8qKlxuICAgKiBQb3NpdGlvbmluZyBvZiB0aGUgaWNvbiAod2hlbiBleGlzdGFudClcbiAgICpcbiAgICogQHR5cGUge0ljb25Qb3NpdGlvbk9wdGlvbnN9XG4gICAqIEBtZW1iZXJvZiBCdXR0b25Db21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGljb25Qb3NpdGlvbjogSWNvblBvc2l0aW9uT3B0aW9ucztcblxuICAvKipcbiAgICogTmFtZSBvZiB0aGUgbWF0ZXJpYWwgaWNvblxuICAgKlxuICAgKiBAbWVtYmVyb2YgQnV0dG9uQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBpY29uTmFtZSA9ICcnO1xuXG4gIC8qKlxuICAgKiBJbmRpY2F0b3IgaWYgdGhlIGJ1dHRvbiBzaG91bGQgYmUgZGlzYWJsZWRcbiAgICpcbiAgICogQG1lbWJlcm9mIEJ1dHRvbkNvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICAvKipcbiAgICogSW5kaWNhdG9yIGlmIHRoZSBsb2FkaW5nIGljb24gc2hvdWxkIGJlIHNob3duIGFmdGVyIGEgY2xpY2sgb24gdGhlIGJ1dHRvblxuICAgKlxuICAgKiBAbWVtYmVyb2YgQnV0dG9uQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBsb2FkaW5nT25DbGljayA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBJZiB0aGUgYnV0dG9uIHdpbGwgaGF2ZSB3aWR0aCAxMDAlXG4gICAqXG4gICAqIEBtZW1iZXJvZiBCdXR0b25Db21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGZ1bGxXaWR0aCA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKSBvbkNsaWNrRXZlbnQ6IEV2ZW50RW1pdHRlcjx2b2lkPiA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBsb2FkaW5nID0gZmFsc2U7XG5cbiAgb25DbGljaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5sb2FkaW5nT25DbGljaykge1xuICAgICAgdGhpcy5sb2FkaW5nID0gdHJ1ZTtcbiAgICB9XG5cbiAgICB0aGlzLm9uQ2xpY2tFdmVudC5lbWl0KCk7XG4gIH1cbn1cbiIsIjwhLS1UaGUgYnV0dG9uIGNvbXBvbmVudCBmb3IgdGVzdGdvcmlsbGEtLT5cbjxidXR0b24gbWF0LWZsYXQtYnV0dG9uIFtjb2xvcl09XCJjb2xvclwiIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiIChjbGljayk9XCJvbkNsaWNrKClcIiBbbmdDbGFzc109XCJ7J3ctZnVsbCc6IGZ1bGxXaWR0aH1cIj5cbiAgPGRpdiBjbGFzcz1cImxhYmVsLWljb24td3JhcHBlclwiIFtuZ0NsYXNzXT1cInsgaGlkZGVuOiBsb2FkaW5nIH1cIj5cbiAgICA8c3BhbiBjbGFzcz1cImljb24gaWNvbi1sZWZ0XCIgKm5nSWY9XCJpY29uUG9zaXRpb24gPT09ICdsZWZ0J1wiXG4gICAgICA+PG1hdC1pY29uPnt7IGljb25OYW1lIH19PC9tYXQtaWNvbj48L3NwYW5cbiAgICA+XG4gICAgPHNwYW4gW25nQ2xhc3NdPVwieyAnbGFiZWwtd2l0aG91dC1pY29uJzogaWNvbk5hbWUgPT09ICcnLCAnbGFiZWwtd2l0aC1pY29uJzogaWNvbk5hbWUgIT09ICcnIH1cIj57eyBsYWJlbCB9fTwvc3Bhbj5cbiAgICA8c3BhbiBjbGFzcz1cImljb24gaWNvbi1yaWdodFwiICpuZ0lmPVwiaWNvblBvc2l0aW9uID09PSAncmlnaHQnXCJcbiAgICAgID48bWF0LWljb24+e3sgaWNvbk5hbWUgfX08L21hdC1pY29uPjwvc3BhblxuICAgID5cbiAgPC9kaXY+XG5cbiAgPG1hdC1zcGlubmVyICpuZ0lmPVwibG9hZGluZ1wiIGNsYXNzPVwicG9zaXRpb24tc3Bpbm5lclwiIG1vZGU9XCJpbmRldGVybWluYXRlXCIgZGlhbWV0ZXI9XCIxNlwiPjwvbWF0LXNwaW5uZXI+XG48L2J1dHRvbj5cbiJdfQ==
@@ -0,0 +1,22 @@
1
+ import { CommonModule } from '@angular/common';
2
+ import { NgModule } from '@angular/core';
3
+ import { MatButtonModule } from '@angular/material/button';
4
+ import { MatIconModule } from '@angular/material/icon';
5
+ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
6
+ import { ButtonComponent } from './button.component';
7
+ import * as i0 from "@angular/core";
8
+ export class ButtonComponentModule {
9
+ }
10
+ ButtonComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
11
+ ButtonComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, declarations: [ButtonComponent], imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule], exports: [ButtonComponent] });
12
+ ButtonComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, providers: [], imports: [[CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule]] });
13
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponentModule, decorators: [{
14
+ type: NgModule,
15
+ args: [{
16
+ declarations: [ButtonComponent],
17
+ imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule],
18
+ exports: [ButtonComponent],
19
+ providers: [],
20
+ }]
21
+ }] });
22
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5tb2R1bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5tb2R1bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzNELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUM5RSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7O0FBUXJELE1BQU0sT0FBTyxxQkFBcUI7O21IQUFyQixxQkFBcUI7b0hBQXJCLHFCQUFxQixpQkFMakIsZUFBZSxhQUNwQixZQUFZLEVBQUUsZUFBZSxFQUFFLGFBQWEsRUFBRSx3QkFBd0IsYUFDdEUsZUFBZTtvSEFHZCxxQkFBcUIsYUFGckIsRUFBRSxZQUZKLENBQUMsWUFBWSxFQUFFLGVBQWUsRUFBRSxhQUFhLEVBQUUsd0JBQXdCLENBQUM7NEZBSXRFLHFCQUFxQjtrQkFOakMsUUFBUTttQkFBQztvQkFDUixZQUFZLEVBQUUsQ0FBQyxlQUFlLENBQUM7b0JBQy9CLE9BQU8sRUFBRSxDQUFDLFlBQVksRUFBRSxlQUFlLEVBQUUsYUFBYSxFQUFFLHdCQUF3QixDQUFDO29CQUNqRixPQUFPLEVBQUUsQ0FBQyxlQUFlLENBQUM7b0JBQzFCLFNBQVMsRUFBRSxFQUFFO2lCQUNkIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IE5nTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRCdXR0b25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24nO1xuaW1wb3J0IHsgTWF0SWNvbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsL2ljb24nO1xuaW1wb3J0IHsgTWF0UHJvZ3Jlc3NTcGlubmVyTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvcHJvZ3Jlc3Mtc3Bpbm5lcic7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuL2J1dHRvbi5jb21wb25lbnQnO1xuXG5ATmdNb2R1bGUoe1xuICBkZWNsYXJhdGlvbnM6IFtCdXR0b25Db21wb25lbnRdLFxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBNYXRCdXR0b25Nb2R1bGUsIE1hdEljb25Nb2R1bGUsIE1hdFByb2dyZXNzU3Bpbm5lck1vZHVsZV0sXG4gIGV4cG9ydHM6IFtCdXR0b25Db21wb25lbnRdLFxuICBwcm92aWRlcnM6IFtdLFxufSlcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnRNb2R1bGUge31cbiJdfQ==
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLm1vZGVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvYnV0dG9uL2J1dHRvbi5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHR5cGUgSWNvblBvc2l0aW9uT3B0aW9ucyA9ICdsZWZ0JyB8ICdyaWdodCcgfCB1bmRlZmluZWQ7XG4iXX0=
@@ -0,0 +1,119 @@
1
+ import { Component, forwardRef, Input } from '@angular/core';
2
+ import { NG_VALUE_ACCESSOR } from '@angular/forms';
3
+ import * as i0 from "@angular/core";
4
+ import * as i1 from "@angular/material/form-field";
5
+ import * as i2 from "@angular/material/icon";
6
+ import * as i3 from "@angular/common";
7
+ import * as i4 from "@angular/material/input";
8
+ export class FieldComponent {
9
+ constructor() {
10
+ /**
11
+ * Input placeholder
12
+ *
13
+ * @type {string}
14
+ * @memberof FieldComponent
15
+ */
16
+ this.placeholder = '';
17
+ /**
18
+ * Input type
19
+ *
20
+ * @type {string}
21
+ * @memberof FieldComponent
22
+ */
23
+ this.type = 'text';
24
+ /**
25
+ * Input value
26
+ *
27
+ * @type {string}
28
+ * @memberof FieldComponent
29
+ */
30
+ this.value = '';
31
+ /**
32
+ * Determines if field will be a password input. Will work if input type is set to 'password'
33
+ *
34
+ * @type {boolean}
35
+ * @memberof FieldComponent
36
+ */
37
+ this.passwordField = false;
38
+ /**
39
+ * @ignore
40
+ */
41
+ this.onChange = (_) => { };
42
+ /**
43
+ * @ignore
44
+ */
45
+ this.onTouch = () => { };
46
+ }
47
+ ngOnInit() {
48
+ if (this.type === 'password') {
49
+ this.passwordField = true;
50
+ this.suffixIcon = 'visibility';
51
+ }
52
+ }
53
+ /**
54
+ * @ignore
55
+ */
56
+ onInput(event) {
57
+ this.value = event.target.value;
58
+ this.onTouch();
59
+ this.onChange(this.value);
60
+ }
61
+ writeValue(value) {
62
+ if (value) {
63
+ this.value = value || '';
64
+ }
65
+ else {
66
+ this.value = '';
67
+ }
68
+ }
69
+ registerOnChange(fn) {
70
+ this.onChange = fn;
71
+ }
72
+ registerOnTouched(fn) {
73
+ this.onTouch = fn;
74
+ }
75
+ setDisabledState(isDisabled) {
76
+ this.isDisabled = isDisabled;
77
+ }
78
+ suffixIconClicked() {
79
+ if (this.passwordField) {
80
+ this.type = this.type === 'password' ? 'text' : 'password';
81
+ this.suffixIcon = this.type === 'password' ? 'visibility' : 'visibility_off';
82
+ }
83
+ }
84
+ }
85
+ FieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
86
+ FieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FieldComponent, selector: "ui-field", inputs: { label: "label", preffixIcon: "preffixIcon", suffixIcon: "suffixIcon", required: "required", hint: "hint", error: "error", placeholder: "placeholder", type: "type" }, providers: [
87
+ {
88
+ provide: NG_VALUE_ACCESSOR,
89
+ useExisting: forwardRef(() => FieldComponent),
90
+ multi: true,
91
+ },
92
+ ], ngImport: i0, template: "<div class=\"column\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n <input matInput [placeholder]=\"placeholder\" [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\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"error\">{{ error }}</mat-hint>\n </mat-form-field>\n</div>", styles: ["mat-label{font-weight:600;color:#000}.mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:19px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.column{display:flex;flex-direction:column}\n"], components: [{ type: i1.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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatLabel, selector: "mat-label" }, { type: i1.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.MatSuffix, selector: "[matSuffix]" }, { type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }] });
93
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FieldComponent, decorators: [{
94
+ type: Component,
95
+ args: [{ selector: 'ui-field', providers: [
96
+ {
97
+ provide: NG_VALUE_ACCESSOR,
98
+ useExisting: forwardRef(() => FieldComponent),
99
+ multi: true,
100
+ },
101
+ ], template: "<div class=\"column\">\n <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n <mat-form-field appearance=\"outline\" [color]=\"error ? 'warn' : 'primary'\">\n <mat-icon matPrefix *ngIf=\"preffixIcon\">{{ preffixIcon }}</mat-icon>\n <input matInput [placeholder]=\"placeholder\" [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\">{{ hint }}</mat-hint>\n <mat-hint class=\"error\" *ngIf=\"error\">{{ error }}</mat-hint>\n </mat-form-field>\n</div>", styles: ["mat-label{font-weight:600;color:#000}.mat-form-field{margin-top:0}.mat-form-field .mat-input-element{height:19px}.mat-form-field .mat-input-element,.mat-form-field .mat-icon{position:relative;bottom:3px}.mat-form-field .error{color:#cb7b7a}.column{display:flex;flex-direction:column}\n"] }]
102
+ }], ctorParameters: function () { return []; }, propDecorators: { label: [{
103
+ type: Input
104
+ }], preffixIcon: [{
105
+ type: Input
106
+ }], suffixIcon: [{
107
+ type: Input
108
+ }], required: [{
109
+ type: Input
110
+ }], hint: [{
111
+ type: Input
112
+ }], error: [{
113
+ type: Input
114
+ }], placeholder: [{
115
+ type: Input
116
+ }], type: [{
117
+ type: Input
118
+ }] } });
119
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmllbGQuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZmllbGQvZmllbGQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvZmllbGQvZmllbGQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ3JFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7Ozs7QUFjbkQsTUFBTSxPQUFPLGNBQWM7SUFrR3pCO1FBakRBOzs7OztXQUtHO1FBQ00sZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFFMUI7Ozs7O1dBS0c7UUFDTSxTQUFJLEdBQUcsTUFBTSxDQUFDO1FBRXZCOzs7OztXQUtHO1FBQ0gsVUFBSyxHQUFHLEVBQUUsQ0FBQztRQVVYOzs7OztXQUtHO1FBQ0gsa0JBQWEsR0FBRyxLQUFLLENBQUM7UUFFdEI7O1dBRUc7UUFDSCxhQUFRLEdBQUcsQ0FBQyxDQUFNLEVBQUUsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUMxQjs7V0FFRztRQUNILFlBQU8sR0FBRyxHQUFHLEVBQUUsR0FBRSxDQUFDLENBQUM7SUFFSixDQUFDO0lBRWhCLFFBQVE7UUFDTixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssVUFBVSxFQUFFO1lBQzVCLElBQUksQ0FBQyxhQUFhLEdBQUcsSUFBSSxDQUFDO1lBQzFCLElBQUksQ0FBQyxVQUFVLEdBQUcsWUFBWSxDQUFDO1NBQ2hDO0lBQ0gsQ0FBQztJQUVEOztPQUVHO0lBQ0gsT0FBTyxDQUFDLEtBQVU7UUFDaEIsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQztRQUNoQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDZixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUM1QixDQUFDO0lBRUQsVUFBVSxDQUFDLEtBQVU7UUFDbkIsSUFBSSxLQUFLLEVBQUU7WUFDVCxJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUssSUFBSSxFQUFFLENBQUM7U0FDMUI7YUFBTTtZQUNMLElBQUksQ0FBQyxLQUFLLEdBQUcsRUFBRSxDQUFDO1NBQ2pCO0lBQ0gsQ0FBQztJQUVELGdCQUFnQixDQUFDLEVBQU87UUFDdEIsSUFBSSxDQUFDLFFBQVEsR0FBRyxFQUFFLENBQUM7SUFDckIsQ0FBQztJQUVELGlCQUFpQixDQUFDLEVBQU87UUFDdkIsSUFBSSxDQUFDLE9BQU8sR0FBRyxFQUFFLENBQUM7SUFDcEIsQ0FBQztJQUVELGdCQUFnQixDQUFDLFVBQW1CO1FBQ2xDLElBQUksQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFDO0lBQy9CLENBQUM7SUFFRCxpQkFBaUI7UUFDZixJQUFJLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDdEIsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsSUFBSSxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxVQUFVLENBQUM7WUFDM0QsSUFBSSxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsSUFBSSxLQUFLLFVBQVUsQ0FBQyxDQUFDLENBQUMsWUFBWSxDQUFDLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQztTQUM5RTtJQUNILENBQUM7OzRHQTdJVSxjQUFjO2dHQUFkLGNBQWMsbU5BUmQ7UUFDVDtZQUNFLE9BQU8sRUFBRSxpQkFBaUI7WUFDMUIsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxjQUFjLENBQUM7WUFDN0MsS0FBSyxFQUFFLElBQUk7U0FDWjtLQUNGLDBCQ2JILHFxQkFTTTs0RkRNTyxjQUFjO2tCQVoxQixTQUFTOytCQUNFLFVBQVUsYUFHVDt3QkFDVDs0QkFDRSxPQUFPLEVBQUUsaUJBQWlCOzRCQUMxQixXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxlQUFlLENBQUM7NEJBQzdDLEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzBFQVNRLEtBQUs7c0JBQWIsS0FBSztnQkFRRyxXQUFXO3NCQUFuQixLQUFLO2dCQVFHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBUUcsUUFBUTtzQkFBaEIsS0FBSztnQkFRRyxJQUFJO3NCQUFaLEtBQUs7Z0JBUUcsS0FBSztzQkFBYixLQUFLO2dCQVFHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBUUcsSUFBSTtzQkFBWixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBmb3J3YXJkUmVmLCBJbnB1dCwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOR19WQUxVRV9BQ0NFU1NPUiB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAndWktZmllbGQnLFxuICB0ZW1wbGF0ZVVybDogJy4vZmllbGQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9maWVsZC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IEZpZWxkQ29tcG9uZW50KSxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgIH0sXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIEZpZWxkQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgLyoqXG4gICAqIEZvcm0gZmllbGQgbGFiZWxcbiAgICpcbiAgICogQHR5cGUge3N0cmluZ31cbiAgICogQG1lbWJlcm9mIEZpZWxkQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBsYWJlbDogc3RyaW5nO1xuXG4gIC8qKlxuICAgKiBQcmVmZml4IGljb24gKGJlZm9yZSBpbnB1dCB0ZXh0KVxuICAgKlxuICAgKiBAdHlwZSB7c3RyaW5nfVxuICAgKiBAbWVtYmVyb2YgRmllbGRDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHByZWZmaXhJY29uOiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIFN1ZmZpeCBpY29uIChhZnRlciBpbnB1dCB0ZXh0KVxuICAgKlxuICAgKiBAdHlwZSB7c3RyaW5nfVxuICAgKiBAbWVtYmVyb2YgRmllbGRDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHN1ZmZpeEljb246IHN0cmluZztcblxuICAvKipcbiAgICogSW5wdXQgaXMgcmVxdWlyZWQgb3Igbm90XG4gICAqXG4gICAqIEB0eXBlIHtib29sZWFufVxuICAgKiBAbWVtYmVyb2YgRmllbGRDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHJlcXVpcmVkOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBIaW50IHRleHRcbiAgICpcbiAgICogQHR5cGUge3N0cmluZ31cbiAgICogQG1lbWJlcm9mIEZpZWxkQ29tcG9uZW50XG4gICAqL1xuICBASW5wdXQoKSBoaW50OiBzdHJpbmc7XG5cbiAgLyoqXG4gICAqIEVycm9yIHRleHQgKHdpbGwgcmVwbGFjZSBoaW50KVxuICAgKlxuICAgKiBAdHlwZSB7c3RyaW5nfVxuICAgKiBAbWVtYmVyb2YgRmllbGRDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIGVycm9yOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG5cbiAgLyoqXG4gICAqIElucHV0IHBsYWNlaG9sZGVyXG4gICAqXG4gICAqIEB0eXBlIHtzdHJpbmd9XG4gICAqIEBtZW1iZXJvZiBGaWVsZENvbXBvbmVudFxuICAgKi9cbiAgQElucHV0KCkgcGxhY2Vob2xkZXIgPSAnJztcblxuICAvKipcbiAgICogSW5wdXQgdHlwZVxuICAgKlxuICAgKiBAdHlwZSB7c3RyaW5nfVxuICAgKiBAbWVtYmVyb2YgRmllbGRDb21wb25lbnRcbiAgICovXG4gIEBJbnB1dCgpIHR5cGUgPSAndGV4dCc7XG5cbiAgLyoqXG4gICAqIElucHV0IHZhbHVlXG4gICAqXG4gICAqIEB0eXBlIHtzdHJpbmd9XG4gICAqIEBtZW1iZXJvZiBGaWVsZENvbXBvbmVudFxuICAgKi9cbiAgdmFsdWUgPSAnJztcblxuICAvKipcbiAgICogRGV0ZXJtaW5lcyBpZiBpbnB1dCBpcyBkaXNhYmxlZFxuICAgKlxuICAgKiBAdHlwZSB7Ym9vbGVhbn1cbiAgICogQG1lbWJlcm9mIEZpZWxkQ29tcG9uZW50XG4gICAqL1xuICBpc0Rpc2FibGVkOiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBEZXRlcm1pbmVzIGlmIGZpZWxkIHdpbGwgYmUgYSBwYXNzd29yZCBpbnB1dC4gV2lsbCB3b3JrIGlmIGlucHV0IHR5cGUgaXMgc2V0IHRvICdwYXNzd29yZCdcbiAgICpcbiAgICogQHR5cGUge2Jvb2xlYW59XG4gICAqIEBtZW1iZXJvZiBGaWVsZENvbXBvbmVudFxuICAgKi9cbiAgcGFzc3dvcmRGaWVsZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBvbkNoYW5nZSA9IChfOiBhbnkpID0+IHt9O1xuICAvKipcbiAgICogQGlnbm9yZVxuICAgKi9cbiAgb25Ub3VjaCA9ICgpID0+IHt9O1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy50eXBlID09PSAncGFzc3dvcmQnKSB7XG4gICAgICB0aGlzLnBhc3N3b3JkRmllbGQgPSB0cnVlO1xuICAgICAgdGhpcy5zdWZmaXhJY29uID0gJ3Zpc2liaWxpdHknO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBAaWdub3JlXG4gICAqL1xuICBvbklucHV0KGV2ZW50OiBhbnkpIHtcbiAgICB0aGlzLnZhbHVlID0gZXZlbnQudGFyZ2V0LnZhbHVlO1xuICAgIHRoaXMub25Ub3VjaCgpO1xuICAgIHRoaXMub25DaGFuZ2UodGhpcy52YWx1ZSk7XG4gIH1cblxuICB3cml0ZVZhbHVlKHZhbHVlOiBhbnkpOiB2b2lkIHtcbiAgICBpZiAodmFsdWUpIHtcbiAgICAgIHRoaXMudmFsdWUgPSB2YWx1ZSB8fCAnJztcbiAgICB9IGVsc2Uge1xuICAgICAgdGhpcy52YWx1ZSA9ICcnO1xuICAgIH1cbiAgfVxuXG4gIHJlZ2lzdGVyT25DaGFuZ2UoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25DaGFuZ2UgPSBmbjtcbiAgfVxuXG4gIHJlZ2lzdGVyT25Ub3VjaGVkKGZuOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLm9uVG91Y2ggPSBmbjtcbiAgfVxuXG4gIHNldERpc2FibGVkU3RhdGUoaXNEaXNhYmxlZDogYm9vbGVhbik6IHZvaWQge1xuICAgIHRoaXMuaXNEaXNhYmxlZCA9IGlzRGlzYWJsZWQ7XG4gIH1cblxuICBzdWZmaXhJY29uQ2xpY2tlZCgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5wYXNzd29yZEZpZWxkKSB7XG4gICAgICB0aGlzLnR5cGUgPSB0aGlzLnR5cGUgPT09ICdwYXNzd29yZCcgPyAndGV4dCcgOiAncGFzc3dvcmQnO1xuICAgICAgdGhpcy5zdWZmaXhJY29uID0gdGhpcy50eXBlID09PSAncGFzc3dvcmQnID8gJ3Zpc2liaWxpdHknIDogJ3Zpc2liaWxpdHlfb2ZmJztcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjb2x1bW5cIj5cbiAgPG1hdC1sYWJlbCAqbmdJZj1cImxhYmVsXCI+e3sgbGFiZWwgfX0gPHNwYW4gKm5nSWY9XCJyZXF1aXJlZFwiPio8L3NwYW4+PC9tYXQtbGFiZWw+XG4gIDxtYXQtZm9ybS1maWVsZCBhcHBlYXJhbmNlPVwib3V0bGluZVwiIFtjb2xvcl09XCJlcnJvciA/ICd3YXJuJyA6ICdwcmltYXJ5J1wiPlxuICAgIDxtYXQtaWNvbiBtYXRQcmVmaXggKm5nSWY9XCJwcmVmZml4SWNvblwiPnt7IHByZWZmaXhJY29uIH19PC9tYXQtaWNvbj5cbiAgICA8aW5wdXQgbWF0SW5wdXQgW3BsYWNlaG9sZGVyXT1cInBsYWNlaG9sZGVyXCIgW3ZhbHVlXT1cInZhbHVlXCIgW2Rpc2FibGVkXT1cImlzRGlzYWJsZWRcIiBbdHlwZV09XCJ0eXBlXCIgKGlucHV0KT1cIm9uSW5wdXQoJGV2ZW50KVwiPlxuICAgIDxtYXQtaWNvbiBtYXRTdWZmaXggKm5nSWY9XCJzdWZmaXhJY29uXCIgKGNsaWNrKT1cInN1ZmZpeEljb25DbGlja2VkKClcIj57eyBzdWZmaXhJY29uIH19PC9tYXQtaWNvbj5cbiAgICA8bWF0LWhpbnQgKm5nSWY9XCJoaW50ICYmICFlcnJvclwiPnt7IGhpbnQgfX08L21hdC1oaW50PlxuICAgIDxtYXQtaGludCBjbGFzcz1cImVycm9yXCIgKm5nSWY9XCJlcnJvclwiPnt7IGVycm9yIH19PC9tYXQtaGludD5cbiAgPC9tYXQtZm9ybS1maWVsZD5cbjwvZGl2PiJdfQ==