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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/dx-component-builder-sdk",
-  "version": "0.242.20",
+  "version": "0.242.21",
   "description": "Utility for building custom UI components",
   "bin": "./bin/index.js",
   "scripts": {

package/src/tasks/create/templates/SDK-Angular/field/Boolean/boolean.component.html.mustache

@@ -20,6 +20,8 @@
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"
+            [disabled]="bDisabled$ || bReadonly$"
+            [required]="bRequired$"
             [attr.data-test-id]="testId + ':' + item.value"
             (change)="handleChangeMultiMode($event, item)"
             (blur)="fieldOnBlur($event)"
@@ -31,6 +33,8 @@
         <mat-checkbox
           [labelPosition]="'after'"
           [checked]="isChecked$"
+          [disabled]="bDisabled$ || bReadonly$"
+          [required]="bRequired$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"

package/src/tasks/create/templates/SDK-Angular/field/Date/date.component.html.mustache

@@ -17,10 +17,11 @@
           type="text"
           [value]="value$"
           [required]="bRequired$"
+          [disabled]="bDisabled$"
           [formControl]="fieldControl"
           (dateChange)="fieldOnDateChange($event)"
         />
-        <mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
         <mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/src/tasks/create/templates/SDK-Angular/field/Date/demo.stories.tsx.mustache

@@ -22,11 +22,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },

package/src/tasks/create/templates/SDK-Angular/field/DateTime/date-time.component.html.mustache

@@ -16,9 +16,10 @@
           [formControl]="fieldControl"
           (dateTimeChange)="fieldOnDateChange($event)"
           [required]="bRequired$"
+          [readonly]="bDisabled$"
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
-        <owl-date-time #dtPicker></owl-date-time>
+        <owl-date-time #dtPicker [disabled]="bDisabled$"></owl-date-time>
         <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/src/tasks/create/templates/SDK-Angular/field/DateTime/demo.stories.tsx.mustache

@@ -22,11 +22,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },

package/src/tasks/create/templates/SDK-Angular/field/Decimal/demo.stories.tsx.mustache

@@ -49,7 +49,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Currency/demo.stories.tsx.mustache

@@ -46,7 +46,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -46,7 +46,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -47,7 +47,5 @@ export default meta;
 type Story = StoryObj<{{COMPONENT_CLASS_NAME}}Component>;
 
 export const {{COMPONENT_CLASS_NAME}}: Story = {
-  args: {
-    countryCode: 'USA'
-  }
+  args: {}
 };

package/src/tasks/create/templates/SDK-Angular/field/Integer/demo.stories.tsx.mustache

@@ -22,11 +22,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -46,7 +46,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/src/tasks/create/templates/SDK-Angular/field/Picklist/demo.stories.tsx.mustache

@@ -51,11 +51,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },

package/src/tasks/create/templates/SDK-Angular/field/Picklist/picklist.component.html.mustache

@@ -14,6 +14,7 @@
         <mat-select
           [value]="value$"
           [required]="bRequired$"
+          [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           (selectionChange)="fieldOnChange($event)"
           [formControl]="fieldControl"

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/demo.stories.tsx.mustache

@@ -38,11 +38,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -62,7 +62,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.html.mustache

@@ -26,7 +26,7 @@
         <mat-radio-button
           *ngFor="let opt of options$"
           [checked]="isSelected(opt.key)"
-          [disabled]="bReadonly$"
+          [disabled]="bDisabled$ || bReadonly$"
           [value]="opt.key"
           class="psdk-radio-button"
         >

package/src/tasks/create/templates/SDK-Angular/field/Text/demo.stories.tsx.mustache

@@ -22,11 +22,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -47,8 +47,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     testId: configProps.testId,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
-    bRequired$: configProps.required,
-    bHideLabel$: configProps.hideLabel
+    bRequired$: configProps.required
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/Text-Email/demo.stories.tsx.mustache

@@ -22,11 +22,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -47,7 +47,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     testId: configProps.testId,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/demo.stories.tsx.mustache

@@ -22,11 +22,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -47,7 +47,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     placeholder: configProps.placeholder,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/demo.stories.tsx.mustache

@@ -28,11 +28,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -52,7 +52,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/src/tasks/create/templates/SDK-Angular/field/Text-Phone/demo.stories.tsx.mustache

@@ -22,11 +22,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -45,8 +45,8 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     label$: configProps.label,
     helperText: configProps.helperText,
     testId: configProps.testId,
-    bReadonly$: configProps.readOnly,
     bDisabled$: configProps.disabled,
+    bReadonly$: configProps.readOnly,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/src/tasks/create/templates/SDK-Angular/field/Text-Phone/text-phone.component.html.mustache

@@ -13,6 +13,8 @@
           [preferredCountries]="['us']"
           [enablePlaceholder]="true"
           [enableSearch]="true"
+          [required]="bRequired$"
+          [disabled]="bDisabled$"
           (change)="fieldOnChange()"
           (blur)="fieldOnBlur()"
         >

package/src/tasks/create/templates/SDK-Angular/field/Text-URL/demo.stories.tsx.mustache

@@ -22,11 +22,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -46,8 +46,8 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     helperText: configProps.helperText,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
-    displayMode$: configProps.displayMode
+    displayMode$: configProps.displayMode,
+    value$: configProps.value
   }
 };

package/src/tasks/create/templates/SDK-Angular/field/TimeOfDay/demo.stories.tsx.mustache

@@ -22,11 +22,11 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -46,7 +46,6 @@ export const {{COMPONENT_CLASS_NAME}}: Story = {
     helperText: configProps.helperText,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyTestTextComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -47,8 +47,6 @@ export const PegaDxilMyTestText: Story = {
     testId: configProps.testId,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
-    bRequired$: configProps.required,
-    bHideLabel$: configProps.hideLabel
+    bRequired$: configProps.required
   }
 };

package/tests/assets/sdk-a/components/create/override-sdk/field/auto-complete/auto-complete.component.html

@@ -11,7 +11,6 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          [value]="value$"
           [required]="bRequired$"
           [matAutocomplete]="auto"
           (input)="fieldOnChange($event)"

package/tests/assets/sdk-a/components/create/override-sdk/field/auto-complete/auto-complete.component.ts

@@ -14,6 +14,10 @@ import { DatapageService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
+interface IOption {
+  key: string;
+  value: string;
+}
 interface AutoCompleteProps extends PConnFieldProps {
   // If any, enter additional props that only exist on AutoComplete here
   deferDatasource?: boolean;
@@ -108,6 +112,13 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     );
   }
 
+  setOptions(options: IOption[]) {
+    this.options$ = options;
+    const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
+    this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+    this.fieldControl.setValue(this.value$);
+  }
+
   ngOnDestroy(): void {
     if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
@@ -149,6 +160,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     if (this.configProps$.value != undefined) {
       const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
       this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
     }
 
     this.setPropertyValuesFromProps();
@@ -191,7 +203,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
 
     this.componentReference = this.pConn$.getStateProps().value;
     if (this.listType === 'associated') {
-      this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      this.setOptions(optionsList);
     }
 
     if (!this.displayMode$ && this.listType !== 'associated') {
@@ -263,7 +276,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
       };
       optionsData.push(obj);
     });
-    this.options$ = optionsData;
+    this.setOptions(optionsData);
   }
 
   flattenParameters(params = {}) {

package/tests/assets/sdk-a/components/create/override-sdk/field/dropdown/dropdown.component.ts

@@ -121,7 +121,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
     // call updateSelf when initializing
     this.checkAndUpdate();
     // this should get called afer checkAndUpdate
-    this.getDatapageData();
 
     if (this.formGroup$) {
       // add control to formGroup
@@ -253,7 +252,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
     );
 
     this.localizedValue = this.options$?.find(opt => opt.key === this.value$)?.value || this.localizedValue;
-
+    this.getDatapageData();
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
       const timer = interval(100).subscribe(() => {

package/tests/assets/sdk-a/components/create/override-sdk/field/phone/config-ext.json

@@ -4,6 +4,6 @@
     "label": "Phone",
     "description": "Phone",
     "type": "Field",
-    "subtype": "DATA_CAPTURE",
+    "subtype": "Text-Phone",
     "properties": []
 }

package/tests/assets/sdk-a/components/create/override-sdk/field/user-reference/user-reference.component.ts

@@ -168,7 +168,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
-    this.value$ = value && typeof value === 'object' && value.userName ? value.userName : (value ?? '');
+    if (value && typeof value === 'object') {
+      this.value$ = value.userName ? value.userName : '';
+    } else {
+      this.value$ = value || '';
+    }
 
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));

package/tests/assets/sdk-a/components/create/override-sdk/infra/root-container/root-container.component.ts

@@ -171,9 +171,9 @@ export class RootContainerComponent implements OnInit, OnDestroy {
 
   async configureModalContainer() {
     const sdkConfig = await this.scService.getSdkConfig();
-    const showModalsInEmbedMode = sdkConfig.serverConfig.showModalsInEmbedMode;
+    const showModalsInEmbeddedMode = sdkConfig.serverConfig.showModalsInEmbeddedMode;
 
-    if (!this.displayOnlyFA$ || showModalsInEmbedMode) {
+    if (!this.displayOnlyFA$ || showModalsInEmbeddedMode) {
       const configObjModal = PCore.createPConnect({
         meta: {
           type: 'ModalViewContainer',

package/tests/assets/sdk-a/components/create/override-sdk/template/confirmation/confirmation.component.html

@@ -14,7 +14,7 @@
       <button mat-raised-button color="primary" (click)="onConfirmViewClose()">Done</button>
     </div>
   </div>
-  <div *ngIf="toDoList?.length > 0">
+  <div *ngIf="!showConfirmView && toDoList?.length > 0">
     <component-mapper
       name="Todo"
       [props]="{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }"

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/simple-table-manual.component.scss

@@ -5,6 +5,10 @@
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   overflow-y: auto;
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 }
 
 table {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-boolean/pega-dxil-my-boolean.component.html

@@ -18,6 +18,8 @@
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"
+            [disabled]="bDisabled$ || bReadonly$"
+            [required]="bRequired$"
             [attr.data-test-id]="testId + ':' + item.value"
             (change)="handleChangeMultiMode($event, item)"
             (blur)="fieldOnBlur($event)"
@@ -29,6 +31,7 @@
         <mat-checkbox
           [labelPosition]="'after'"
           [checked]="isChecked$"
+          [disabled]="bDisabled$ || bReadonly$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-currency/demo.stories.tsx

@@ -46,7 +46,6 @@ export const PegaDxilMyCurrency: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyDateComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date/pega-dxil-my-date.component.html

@@ -15,10 +15,11 @@
           type="text"
           [value]="value$"
           [required]="bRequired$"
+          [disabled]="bDisabled$"
           [formControl]="fieldControl"
           (dateChange)="fieldOnDateChange($event)"
         />
-        <mat-datepicker-toggle matSuffix [for]="pegadate"></mat-datepicker-toggle>
+        <mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
         <mat-datepicker #pegadate [startAt]="value$"></mat-datepicker>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyDateTimeComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/pega-dxil-my-date-time.component.html

@@ -14,9 +14,10 @@
           [formControl]="fieldControl"
           (dateTimeChange)="fieldOnDateChange($event)"
           [required]="bRequired$"
+          [readonly]="bDisabled$"
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
-        <owl-date-time #dtPicker></owl-date-time>
+        <owl-date-time #dtPicker [disabled]="bDisabled$"></owl-date-time>
         <mat-error *ngIf="fieldControl?.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/demo.stories.tsx

@@ -49,7 +49,6 @@ export const PegaDxilMyDecimal: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-email/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyEmailComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -47,7 +47,6 @@ export const PegaDxilMyEmail: Story = {
     testId: configProps.testId,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-icon-button-url/demo.stories.tsx

@@ -47,7 +47,5 @@ export default meta;
 type Story = StoryObj<PegaDxilMyIconButtonUrlComponent>;
 
 export const PegaDxilMyIconButtonUrl: Story = {
-  args: {
-    countryCode: 'USA'
-  }
+  args: {}
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-integer/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyIntegerComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -46,7 +46,6 @@ export const PegaDxilMyInteger: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-paragraph/demo.stories.tsx

@@ -28,11 +28,11 @@ const meta: Meta<PegaDxilMyParagraphComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -52,7 +52,6 @@ export const PegaDxilMyParagraph: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/demo.stories.tsx

@@ -46,7 +46,6 @@ export const PegaDxilMyPercentage: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyPhoneComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -45,8 +45,8 @@ export const PegaDxilMyPhone: Story = {
     label$: configProps.label,
     helperText: configProps.helperText,
     testId: configProps.testId,
-    bReadonly$: configProps.readOnly,
     bDisabled$: configProps.disabled,
+    bReadonly$: configProps.readOnly,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/pega-dxil-my-phone.component.html

@@ -11,6 +11,8 @@
           [preferredCountries]="['us']"
           [enablePlaceholder]="true"
           [enableSearch]="true"
+          [required]="bRequired$"
+          [disabled]="bDisabled$"
           (change)="fieldOnChange()"
           (blur)="fieldOnBlur()"
         >

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/demo.stories.tsx

@@ -51,11 +51,11 @@ const meta: Meta<PegaDxilMyPicklistComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/pega-dxil-my-picklist.component.html

@@ -12,6 +12,7 @@
         <mat-select
           [value]="value$"
           [required]="bRequired$"
+          [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           (selectionChange)="fieldOnChange($event)"
           [formControl]="fieldControl"

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-radiobuttons/pega-dxil-my-radiobuttons.component.html

@@ -24,7 +24,7 @@
         <mat-radio-button
           *ngFor="let opt of options$"
           [checked]="isSelected(opt.key)"
-          [disabled]="bReadonly$"
+          [disabled]="bDisabled$ || bReadonly$"
           [value]="opt.key"
           class="psdk-radio-button"
         >

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-searchbox/demo.stories.tsx

@@ -38,11 +38,11 @@ const meta: Meta<PegaDxilMySearchboxComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -62,7 +62,6 @@ export const PegaDxilMySearchbox: Story = {
     helperText: configProps.helperText,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyTextComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -47,8 +47,6 @@ export const PegaDxilMyText: Story = {
     testId: configProps.testId,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
-    bRequired$: configProps.required,
-    bHideLabel$: configProps.hideLabel
+    bRequired$: configProps.required
   }
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-text-input/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyTextInputComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -47,7 +47,6 @@ export const PegaDxilMyTextInput: Story = {
     placeholder: configProps.placeholder,
     testId: configProps.testId,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-time-of-day/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyTimeOfDayComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -46,7 +46,6 @@ export const PegaDxilMyTimeOfDay: Story = {
     helperText: configProps.helperText,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
     displayMode$: configProps.displayMode
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-url/demo.stories.tsx

@@ -22,11 +22,11 @@ const meta: Meta<PegaDxilMyUrlComponent> = {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: () => {
-              /* nothing */
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
             },
-            triggerFieldChange: () => {
-              /* nothing */
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
             }
           };
         },
@@ -46,8 +46,8 @@ export const PegaDxilMyUrl: Story = {
     helperText: configProps.helperText,
     placeholder: configProps.placeholder,
     bReadonly$: configProps.readOnly,
-    bDisabled$: configProps.disabled,
     bRequired$: configProps.required,
-    displayMode$: configProps.displayMode
+    displayMode$: configProps.displayMode,
+    value$: configProps.value
   }
 };

package/tests/assets/sdk-a/components/createAll/override-sdk/field/auto-complete/auto-complete.component.html

@@ -11,7 +11,6 @@
           [placeholder]="placeholder"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"
-          [value]="value$"
           [required]="bRequired$"
           [matAutocomplete]="auto"
           (input)="fieldOnChange($event)"

package/tests/assets/sdk-a/components/createAll/override-sdk/field/auto-complete/auto-complete.component.ts

@@ -14,6 +14,10 @@ import { DatapageService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
+interface IOption {
+  key: string;
+  value: string;
+}
 interface AutoCompleteProps extends PConnFieldProps {
   // If any, enter additional props that only exist on AutoComplete here
   deferDatasource?: boolean;
@@ -108,6 +112,13 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     );
   }
 
+  setOptions(options: IOption[]) {
+    this.options$ = options;
+    const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
+    this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+    this.fieldControl.setValue(this.value$);
+  }
+
   ngOnDestroy(): void {
     if (this.formGroup$) {
       this.formGroup$.removeControl(this.controlName$);
@@ -149,6 +160,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     if (this.configProps$.value != undefined) {
       const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
       this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
+      this.fieldControl.setValue(this.value$);
     }
 
     this.setPropertyValuesFromProps();
@@ -191,7 +203,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
 
     this.componentReference = this.pConn$.getStateProps().value;
     if (this.listType === 'associated') {
-      this.options$ = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
+      this.setOptions(optionsList);
     }
 
     if (!this.displayMode$ && this.listType !== 'associated') {
@@ -263,7 +276,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
       };
       optionsData.push(obj);
     });
-    this.options$ = optionsData;
+    this.setOptions(optionsData);
   }
 
   flattenParameters(params = {}) {

package/tests/assets/sdk-a/components/createAll/override-sdk/field/dropdown/dropdown.component.ts

@@ -121,7 +121,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
     // call updateSelf when initializing
     this.checkAndUpdate();
     // this should get called afer checkAndUpdate
-    this.getDatapageData();
 
     if (this.formGroup$) {
       // add control to formGroup
@@ -253,7 +252,7 @@ export class DropdownComponent implements OnInit, OnDestroy {
     );
 
     this.localizedValue = this.options$?.find(opt => opt.key === this.value$)?.value || this.localizedValue;
-
+    this.getDatapageData();
     // trigger display of error message with field control
     if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
       const timer = interval(100).subscribe(() => {

package/tests/assets/sdk-a/components/createAll/override-sdk/field/phone/config-ext.json

@@ -4,6 +4,6 @@
     "label": "Phone",
     "description": "Phone",
     "type": "Field",
-    "subtype": "DATA_CAPTURE",
+    "subtype": "Text-Phone",
     "properties": []
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/field/user-reference/user-reference.component.ts

@@ -168,7 +168,11 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
     this.placeholder = placeholder || '';
     this.displayMode$ = displayMode;
 
-    this.value$ = value && typeof value === 'object' && value.userName ? value.userName : (value ?? '');
+    if (value && typeof value === 'object') {
+      this.value$ = value.userName ? value.userName : '';
+    } else {
+      this.value$ = value || '';
+    }
 
     const { readOnly, required } = props;
     [this.bReadonly$, this.bRequired$] = [readOnly, required].map(prop => prop === true || (typeof prop === 'string' && prop === 'true'));

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/root-container/root-container.component.ts

@@ -171,9 +171,9 @@ export class RootContainerComponent implements OnInit, OnDestroy {
 
   async configureModalContainer() {
     const sdkConfig = await this.scService.getSdkConfig();
-    const showModalsInEmbedMode = sdkConfig.serverConfig.showModalsInEmbedMode;
+    const showModalsInEmbeddedMode = sdkConfig.serverConfig.showModalsInEmbeddedMode;
 
-    if (!this.displayOnlyFA$ || showModalsInEmbedMode) {
+    if (!this.displayOnlyFA$ || showModalsInEmbeddedMode) {
       const configObjModal = PCore.createPConnect({
         meta: {
           type: 'ModalViewContainer',

package/tests/assets/sdk-a/components/createAll/override-sdk/template/confirmation/confirmation.component.html

@@ -14,7 +14,7 @@
       <button mat-raised-button color="primary" (click)="onConfirmViewClose()">Done</button>
     </div>
   </div>
-  <div *ngIf="toDoList?.length > 0">
+  <div *ngIf="!showConfirmView && toDoList?.length > 0">
     <component-mapper
       name="Todo"
       [props]="{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }"

package/tests/assets/sdk-a/components/createAll/override-sdk/template/simple-table-manual/simple-table-manual.component.scss

@@ -5,6 +5,10 @@
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   overflow-y: auto;
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
 }
 
 table {