@pega/dx-component-builder-sdk 0.25.5 → 0.25.6

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/index.tsx.mustache

@@ -1,15 +1,23 @@
 import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import Popover from '@material-ui/core/Popover';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import Popover from '@mui/material/Popover';
+import Grid2 from '@mui/material/Grid2';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import { Theme as MuiTheme } from "@mui/material/styles";
 
 import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 
 import Styled{{COMPONENT_CLASS_NAME}}Wrapper from './styles';
+
 import { PConnProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
+declare module "@mui/private-theming" {
+  interface DefaultTheme extends MuiTheme {
+    spacing: (spacing: number) => string;
+  }
+}
+
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   // If any, enter additional props that only exist on this component
   label: string;
@@ -22,14 +30,14 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnProps {
   displayLabel?: any;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles(myTheme => ({
   root: {
-    padding: theme.spacing(1),
-    margin: theme.spacing(1)
+    padding: myTheme.spacing(1),
+    margin: myTheme.spacing(1)
   },
   popover: {
-    padding: theme.spacing(1),
-    margin: theme.spacing(1)
+    padding: myTheme.spacing(1),
+    margin: myTheme.spacing(1)
   }
 }));
 
@@ -167,25 +175,28 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
 
     // There are fields, so build the grid.
     return (
-      <Grid container className={classes.popover} spacing={1}>
-        <Grid item xs={12}>
+      <Grid2 container className={classes.popover} spacing={1}>
+        {{! pick new delimiters for mustache }}
+        {{=<% %>=}}
+        <Grid2 size={{ xs: 12 }}>
           <Typography variant='h6'>{caseOpName}</Typography>
-        </Grid>
+        </Grid2>
         {popoverFields.map(field => {
           return (
             <React.Fragment key={field.id}>
-              <Grid container item xs={12} spacing={1}>
-                <Grid item xs={6}>
+              <Grid2 container size={{ xs: 12 }} spacing={1}>
+                <Grid2 size={{ xs: 12 }}>
                   <Typography variant='caption'>{field.name}</Typography>
-                </Grid>
-                <Grid item xs={6}>
+                </Grid2>
+                <Grid2 size={{ xs: 6 }}>
                   <Typography variant='subtitle2'>{field.value}</Typography>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Grid2>
             </React.Fragment>
           );
         })}
-      </Grid>
+        <%={{ }}=%>     {{! revert delimiters for mustache }}
+      </Grid2>
     );
   }
 

package/src/tasks/create/templates/SDK-React/widget/PAGE-CASE/mock.ts.mustache

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

package/src/tasks/index.js

@@ -9,6 +9,7 @@ export { default as mapAllComponents } from './map-all/index.js';
 export { default as publishComponent } from './publish/index.js';
 export { default as publishAllComponents } from './publish-all/index.js';
 export { default as renameComponent } from './rename/index.js';
+export { default as quarantine } from './quarantine/index.js';
 export { default as listComponents } from './list/index.js';
 export { default as updateComponent } from './update/index.js';
 export { default as validate } from './validator/index.js';

package/src/tasks/map/map.js

@@ -43,7 +43,8 @@ export const getPrettierFormattedString = async (content) => {
 
   // format the contents
   if (options) {
-    return prettier.format(content, options);
+    options.parser = 'babel';
+    return  prettier.format(content, options);
   }
   else {
     return content;

package/src/tasks/publish/helper.js

@@ -228,7 +228,7 @@ export const publishComponentToServer = async (data, doFetch = true) => {
 
   const configContentObj = JSON.parse(configContent);
 
-  if (configContentObj.type == null || configContentObj.subtype == null) {
+  if (!configContentObj.type) {
     console.log(chalk.bold.yellow(`No config-ext to publish for ${componentKey}`));
     return;
   }

package/src/tasks/quarantine/index.js

@@ -0,0 +1,83 @@
+import fs from 'fs';
+import path, {join} from 'path';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+
+
+import {
+  showVersion,
+  getFramework,
+  getJestFunctionalTestList } from '../../util.js';
+
+import { JEST_TESTS_FUNCTIONAL_PATH } from '../../constants.js';
+
+
+export const quarnUnquarnTests = async(answers) => {
+  switch (answers.QuarUnQuar) {
+    case "Quarantine" :
+      await quarantineTests(answers);
+      break;
+    case "Unquarantine" :
+      await unquarantineTests(answers);
+      break;
+  }
+}
+
+
+
+export const quarantineTests = async(answers) => {
+  const testList = await getJestFunctionalTestList("ALL");
+  const frameWork = await getFramework();
+  const SDK_PATH = frameWork === "SDK-Angular" ? "sdk-a" : "sdk-r";
+  const SDK_PATH_CAP = SDK_PATH.toUpperCase();
+  const functionalPath = join(path.resolve(), JEST_TESTS_FUNCTIONAL_PATH, SDK_PATH);
+
+  // rename .test to .notest
+  for (const testName of testList) {
+    const quarantineName = testName.replace(".test", ".notest");
+    fs.renameSync(join(functionalPath, testName), join(functionalPath, quarantineName));
+  }
+
+  console.log(chalk.green(`All ${SDK_PATH_CAP} tests are quarantined.`));
+
+}
+
+export const unquarantineTests = async(answers) => {
+  const testList = await getJestFunctionalTestList("ALL");
+  const frameWork = await getFramework();
+  const SDK_PATH = frameWork === "SDK-Angular" ? "sdk-a" : "sdk-r";
+  const SDK_PATH_CAP = SDK_PATH.toUpperCase();
+  const functionalPath = join(path.resolve(), JEST_TESTS_FUNCTIONAL_PATH, SDK_PATH);
+
+  // rename .test to .notest
+  for (const testName of testList) {
+    const restoreName = testName.replace(".notest", ".test");
+    fs.renameSync(join(functionalPath, testName), join(functionalPath, restoreName));
+  }
+
+  console.log(chalk.green(`All ${SDK_PATH_CAP} tests are unquarantined.`));
+
+}
+
+
+export default async options => {
+
+  await showVersion();
+
+  const quaranAnswers = await inquirer.prompt([
+
+    {
+      name: 'QuarUnQuar',
+      type: 'rawlist',
+      message: `Quarantine or UnQuarantine tests`,
+      choices: ["Quarantine", "Unquarantine"],
+      default: 'Quarantine'
+
+    }
+  ]);
+
+  // await showCurrentStatus();
+  await quarnUnquarnTests(quaranAnswers);
+
+
+}

package/src/util.js

@@ -40,7 +40,8 @@ import {
   COMPONENT_DIRECTORY_SUFFIX_SDK,
   DXCB_COMPONENT_DEFAULTS,
   SERVER_CONFIG,
-  SERVER_REST_URL
+  SERVER_REST_URL,
+  JEST_TESTS_FUNCTIONAL_PATH
 } from './constants.js';
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
@@ -760,11 +761,59 @@ export const showVersion = () => {
 
     const nodeMajorVersion = parseInt(arNodeVersion[0]);
     const nodeMinorVersion = parseInt(arNodeVersion[1]);
-
-    if (nodeMajorVersion < 18) {
-      console.log(chalk.redBright("DX Component Builder - SDK requires node v18 or greater, current version: " + process.version));
+    const nodePatchVersion = parseInt(arNodeVersion[2]);
+
+    if (nodeMajorVersion < 24) {
+      console.log(
+        chalk.redBright(
+          `DX Component Builder SDK - requires node v24.14.1 or greater, current version: ${process.version}`
+        )
+      );
+      process.exit(1);
+    }
+    else if ( nodeMajorVersion == 24 && nodeMinorVersion < 4) {
+      console.log(
+        chalk.redBright(
+          `DX Component Builder SDK - requires node v24.14.1 or greater, current version: ${process.version}`
+        )
+      );
+      process.exit(1);
+    }
+    else if (nodeMajorVersion == 24 && nodeMinorVersion == 4 && nodePatchVersion < 1 ) {
+      console.log(
+        chalk.redBright(
+          `DX Component Builder SDK - requires node v24.14.1 or greater, current version: ${process.version}`
+        )
+      );
       process.exit(1);
     }
+};
+
+export const getJestFunctionalTestList = async(whichTests) => {
+  const frameWork = await getFramework();
+  const SDK_PATH = frameWork === "SDK-Angular" ? "sdk-a" : "sdk-r";
+  const functionalDir = join(path.resolve(), JEST_TESTS_FUNCTIONAL_PATH, SDK_PATH);
+  const libFilter = "localLib";
+
+  switch (whichTests) {
+    case "ALL" :
+      return fs
+      .readdirSync(functionalDir, { withFileTypes: true })
+      .filter(dirent => !dirent.isDirectory() )
+      .map(dirent => dirent.name);
+    case "Original":
+      return fs
+      .readdirSync(functionalDir, { withFileTypes: true })
+      .filter(dirent => !dirent.isDirectory() && !dirent.name.startsWith(libFilter))
+      .map(dirent => dirent.name);
+    case "Library" :
+      return fs
+      .readdirSync(functionalDir, { withFileTypes: true })
+      .filter(dirent => !dirent.isDirectory() && dirent.name.startsWith(libFilter))
+      .map(dirent => dirent.name);
+  }
+
+
 }
 
 export const getOOTBComponents = async () => {

package/tests/assets/sdk-a/components/create/custom-constellation/field/Pega_DXIL_MyTestText/demo.stories.tsx

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

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

@@ -9,19 +9,30 @@ const meta: Meta<PegaDxilMyTestTextComponent> = {
   title: 'PegaDxilMyTestText',
   component: PegaDxilMyTestTextComponent,
   excludeStories: /.*Data$/,
-  render: (args: PegaDxilMyTestTextComponent) => ({
+  render: (args) => ({
     props: {
       ...args,
       pConn$: {
-      resolveConfigProps: props => props,
-      getConfigProps: () => {
-        return configProps;
-      },
-      getStateProps: () => {
-        return stateProps;
-      }
-    } as any,
-    formGroup$: new FormBuilder().group({})
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getActionsApi: () => {
+          return {
+            updateFieldValue: (propName, value) => {
+              configProps.value = value;
+            },
+            triggerFieldChange: (propName, value) => {
+              configProps.value = value;
+            }
+          };
+        },
+        clearErrorMessages: ({}) => {}
+      } as any,
+      formGroup$: new FormBuilder().group({})
     }
   })
 };
@@ -36,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/custom-sdk/field/pega-dxil-my-test-text/pega-dxil-my-test-text.component.html

@@ -1,20 +1,25 @@
-<div *ngIf="bVisible$ && bHasForm$">
-  <div [formGroup]="formGroup$">
-    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
-      <mat-label>{{ label$ }}</mat-label>
-      <input
-        matInput
-        [placeholder]="placeholder"
-        type="text"
-        [value]="value$"
-        [required]="bRequired$"
-        [readonly]="bReadonly$"
-        [attr.data-test-id]="testId"
-        [formControl]="fieldControl"
-        (change)="fieldOnChange($event)"
-        (blur)="fieldOnBlur($event)"
-      />
-      <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
-    </mat-form-field>
-  </div>
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
+<ng-template #noDisplayMode>
+  <div *ngIf="bVisible$ && bHasForm$">
+    <div [formGroup]="formGroup$">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-label>{{ label$ }}</mat-label>
+        <input
+          matInput
+          [placeholder]="placeholder"
+          type="text"
+          [value]="value$"
+          [required]="bRequired$"
+          [readonly]="bReadonly$"
+          [attr.data-test-id]="testId"
+          [formControl]="fieldControl"
+          (change)="fieldOnChange($event)"
+          (blur)="fieldOnBlur($event)"
+        />
+        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+      </mat-form-field>
+    </div>
+  </div>
+</ng-template>

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/pega-dxil-my-test-text.component.spec.ts

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

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/pega-dxil-my-test-text.component.ts

@@ -38,6 +38,7 @@ export class PegaDxilMyTestTextComponent implements OnInit, OnDestroy {
   bHideLabel$ = false;
   testId = '';
   helperText: string;
+  displayMode$?: string = '';
 
   controlName$: string;
   bHasForm$ = true;
@@ -100,15 +101,18 @@ export class PegaDxilMyTestTextComponent implements OnInit, OnDestroy {
 
   // updateSelf
   updateSelf(): void {
-    this.componentReference = (this.pConn$.getStateProps() as any).value;
+    this.componentReference = this.pConn$.getStateProps().value;
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PegaDxilMyTestTextProps;
 
-    this.value$ = this.configProps$.value || '';
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
     this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.helperText = this.configProps$.helperText;
     this.placeholder = this.configProps$.placeholder || '';
+    this.displayMode$ = this.configProps$.displayMode;
 
     if (this.configProps$.visibility != null) {
       this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);

package/tests/assets/sdk-a/components/create/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/create/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/create/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/create/override-sdk/designSystemExtension/material-case-summary/material-case-summary.component.ts

@@ -27,7 +27,6 @@ export class MaterialCaseSummaryComponent implements OnInit, OnChanges {
     this.updateLabelAndDate(this.secondaryFields$);
   }
 
-  // eslint-disable-next-line sonarjs/no-identical-functions
   ngOnChanges() {
     this.updatePrimaryWithStatus();
     this.updateLabelAndDate(this.primaryFieldsWithStatus$);

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

@@ -10,7 +10,7 @@
     </ng-template>
 
     <ng-template #showDetails>
-      <div class="psdk-grid-filter" *ngIf="field.config.label">
+      <div class="psdk-grid-filter" *ngIf="field.config.label && getVisibility(field.config)">
         <div class="psdk-details-fields-label">
           {{ field.config.label }}
         </div>
@@ -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/create/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;
     }
@@ -26,4 +29,10 @@ export class MaterialDetailsFieldsComponent {
   _formatDate(dateValue: string, dateFormat: string): string {
     return this.utils.generateDate(dateValue, dateFormat);
   }
+
+  getVisibility(config): boolean {
+    const { visibility = true } = config;
+
+    return this.utils.getBooleanValue(visibility);
+  }
 }

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/operator/operator.component.html

@@ -1,4 +1,4 @@
-<div class="psdk-operator psdk-double">
+<div class="psdk-operator psdk-double" [ngClass]="{ 'flex-row': displayLabel }">
   <div class="psdk-label">
     {{ label$ }}
   </div>

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/operator/operator.component.scss

@@ -1,9 +1,18 @@
 .psdk-operator {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   font-size: 0.8rem;
   color: var(--app-neutral-color);
+  padding-left: 0.625rem;
+  margin: 16px 0 8px 0;
+}
+
+.psdk-operator.flex-row {
+  flex-direction: row;
   align-items: center;
+  text-align: center;
+  padding-left: 0;
+  margin: 0;
 }
 
 .psdk-operator-popover {
@@ -35,7 +44,6 @@
 
 .psdk-double {
   column-gap: 1rem;
-  text-align: center;
 }
 
 .psdk-top-pad {

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

@@ -13,10 +13,11 @@ import { Utils } from '@pega/angular-sdk-components';
 export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() displayLabel;
+  @Input() name$?: string;
+
   fields$: any[] = [];
   bShowPopover$: boolean;
   date$: string;
-  name$: string;
   label$: string;
   id$: string;
   constructor(
@@ -40,17 +41,20 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
 
   ngOnChanges(changes: SimpleChanges): void {
     const { pConn$ } = changes;
-    if (pConn$.previousValue !== pConn$.currentValue) {
+    if (pConn$ && pConn$.previousValue !== pConn$.currentValue) {
       this.updateSelf();
     }
   }
 
+  // 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') {
@@ -66,7 +70,7 @@ export class OperatorComponent implements OnInit, OnChanges, OnDestroy {
       this.id$ = configProps$.resolveOperator.userId;
       this.label$ = configProps$.resolveLabel;
     } else {
-      this.name$ = configProps$?.value.userName;
+      this.name$ = this.name$ || configProps$?.value.userName;
       this.id$ = configProps$?.value.userId;
       this.label$ = configProps$.label;
     }

package/tests/assets/sdk-a/components/create/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/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)"