@pega/dx-component-builder-sdk 0.242.20 → 0.242.22

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/SDK-Angular/field/Boolean/boolean.component.html.mustache +4 -0
  3. package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.html.mustache +2 -1
  4. package/src/tasks/create/templates/SDK-Angular/field/Date/demo.stories.tsx.mustache +4 -4
  5. package/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.html.mustache +2 -1
  6. package/src/tasks/create/templates/SDK-Angular/field/DateTime/demo.stories.tsx.mustache +4 -4
  7. package/src/tasks/create/templates/SDK-Angular/field/Decimal/demo.stories.tsx.mustache +0 -1
  8. package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/demo.stories.tsx.mustache +0 -1
  9. package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/demo.stories.tsx.mustache +0 -1
  10. package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/demo.stories.tsx.mustache +1 -3
  11. package/src/tasks/create/templates/SDK-Angular/field/Integer/demo.stories.tsx.mustache +4 -5
  12. package/src/tasks/create/templates/SDK-Angular/field/Picklist/demo.stories.tsx.mustache +4 -4
  13. package/src/tasks/create/templates/SDK-Angular/field/Picklist/picklist.component.html.mustache +1 -0
  14. package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/demo.stories.tsx.mustache +4 -5
  15. package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.html.mustache +3 -4
  16. package/src/tasks/create/templates/SDK-Angular/field/Text/demo.stories.tsx.mustache +5 -7
  17. package/src/tasks/create/templates/SDK-Angular/field/Text-Email/demo.stories.tsx.mustache +4 -5
  18. package/src/tasks/create/templates/SDK-Angular/field/Text-Input/demo.stories.tsx.mustache +4 -5
  19. package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/demo.stories.tsx.mustache +4 -5
  20. package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/text-paragraph.component.html.mustache +3 -1
  21. package/src/tasks/create/templates/SDK-Angular/field/Text-Phone/demo.stories.tsx.mustache +5 -5
  22. package/src/tasks/create/templates/SDK-Angular/field/Text-Phone/text-phone.component.html.mustache +3 -1
  23. package/src/tasks/create/templates/SDK-Angular/field/Text-URL/demo.stories.tsx.mustache +6 -6
  24. package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/demo.stories.tsx.mustache +4 -5
  25. package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/demo.stories.tsx +5 -7
  26. package/tests/assets/sdk-a/components/create/override-sdk/field/auto-complete/auto-complete.component.html +0 -1
  27. package/tests/assets/sdk-a/components/create/override-sdk/field/auto-complete/auto-complete.component.ts +15 -2
  28. package/tests/assets/sdk-a/components/create/override-sdk/field/check-box/check-box.component.html +4 -0
  29. package/tests/assets/sdk-a/components/create/override-sdk/field/date/date.component.html +2 -1
  30. package/tests/assets/sdk-a/components/create/override-sdk/field/date-time/date-time.component.html +2 -1
  31. package/tests/assets/sdk-a/components/create/override-sdk/field/dropdown/dropdown.component.html +1 -0
  32. package/tests/assets/sdk-a/components/create/override-sdk/field/dropdown/dropdown.component.ts +1 -2
  33. package/tests/assets/sdk-a/components/create/override-sdk/field/phone/config-ext.json +1 -1
  34. package/tests/assets/sdk-a/components/create/override-sdk/field/phone/phone.component.html +3 -1
  35. package/tests/assets/sdk-a/components/create/override-sdk/field/radio-buttons/radio-buttons.component.html +3 -4
  36. package/tests/assets/sdk-a/components/create/override-sdk/field/text/text.component.ts +1 -1
  37. package/tests/assets/sdk-a/components/create/override-sdk/field/text-area/text-area.component.html +3 -1
  38. package/tests/assets/sdk-a/components/create/override-sdk/field/user-reference/user-reference.component.ts +5 -1
  39. package/tests/assets/sdk-a/components/create/override-sdk/infra/root-container/root-container.component.ts +2 -2
  40. package/tests/assets/sdk-a/components/create/override-sdk/template/confirmation/confirmation.component.html +1 -1
  41. package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-template/field-group-template.component.ts +1 -1
  42. package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/helpers.ts +0 -16
  43. package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/simple-table-manual.component.scss +4 -0
  44. package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/simple-table-manual.component.ts +2 -1
  45. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.html +4 -0
  46. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/demo.stories.tsx +0 -1
  47. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/demo.stories.tsx +4 -4
  48. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/pega-dxil-my-date.component.html +2 -1
  49. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/demo.stories.tsx +4 -4
  50. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/pega-dxil-my-date-time.component.html +2 -1
  51. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/demo.stories.tsx +0 -1
  52. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-email/demo.stories.tsx +4 -5
  53. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-icon-button-url/demo.stories.tsx +1 -3
  54. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-integer/demo.stories.tsx +4 -5
  55. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-paragraph/demo.stories.tsx +4 -5
  56. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-paragraph/pega-dxil-my-paragraph.component.html +3 -1
  57. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/demo.stories.tsx +0 -1
  58. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/demo.stories.tsx +5 -5
  59. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/pega-dxil-my-phone.component.html +3 -1
  60. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/demo.stories.tsx +4 -4
  61. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/pega-dxil-my-picklist.component.html +1 -0
  62. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-radiobuttons/pega-dxil-my-radiobuttons.component.html +3 -4
  63. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-searchbox/demo.stories.tsx +4 -5
  64. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text/demo.stories.tsx +5 -7
  65. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text-input/demo.stories.tsx +4 -5
  66. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-time-of-day/demo.stories.tsx +4 -5
  67. package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/demo.stories.tsx +6 -6
  68. package/tests/assets/sdk-a/components/createAll/override-sdk/field/auto-complete/auto-complete.component.html +0 -1
  69. package/tests/assets/sdk-a/components/createAll/override-sdk/field/auto-complete/auto-complete.component.ts +15 -2
  70. package/tests/assets/sdk-a/components/createAll/override-sdk/field/check-box/check-box.component.html +4 -0
  71. package/tests/assets/sdk-a/components/createAll/override-sdk/field/date/date.component.html +2 -1
  72. package/tests/assets/sdk-a/components/createAll/override-sdk/field/date-time/date-time.component.html +2 -1
  73. package/tests/assets/sdk-a/components/createAll/override-sdk/field/dropdown/dropdown.component.html +1 -0
  74. package/tests/assets/sdk-a/components/createAll/override-sdk/field/dropdown/dropdown.component.ts +1 -2
  75. package/tests/assets/sdk-a/components/createAll/override-sdk/field/phone/config-ext.json +1 -1
  76. package/tests/assets/sdk-a/components/createAll/override-sdk/field/phone/phone.component.html +3 -1
  77. package/tests/assets/sdk-a/components/createAll/override-sdk/field/radio-buttons/radio-buttons.component.html +3 -4
  78. package/tests/assets/sdk-a/components/createAll/override-sdk/field/text/text.component.ts +1 -1
  79. package/tests/assets/sdk-a/components/createAll/override-sdk/field/text-area/text-area.component.html +3 -1
  80. package/tests/assets/sdk-a/components/createAll/override-sdk/field/user-reference/user-reference.component.ts +5 -1
  81. package/tests/assets/sdk-a/components/createAll/override-sdk/infra/root-container/root-container.component.ts +2 -2
  82. package/tests/assets/sdk-a/components/createAll/override-sdk/template/confirmation/confirmation.component.html +1 -1
  83. package/tests/assets/sdk-a/components/createAll/override-sdk/template/field-group-template/field-group-template.component.ts +1 -1
  84. package/tests/assets/sdk-a/components/createAll/override-sdk/template/simple-table-manual/helpers.ts +0 -16
  85. package/tests/assets/sdk-a/components/createAll/override-sdk/template/simple-table-manual/simple-table-manual.component.scss +4 -0
  86. package/tests/assets/sdk-a/components/createAll/override-sdk/template/simple-table-manual/simple-table-manual.component.ts +2 -1
  87. package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-template/utils.ts +0 -9
  88. package/tests/assets/sdk-a/components/createAll/override-sdk/template/field-group-template/utils.ts +0 -9
@@ -9,10 +9,9 @@
9
9
  <div [formGroup]="formGroup$" *ngIf="bVisible$">
10
10
  <mat-form-field class="psdk-radio-form" subscriptSizing="dynamic" [hintLabel]="helperText">
11
11
  <span class="psdk-label-wrapper-readonly">
12
- <label class="psdk-label-readonly">{{ label$ }}</label>
12
+ <mat-label class="psdk-label-readonly">{{ label$ }}</mat-label>
13
13
  </span>
14
- <!-- <mat-label>{{label$}}</mat-label> -->
15
- <input matInput [placeholder]="placeholder" style="display: none" />
14
+ <input matInput [placeholder]="placeholder" style="display: none" [required]="bRequired$" />
16
15
  <mat-radio-group
17
16
  [value]="value$"
18
17
  [required]="bRequired$"
@@ -24,7 +23,7 @@
24
23
  <mat-radio-button
25
24
  *ngFor="let opt of options$"
26
25
  [checked]="isSelected(opt.key)"
27
- [disabled]="bReadonly$"
26
+ [disabled]="bDisabled$ || bReadonly$"
28
27
  [value]="opt.key"
29
28
  class="psdk-radio-button"
30
29
  >
@@ -138,7 +138,7 @@ export class TextComponent implements OnInit, OnDestroy {
138
138
  // day: 'numeric'
139
139
  // }).format(new Date(sVal + "T00:00"));
140
140
 
141
- return this.utils.generateDate(sVal, 'Date-Long-Custom-YYYY');
141
+ return this.utils.generateDate(sVal, 'Date-Long-Custom-DD/MM/YYYY');
142
142
  }
143
143
 
144
144
  generateDateTime(sVal): string {
@@ -2,10 +2,11 @@
2
2
  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
3
3
  </div>
4
4
  <ng-template #noDisplayMode>
5
- <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
5
+ <div *ngIf="bHasForm$; else noEdit">
6
6
  <div [formGroup]="formGroup$">
7
7
  <div *ngIf="bVisible$">
8
8
  <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
9
+ <mat-label>{{ label$ }}</mat-label>
9
10
  <textarea
10
11
  matInput
11
12
  rows="5"
@@ -15,6 +16,7 @@
15
16
  [value]="value$"
16
17
  [required]="bRequired$"
17
18
  [disabled]="bDisabled$"
19
+ [readonly]="bReadonly$"
18
20
  [formControl]="fieldControl"
19
21
  (change)="fieldOnChange($event)"
20
22
  (blur)="fieldOnBlur($event)"
@@ -168,7 +168,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
168
168
  this.placeholder = placeholder || '';
169
169
  this.displayMode$ = displayMode;
170
170
 
171
- this.value$ = value && typeof value === 'object' && value.userName ? value.userName : (value ?? '');
171
+ if (value && typeof value === 'object') {
172
+ this.value$ = value.userName ? value.userName : '';
173
+ } else {
174
+ this.value$ = value || '';
175
+ }
172
176
 
173
177
  const { readOnly, required } = props;
174
178
  [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));
@@ -171,9 +171,9 @@ export class RootContainerComponent implements OnInit, OnDestroy {
171
171
 
172
172
  async configureModalContainer() {
173
173
  const sdkConfig = await this.scService.getSdkConfig();
174
- const showModalsInEmbedMode = sdkConfig.serverConfig.showModalsInEmbedMode;
174
+ const showModalsInEmbeddedMode = sdkConfig.serverConfig.showModalsInEmbeddedMode;
175
175
 
176
- if (!this.displayOnlyFA$ || showModalsInEmbedMode) {
176
+ if (!this.displayOnlyFA$ || showModalsInEmbeddedMode) {
177
177
  const configObjModal = PCore.createPConnect({
178
178
  meta: {
179
179
  type: 'ModalViewContainer',
@@ -14,7 +14,7 @@
14
14
  <button mat-raised-button color="primary" (click)="onConfirmViewClose()">Done</button>
15
15
  </div>
16
16
  </div>
17
- <div *ngIf="toDoList?.length > 0">
17
+ <div *ngIf="!showConfirmView && toDoList?.length > 0">
18
18
  <component-mapper
19
19
  name="Todo"
20
20
  [props]="{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }"
@@ -6,7 +6,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
6
6
  import { buildView, getReferenceList } from '@pega/angular-sdk-components';
7
7
  import { Utils } from '@pega/angular-sdk-components';
8
8
  import { ComponentMapperComponent } from '@pega/angular-sdk-components';
9
- import { evaluateAllowRowAction } from './utils';
9
+ import { evaluateAllowRowAction } from '@pega/angular-sdk-components';
10
10
 
11
11
  interface FieldGroupTemplateProps {
12
12
  // If any, enter additional props that only exist on this component
@@ -294,19 +294,3 @@ export const createPConnect = (contextName, referenceList, pageReference) => {
294
294
 
295
295
  return getPConnect();
296
296
  };
297
-
298
- /**
299
- * This method evaluates whether a row action is allowed based on the provided conditions.
300
- * @param {string|boolean|undefined} allowRowDelete - The condition for allowing row deletion.
301
- * @param {object} rowData - The data of the row being evaluated.
302
- * @returns {boolean} - Returns true if the row action is allowed, false otherwise.
303
- */
304
- export const evaluateAllowRowAction = (allowRowDelete, rowData) => {
305
- if (allowRowDelete === undefined || allowRowDelete === true) return true;
306
- if (allowRowDelete.startsWith?.('@E ')) {
307
- const expression = allowRowDelete.replace('@E ', '');
308
- // @ts-ignore - Expected 3 arguments, but got 2
309
- return PCore.getExpressionEngine().evaluate(expression, rowData);
310
- }
311
- return false;
312
- };
@@ -5,6 +5,10 @@
5
5
  margin-top: 0.5rem;
6
6
  margin-bottom: 0.5rem;
7
7
  overflow-y: auto;
8
+ box-shadow:
9
+ 0px 2px 1px -1px rgba(0, 0, 0, 0.2),
10
+ 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
11
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
8
12
  }
9
13
 
10
14
  table {
@@ -16,7 +16,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
16
16
  import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
17
17
  import { DatapageService } from '@pega/angular-sdk-components';
18
18
  import { getReferenceList } from '@pega/angular-sdk-components';
19
- import { buildFieldsForTable, evaluateAllowRowAction, filterDataByCommonFields, filterDataByDate, getContext } from './helpers';
19
+ import { buildFieldsForTable, filterDataByCommonFields, filterDataByDate, getContext } from './helpers';
20
+ import { evaluateAllowRowAction } from '@pega/angular-sdk-components';
20
21
  import { Utils } from '@pega/angular-sdk-components';
21
22
  import { getSeconds } from '@pega/angular-sdk-components';
22
23
 
@@ -18,6 +18,8 @@
18
18
  <mat-checkbox
19
19
  [labelPosition]="'after'"
20
20
  [checked]="item.selected"
21
+ [disabled]="bDisabled$ || bReadonly$"
22
+ [required]="bRequired$"
21
23
  [attr.data-test-id]="testId + ':' + item.value"
22
24
  (change)="handleChangeMultiMode($event, item)"
23
25
  (blur)="fieldOnBlur($event)"
@@ -29,6 +31,8 @@
29
31
  <mat-checkbox
30
32
  [labelPosition]="'after'"
31
33
  [checked]="isChecked$"
34
+ [disabled]="bDisabled$ || bReadonly$"
35
+ [required]="bRequired$"
32
36
  [attr.data-test-id]="testId"
33
37
  [formControl]="fieldControl"
34
38
  (change)="fieldOnChange($event)"
@@ -46,7 +46,6 @@ export const PegaDxilMyCurrency: Story = {
46
46
  helperText: configProps.helperText,
47
47
  testId: configProps.testId,
48
48
  bReadonly$: configProps.readOnly,
49
- bDisabled$: configProps.disabled,
50
49
  bRequired$: configProps.required,
51
50
  displayMode$: configProps.displayMode
52
51
  }
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyDateComponent> = {
22
22
  },
23
23
  getActionsApi: () => {
24
24
  return {
25
- updateFieldValue: () => {
26
- /* nothing */
25
+ updateFieldValue: (propName, value) => {
26
+ configProps.value = value;
27
27
  },
28
- triggerFieldChange: () => {
29
- /* nothing */
28
+ triggerFieldChange: (propName, value) => {
29
+ configProps.value = value;
30
30
  }
31
31
  };
32
32
  },
@@ -15,10 +15,11 @@
15
15
  type="text"
16
16
  [value]="value$"
17
17
  [required]="bRequired$"
18
+ [disabled]="bDisabled$"
18
19
  [formControl]="fieldControl"
19
20
  (dateChange)="fieldOnDateChange($event)"
20
21
  />
21
- <mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
22
+ <mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
22
23
  <mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>
23
24
  <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
24
25
  </mat-form-field>
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyDateTimeComponent> = {
22
22
  },
23
23
  getActionsApi: () => {
24
24
  return {
25
- updateFieldValue: () => {
26
- /* nothing */
25
+ updateFieldValue: (propName, value) => {
26
+ configProps.value = value;
27
27
  },
28
- triggerFieldChange: () => {
29
- /* nothing */
28
+ triggerFieldChange: (propName, value) => {
29
+ configProps.value = value;
30
30
  }
31
31
  };
32
32
  },
@@ -14,9 +14,10 @@
14
14
  [formControl]="fieldControl"
15
15
  (dateTimeChange)="fieldOnDateChange($event)"
16
16
  [required]="bRequired$"
17
+ [readonly]="bDisabled$"
17
18
  />
18
19
  <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
19
- <owl-date-time #dtPicker></owl-date-time>
20
+ <owl-date-time #dtPicker [disabled]="bDisabled$"></owl-date-time>
20
21
  <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
21
22
  </mat-form-field>
22
23
  </div>
@@ -49,7 +49,6 @@ export const PegaDxilMyDecimal: Story = {
49
49
  helperText: configProps.helperText,
50
50
  testId: configProps.testId,
51
51
  bReadonly$: configProps.readOnly,
52
- bDisabled$: configProps.disabled,
53
52
  bRequired$: configProps.required,
54
53
  displayMode$: configProps.displayMode
55
54
  }
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyEmailComponent> = {
22
22
  },
23
23
  getActionsApi: () => {
24
24
  return {
25
- updateFieldValue: () => {
26
- /* nothing */
25
+ updateFieldValue: (propName, value) => {
26
+ configProps.value = value;
27
27
  },
28
- triggerFieldChange: () => {
29
- /* nothing */
28
+ triggerFieldChange: (propName, value) => {
29
+ configProps.value = value;
30
30
  }
31
31
  };
32
32
  },
@@ -47,7 +47,6 @@ export const PegaDxilMyEmail: Story = {
47
47
  testId: configProps.testId,
48
48
  placeholder: configProps.placeholder,
49
49
  bReadonly$: configProps.readOnly,
50
- bDisabled$: configProps.disabled,
51
50
  bRequired$: configProps.required,
52
51
  displayMode$: configProps.displayMode
53
52
  }
@@ -47,7 +47,5 @@ export default meta;
47
47
  type Story = StoryObj<PegaDxilMyIconButtonUrlComponent>;
48
48
 
49
49
  export const PegaDxilMyIconButtonUrl: Story = {
50
- args: {
51
- countryCode: 'USA'
52
- }
50
+ args: {}
53
51
  };
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyIntegerComponent> = {
22
22
  },
23
23
  getActionsApi: () => {
24
24
  return {
25
- updateFieldValue: () => {
26
- /* nothing */
25
+ updateFieldValue: (propName, value) => {
26
+ configProps.value = value;
27
27
  },
28
- triggerFieldChange: () => {
29
- /* nothing */
28
+ triggerFieldChange: (propName, value) => {
29
+ configProps.value = value;
30
30
  }
31
31
  };
32
32
  },
@@ -46,7 +46,6 @@ export const PegaDxilMyInteger: Story = {
46
46
  helperText: configProps.helperText,
47
47
  testId: configProps.testId,
48
48
  bReadonly$: configProps.readOnly,
49
- bDisabled$: configProps.disabled,
50
49
  bRequired$: configProps.required,
51
50
  displayMode$: configProps.displayMode
52
51
  }
@@ -28,11 +28,11 @@ const meta: Meta<PegaDxilMyParagraphComponent> = {
28
28
  },
29
29
  getActionsApi: () => {
30
30
  return {
31
- updateFieldValue: () => {
32
- /* nothing */
31
+ updateFieldValue: (propName, value) => {
32
+ configProps.value = value;
33
33
  },
34
- triggerFieldChange: () => {
35
- /* nothing */
34
+ triggerFieldChange: (propName, value) => {
35
+ configProps.value = value;
36
36
  }
37
37
  };
38
38
  },
@@ -52,7 +52,6 @@ export const PegaDxilMyParagraph: Story = {
52
52
  helperText: configProps.helperText,
53
53
  testId: configProps.testId,
54
54
  bReadonly$: configProps.readOnly,
55
- bDisabled$: configProps.disabled,
56
55
  bRequired$: configProps.required,
57
56
  displayMode$: configProps.displayMode
58
57
  }
@@ -2,10 +2,11 @@
2
2
  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
3
3
  </div>
4
4
  <ng-template #noDisplayMode>
5
- <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
5
+ <div *ngIf="bHasForm$; else noEdit">
6
6
  <div [formGroup]="formGroup$">
7
7
  <div *ngIf="bVisible$">
8
8
  <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
9
+ <mat-label>{{ label$ }}</mat-label>
9
10
  <textarea
10
11
  matInput
11
12
  rows="5"
@@ -15,6 +16,7 @@
15
16
  [value]="value$"
16
17
  [required]="bRequired$"
17
18
  [disabled]="bDisabled$"
19
+ [readonly]="bReadonly$"
18
20
  [formControl]="fieldControl"
19
21
  (change)="fieldOnChange($event)"
20
22
  (blur)="fieldOnBlur($event)"
@@ -46,7 +46,6 @@ export const PegaDxilMyPercentage: Story = {
46
46
  helperText: configProps.helperText,
47
47
  testId: configProps.testId,
48
48
  bReadonly$: configProps.readOnly,
49
- bDisabled$: configProps.disabled,
50
49
  bRequired$: configProps.required,
51
50
  displayMode$: configProps.displayMode
52
51
  }
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyPhoneComponent> = {
22
22
  },
23
23
  getActionsApi: () => {
24
24
  return {
25
- updateFieldValue: () => {
26
- /* nothing */
25
+ updateFieldValue: (propName, value) => {
26
+ configProps.value = value;
27
27
  },
28
- triggerFieldChange: () => {
29
- /* nothing */
28
+ triggerFieldChange: (propName, value) => {
29
+ configProps.value = value;
30
30
  }
31
31
  };
32
32
  },
@@ -45,8 +45,8 @@ export const PegaDxilMyPhone: Story = {
45
45
  label$: configProps.label,
46
46
  helperText: configProps.helperText,
47
47
  testId: configProps.testId,
48
- bReadonly$: configProps.readOnly,
49
48
  bDisabled$: configProps.disabled,
49
+ bReadonly$: configProps.readOnly,
50
50
  bRequired$: configProps.required,
51
51
  displayMode$: configProps.displayMode
52
52
  }
@@ -2,7 +2,7 @@
2
2
  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
3
3
  </div>
4
4
  <ng-template #noDisplayMode>
5
- <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
5
+ <div *ngIf="bHasForm$; else noEdit">
6
6
  <div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
7
7
  <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
8
8
  <ngx-mat-intl-tel-input
@@ -11,6 +11,8 @@
11
11
  [preferredCountries]="['us']"
12
12
  [enablePlaceholder]="true"
13
13
  [enableSearch]="true"
14
+ [required]="bRequired$"
15
+ [disabled]="bDisabled$ || bReadonly$"
14
16
  (change)="fieldOnChange()"
15
17
  (blur)="fieldOnBlur()"
16
18
  >
@@ -51,11 +51,11 @@ const meta: Meta<PegaDxilMyPicklistComponent> = {
51
51
  },
52
52
  getActionsApi: () => {
53
53
  return {
54
- updateFieldValue: () => {
55
- /* nothing */
54
+ updateFieldValue: (propName, value) => {
55
+ configProps.value = value;
56
56
  },
57
- triggerFieldChange: () => {
58
- /* nothing */
57
+ triggerFieldChange: (propName, value) => {
58
+ configProps.value = value;
59
59
  }
60
60
  };
61
61
  },
@@ -12,6 +12,7 @@
12
12
  <mat-select
13
13
  [value]="value$"
14
14
  [required]="bRequired$"
15
+ [disabled]="bDisabled$"
15
16
  [attr.data-test-id]="testId"
16
17
  (selectionChange)="fieldOnChange($event)"
17
18
  [formControl]="fieldControl"
@@ -9,10 +9,9 @@
9
9
  <div [formGroup]="formGroup$" *ngIf="bVisible$">
10
10
  <mat-form-field class="psdk-radio-form" subscriptSizing="dynamic" [hintLabel]="helperText">
11
11
  <span class="psdk-label-wrapper-readonly">
12
- <label class="psdk-label-readonly">{{ label$ }}</label>
12
+ <mat-label class="psdk-label-readonly">{{ label$ }}</mat-label>
13
13
  </span>
14
- <!-- <mat-label>{{label$}}</mat-label> -->
15
- <input matInput [placeholder]="placeholder" style="display: none" />
14
+ <input matInput [placeholder]="placeholder" style="display: none" [required]="bRequired$" />
16
15
  <mat-radio-group
17
16
  [value]="value$"
18
17
  [required]="bRequired$"
@@ -24,7 +23,7 @@
24
23
  <mat-radio-button
25
24
  *ngFor="let opt of options$"
26
25
  [checked]="isSelected(opt.key)"
27
- [disabled]="bReadonly$"
26
+ [disabled]="bDisabled$ || bReadonly$"
28
27
  [value]="opt.key"
29
28
  class="psdk-radio-button"
30
29
  >
@@ -38,11 +38,11 @@ const meta: Meta<PegaDxilMySearchboxComponent> = {
38
38
  },
39
39
  getActionsApi: () => {
40
40
  return {
41
- updateFieldValue: () => {
42
- /* nothing */
41
+ updateFieldValue: (propName, value) => {
42
+ configProps.value = value;
43
43
  },
44
- triggerFieldChange: () => {
45
- /* nothing */
44
+ triggerFieldChange: (propName, value) => {
45
+ configProps.value = value;
46
46
  }
47
47
  };
48
48
  },
@@ -62,7 +62,6 @@ export const PegaDxilMySearchbox: Story = {
62
62
  helperText: configProps.helperText,
63
63
  testId: configProps.testId,
64
64
  bReadonly$: configProps.readOnly,
65
- bDisabled$: configProps.disabled,
66
65
  bRequired$: configProps.required,
67
66
  displayMode$: configProps.displayMode
68
67
  }
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyTextComponent> = {
22
22
  },
23
23
  getActionsApi: () => {
24
24
  return {
25
- updateFieldValue: () => {
26
- /* nothing */
25
+ updateFieldValue: (propName, value) => {
26
+ configProps.value = value;
27
27
  },
28
- triggerFieldChange: () => {
29
- /* nothing */
28
+ triggerFieldChange: (propName, value) => {
29
+ configProps.value = value;
30
30
  }
31
31
  };
32
32
  },
@@ -47,8 +47,6 @@ export const PegaDxilMyText: Story = {
47
47
  testId: configProps.testId,
48
48
  placeholder: configProps.placeholder,
49
49
  bReadonly$: configProps.readOnly,
50
- bDisabled$: configProps.disabled,
51
- bRequired$: configProps.required,
52
- bHideLabel$: configProps.hideLabel
50
+ bRequired$: configProps.required
53
51
  }
54
52
  };
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyTextInputComponent> = {
22
22
  },
23
23
  getActionsApi: () => {
24
24
  return {
25
- updateFieldValue: () => {
26
- /* nothing */
25
+ updateFieldValue: (propName, value) => {
26
+ configProps.value = value;
27
27
  },
28
- triggerFieldChange: () => {
29
- /* nothing */
28
+ triggerFieldChange: (propName, value) => {
29
+ configProps.value = value;
30
30
  }
31
31
  };
32
32
  },
@@ -47,7 +47,6 @@ export const PegaDxilMyTextInput: Story = {
47
47
  placeholder: configProps.placeholder,
48
48
  testId: configProps.testId,
49
49
  bReadonly$: configProps.readOnly,
50
- bDisabled$: configProps.disabled,
51
50
  bRequired$: configProps.required,
52
51
  displayMode$: configProps.displayMode
53
52
  }
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyTimeOfDayComponent> = {
22
22
  },
23
23
  getActionsApi: () => {
24
24
  return {
25
- updateFieldValue: () => {
26
- /* nothing */
25
+ updateFieldValue: (propName, value) => {
26
+ configProps.value = value;
27
27
  },
28
- triggerFieldChange: () => {
29
- /* nothing */
28
+ triggerFieldChange: (propName, value) => {
29
+ configProps.value = value;
30
30
  }
31
31
  };
32
32
  },
@@ -46,7 +46,6 @@ export const PegaDxilMyTimeOfDay: Story = {
46
46
  helperText: configProps.helperText,
47
47
  placeholder: configProps.placeholder,
48
48
  bReadonly$: configProps.readOnly,
49
- bDisabled$: configProps.disabled,
50
49
  bRequired$: configProps.required,
51
50
  displayMode$: configProps.displayMode
52
51
  }
@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyUrlComponent> = {
22
22
  },
23
23
  getActionsApi: () => {
24
24
  return {
25
- updateFieldValue: () => {
26
- /* nothing */
25
+ updateFieldValue: (propName, value) => {
26
+ configProps.value = value;
27
27
  },
28
- triggerFieldChange: () => {
29
- /* nothing */
28
+ triggerFieldChange: (propName, value) => {
29
+ configProps.value = value;
30
30
  }
31
31
  };
32
32
  },
@@ -46,8 +46,8 @@ export const PegaDxilMyUrl: Story = {
46
46
  helperText: configProps.helperText,
47
47
  placeholder: configProps.placeholder,
48
48
  bReadonly$: configProps.readOnly,
49
- bDisabled$: configProps.disabled,
50
49
  bRequired$: configProps.required,
51
- displayMode$: configProps.displayMode
50
+ displayMode$: configProps.displayMode,
51
+ value$: configProps.value
52
52
  }
53
53
  };
@@ -11,7 +11,6 @@
11
11
  [placeholder]="placeholder"
12
12
  [formControl]="fieldControl"
13
13
  [attr.data-test-id]="testId"
14
- [value]="value$"
15
14
  [required]="bRequired$"
16
15
  [matAutocomplete]="auto"
17
16
  (input)="fieldOnChange($event)"