@pega/dx-component-builder-sdk 0.24.1 → 0.24.2

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 (88) hide show
  1. package/package.json +1 -1
  2. package/src/tasks/create/templates/Constellation/field/Icon-Button-URL/demo.stories.tsx.mustache +1 -1
  3. package/src/tasks/create/templates/Constellation/field/Picklist/index.tsx.mustache +0 -1
  4. package/src/tasks/create/templates/Constellation/field/Picklist-Autocomplete/date.ts.mustache +15 -37
  5. package/src/tasks/create/templates/Constellation/template/DETAILS/HighlightRender.tsx.mustache +2 -2
  6. package/src/tasks/create/templates/Constellation/template/DETAILS-region/HighlightRender.tsx.mustache +2 -2
  7. package/src/tasks/create/templates/Constellation/template/DETAILS-region/index.tsx.mustache +1 -1
  8. package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache +19 -18
  9. package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.ts.mustache +127 -44
  10. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/demo.stories.tsx.mustache +36 -15
  11. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/icon-button-url.component.html.mustache +40 -0
  12. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/{text-url.component.scss.mustache → icon-button-url.component.scss.mustache} +4 -0
  13. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/icon-button-url.component.ts.mustache +195 -0
  14. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/mock.ts.mustache +32 -12
  15. package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.html.mustache +1 -0
  16. package/src/tasks/create/templates/SDK-Angular/field/Text-URL/text-url.component.ts.mustache +2 -0
  17. package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.html.mustache +1 -0
  18. package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/time-of-day.component.ts.mustache +2 -0
  19. package/src/tasks/create/templates/SDK-Angular/template/FORM-region/form.component.scss.mustache +1 -1
  20. package/src/tasks/create/templates/SDK-Angular/widget/CASE/case.component.ts.mustache +2 -2
  21. package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.html.mustache +1 -1
  22. package/src/tasks/create/templates/SDK-React/field/Boolean/demo.stories.tsx.mustache +1 -1
  23. package/src/tasks/create/templates/SDK-React/field/Boolean/mock.ts.mustache +8 -8
  24. package/src/tasks/create/templates/SDK-React/field/Date/index.tsx.mustache +2 -2
  25. package/src/tasks/create/templates/SDK-React/field/Date/mock.ts.mustache +7 -7
  26. package/src/tasks/create/templates/SDK-React/field/DateTime/demo.stories.tsx.mustache +1 -1
  27. package/src/tasks/create/templates/SDK-React/field/DateTime/index.tsx.mustache +2 -3
  28. package/src/tasks/create/templates/SDK-React/field/DateTime/mock.ts.mustache +6 -6
  29. package/src/tasks/create/templates/SDK-React/field/Decimal/index.tsx.mustache +51 -35
  30. package/src/tasks/create/templates/SDK-React/field/Decimal/mock.ts.mustache +1 -1
  31. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/config.json.mustache +1 -1
  32. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/demo.stories.tsx.mustache +1 -1
  33. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/index.tsx.mustache +47 -37
  34. package/src/tasks/create/templates/SDK-React/field/Decimal-Currency/mock.ts.mustache +1 -1
  35. package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/config.json.mustache +1 -1
  36. package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/index.tsx.mustache +36 -21
  37. package/src/tasks/create/templates/SDK-React/field/Decimal-Percentage/mock.ts.mustache +1 -1
  38. package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/demo.stories.tsx.mustache +58 -25
  39. package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache +134 -53
  40. package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/mock.ts.mustache +2 -14
  41. package/src/tasks/create/templates/SDK-React/field/Integer/config.json.mustache +1 -1
  42. package/src/tasks/create/templates/SDK-React/field/Integer/index.tsx.mustache +19 -20
  43. package/src/tasks/create/templates/SDK-React/field/Integer/mock.ts.mustache +1 -1
  44. package/src/tasks/create/templates/SDK-React/field/Picklist/index.tsx.mustache +26 -26
  45. package/src/tasks/create/templates/SDK-React/field/Picklist-RadioButtons/mock.ts.mustache +0 -1
  46. package/src/tasks/create/templates/SDK-React/field/Text/config.json.mustache +1 -1
  47. package/src/tasks/create/templates/SDK-React/field/Text/index.tsx.mustache +0 -1
  48. package/src/tasks/create/templates/SDK-React/field/Text/mock.ts.mustache +1 -1
  49. package/src/tasks/create/templates/SDK-React/field/Text-Email/config.json.mustache +1 -1
  50. package/src/tasks/create/templates/SDK-React/field/Text-Email/mock.ts.mustache +1 -1
  51. package/src/tasks/create/templates/SDK-React/field/Text-Input/config.json.mustache +1 -1
  52. package/src/tasks/create/templates/SDK-React/field/Text-Input/index.tsx.mustache +0 -1
  53. package/src/tasks/create/templates/SDK-React/field/Text-Input/mock.ts.mustache +1 -1
  54. package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/index.tsx.mustache +1 -3
  55. package/src/tasks/create/templates/SDK-React/field/Text-Paragraph/mock.ts.mustache +1 -1
  56. package/src/tasks/create/templates/SDK-React/field/Text-Phone/index.tsx.mustache +1 -2
  57. package/src/tasks/create/templates/SDK-React/field/Text-URL/index.tsx.mustache +1 -2
  58. package/src/tasks/create/templates/SDK-React/field/Text-URL/mock.ts.mustache +1 -1
  59. package/src/tasks/create/templates/SDK-React/field/TimeOfDay/demo.stories.tsx.mustache +4 -4
  60. package/src/tasks/create/templates/SDK-React/field/TimeOfDay/index.tsx.mustache +0 -2
  61. package/src/tasks/create/templates/SDK-React/field/TimeOfDay/mock.ts.mustache +6 -6
  62. package/src/tasks/create/templates/SDK-React/template/DETAILS/demo.stories.tsx.mustache +1 -4
  63. package/src/tasks/create/templates/SDK-React/template/DETAILS/index.tsx.mustache +3 -8
  64. package/src/tasks/create/templates/SDK-React/template/DETAILS/mock.ts.mustache +181 -165
  65. package/src/tasks/create/templates/SDK-React/template/DETAILS-region/demo.stories.tsx.mustache +1 -3
  66. package/src/tasks/create/templates/SDK-React/template/DETAILS-region/index.tsx.mustache +3 -8
  67. package/src/tasks/create/templates/SDK-React/template/DETAILS-region/mock.ts.mustache +207 -163
  68. package/src/tasks/create/templates/SDK-React/template/FORM/config.json.mustache +1 -1
  69. package/src/tasks/create/templates/SDK-React/template/FORM/demo.stories.tsx.mustache +0 -1
  70. package/src/tasks/create/templates/SDK-React/template/FORM/index.tsx.mustache +14 -16
  71. package/src/tasks/create/templates/SDK-React/template/FORM/utils.ts.mustache +1 -1
  72. package/src/tasks/create/templates/SDK-React/template/FORM-region/demo.stories.tsx.mustache +0 -2
  73. package/src/tasks/create/templates/SDK-React/template/FORM-region/mock.ts.mustache +121 -122
  74. package/src/tasks/create/templates/SDK-React/template/PAGE/OneColumn.tsx.mustache +12 -13
  75. package/src/tasks/create/templates/SDK-React/template/PAGE/demo.stories.tsx.mustache +1 -1
  76. package/src/tasks/create/templates/SDK-React/template/PAGE/index.tsx.mustache +3 -5
  77. package/src/tasks/create/templates/SDK-React/template/PAGE/mock.ts.mustache +8 -9
  78. package/src/tasks/create/templates/SDK-React/widget/CASE/config.json.mustache +2 -2
  79. package/src/tasks/create/templates/SDK-React/widget/CASE/demo.stories.tsx.mustache +0 -1
  80. package/src/tasks/create/templates/SDK-React/widget/CASE/index.tsx.mustache +3 -3
  81. package/src/tasks/create/templates/SDK-React/widget/PAGE/config.json.mustache +43 -43
  82. package/src/tasks/create/templates/SDK-React/widget/PAGE/mock.ts.mustache +1 -1
  83. package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/demo.stories.tsx.mustache +1 -2
  84. package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache +0 -1
  85. package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/mock.ts.mustache +0 -1
  86. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/text-url.component.html.mustache +0 -29
  87. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/text-url.component.ts.mustache +0 -179
  88. /package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/{text-url.component.spec.ts.mustache → icon-button-url.component.spec.ts.mustache} +0 -0
@@ -1,179 +0,0 @@
1
- import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } from '@angular/core';
2
- import { CommonModule } from '@angular/common';
3
- import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
4
- import { MatInputModule } from '@angular/material/input';
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';
9
- import { ComponentMapperComponent } from '@pega/angular-sdk-components';
10
- import { PConnFieldProps } from '@pega/angular-sdk-components';
11
-
12
- interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
13
- // If any, enter additional props that only exist on URL here
14
- }
15
-
16
- @Component({
17
- selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
18
- templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
19
- styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
20
- standalone: true,
21
- imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
22
- })
23
- export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnDestroy {
24
- @Input() pConn$: typeof PConnect;
25
- @Input() formGroup$: FormGroup;
26
-
27
- // Used with AngularPConnect
28
- angularPConnectData: AngularPConnectData = {};
29
- configProps$: {{COMPONENT_CLASS_NAME}}Props;
30
-
31
- label$ = '';
32
- value$ = '';
33
- bRequired$ = false;
34
- bReadonly$ = false;
35
- bDisabled$ = false;
36
- bVisible$ = true;
37
- displayMode$?: string = '';
38
- controlName$: string;
39
- bHasForm$ = true;
40
- componentReference = '';
41
- helperText: string;
42
- placeholder: string;
43
-
44
- fieldControl = new FormControl('', null);
45
-
46
- constructor(
47
- private angularPConnect: AngularPConnectService,
48
- private cdRef: ChangeDetectorRef,
49
- private utils: Utils
50
- ) {}
51
-
52
- ngOnInit(): void {
53
- // First thing in initialization is registering and subscribing to the AngularPConnect service
54
- this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
55
- this.controlName$ = this.angularPConnect.getComponentID(this);
56
-
57
- // Then, continue on with other initialization
58
-
59
- // call updateSelf when initializing
60
- // this.updateSelf();
61
- this.checkAndUpdate();
62
-
63
- if (this.formGroup$) {
64
- // add control to formGroup
65
- this.formGroup$.addControl(this.controlName$, this.fieldControl);
66
- this.fieldControl.setValue(this.value$);
67
- this.bHasForm$ = true;
68
- } else {
69
- this.bReadonly$ = true;
70
- this.bHasForm$ = false;
71
- }
72
- }
73
-
74
- ngOnDestroy(): void {
75
- if (this.formGroup$) {
76
- this.formGroup$.removeControl(this.controlName$);
77
- }
78
-
79
- if (this.angularPConnectData.unsubscribeFn) {
80
- this.angularPConnectData.unsubscribeFn();
81
- }
82
- }
83
-
84
- // Callback passed when subscribing to store change
85
- onStateChange() {
86
- this.checkAndUpdate();
87
- }
88
-
89
- checkAndUpdate() {
90
- // Should always check the bridge to see if the component should
91
- // update itself (re-render)
92
- const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
93
-
94
- // ONLY call updateSelf when the component should update
95
- if (bUpdateSelf) {
96
- this.updateSelf();
97
- }
98
- }
99
-
100
- // updateSelf
101
- updateSelf(): void {
102
- // moved this from ngOnInit() and call this from there instead...
103
- this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as {{COMPONENT_CLASS_NAME}}Props;
104
-
105
- if (this.configProps$.value != undefined) {
106
- this.value$ = this.configProps$.value;
107
- }
108
-
109
- this.label$ = this.configProps$.label;
110
- this.displayMode$ = this.configProps$.displayMode;
111
- this.helperText = this.configProps$.helperText;
112
- this.placeholder = this.configProps$.placeholder || '';
113
-
114
- // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
115
- setTimeout(() => {
116
- if (this.configProps$.required != null) {
117
- this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
118
- }
119
- this.cdRef.detectChanges();
120
- });
121
-
122
- if (this.configProps$.visibility != null) {
123
- this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
124
- }
125
-
126
- // disabled
127
- if (this.configProps$.disabled != undefined) {
128
- this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
129
- }
130
-
131
- if (this.bDisabled$) {
132
- this.fieldControl.disable();
133
- } else {
134
- this.fieldControl.enable();
135
- }
136
-
137
- if (this.configProps$.readOnly != null) {
138
- this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
139
- }
140
-
141
- this.componentReference = (this.pConn$.getStateProps() as any).value;
142
-
143
- // trigger display of error message with field control
144
- if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
145
- const timer = interval(100).subscribe(() => {
146
- this.fieldControl.setErrors({ message: true });
147
- this.fieldControl.markAsTouched();
148
-
149
- timer.unsubscribe();
150
- });
151
- }
152
- }
153
-
154
- fieldOnChange(event: any) {
155
- this.angularPConnectData.actions?.onChange(this, event);
156
- }
157
-
158
- fieldOnBlur(event: any) {
159
- // PConnect wants to use eventHandler for onBlur
160
- this.angularPConnectData.actions?.onBlur(this, event);
161
- }
162
-
163
- getErrorMessage() {
164
- let errMessage = '';
165
-
166
- // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
167
- if (this.fieldControl.hasError('message')) {
168
- errMessage = this.angularPConnectData.validateMessage ?? '';
169
- return errMessage;
170
- }
171
- if (this.fieldControl.hasError('required')) {
172
- errMessage = 'You must enter a value';
173
- } else if (this.fieldControl.errors) {
174
- errMessage = this.fieldControl.errors.toString();
175
- }
176
-
177
- return errMessage;
178
- }
179
- }