@pega/dx-component-builder-sdk 24.2.10 → 24.2.12

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/mock.ts

@@ -44,6 +44,9 @@ export const child1 = [
             label: 'First Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -93,6 +96,9 @@ export const child1 = [
             label: 'Middle Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -142,6 +148,9 @@ export const child1 = [
             label: 'Last Name',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -194,6 +203,9 @@ export const child2 = [
             label: 'Email',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -231,7 +243,7 @@ export const child2 = [
             readOnly: false,
             placeholder: 'Phone',
             value: '2015550123',
-            label: '',
+            label: 'Phone Number',
             hasSuggestions: false
           };
         },
@@ -243,6 +255,9 @@ export const child2 = [
             label: 'Phone Number',
             hasSuggestions: false
           };
+        },
+        clearErrorMessages: () => {
+          /* nothing */
         }
       };
     }
@@ -349,7 +364,10 @@ export const child2 = [
         getContextName: () => {
           return 'app/primary_1/workarea_9';
         },
-        getDataObject: () => {}
+        getDataObject: () => {},
+        clearErrorMessages: () => {
+          /* nothing */
+        }
       };
     }
   }

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/pega-dxil-my-two-column-form.component.scss

@@ -11,7 +11,7 @@
 .psdk-two-column-column {
   width: 50%;
   float: left;
-  padding: 0rem 0rem;
+  padding: 0rem 1.5rem;
   height: 100%;
 }
 

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/pega-dxil-my-two-column-form.component.spec.ts

@@ -8,9 +8,8 @@ describe('PegaDxilMyTwoColumnFormComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyTwoColumnFormComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyTwoColumnFormComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-two-column-form/pega-dxil-my-two-column-form.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-pega-dxil-my-two-column-form',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class PegaDxilMyTwoColumnFormComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class PegaDxilMyTwoColumnFormComponent extends FormTemplateBase implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -29,6 +30,6 @@ export class PegaDxilMyTwoColumnFormComponent implements OnInit, OnChanges {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-case-widget/config.json

@@ -11,13 +11,13 @@
   "subtype": "CASE",
   "icon": "OneColumnPage.svg",
   "properties": [
-   {
+    {
       "name": "label",
       "label": "Label value",
       "format": "TEXT"
     }
   ],
   "defaultConfig": {
-     "label": "@L My Case Widget"
+    "label": "@L My Case Widget"
   }
 }

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

@@ -8,23 +8,13 @@ const meta: Meta<PegaDxilMyCaseWidgetComponent> = {
   title: 'PegaDxilMyCaseWidget',
   component: PegaDxilMyCaseWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyCaseWidgetComponent) => {
-    window.PCore = {
-      ...window.PCore,
-      getConstants: () => {
-        return {
-          CASE_INFO: {
-            CASE_INFO_ID: 'caseInfo.ID'
-          }
-        } as any;
-      },
-      getDataApiUtils: () => {
-        return {
-          getData: () => {
-            return Promise.resolve(historyData);
-          }
-        } as any;
-      }
+  render: (args) => {
+    window.PCore.getDataApiUtils = (): any => {
+      return {
+        getData: () => {
+          return Promise.resolve(historyData);
+        }
+      };
     };
     return {
       props: {
@@ -33,18 +23,18 @@ const meta: Meta<PegaDxilMyCaseWidgetComponent> = {
           getConfigProps: () => {
             return configProps;
           },
-          getValue: (value) => {
+          getValue: value => {
             return value;
           },
           getContextName: () => {
             return 'app/primary_1';
           },
-          getLocalizedValue: (value) => {
+          getLocalizedValue: value => {
             return value;
           }
         } as any
       }
-    }
+    };
   }
 };
 

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-case-widget/pega-dxil-my-case-widget.component.spec.ts

@@ -8,9 +8,8 @@ describe('PegaDxilMyCaseWidgetComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyCaseWidgetComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyCaseWidgetComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/demo.stories.tsx

@@ -4,37 +4,29 @@ import { configProps, operatorDetails } from './mock';
 
 import { PegaDxilMyPageCaseWidgetComponent } from './pega-dxil-my-page-case-widget.component';
 
-window.PCore = {
-  ...window.PCore,
-  getUserApi: () => {
-    return {
-      getOperatorDetails: () => {
-        return Promise.resolve(operatorDetails);
-      }
-    };
-  },
-  getLocaleUtils: () => {
-    return {
-      getLocaleValue: val => {
-        return val;
-      }
-    } as any;
-  }
+window.PCore.getUserApi = (): any => {
+  return {
+    getOperatorDetails: () => {
+      return new Promise(resolve => {
+        resolve(operatorDetails);
+      });
+    }
+  };
 };
 
 const meta: Meta<PegaDxilMyPageCaseWidgetComponent> = {
   title: 'PegaDxilMyPageCaseWidget',
   component: PegaDxilMyPageCaseWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPageCaseWidgetComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      }
-    } as any
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        }
+      } as any
     }
   })
 };

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/mock.ts

@@ -14,7 +14,7 @@ export const configProps = {
   },
   hideLabel: true,
   key: '_532zx1dah',
-  displayMode: 'LABELS_LEFT'
+  displayMode: 'DISPLAY_ONLY'
 };
 
 export const operatorDetails = {

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/pega-dxil-my-page-case-widget.component.spec.ts

@@ -8,9 +8,8 @@ describe('PegaDxilMyPageCaseWidgetComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyPageCaseWidgetComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyPageCaseWidgetComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-case-widget/pega-dxil-my-page-case-widget.component.ts

@@ -45,12 +45,15 @@ export class PegaDxilMyPageCaseWidgetComponent implements OnInit, OnChanges, OnD
     }
   }
 
+  // eslint-disable-next-line @angular-eslint/no-empty-lifecycle-method
   ngOnDestroy(): void {
-    this.renderer.destroy();
+    // Ref: https://medium.com/@kamil.galek/mythical-angular-component-styles-cleanup-in-angular-17-f799a08b2abc
+    // Commenting the below line as it is causing the Operator component's styles not getting applied.
+    // this.renderer.destroy();
   }
 
   updateSelf(): void {
-    const configProps$ = this.pConn$.getConfigProps() as any;
+    const configProps$ = this.pConn$.getConfigProps();
     this.displayLabel = this.displayLabel?.toLowerCase();
     const label = configProps$?.label?.toLowerCase();
     if (label === 'create operator' || this.displayLabel === 'create operator') {

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/config.json

@@ -11,49 +11,49 @@
   "subtype": "PAGE",
   "icon": "OneColumnPage.svg",
   "properties": [
-      {
-        "name": "description",
-        "label": "Description",
-        "format": "TEXT",
-        "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
-      },
-      {
-        "name": "whatsnewlink",
-        "label": "What's new link",
-        "format": "TEXT",
-        "defaultValue": "https://design.pega.com"
-      },
-      {
-        "name": "image",
-        "label": "Image link",
-        "format": "TEXT",
-        "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
-      },
-      {
-        "name": "datasource",
-        "label": "Data source for details",
-        "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
-        "format": "DATASOURCE",
-        "required": true,
-        "properties": [
-          {
-            "name": "name",
-            "label": "Label",
-            "defaultValue": "@P .pyLabel"
-          }
-        ]
-      },
-      {
-        "label": "Conditions",
-        "format": "GROUP",
-        "properties": [
-          {
-            "name": "visibility",
-            "label": "Visibility",
-            "format": "VISIBILITY"
-          }
-        ]
-      }
+    {
+      "name": "description",
+      "label": "Description",
+      "format": "TEXT",
+      "defaultValue": "We've launched a brand new experience to accelerate your workflow. Check out the guides to help you get the most of Cosmos."
+    },
+    {
+      "name": "whatsnewlink",
+      "label": "What's new link",
+      "format": "TEXT",
+      "defaultValue": "https://design.pega.com"
+    },
+    {
+      "name": "image",
+      "label": "Image link",
+      "format": "TEXT",
+      "defaultValue": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOSAxMSI+PHRpdGxlPlBlZ2EgdGV4dC1vbmx5IGxvZ288L3RpdGxlPjxwYXRoIHN0eWxlPSJmaWxsLW9wYWNpdHk6IC4yNTsiIGZpbGw9IiNmZmYiIGQ9Ik03LjcyIDMuODJjMCAyLjI1LTEuNzggMy40MS00IDMuNDFoLTEuNnYzSDBWLjQyaDMuOTRjMi4zNiAwIDMuNzggMS4zOSAzLjc4IDMuNHptLTQtMS40N2gtMS42djNoMS43QTEuNDcgMS40NyAwIDAgMCA1LjUgMy44MmMwLS45MS0uNjUtMS40Ny0xLjc1LTEuNDd6bTcuNjggNS45MWg1LjN2Mkg5LjI5Vi40Mmg3LjM4djEuOTNoLTUuMjR2Mmg0LjI0djEuOWgtNC4yNHpNMjMuMTggMGE1IDUgMCAwIDEgMy41NyAxLjI4TDI1LjYzIDIuOGEzLjc4IDMuNzggMCAwIDAtMS4wNS0uNjNBNC4zMiA0LjMyIDAgMCAwIDIzLjMxIDIgMy4xNyAzLjE3IDAgMCAwIDIwIDUuMjdhMy4xNiAzLjE2IDAgMCAwIDEgMi4zOSAzLjA3IDMuMDcgMCAwIDAgMi4xNy44NCA0LjYgNC42IDAgMCAwIDIuMDktLjVWNi4xOWgtMi4yVjQuMzhoNC4yNXY0LjU2YTUuNDEgNS40MSAwIDAgMS00LjA4IDEuNTdBNS4zNSA1LjM1IDAgMCAxIDE5LjQzIDlhNS4wNSA1LjA1IDAgMCAxLTEuNTYtMy43NCA1LjIxIDUuMjEgMCAwIDEgMS41Ni0zLjc2QTUuMzEgNS4zMSAwIDAgMSAyMy4xOCAwem0xMS4yOS40Mmw0LjEzIDkuNzloLTIuMjVMMzUuNDggOGgtNC4wNmwtLjkgMi4xOGgtMi4yTDMyLjUxLjQyem0uMjUgNS43MkwzMy40NCAzbC0xLjI5IDMuMTR6bTMtNWEuNzEuNzEgMCAwIDEtLjc0Ljc1LjcxLjcxIDAgMCAxLS43My0uNzUuNzMuNzMgMCAwIDEgLjc1LS43Mi43Mi43MiAwIDAgMSAuNzUuNzF6TTM3IC41M2EuNTkuNTkgMCAwIDAtLjYuNi42MS42MSAwIDEgMCAxLjIxIDAgLjYuNiAwIDAgMC0uNjEtLjZ6bS0uMjQgMVYuNzFIMzdjLjEyIDAgLjE4LjA2LjI1LjA2YS4yMS4yMSAwIDAgMSAuMDcuMTguMTkuMTkgMCAwIDEtLjA3LjE4cy0uMDcuMDgtLjEzLjA4bC4yNi4zNmgtLjJMMzcgMS4yOGgtLjF2LjI5em0uMTMtLjQ0aC4yM2EuMjYuMjYgMCAwIDAgLjA3LS4wOWgtLjA2Yy0uMDUtLjE3LS4wNS0uMTctLjEzLS4xN2gtLjF6Ii8+PC9zdmc+"
+    },
+    {
+      "name": "datasource",
+      "label": "Data source for details",
+      "defaultValue": "@DATASOURCE D_pyAnnouncements.pxResults",
+      "format": "DATASOURCE",
+      "required": true,
+      "properties": [
+        {
+          "name": "name",
+          "label": "Label",
+          "defaultValue": "@P .pyLabel"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    }
   ],
   "defaultConfig": {}
 }

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

@@ -8,16 +8,13 @@ const meta: Meta<PegaDxilMyPageWidgetComponent> = {
   title: 'PegaDxilMyPageWidget',
   component: PegaDxilMyPageWidgetComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyPageWidgetComponent) => {
-    window.PCore = {
-      ...window.PCore,
-      getDataApiUtils: () => {
-        return {
-          getData: () => {
-            return Promise.resolve(worklistData);
-          }
-        } as any;
-      }
+  render: (args) => {
+    window.PCore.getDataApiUtils = (): any => {
+      return {
+        getData: () => {
+          return Promise.resolve(worklistData);
+        }
+      };
     };
     return {
       props: {
@@ -34,7 +31,7 @@ const meta: Meta<PegaDxilMyPageWidgetComponent> = {
           }
         } as any
       }
-    }
+    };
   }
 };
 

package/tests/assets/sdk-a/components/createAll/custom-sdk/widget/pega-dxil-my-page-widget/pagecomponent.spec.ts

@@ -8,9 +8,8 @@ describe('PegaDxilMyPageWidgetComponent', () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ PegaDxilMyPageWidgetComponent ]
-    })
-    .compileComponents();
+      declarations: [PegaDxilMyPageWidgetComponent]
+    }).compileComponents();
   }));
 
   beforeEach(() => {

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

@@ -1,4 +1,3 @@
-
 <article class="psdk-announcement">
   <h2>{{ configProps$.header }}</h2>
   <div>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/alert-banner/alert-banner.component.ts

@@ -22,6 +22,6 @@ export class AlertBannerComponent {
   onAlertClose(config) {
     const { PAGE, type, target } = config;
     const { clearMessages } = PCore.getMessageManager();
-    clearMessages({ category: PAGE, type, context: target } as any);
+    clearMessages({ category: PAGE, type, context: target });
   }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/case-create-stage/case-create-stage.component.ts

@@ -53,6 +53,6 @@ export class CaseCreateStageComponent implements OnInit, OnDestroy {
   }
 
   updateSelf() {
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
   }
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.scss

@@ -49,7 +49,7 @@
 }
 
 .psdk-case-summary-fields {
-  padding: calc(2 * 0.5rem);
+  // padding: calc(2 * 0.5rem);
   display: grid;
   grid-row-gap: calc(2 * 0.5rem);
 }
@@ -90,6 +90,7 @@
   grid-template-columns: 1fr;
   grid-column-gap: calc(2 * 0.5rem);
   grid-row-gap: calc(1 * 0.5rem);
+  margin: 0;
 }
 
 .psdk-csf-secondary-field {

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.html

@@ -21,7 +21,7 @@
           <a *ngSwitchCase="'email'" href="mailto: {{ field.config.value }}">{{ _getValue(field.config.value) }}</a>
           <span *ngSwitchCase="'date'" class="psdk-details-text-style">{{ _formatDate(field.config.value, field.type) }}</span>
           <span *ngSwitchCase="'caseoperator'"></span>
-          <span *ngSwitchDefault>{{ _getValue(field.config.value) }}</span>
+          <span *ngSwitchDefault>{{ _getValue(field.config.value, field) }}</span>
         </div>
       </div>
     </ng-template>

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/material-details-fields/material-details-fields.component.ts

@@ -16,7 +16,10 @@ export class MaterialDetailsFieldsComponent {
   @Input() arFields$: any[];
   @Input() arHighlightedFields: any[];
 
-  _getValue(configValue) {
+  _getValue(configValue, field: any = {}) {
+    if (field?.type === 'userreference') {
+      return configValue.userName;
+    }
     if (configValue && configValue != '') {
       return configValue;
     }

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/operator/operator.component.ts

@@ -53,7 +53,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   updateSelf(): void {
-    const configProps$ = this.pConn$.getConfigProps() as any;
+    const configProps$ = this.pConn$.getConfigProps();
     this.displayLabel = this.displayLabel?.toLowerCase();
     const label = configProps$?.label?.toLowerCase();
     if (label === 'create operator' || this.displayLabel === 'create operator') {

package/tests/assets/sdk-a/components/createAll/override-sdk/designSystemExtension/pulse/pulse.component.ts

@@ -17,8 +17,8 @@ export class PulseComponent implements OnInit {
   @Input() pConn$: typeof PConnect;
 
   configProps$: PulseProps;
-  currentUser$: string;
-  currentUserInitials$ = '--';
+  currentUser$: string | undefined;
+  currentUserInitials$: string | undefined = '--';
 
   ngOnInit() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
@@ -26,13 +26,13 @@ export class PulseComponent implements OnInit {
     this.currentUser$ = PCore.getEnvironmentInfo().getOperatorName();
 
     if (this.currentUser$ != '') {
-      this.currentUserInitials$ = this.currentUser$.charAt(0);
+      this.currentUserInitials$ = this.currentUser$?.charAt(0);
 
-      if (this.currentUser$.lastIndexOf(' ') > 0) {
-        const lastName = this.currentUser$.substring(this.currentUser$.lastIndexOf(' ') + 1);
+      if (this.currentUser$ && this.currentUser$.lastIndexOf(' ') > 0) {
+        const lastName = this.currentUser$?.substring(this.currentUser$.lastIndexOf(' ') + 1);
         this.currentUserInitials$ += lastName.charAt(0);
-      } else if (this.currentUser$.lastIndexOf('.') > 0) {
-        const lastName = this.currentUser$.substring(this.currentUser$.lastIndexOf('.') + 1);
+      } else if (this.currentUser$ && this.currentUser$.lastIndexOf('.') > 0) {
+        const lastName = this.currentUser$?.substring(this.currentUser$.lastIndexOf('.') + 1);
         this.currentUserInitials$ += lastName.charAt(0);
       }
     }

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

@@ -2,7 +2,7 @@ import { Component, OnInit, Input, ChangeDetectorRef, forwardRef, OnDestroy } fr
 import { CommonModule } from '@angular/common';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { interval, Observable } from 'rxjs';
@@ -71,6 +71,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
   hideLabel: boolean;
   filteredOptions: Observable<any[]>;
   filterValue = '';
+  actionsApi: Object;
+  propName: string;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -102,7 +104,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
 
     this.filteredOptions = this.fieldControl.valueChanges.pipe(
       startWith(''),
-      map(value => this._filter(value || ''))
+      map(value => this._filter((value as string) || ''))
     );
   }
 
@@ -151,6 +153,9 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
 
     this.setPropertyValuesFromProps();
 
+    this.actionsApi = this.pConn$.getActionsApi();
+    this.propName = this.pConn$.getStateProps().value;
+
     const context = this.pConn$.getContextName();
     const { columns, datasource } = this.generateColumnsAndDataSource();
 
@@ -184,7 +189,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
       this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
     }
 
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    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
     }
@@ -220,7 +225,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     let datasource = this.configProps$.datasource;
     let columns = this.configProps$.columns;
     // const { deferDatasource, datasourceMetadata } = this.configProps$;
-    const { deferDatasource, datasourceMetadata }: any = this.pConn$.getConfigProps();
+    const { deferDatasource, datasourceMetadata } = this.pConn$.getConfigProps();
     // convert associated to datapage listtype and transform props
     // Process deferDatasource when datapage name is present. WHhen tableType is promptList / localList
     if (deferDatasource && datasourceMetadata?.datasource?.name) {
@@ -299,13 +304,14 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     // this works - this.pConn$.setValue( this.componentReference, this.fieldControl.value);
     // PConnect wants to use changeHandler for onChange
     // this.angularPConnect.changeHandler( this, event);
-    this.filterValue = (event.target as HTMLInputElement).value;
-
-    this.angularPConnectData.actions?.onChange(this, event);
+    const value = (event.target as HTMLInputElement).value;
+    this.filterValue = value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
-  optionChanged(event: MatAutocompleteSelectedEvent) {
-    this.angularPConnectData.actions?.onChange(this, event);
+  optionChanged(event: any) {
+    const value = event?.option?.value;
+    handleEvent(this.actionsApi, 'change', this.propName, value);
   }
 
   fieldOnBlur(event: Event) {
@@ -315,11 +321,8 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
       const index = this.options$?.findIndex(element => element.value === el.value);
       key = index > -1 ? (key = this.options$[index].key) : el.value;
     }
-
     const value = key;
-    const actionsApi = this.pConn$?.getActionsApi();
-    const propName = (this.pConn$?.getStateProps() as any).value;
-    handleEvent(actionsApi, 'changeNblur', propName, value);
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     if (this.configProps$?.onRecordChange) {
       el.value = value;
       this.configProps$.onRecordChange(event);