@pega/angular-sdk-overrides 0.25.1 → 0.25.3

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 (160) hide show
  1. package/lib/designSystemExtension/alert/alert.component.scss +3 -3
  2. package/lib/designSystemExtension/banner/banner.component.scss +12 -2
  3. package/lib/designSystemExtension/material-case-summary/material-case-summary.component.html +6 -3
  4. package/lib/designSystemExtension/material-case-summary/material-case-summary.component.scss +5 -34
  5. package/lib/designSystemExtension/material-details/material-details.component.scss +0 -5
  6. package/lib/designSystemExtension/material-details-fields/material-details-fields.component.html +2 -2
  7. package/lib/designSystemExtension/material-details-fields/material-details-fields.component.scss +4 -3
  8. package/lib/designSystemExtension/material-summary-item/material-summary-item.component.scss +2 -17
  9. package/lib/designSystemExtension/material-utility/material-utility.component.scss +1 -2
  10. package/lib/designSystemExtension/material-vertical-tabs/material-vertical-tabs.component.scss +1 -1
  11. package/lib/designSystemExtension/operator/operator.component.html +1 -1
  12. package/lib/designSystemExtension/operator/operator.component.scss +3 -10
  13. package/lib/designSystemExtension/operator/operator.component.ts +0 -1
  14. package/lib/designSystemExtension/pulse/pulse.component.scss +2 -2
  15. package/lib/designSystemExtension/rich-text-editor/rich-text-editor.component.scss +0 -1
  16. package/lib/designSystemExtension/wss-quick-create/wss-quick-create.component.scss +16 -8
  17. package/lib/field/auto-complete/auto-complete.component.html +0 -1
  18. package/lib/field/auto-complete/auto-complete.component.ts +35 -172
  19. package/lib/field/cancel-alert/cancel-alert.component.html +8 -12
  20. package/lib/field/cancel-alert/cancel-alert.component.scss +2 -3
  21. package/lib/field/cancel-alert/cancel-alert.component.ts +24 -36
  22. package/lib/field/check-box/check-box.component.html +0 -1
  23. package/lib/field/check-box/check-box.component.scss +0 -1
  24. package/lib/field/check-box/check-box.component.ts +19 -149
  25. package/lib/field/currency/currency.component.ts +36 -168
  26. package/lib/field/date/date.component.html +1 -1
  27. package/lib/field/date/date.component.ts +30 -150
  28. package/lib/field/date-time/date-time.component.ts +31 -149
  29. package/lib/field/decimal/decimal.component.ts +38 -163
  30. package/lib/field/dropdown/dropdown.component.ts +29 -151
  31. package/lib/field/email/email.component.ts +16 -155
  32. package/lib/field/field.base.ts +149 -0
  33. package/lib/field/group/group.component.ts +7 -4
  34. package/lib/field/integer/integer.component.ts +18 -157
  35. package/lib/field/location/location.component.ts +1 -1
  36. package/lib/field/multiselect/multiselect.component.ts +46 -148
  37. package/lib/field/multiselect/utils.ts +55 -47
  38. package/lib/field/object-reference/object-reference.component.html +17 -0
  39. package/lib/field/object-reference/object-reference.component.scss +0 -0
  40. package/lib/field/object-reference/object-reference.component.spec.ts +22 -0
  41. package/lib/field/object-reference/object-reference.component.ts +237 -0
  42. package/lib/field/percentage/percentage.component.ts +37 -154
  43. package/lib/field/phone/phone.component.ts +28 -142
  44. package/lib/field/radio-buttons/radio-buttons.component.scss +4 -2
  45. package/lib/field/radio-buttons/radio-buttons.component.ts +35 -161
  46. package/lib/field/rich-text/rich-text.component.ts +19 -90
  47. package/lib/field/scalar-list/scalar-list.component.ts +17 -72
  48. package/lib/field/selectable-card/selectable-card.component.html +54 -24
  49. package/lib/field/selectable-card/selectable-card.component.scss +11 -0
  50. package/lib/field/selectable-card/selectable-card.component.ts +16 -52
  51. package/lib/field/semantic-link/semantic-link.component.html +4 -8
  52. package/lib/field/semantic-link/semantic-link.component.scss +0 -13
  53. package/lib/field/semantic-link/semantic-link.component.ts +165 -5
  54. package/lib/field/text/text.component.scss +0 -1
  55. package/lib/field/text-area/text-area.component.ts +18 -152
  56. package/lib/field/text-input/text-input.component.ts +16 -155
  57. package/lib/field/time/time.component.ts +17 -151
  58. package/lib/field/url/url.component.ts +16 -154
  59. package/lib/field/user-reference/user-reference.component.scss +0 -1
  60. package/lib/field/user-reference/user-reference.component.ts +2 -3
  61. package/lib/infra/Containers/flow-container/flow-container.component.ts +5 -7
  62. package/lib/infra/Containers/modal-view-container/modal-view-container.component.ts +5 -10
  63. package/lib/infra/Containers/view-container/helper.ts +35 -2
  64. package/lib/infra/Containers/view-container/view-container.component.ts +1 -1
  65. package/lib/infra/action-buttons/action-buttons.component.html +13 -8
  66. package/lib/infra/action-buttons/action-buttons.component.scss +23 -0
  67. package/lib/infra/action-buttons/action-buttons.component.ts +1 -2
  68. package/lib/infra/assignment/assignment.component.ts +8 -6
  69. package/lib/infra/assignment-card/assignment-card.component.html +1 -2
  70. package/lib/infra/assignment-card/assignment-card.component.scss +0 -4
  71. package/lib/infra/assignment-card/assignment-card.component.ts +21 -4
  72. package/lib/infra/defer-load/defer-load.component.html +6 -2
  73. package/lib/infra/defer-load/defer-load.component.ts +16 -10
  74. package/lib/infra/multi-step/multi-step.component.scss +1 -21
  75. package/lib/infra/navbar/navbar.component.html +25 -28
  76. package/lib/infra/navbar/navbar.component.scss +16 -4
  77. package/lib/infra/navbar/navbar.component.ts +8 -3
  78. package/lib/infra/root-container/root-container.component.scss +0 -1
  79. package/lib/infra/root-container/root-container.component.ts +1 -2
  80. package/lib/infra/stages/stages.component.html +2 -2
  81. package/lib/infra/stages/stages.component.scss +7 -35
  82. package/lib/infra/stages/stages.component.ts +4 -2
  83. package/lib/infra/view/view.component.html +1 -1
  84. package/lib/infra/view/view.component.ts +0 -2
  85. package/lib/template/advanced-search/advanced-search.component.html +12 -0
  86. package/lib/template/advanced-search/advanced-search.component.scss +0 -0
  87. package/lib/template/advanced-search/advanced-search.component.spec.ts +0 -0
  88. package/lib/template/advanced-search/advanced-search.component.ts +112 -0
  89. package/lib/template/advanced-search/advanced-search.service.ts +27 -0
  90. package/lib/template/advanced-search/search-group/persist-utils.ts +56 -0
  91. package/lib/template/advanced-search/search-groups/search-groups.component.html +32 -0
  92. package/lib/template/advanced-search/search-groups/search-groups.component.scss +0 -0
  93. package/lib/template/advanced-search/search-groups/search-groups.component.spec.ts +0 -0
  94. package/lib/template/advanced-search/search-groups/search-groups.component.ts +294 -0
  95. package/lib/template/advanced-search/search-groups/utils.ts +29 -0
  96. package/lib/template/app-shell/app-shell.component.html +4 -1
  97. package/lib/template/app-shell/app-shell.component.scss +0 -3
  98. package/lib/template/app-shell/app-shell.component.ts +46 -7
  99. package/lib/template/case-summary/case-summary.component.scss +0 -2
  100. package/lib/template/case-view/case-view.component.html +3 -3
  101. package/lib/template/case-view/case-view.component.scss +18 -10
  102. package/lib/template/case-view/case-view.component.ts +1 -1
  103. package/lib/template/data-reference/data-reference-advanced-search.service.ts +16 -0
  104. package/lib/template/data-reference/data-reference.component.html +11 -8
  105. package/lib/template/data-reference/data-reference.component.ts +346 -112
  106. package/lib/template/data-reference/search-form/search-form.component.html +39 -0
  107. package/lib/template/data-reference/search-form/search-form.component.scss +11 -0
  108. package/lib/template/data-reference/search-form/search-form.component.spec.ts +0 -0
  109. package/lib/template/data-reference/search-form/search-form.component.ts +167 -0
  110. package/lib/template/data-reference/search-form/tabsData.ts +160 -0
  111. package/lib/template/data-reference/utils.ts +92 -0
  112. package/lib/template/default-form/default-form.component.ts +10 -2
  113. package/lib/template/default-page/default-page.component.html +34 -0
  114. package/lib/template/default-page/default-page.component.scss +31 -0
  115. package/lib/template/default-page/default-page.component.spec.ts +24 -0
  116. package/lib/template/default-page/default-page.component.ts +64 -0
  117. package/lib/template/field-group-list/field-group-list.component.scss +0 -1
  118. package/lib/template/inline-dashboard-page/inline-dashboard-page.component.ts +1 -1
  119. package/lib/template/list-view/list-view.component.html +9 -4
  120. package/lib/template/list-view/list-view.component.scss +21 -21
  121. package/lib/template/list-view/list-view.component.ts +154 -84
  122. package/lib/template/list-view/utils.ts +25 -2
  123. package/lib/template/object-page/object-page.component.html +1 -0
  124. package/lib/template/object-page/object-page.component.scss +0 -0
  125. package/lib/template/object-page/object-page.component.spec.ts +22 -0
  126. package/lib/template/object-page/object-page.component.ts +14 -0
  127. package/lib/template/one-column-tab/one-column-tab.component.scss +1 -1
  128. package/lib/template/repeating-structures/repeating-structures.component.ts +0 -1
  129. package/lib/template/self-service-case-view/self-service-case-view.component.html +80 -0
  130. package/lib/template/self-service-case-view/self-service-case-view.component.scss +124 -0
  131. package/lib/template/self-service-case-view/self-service-case-view.component.spec.ts +24 -0
  132. package/lib/template/self-service-case-view/self-service-case-view.component.ts +216 -0
  133. package/lib/template/simple-table/simple-table.component.ts +0 -1
  134. package/lib/template/simple-table-manual/helpers.ts +2 -2
  135. package/lib/template/simple-table-manual/simple-table-manual.component.html +4 -4
  136. package/lib/template/simple-table-manual/simple-table-manual.component.scss +4 -14
  137. package/lib/template/simple-table-manual/simple-table-manual.component.ts +8 -4
  138. package/lib/template/single-reference-readonly/single-reference-readonly.component.html +4 -1
  139. package/lib/template/single-reference-readonly/single-reference-readonly.component.scss +21 -0
  140. package/lib/template/single-reference-readonly/single-reference-readonly.component.ts +104 -3
  141. package/lib/template/utils.ts +42 -0
  142. package/lib/template/wss-nav-bar/wss-nav-bar.component.html +5 -4
  143. package/lib/template/wss-nav-bar/wss-nav-bar.component.scss +2 -8
  144. package/lib/template/wss-nav-bar/wss-nav-bar.component.ts +1 -8
  145. package/lib/widget/app-announcement/app-announcement.component.html +1 -2
  146. package/lib/widget/app-announcement/app-announcement.component.scss +2 -2
  147. package/lib/widget/attachment/Attachment.types.ts +92 -0
  148. package/lib/widget/attachment/AttachmentUtils.ts +287 -0
  149. package/lib/widget/attachment/attachment.component.html +3 -3
  150. package/lib/widget/attachment/attachment.component.scss +2 -5
  151. package/lib/widget/attachment/attachment.component.ts +255 -254
  152. package/lib/widget/feed-container/feed-container.component.scss +3 -9
  153. package/lib/widget/feed-container/feed-container.component.ts +2 -2
  154. package/lib/widget/file-utility/file-utility.component.html +3 -3
  155. package/lib/widget/file-utility/file-utility.component.scss +5 -16
  156. package/lib/widget/list-utility/list-utility.component.scss +3 -5
  157. package/lib/widget/todo/todo.component.html +8 -5
  158. package/lib/widget/todo/todo.component.scss +10 -11
  159. package/lib/widget/todo/todo.component.ts +6 -2
  160. package/package.json +1 -1
@@ -1,14 +1,13 @@
1
- import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
1
+ import { Component, forwardRef } from '@angular/core';
2
2
  import { CommonModule } from '@angular/common';
3
- import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
3
+ import { ReactiveFormsModule } from '@angular/forms';
4
4
  import { MatInputModule } from '@angular/material/input';
5
5
  import { MatFormFieldModule } from '@angular/material/form-field';
6
- import { interval } from 'rxjs';
7
- import { AngularPConnectService, AngularPConnectData } from '@pega/angular-sdk-components';
8
- import { Utils } from '@pega/angular-sdk-components';
6
+
7
+ import { FieldBase } from '@pega/angular-sdk-components';
9
8
  import { ComponentMapperComponent } from '@pega/angular-sdk-components';
10
- import { PConnFieldProps } from '@pega/angular-sdk-components';
11
9
  import { handleEvent } from '@pega/angular-sdk-components';
10
+ import { PConnFieldProps } from '@pega/angular-sdk-components';
12
11
 
13
12
  interface TextInputProps extends PConnFieldProps {
14
13
  // If any, enter additional props that only exist on TextInput here
@@ -21,143 +20,22 @@ interface TextInputProps extends PConnFieldProps {
21
20
  styleUrls: ['./text-input.component.scss'],
22
21
  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
23
22
  })
24
- export class TextInputComponent implements OnInit, OnDestroy {
25
- @Input() pConn$: typeof PConnect;
26
- @Input() formGroup$: FormGroup;
27
-
28
- // For interaction with AngularPConnect
29
- angularPConnectData: AngularPConnectData = {};
23
+ export class TextInputComponent extends FieldBase {
30
24
  configProps$: TextInputProps;
31
25
 
32
- label$ = '';
33
- value$ = '';
34
- bRequired$ = false;
35
- bReadonly$ = false;
36
- bDisabled$ = false;
37
- bVisible$ = true;
38
- displayMode$?: string = '';
39
- controlName$: string;
40
- testId = '';
41
- bHasForm$ = true;
42
- componentReference = '';
43
- helperText: string;
44
- placeholder: string;
45
-
46
- fieldControl = new FormControl('', null);
47
- actionsApi: Object;
48
- propName: string;
49
-
50
- constructor(
51
- private angularPConnect: AngularPConnectService,
52
- private cdRef: ChangeDetectorRef,
53
- private utils: Utils
54
- ) {}
55
-
56
- ngOnInit(): void {
57
- // First thing in initialization is registering and subscribing to the AngularPConnect service
58
- this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
59
- this.controlName$ = this.angularPConnect.getComponentID(this);
60
-
61
- // Then, continue on with other initialization
62
-
63
- // call updateSelf when initializing
64
- // this.updateSelf();
65
- this.checkAndUpdate();
66
-
67
- if (this.formGroup$) {
68
- // add control to formGroup
69
- this.formGroup$.addControl(this.controlName$, this.fieldControl);
70
- this.fieldControl.setValue(this.value$);
71
- this.bHasForm$ = true;
72
- } else {
73
- this.bReadonly$ = true;
74
- this.bHasForm$ = false;
75
- }
76
- }
77
-
78
- ngOnDestroy(): void {
79
- if (this.formGroup$) {
80
- this.formGroup$.removeControl(this.controlName$);
81
- }
82
-
83
- if (this.angularPConnectData.unsubscribeFn) {
84
- this.angularPConnectData.unsubscribeFn();
85
- }
86
- }
87
-
88
- // Callback passed when subscribing to store change
89
- onStateChange() {
90
- this.checkAndUpdate();
91
- }
92
-
93
- checkAndUpdate() {
94
- // Should always check the bridge to see if the component should
95
- // update itself (re-render)
96
- const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
97
-
98
- // ONLY call updateSelf when the component should update
99
- if (bUpdateSelf) {
100
- this.updateSelf();
101
- }
102
- }
103
-
104
- // updateSelf
105
- updateSelf(): void {
106
- // moved this from ngOnInit() and call this from there instead...
26
+ /**
27
+ * Updates the component when there are changes in the state.
28
+ */
29
+ override updateSelf(): void {
30
+ // Resolve configuration properties
107
31
  this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as TextInputProps;
108
32
 
109
- if (this.configProps$.value != undefined) {
110
- this.value$ = this.configProps$.value;
111
- }
112
-
113
- this.testId = this.configProps$.testId;
114
-
115
- this.label$ = this.configProps$.label;
116
- this.displayMode$ = this.configProps$.displayMode;
117
-
118
- this.componentReference = this.pConn$.getStateProps().value;
119
-
120
- this.actionsApi = this.pConn$.getActionsApi();
121
- this.propName = this.pConn$.getStateProps().value;
122
-
123
- if (this.configProps$.visibility != null) {
124
- this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
125
- }
126
- this.helperText = this.configProps$.helperText;
127
- this.placeholder = this.configProps$.placeholder || '';
128
-
129
- // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
130
- setTimeout(() => {
131
- if (this.configProps$.required != null) {
132
- this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
133
- }
134
- this.cdRef.detectChanges();
135
- });
136
-
137
- // disabled
138
- if (this.configProps$.disabled != undefined) {
139
- this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
140
- }
141
-
142
- if (this.bDisabled$) {
143
- this.fieldControl.disable();
144
- } else {
145
- this.fieldControl.enable();
146
- }
33
+ // Update component common properties
34
+ this.updateComponentCommonProperties(this.configProps$);
147
35
 
148
- if (this.configProps$.readOnly != null) {
149
- this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
150
- }
151
-
152
- // trigger display of error message with field control
153
- if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
154
- const timer = interval(100).subscribe(() => {
155
- this.fieldControl.setErrors({ message: true });
156
- this.fieldControl.markAsTouched();
157
-
158
- timer.unsubscribe();
159
- });
160
- }
36
+ // Get and set component specific properties
37
+ const { value } = this.configProps$;
38
+ this.value$ = value;
161
39
  }
162
40
 
163
41
  fieldOnChange(event: any) {
@@ -180,21 +58,4 @@ export class TextInputComponent implements OnInit, OnDestroy {
180
58
  handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
181
59
  }
182
60
  }
183
-
184
- getErrorMessage() {
185
- let errMessage = '';
186
-
187
- // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
188
- if (this.fieldControl.hasError('message')) {
189
- errMessage = this.angularPConnectData.validateMessage ?? '';
190
- return errMessage;
191
- }
192
- if (this.fieldControl.hasError('required')) {
193
- errMessage = 'You must enter a value';
194
- } else if (this.fieldControl.errors) {
195
- errMessage = this.fieldControl.errors.toString();
196
- }
197
-
198
- return errMessage;
199
- }
200
61
  }
@@ -1,15 +1,14 @@
1
- import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
1
+ import { Component, forwardRef } from '@angular/core';
2
2
  import { CommonModule } from '@angular/common';
3
- import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
3
+ import { ReactiveFormsModule } from '@angular/forms';
4
4
  import { MatInputModule } from '@angular/material/input';
5
5
  import { MatFormFieldModule } from '@angular/material/form-field';
6
- import { interval } from 'rxjs';
7
- import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
8
- import { Utils } from '@pega/angular-sdk-components';
6
+
7
+ import { FieldBase } from '@pega/angular-sdk-components';
9
8
  import { ComponentMapperComponent } from '@pega/angular-sdk-components';
10
- import { PConnFieldProps } from '@pega/angular-sdk-components';
11
9
  import { handleEvent } from '@pega/angular-sdk-components';
12
10
  import { format } from '@pega/angular-sdk-components';
11
+ import { PConnFieldProps } from '@pega/angular-sdk-components';
13
12
 
14
13
  interface TimeProps extends PConnFieldProps {
15
14
  // If any, enter additional props that only exist on Time here
@@ -21,147 +20,29 @@ interface TimeProps extends PConnFieldProps {
21
20
  styleUrls: ['./time.component.scss'],
22
21
  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
23
22
  })
24
- export class TimeComponent implements OnInit, OnDestroy {
25
- @Input() pConn$: typeof PConnect;
26
- @Input() formGroup$: FormGroup;
27
-
28
- // Used with AngularPConnect
29
- angularPConnectData: AngularPConnectData = {};
23
+ export class TimeComponent extends FieldBase {
30
24
  configProps$: TimeProps;
31
-
32
- label$ = '';
33
- value$: string;
34
- bRequired$ = false;
35
- bReadonly$ = false;
36
- bDisabled$ = false;
37
- bVisible$ = true;
38
- displayMode$?: string = '';
39
- controlName$: string;
40
- testId = '';
41
- bHasForm$ = true;
42
- componentReference = '';
43
- helperText: string;
44
- placeholder: string;
45
-
46
- fieldControl = new FormControl('', null);
47
- actionsApi: Object;
48
- propName: string;
49
25
  formattedValue$: any;
50
26
 
51
- constructor(
52
- private angularPConnect: AngularPConnectService,
53
- private cdRef: ChangeDetectorRef,
54
- private utils: Utils
55
- ) {}
56
-
57
- ngOnInit(): void {
58
- // First thing in initialization is registering and subscribing to the AngularPConnect service
59
- this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
60
- this.controlName$ = this.angularPConnect.getComponentID(this);
61
-
62
- // Then, continue on with other initialization
63
- // call updateSelf when initializing
64
- // this.updateSelf();
65
- this.checkAndUpdate();
66
-
67
- if (this.formGroup$) {
68
- // add control to formGroup
69
- this.formGroup$.addControl(this.controlName$, this.fieldControl);
70
- this.fieldControl.setValue(this.value$);
71
- this.bHasForm$ = true;
72
- } else {
73
- this.bReadonly$ = true;
74
- this.bHasForm$ = false;
75
- }
76
- }
77
-
78
- ngOnDestroy(): void {
79
- if (this.formGroup$) {
80
- this.formGroup$.removeControl(this.controlName$);
81
- }
82
- if (this.angularPConnectData.unsubscribeFn) {
83
- this.angularPConnectData.unsubscribeFn();
84
- }
85
- }
86
-
87
- // Callback passed when subscribing to store change
88
- onStateChange() {
89
- this.checkAndUpdate();
90
- }
91
-
92
- checkAndUpdate() {
93
- // Should always check the bridge to see if the component should
94
- // update itself (re-render)
95
- const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
96
-
97
- // ONLY call updateSelf when the component should update
98
- if (bUpdateSelf) {
99
- this.updateSelf();
100
- }
101
- }
102
-
103
- // updateSelf
104
- updateSelf(): void {
105
- // moved this from ngOnInit() and call this from there instead...
27
+ /**
28
+ * Updates the component when there are changes in the state.
29
+ */
30
+ override updateSelf(): void {
31
+ // Resolve config properties
106
32
  this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as TimeProps;
107
33
 
108
- this.testId = this.configProps$.testId;
109
- this.label$ = this.configProps$.label;
110
- this.displayMode$ = this.configProps$.displayMode;
34
+ // Update component common properties
35
+ this.updateComponentCommonProperties(this.configProps$);
111
36
 
112
- if (this.configProps$.value != undefined) {
113
- this.value$ = this.configProps$.value;
114
- }
115
- this.helperText = this.configProps$.helperText;
116
- this.placeholder = this.configProps$.placeholder || '';
117
-
118
- this.actionsApi = this.pConn$.getActionsApi();
119
- this.propName = this.pConn$.getStateProps().value;
120
-
121
- // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
122
- setTimeout(() => {
123
- if (this.configProps$.required != null) {
124
- this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
125
- }
126
- this.cdRef.detectChanges();
127
- });
37
+ // Extract the value property
38
+ const { value } = this.configProps$;
39
+ this.value$ = value;
128
40
 
129
- if (this.displayMode$ === 'DISPLAY_ONLY' || this.displayMode$ === 'STACKED_LARGE_VAL') {
41
+ if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
130
42
  this.formattedValue$ = format(this.value$, 'timeonly', {
131
43
  format: 'hh:mm A'
132
44
  });
133
45
  }
134
-
135
- if (this.configProps$.visibility != null) {
136
- this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
137
- }
138
-
139
- // disabled
140
- if (this.configProps$.disabled != undefined) {
141
- this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
142
- }
143
-
144
- if (this.bDisabled$) {
145
- this.fieldControl.disable();
146
- } else {
147
- this.fieldControl.enable();
148
- }
149
-
150
- if (this.configProps$.readOnly != null) {
151
- this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
152
- }
153
-
154
- this.componentReference = this.pConn$.getStateProps().value;
155
-
156
- // trigger display of error message with field control
157
- if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
158
- const timer = interval(100).subscribe(() => {
159
- this.fieldControl.setErrors({ message: true });
160
- this.fieldControl.markAsTouched();
161
-
162
- timer.unsubscribe();
163
- });
164
- }
165
46
  }
166
47
 
167
48
  fieldOnChange(event: any) {
@@ -189,19 +70,4 @@ export class TimeComponent implements OnInit, OnDestroy {
189
70
  handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
190
71
  }
191
72
  }
192
-
193
- getErrorMessage() {
194
- let errMessage = '';
195
- // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
196
- if (this.fieldControl.hasError('message')) {
197
- errMessage = this.angularPConnectData.validateMessage ?? '';
198
- return errMessage;
199
- }
200
- if (this.fieldControl.hasError('required')) {
201
- errMessage = 'You must enter a value';
202
- } else if (this.fieldControl.errors) {
203
- errMessage = this.fieldControl.errors.toString();
204
- }
205
- return errMessage;
206
- }
207
73
  }
@@ -1,14 +1,13 @@
1
- import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
1
+ import { Component, forwardRef } from '@angular/core';
2
2
  import { CommonModule } from '@angular/common';
3
- import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
3
+ import { ReactiveFormsModule } from '@angular/forms';
4
4
  import { MatInputModule } from '@angular/material/input';
5
5
  import { MatFormFieldModule } from '@angular/material/form-field';
6
- import { interval } from 'rxjs';
7
- import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
8
- import { Utils } from '@pega/angular-sdk-components';
6
+
7
+ import { FieldBase } from '@pega/angular-sdk-components';
9
8
  import { ComponentMapperComponent } from '@pega/angular-sdk-components';
10
- import { PConnFieldProps } from '@pega/angular-sdk-components';
11
9
  import { handleEvent } from '@pega/angular-sdk-components';
10
+ import { PConnFieldProps } from '@pega/angular-sdk-components';
12
11
 
13
12
  interface URLProps extends PConnFieldProps {
14
13
  // If any, enter additional props that only exist on URL here
@@ -20,142 +19,22 @@ interface URLProps extends PConnFieldProps {
20
19
  styleUrls: ['./url.component.scss'],
21
20
  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
22
21
  })
23
- export class UrlComponent implements OnInit, OnDestroy {
24
- @Input() pConn$: typeof PConnect;
25
- @Input() formGroup$: FormGroup;
26
-
27
- // Used with AngularPConnect
28
- angularPConnectData: AngularPConnectData = {};
22
+ export class UrlComponent extends FieldBase {
29
23
  configProps$: URLProps;
30
24
 
31
- label$ = '';
32
- value$ = '';
33
- bRequired$ = false;
34
- bReadonly$ = false;
35
- bDisabled$ = false;
36
- bVisible$ = true;
37
- displayMode$?: string = '';
38
- controlName$: string;
39
- testId = '';
40
- bHasForm$ = true;
41
- componentReference = '';
42
- helperText: string;
43
- placeholder: string;
44
-
45
- fieldControl = new FormControl('', null);
46
- actionsApi: Object;
47
- propName: string;
48
-
49
- constructor(
50
- private angularPConnect: AngularPConnectService,
51
- private cdRef: ChangeDetectorRef,
52
- private utils: Utils
53
- ) {}
54
-
55
- ngOnInit(): void {
56
- // First thing in initialization is registering and subscribing to the AngularPConnect service
57
- this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
58
- this.controlName$ = this.angularPConnect.getComponentID(this);
59
-
60
- // Then, continue on with other initialization
61
-
62
- // call updateSelf when initializing
63
- // this.updateSelf();
64
- this.checkAndUpdate();
65
-
66
- if (this.formGroup$) {
67
- // add control to formGroup
68
- this.formGroup$.addControl(this.controlName$, this.fieldControl);
69
- this.fieldControl.setValue(this.value$);
70
- this.bHasForm$ = true;
71
- } else {
72
- this.bReadonly$ = true;
73
- this.bHasForm$ = false;
74
- }
75
- }
76
-
77
- ngOnDestroy(): void {
78
- if (this.formGroup$) {
79
- this.formGroup$.removeControl(this.controlName$);
80
- }
81
-
82
- if (this.angularPConnectData.unsubscribeFn) {
83
- this.angularPConnectData.unsubscribeFn();
84
- }
85
- }
86
-
87
- // Callback passed when subscribing to store change
88
- onStateChange() {
89
- this.checkAndUpdate();
90
- }
91
-
92
- checkAndUpdate() {
93
- // Should always check the bridge to see if the component should
94
- // update itself (re-render)
95
- const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
96
-
97
- // ONLY call updateSelf when the component should update
98
- if (bUpdateSelf) {
99
- this.updateSelf();
100
- }
101
- }
102
-
103
- // updateSelf
104
- updateSelf(): void {
105
- // moved this from ngOnInit() and call this from there instead...
25
+ /**
26
+ * Updates the component when there are changes in the state.
27
+ */
28
+ override updateSelf(): void {
29
+ // Resolve config properties
106
30
  this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as URLProps;
107
31
 
108
- if (this.configProps$.value != undefined) {
109
- this.value$ = this.configProps$.value;
110
- }
111
-
112
- this.testId = this.configProps$.testId;
113
- this.label$ = this.configProps$.label;
114
- this.displayMode$ = this.configProps$.displayMode;
115
- this.helperText = this.configProps$.helperText;
116
- this.placeholder = this.configProps$.placeholder || '';
117
-
118
- this.actionsApi = this.pConn$.getActionsApi();
119
- this.propName = this.pConn$.getStateProps().value;
120
-
121
- // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
122
- setTimeout(() => {
123
- if (this.configProps$.required != null) {
124
- this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
125
- }
126
- this.cdRef.detectChanges();
127
- });
128
-
129
- if (this.configProps$.visibility != null) {
130
- this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
131
- }
132
-
133
- // disabled
134
- if (this.configProps$.disabled != undefined) {
135
- this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
136
- }
32
+ // Update component common properties
33
+ this.updateComponentCommonProperties(this.configProps$);
137
34
 
138
- if (this.bDisabled$) {
139
- this.fieldControl.disable();
140
- } else {
141
- this.fieldControl.enable();
142
- }
143
-
144
- if (this.configProps$.readOnly != null) {
145
- this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
146
- }
147
-
148
- this.componentReference = this.pConn$.getStateProps().value;
149
-
150
- // trigger display of error message with field control
151
- if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
152
- const timer = interval(100).subscribe(() => {
153
- this.fieldControl.setErrors({ message: true });
154
- this.fieldControl.markAsTouched();
155
-
156
- timer.unsubscribe();
157
- });
158
- }
35
+ // Extract and normalize the value property
36
+ const { value } = this.configProps$;
37
+ this.value$ = value;
159
38
  }
160
39
 
161
40
  fieldOnChange(event: any) {
@@ -178,21 +57,4 @@ export class UrlComponent implements OnInit, OnDestroy {
178
57
  handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
179
58
  }
180
59
  }
181
-
182
- getErrorMessage() {
183
- let errMessage = '';
184
-
185
- // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
186
- if (this.fieldControl.hasError('message')) {
187
- errMessage = this.angularPConnectData.validateMessage ?? '';
188
- return errMessage;
189
- }
190
- if (this.fieldControl.hasError('required')) {
191
- errMessage = 'You must enter a value';
192
- } else if (this.fieldControl.errors) {
193
- errMessage = this.fieldControl.errors.toString();
194
- }
195
-
196
- return errMessage;
197
- }
198
60
  }
@@ -1,6 +1,5 @@
1
1
  .psdk-user-reference {
2
2
  font-size: 0.8rem;
3
- color: var(--app-neutral-color);
4
3
  }
5
4
  .psdk-single {
6
5
  flex: 1;
@@ -64,7 +64,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
64
64
  filterValue = '';
65
65
 
66
66
  fieldControl = new FormControl('', null);
67
- actionsApi: Object;
67
+ actionsApi: object;
68
68
  propName: string;
69
69
  onRecordChange: any;
70
70
 
@@ -187,7 +187,7 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
187
187
  } else {
188
188
  // if same user ref field is referred in view as editable & readonly formatted text
189
189
  // referenced users won't be available, so get user details from dx api
190
- // eslint-disable-next-line @typescript-eslint/no-use-before-define
190
+
191
191
  this.userName$ = await getUserName(this.pConn$, this.userID$);
192
192
  }
193
193
  } else if (displayAs === DROPDOWN_LIST || displayAs === SEARCH_BOX) {
@@ -276,7 +276,6 @@ function getUserName(pConn, userId = ''): Promise<string> {
276
276
  const { parameters = {}, referenceList } = pConn.getConfigProps();
277
277
  const contextName = pConn.getContextName();
278
278
 
279
- // eslint-disable-next-line @typescript-eslint/no-shadow
280
279
  const OPERATORS_DP = referenceList || PCore.getEnvironmentInfo().getDefaultOperatorDP() || '';
281
280
 
282
281
  const columns = [
@@ -89,8 +89,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
89
89
  this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
90
90
 
91
91
  this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
92
- const caseInfo = this.pConn$.getCaseInfo();
93
- this.localeReference = `${caseInfo?.getClassName()}!CASE!${caseInfo.getName()}`.toUpperCase();
92
+ this.localeReference = this.pConn$?.getCaseLocaleReference();
94
93
 
95
94
  // Then, continue on with other initialization
96
95
 
@@ -169,7 +168,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
169
168
  // ONLY call updateSelf when the component should update
170
169
  // AND removing the "gate" that was put there since shouldComponentUpdate
171
170
  // should be the real "gate"
172
- // eslint-disable-next-line sonarjs/no-collapsible-if
171
+
173
172
  if (bUpdateSelf || caseViewModeFromProps !== caseViewModeFromRedux) {
174
173
  // don't want to redraw the flow container when there are page messages, because
175
174
  // the redraw causes us to loose the errors on the elements
@@ -202,9 +201,9 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
202
201
  const kid = this.pConn$.getChildren()[0];
203
202
  const todoKid = kid.getPConnect().getChildren()[0];
204
203
 
205
- this.todo_pConn$ = todoKid.getPConnect();
204
+ this.todo_pConn$ = todoKid?.getPConnect();
206
205
 
207
- return true;
206
+ return !!this.todo_pConn$;
208
207
  }
209
208
 
210
209
  return !(caseViewMode && caseViewMode === 'perform');
@@ -464,7 +463,7 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
464
463
  // @ts-ignore - Property 'getLoadingStatus' is private and only accessible within class 'C11nEnv'
465
464
  loadingInfo = this.pConn$.getLoadingStatus();
466
465
  } catch (ex) {
467
- /* empty */
466
+ console.log(ex);
468
467
  }
469
468
 
470
469
  // this check in routingInfo, mimic Nebula/Constellation (React) to check and get the internals of the
@@ -486,7 +485,6 @@ export class FlowContainerComponent extends FlowContainerBaseComponent implement
486
485
  }
487
486
  });
488
487
 
489
- // eslint-disable-next-line sonarjs/no-collapsible-if
490
488
  if (currentOrder.length > 0) {
491
489
  if (currentItems[key] && currentItems[key].view && type === 'single' && Object.keys(currentItems[key].view).length > 0) {
492
490
  // when we get here, it it because the flow action data has changed