@pega/angular-sdk-overrides 0.25.16 → 0.25.18

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 (35) hide show
  1. package/lib/field/date-time/date-time.component.scss +46 -40
  2. package/lib/field/date-time/date-time.component.ts +27 -0
  3. package/lib/field/dropdown/dropdown.component.html +2 -0
  4. package/lib/field/dropdown/dropdown.component.ts +10 -18
  5. package/lib/field/field.base.ts +2 -1
  6. package/lib/infra/view/view.component.ts +2 -3
  7. package/lib/template/base/details-template-base.ts +31 -58
  8. package/lib/template/details/details.component.html +16 -4
  9. package/lib/template/details/details.component.scss +9 -2
  10. package/lib/template/details/details.component.ts +3 -33
  11. package/lib/template/details-narrow-wide/details-narrow-wide.component.html +16 -4
  12. package/lib/template/details-narrow-wide/details-narrow-wide.component.scss +8 -1
  13. package/lib/template/details-narrow-wide/details-narrow-wide.component.ts +3 -38
  14. package/lib/template/details-one-column/details-one-column.component.html +16 -4
  15. package/lib/template/details-one-column/details-one-column.component.scss +14 -0
  16. package/lib/template/details-one-column/details-one-column.component.ts +3 -39
  17. package/lib/template/details-three-column/details-three-column.component.html +16 -10
  18. package/lib/template/details-three-column/details-three-column.component.scss +8 -1
  19. package/lib/template/details-three-column/details-three-column.component.ts +3 -45
  20. package/lib/template/details-two-column/details-two-column.component.html +16 -4
  21. package/lib/template/details-two-column/details-two-column.component.scss +8 -1
  22. package/lib/template/details-two-column/details-two-column.component.ts +3 -43
  23. package/lib/template/details-wide-narrow/details-wide-narrow.component.html +16 -4
  24. package/lib/template/details-wide-narrow/details-wide-narrow.component.scss +8 -1
  25. package/lib/template/details-wide-narrow/details-wide-narrow.component.ts +3 -40
  26. package/lib/template/field-value-list/field-value-list.component.scss +17 -0
  27. package/package.json +1 -1
  28. package/lib/designSystemExtension/material-details/material-details.component.html +0 -40
  29. package/lib/designSystemExtension/material-details/material-details.component.scss +0 -116
  30. package/lib/designSystemExtension/material-details/material-details.component.spec.ts +0 -24
  31. package/lib/designSystemExtension/material-details/material-details.component.ts +0 -31
  32. package/lib/designSystemExtension/material-details-fields/material-details-fields.component.html +0 -41
  33. package/lib/designSystemExtension/material-details-fields/material-details-fields.component.scss +0 -34
  34. package/lib/designSystemExtension/material-details-fields/material-details-fields.component.spec.ts +0 -22
  35. package/lib/designSystemExtension/material-details-fields/material-details-fields.component.ts +0 -61
@@ -4,14 +4,20 @@
4
4
  ></component-mapper>
5
5
 
6
6
  <ng-template #detailsContent>
7
- <component-mapper
8
- name="MaterialDetails"
9
- [props]="{
10
- arFields$: arFields$,
11
- arFields2$: arFields2$,
12
- arFields3$: arFields3$,
13
- arHighlightedFields: highlightedDataArr,
14
- layout: 'three-column'
15
- }"
16
- ></component-mapper>
7
+ <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
8
+ <div class="psdk-grid-highlighted">
9
+ <component-mapper
10
+ *ngFor="let field of highlightedDataArr"
11
+ [name]="field.getComponentName()"
12
+ [props]="{ pConn$: field, formGroup$ }"
13
+ ></component-mapper>
14
+ </div>
15
+ </ng-container>
16
+ <div class="psdk-grid-filter-3">
17
+ <component-mapper
18
+ *ngFor="let child of children"
19
+ [name]="child.getPConnect().getComponentName()"
20
+ [props]="{ pConn$: child.getPConnect(), formGroup$ }"
21
+ ></component-mapper>
22
+ </div>
17
23
  </ng-template>
@@ -1,7 +1,14 @@
1
- .psdk-grid-filter {
1
+ .psdk-grid-filter-3 {
2
2
  display: grid;
3
3
  grid-template-columns: repeat(3, minmax(0, 1fr));
4
4
  column-gap: calc(2 * 0.5rem);
5
5
  row-gap: calc(2 * 0.5rem);
6
6
  align-items: start;
7
7
  }
8
+
9
+ .psdk-grid-highlighted {
10
+ display: flex;
11
+ flex-wrap: wrap;
12
+ align-items: flex-start;
13
+ gap: calc(0.5rem) calc(5rem);
14
+ }
@@ -1,4 +1,5 @@
1
1
  import { Component, forwardRef } from '@angular/core';
2
+ import { CommonModule } from '@angular/common';
2
3
  import { ComponentMapperComponent } from '@pega/angular-sdk-components';
3
4
  import { DetailsTemplateBase } from '@pega/angular-sdk-components';
4
5
 
@@ -6,49 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
6
7
  selector: 'app-details-three-column',
7
8
  templateUrl: './details-three-column.component.html',
8
9
  styleUrls: ['./details-three-column.component.scss'],
9
- imports: [forwardRef(() => ComponentMapperComponent)]
10
+ imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
10
11
  })
11
- export class DetailsThreeColumnComponent extends DetailsTemplateBase {
12
- override pConn$: typeof PConnect;
13
-
14
- showHighlightedData: boolean;
15
- highlightedDataArr: any;
16
-
17
- arFields$: any[] = [];
18
- arFields2$: any[] = [];
19
- arFields3$: any[] = [];
20
-
21
- override updateSelf() {
22
- this.updateDetailsProps();
23
- const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
24
- this.showHighlightedData = rawMetaData?.showHighlightedData;
25
-
26
- if (this.showHighlightedData) {
27
- const highlightedData = rawMetaData?.highlightedData;
28
- this.highlightedDataArr = highlightedData.map(field => {
29
- field.config.displayMode = 'STACKED_LARGE_VAL';
30
-
31
- if (field.config.value === '@P .pyStatusWork') {
32
- field.type = 'TextInput';
33
- field.config.displayAsStatus = true;
34
- }
35
-
36
- return field;
37
- });
38
- }
39
-
40
- this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
41
- this.pConn$.setInheritedProp('readOnly', true);
42
-
43
- const kids = this.pConn$.getChildren() as any[];
44
- for (const kid of kids) {
45
- if (kids.indexOf(kid) == 0) {
46
- this.arFields$ = this.processDetailFields(kid);
47
- } else if (kids.indexOf(kid) == 1) {
48
- this.arFields2$ = this.processDetailFields(kid);
49
- } else {
50
- this.arFields3$ = this.processDetailFields(kid);
51
- }
52
- }
53
- }
54
- }
12
+ export class DetailsThreeColumnComponent extends DetailsTemplateBase {}
@@ -4,8 +4,20 @@
4
4
  ></component-mapper>
5
5
 
6
6
  <ng-template #detailsContent>
7
- <component-mapper
8
- name="MaterialDetails"
9
- [props]="{ arFields$: arFields$, arFields2$: arFields2$, arHighlightedFields: highlightedDataArr, layout: 'two-column' }"
10
- ></component-mapper>
7
+ <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
8
+ <div class="psdk-grid-highlighted">
9
+ <component-mapper
10
+ *ngFor="let field of highlightedDataArr"
11
+ [name]="field.getComponentName()"
12
+ [props]="{ pConn$: field, formGroup$ }"
13
+ ></component-mapper>
14
+ </div>
15
+ </ng-container>
16
+ <div class="psdk-grid-filter-2">
17
+ <component-mapper
18
+ *ngFor="let child of children"
19
+ [name]="child.getPConnect().getComponentName()"
20
+ [props]="{ pConn$: child.getPConnect(), formGroup$ }"
21
+ ></component-mapper>
22
+ </div>
11
23
  </ng-template>
@@ -1,7 +1,14 @@
1
- .psdk-grid-filter {
1
+ .psdk-grid-filter-2 {
2
2
  display: grid;
3
3
  grid-template-columns: repeat(2, minmax(0, 1fr));
4
4
  column-gap: calc(2 * 0.5rem);
5
5
  row-gap: calc(2 * 0.5rem);
6
6
  align-items: start;
7
7
  }
8
+
9
+ .psdk-grid-highlighted {
10
+ display: flex;
11
+ flex-wrap: wrap;
12
+ align-items: flex-start;
13
+ gap: calc(0.5rem) calc(5rem);
14
+ }
@@ -1,4 +1,5 @@
1
1
  import { Component, forwardRef } from '@angular/core';
2
+ import { CommonModule } from '@angular/common';
2
3
  import { ComponentMapperComponent } from '@pega/angular-sdk-components';
3
4
  import { DetailsTemplateBase } from '@pega/angular-sdk-components';
4
5
 
@@ -6,47 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
6
7
  selector: 'app-details-two-column',
7
8
  templateUrl: './details-two-column.component.html',
8
9
  styleUrls: ['./details-two-column.component.scss'],
9
- imports: [forwardRef(() => ComponentMapperComponent)]
10
+ imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
10
11
  })
11
- export class DetailsTwoColumnComponent extends DetailsTemplateBase {
12
- override pConn$: typeof PConnect;
13
-
14
- showHighlightedData: boolean;
15
- highlightedDataArr: any;
16
-
17
- arFields$: any[] = [];
18
- arFields2$: any[] = [];
19
- arFields3$: any[] = [];
20
-
21
- override updateSelf() {
22
- this.updateDetailsProps();
23
- const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
24
- this.showHighlightedData = rawMetaData?.showHighlightedData;
25
-
26
- if (this.showHighlightedData) {
27
- const highlightedData = rawMetaData?.highlightedData;
28
- this.highlightedDataArr = highlightedData?.map(field => {
29
- field.config.displayMode = 'STACKED_LARGE_VAL';
30
-
31
- if (field.config.value === '@P .pyStatusWork') {
32
- field.type = 'TextInput';
33
- field.config.displayAsStatus = true;
34
- }
35
-
36
- return field;
37
- });
38
- }
39
-
40
- this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
41
- this.pConn$.setInheritedProp('readOnly', true);
42
-
43
- const kids = this.pConn$.getChildren() as any[];
44
- for (const kid of kids) {
45
- if (kids.indexOf(kid) == 0) {
46
- this.arFields$ = this.processDetailFields(kid);
47
- } else {
48
- this.arFields2$ = this.processDetailFields(kid);
49
- }
50
- }
51
- }
52
- }
12
+ export class DetailsTwoColumnComponent extends DetailsTemplateBase {}
@@ -4,8 +4,20 @@
4
4
  ></component-mapper>
5
5
 
6
6
  <ng-template #detailsContent>
7
- <component-mapper
8
- name="MaterialDetails"
9
- [props]="{ arFields$: arFields$, arFields2$: arFields2$, arHighlightedFields: highlightedDataArr, layout: 'wide-narrow' }"
10
- ></component-mapper>
7
+ <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
8
+ <div class="psdk-grid-highlighted">
9
+ <component-mapper
10
+ *ngFor="let field of highlightedDataArr"
11
+ [name]="field.getComponentName()"
12
+ [props]="{ pConn$: field, formGroup$ }"
13
+ ></component-mapper>
14
+ </div>
15
+ </ng-container>
16
+ <div class="psdk-grid-filter-wide-narrow">
17
+ <component-mapper
18
+ *ngFor="let child of children"
19
+ [name]="child.getPConnect().getComponentName()"
20
+ [props]="{ pConn$: child.getPConnect(), formGroup$ }"
21
+ ></component-mapper>
22
+ </div>
11
23
  </ng-template>
@@ -1,7 +1,14 @@
1
- .psdk-grid-filter {
1
+ .psdk-grid-filter-wide-narrow {
2
2
  display: grid;
3
3
  grid-template-columns: 7fr 3fr;
4
4
  column-gap: calc(2 * 0.5rem);
5
5
  row-gap: calc(2 * 0.5rem);
6
6
  align-items: start;
7
7
  }
8
+
9
+ .psdk-grid-highlighted {
10
+ display: flex;
11
+ flex-wrap: wrap;
12
+ align-items: flex-start;
13
+ gap: calc(0.5rem) calc(5rem);
14
+ }
@@ -1,4 +1,5 @@
1
1
  import { Component, forwardRef } from '@angular/core';
2
+ import { CommonModule } from '@angular/common';
2
3
  import { ComponentMapperComponent } from '@pega/angular-sdk-components';
3
4
  import { DetailsTemplateBase } from '@pega/angular-sdk-components';
4
5
 
@@ -6,44 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
6
7
  selector: 'app-details-wide-narrow',
7
8
  templateUrl: './details-wide-narrow.component.html',
8
9
  styleUrls: ['./details-wide-narrow.component.scss'],
9
- imports: [forwardRef(() => ComponentMapperComponent)]
10
+ imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
10
11
  })
11
- export class DetailsWideNarrowComponent extends DetailsTemplateBase {
12
- override pConn$: typeof PConnect;
13
-
14
- highlightedDataArr: any[] = [];
15
- showHighlightedData: boolean;
16
- arFields$: any[] = [];
17
- arFields2$: any[] = [];
18
- override updateSelf() {
19
- this.updateDetailsProps();
20
- const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
21
- this.showHighlightedData = rawMetaData?.showHighlightedData;
22
-
23
- if (this.showHighlightedData) {
24
- const highlightedData = rawMetaData?.highlightedData;
25
- this.highlightedDataArr = highlightedData.map(field => {
26
- field.config.displayMode = 'STACKED_LARGE_VAL';
27
-
28
- if (field.config.value === '@P .pyStatusWork') {
29
- field.type = 'TextInput';
30
- field.config.displayAsStatus = true;
31
- }
32
-
33
- return field;
34
- });
35
- }
36
-
37
- this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
38
- this.pConn$.setInheritedProp('readOnly', true);
39
-
40
- const kids = this.pConn$.getChildren() as any[];
41
- for (const kid of kids) {
42
- if (kids.indexOf(kid) == 0) {
43
- this.arFields$ = this.processDetailFields(kid);
44
- } else {
45
- this.arFields2$ = this.processDetailFields(kid);
46
- }
47
- }
48
- }
49
- }
12
+ export class DetailsWideNarrowComponent extends DetailsTemplateBase {}
@@ -21,3 +21,20 @@
21
21
  .psdk-val-labels-left {
22
22
  white-space: break-spaces;
23
23
  }
24
+
25
+ .psdk-container-stacked-large-val {
26
+ margin: 8px 0;
27
+ }
28
+
29
+ .psdk-container-stacked-large-val .psdk-grid-label {
30
+ color: rgba(0, 0, 0, 0.6);
31
+ font-size: 0.875rem;
32
+ font-weight: 400;
33
+ line-height: 1.5;
34
+ }
35
+
36
+ .psdk-val-stacked {
37
+ color: rgba(0, 0, 0, 0.87);
38
+ font-size: 1.25rem;
39
+ line-height: 1.5;
40
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/angular-sdk-overrides",
3
- "version": "0.25.16",
3
+ "version": "0.25.18",
4
4
  "description": "Angular SDK - Code for overriding components",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -1,40 +0,0 @@
1
- <div id="details-fields-list">
2
- <div
3
- *ngIf="arHighlightedFields && arHighlightedFields.length > 0"
4
- [ngClass]="{
5
- 'psdk-grid-filter-1': this.layout === 'one-column',
6
- 'psdk-grid-filter-2': this.layout === 'two-column',
7
- 'psdk-grid-filter-3': this.layout === 'three-column',
8
- 'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
9
- 'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
10
- }"
11
- >
12
- <div *ngFor="let field of arHighlightedFields">
13
- <div class="psdk-details-fields-label">
14
- {{ field.config.label }}
15
- </div>
16
- <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
17
- <span *ngSwitchCase="'textinput'" class="psdk-details-text-style-hf">{{ _getValue(field.config.value) }}</span>
18
- <span *ngSwitchCase="'status'" class="psdk-details-status-style-hf">{{ _getValue(field.config.value) }}</span>
19
- <a *ngSwitchCase="'phone'" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
20
- <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
21
- <span *ngSwitchCase="'date'" class="psdk-details-text-style-hf">{{ _formatDate(field.config.value, field.type) }}</span>
22
- <span *ngSwitchCase="'caseoperator'"></span>
23
- <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>
24
- </div>
25
- </div>
26
- </div>
27
- <div
28
- [ngClass]="{
29
- 'psdk-grid-filter-1': this.layout === 'one-column',
30
- 'psdk-grid-filter-2': this.layout === 'two-column',
31
- 'psdk-grid-filter-3': this.layout === 'three-column',
32
- 'psdk-grid-filter-wide-narrow': this.layout === 'wide-narrow',
33
- 'psdk-grid-filter-narrow-wide': this.layout === 'narrow-wide'
34
- }"
35
- >
36
- <component-mapper *ngIf="arFields$" name="DetailsFields" [props]="{ arFields$: arFields$ }"></component-mapper>
37
- <component-mapper *ngIf="arFields2$" name="DetailsFields" [props]="{ arFields$: arFields2$ }"></component-mapper>
38
- <component-mapper *ngIf="arFields3$" name="DetailsFields" [props]="{ arFields$: arFields3$ }"></component-mapper>
39
- </div>
40
- </div>
@@ -1,116 +0,0 @@
1
- .psdk-details-group {
2
- display: flex;
3
- flex-direction: row;
4
- justify-content: space-between;
5
- }
6
- .psdk-details-fields {
7
- padding: calc(2 * 0.5rem);
8
- grid-row-gap: calc(2 * 0.5rem);
9
- }
10
-
11
- .psdk-details-fields-primary {
12
- width: 100%;
13
- display: grid;
14
- grid-template-columns: 1fr;
15
- grid-column-gap: calc(2 * 0.5rem);
16
- grid-row-gap: calc(1 * 0.5rem);
17
- }
18
-
19
- .psdk-details-fields-single {
20
- display: grid;
21
- grid-template-columns: 20ch 1fr;
22
- grid-column-gap: calc(2 * 0.5rem);
23
- }
24
-
25
- .psdk-details-fields-label {
26
- margin: 8px 0px;
27
- }
28
-
29
- .psdk-details-fields-value {
30
- word-break: break-word;
31
- grid-column-start: 2;
32
- grid-row-start: 1;
33
- }
34
-
35
- span.psdk-details-text-style-hf {
36
- font-weight: 500;
37
- font-size: 1.25rem;
38
- }
39
-
40
- span.psdk-details-text-style {
41
- font-weight: 400;
42
- }
43
-
44
- span.psdk-details-status-style {
45
- border-radius: calc(0.25 * 0.5rem);
46
- display: inline-block;
47
- font-size: 0.75rem;
48
- font-weight: bold;
49
- line-height: calc(0.5rem * 2.5);
50
- height: calc(0.5rem * 2.5);
51
- padding: 0 0.5rem;
52
- text-transform: uppercase;
53
- }
54
-
55
- .psdk-grid-filter {
56
- display: grid;
57
- grid-template-columns: repeat(2, minmax(0, 1fr));
58
- column-gap: calc(2 * 0.5rem);
59
- row-gap: calc(2 * 0.5rem);
60
- align-items: start;
61
- }
62
-
63
- .psdk-csf-primary-field-value {
64
- margin: 8px 0;
65
- }
66
-
67
- span.psdk-details-status-style-hf {
68
- border-radius: calc(0.25 * 0.5rem);
69
- display: inline-block;
70
- font-size: 1.25rem;
71
- font-weight: 500;
72
- line-height: calc(0.5rem * 2.5);
73
- height: calc(0.5rem * 2.5);
74
- padding: 0 0.5rem;
75
- text-transform: uppercase;
76
- }
77
-
78
- .psdk-grid-filter-1 {
79
- display: grid;
80
- grid-template-columns: repeat(1, minmax(0, 1fr));
81
- column-gap: calc(2 * 0.5rem);
82
- row-gap: calc(2 * 0.5rem);
83
- align-items: start;
84
- }
85
-
86
- .psdk-grid-filter-2 {
87
- display: grid;
88
- grid-template-columns: repeat(2, minmax(0, 1fr));
89
- column-gap: calc(2 * 0.5rem);
90
- row-gap: calc(2 * 0.5rem);
91
- align-items: start;
92
- }
93
-
94
- .psdk-grid-filter-3 {
95
- display: grid;
96
- grid-template-columns: repeat(3, minmax(0, 1fr));
97
- column-gap: calc(2 * 0.5rem);
98
- row-gap: calc(2 * 0.5rem);
99
- align-items: start;
100
- }
101
-
102
- .psdk-grid-filter-wide-narrow {
103
- display: grid;
104
- grid-template-columns: 7fr 3fr;
105
- column-gap: calc(2 * 0.5rem);
106
- row-gap: calc(2 * 0.5rem);
107
- align-items: start;
108
- }
109
-
110
- .psdk-grid-filter-narrow-wide {
111
- display: grid;
112
- grid-template-columns: 3fr 7fr;
113
- column-gap: calc(2 * 0.5rem);
114
- row-gap: calc(2 * 0.5rem);
115
- align-items: start;
116
- }
@@ -1,24 +0,0 @@
1
- import { ComponentFixture, TestBed } from '@angular/core/testing';
2
-
3
- import { MaterialDetailsComponent } from './material-details.component';
4
-
5
- describe('MaterialDetailsComponent', () => {
6
- let component: MaterialDetailsComponent;
7
- let fixture: ComponentFixture<MaterialDetailsComponent>;
8
-
9
- beforeEach(async () => {
10
- await TestBed.configureTestingModule({
11
- declarations: [MaterialDetailsComponent]
12
- }).compileComponents();
13
- });
14
-
15
- beforeEach(() => {
16
- fixture = TestBed.createComponent(MaterialDetailsComponent);
17
- component = fixture.componentInstance;
18
- fixture.detectChanges();
19
- });
20
-
21
- it('should create', () => {
22
- expect(component).toBeTruthy();
23
- });
24
- });
@@ -1,31 +0,0 @@
1
- import { Component, Input, forwardRef } from '@angular/core';
2
- import { CommonModule } from '@angular/common';
3
- import { Utils } from '@pega/angular-sdk-components';
4
- import { ComponentMapperComponent } from '@pega/angular-sdk-components';
5
-
6
- @Component({
7
- selector: 'app-material-details',
8
- templateUrl: './material-details.component.html',
9
- styleUrls: ['./material-details.component.scss'],
10
- imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
11
- })
12
- export class MaterialDetailsComponent {
13
- constructor(private utils: Utils) {}
14
-
15
- @Input() arFields$: any[];
16
- @Input() arFields2$: any[];
17
- @Input() arFields3$: any[];
18
- @Input() arHighlightedFields: any[];
19
- @Input() layout: any;
20
-
21
- _getValue(configValue) {
22
- if (configValue && configValue != '') {
23
- return configValue;
24
- }
25
- return '---';
26
- }
27
-
28
- _formatDate(dateValue: string, dateFormat: string): string {
29
- return this.utils.generateDate(dateValue, dateFormat);
30
- }
31
- }
@@ -1,41 +0,0 @@
1
- <div id="details-fields-list">
2
- <div *ngFor="let field of arFields$">
3
- <div *ngIf="field.type === 'group'; else noGroup">
4
- <component-mapper name="Group" [props]="{ pConn$: field.pConn }"></component-mapper>
5
- </div>
6
- <ng-template #noGroup>
7
- <div *ngIf="field.type === 'reference'; else showDetails">
8
- <component-mapper name="reference" [props]="{ pConn$: field.pConn }"></component-mapper>
9
- </div>
10
- </ng-template>
11
-
12
- <ng-template #showDetails>
13
- <div class="psdk-grid-filter" *ngIf="field.config.label && _getVisibility(field.config)">
14
- <div class="psdk-details-fields-label">
15
- {{ field.config.label }}
16
- </div>
17
- <div [ngSwitch]="field.type.toLowerCase()" class="psdk-csf-primary-field-value">
18
- <span *ngSwitchCase="'textinput'" class="psdk-details-text-style">{{ _getValue(field.config.value) }}</span>
19
- <span *ngSwitchCase="'status'" class="psdk-details-status-style">{{ _getValue(field.config.value) }}</span>
20
- <a *ngSwitchCase="'phone'" class="psdk-primary-color" as="a" href="tel: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
21
- <a *ngSwitchCase="'email'" class="psdk-primary-color" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
22
- <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
23
- <span *ngSwitchCase="'decimal'" class="psdk-details-text-style">{{ _formatDecimal(field) }}</span>
24
- <span *ngSwitchCase="'currency'" class="psdk-details-text-style">{{ _formatCurrency(field) }}</span>
25
- <span *ngSwitchCase="'richtext'" class="psdk-details-text-style" [innerHTML]="_getValue(field.config.value)"></span>
26
- <ng-container *ngSwitchCase="'scalarlist'">
27
- <span *ngIf="field.config.componentType?.toLowerCase() === 'decimal'" class="psdk-details-text-style">{{ _formatDecimal(field) }}</span>
28
- <span *ngIf="field.config.componentType?.toLowerCase() === 'currency'" class="psdk-details-text-style">{{ _formatCurrency(field) }}</span>
29
- <span
30
- *ngIf="field.config.componentType?.toLowerCase() !== 'decimal' && field.config.componentType?.toLowerCase() !== 'currency'"
31
- class="psdk-details-text-style"
32
- >{{ _getValue(field.config.value) }}</span
33
- >
34
- </ng-container>
35
- <span *ngSwitchCase="'caseoperator'"></span>
36
- <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>
37
- </div>
38
- </div>
39
- </ng-template>
40
- </div>
41
- </div>
@@ -1,34 +0,0 @@
1
- .psdk-details-fields-label {
2
- margin: 8px 0px;
3
- }
4
-
5
- span.psdk-details-text-style-hf {
6
- font-weight: bold;
7
- }
8
-
9
- span.psdk-details-status-style-hf {
10
- border-radius: calc(0.25 * 0.5rem);
11
- display: inline-block;
12
- font-size: 0.75rem;
13
- font-weight: bold;
14
- line-height: calc(0.5rem * 2.5);
15
- height: calc(0.5rem * 2.5);
16
- padding: 0 0.5rem;
17
- text-transform: uppercase;
18
- }
19
-
20
- .psdk-grid-filter {
21
- display: grid;
22
- grid-template-columns: repeat(2, minmax(0, 1fr));
23
- column-gap: calc(2 * 0.5rem);
24
- row-gap: calc(2 * 0.5rem);
25
- align-items: start;
26
- }
27
-
28
- .psdk-csf-primary-field-value {
29
- margin: 8px 0;
30
- }
31
-
32
- .psdk-primary-color {
33
- color: var(--mat-sys-primary);
34
- }
@@ -1,22 +0,0 @@
1
- import { ComponentFixture, TestBed } from '@angular/core/testing';
2
-
3
- import { MaterialDetailsFieldsComponent } from './material-details-fields.component';
4
-
5
- describe('MaterialDetailsFieldsComponent', () => {
6
- let component: MaterialDetailsFieldsComponent;
7
- let fixture: ComponentFixture<MaterialDetailsFieldsComponent>;
8
-
9
- beforeEach(async () => {
10
- await TestBed.configureTestingModule({
11
- declarations: [MaterialDetailsFieldsComponent]
12
- }).compileComponents();
13
-
14
- fixture = TestBed.createComponent(MaterialDetailsFieldsComponent);
15
- component = fixture.componentInstance;
16
- fixture.detectChanges();
17
- });
18
-
19
- it('should create', () => {
20
- expect(component).toBeTruthy();
21
- });
22
- });