@pega/angular-sdk-overrides 0.23.9 → 0.23.10

package/lib/field/auto-complete/auto-complete.component.ts

@@ -301,7 +301,9 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
     // this.angularPConnect.changeHandler( this, event);
     this.filterValue = (event.target as HTMLInputElement).value;
 
-    this.angularPConnectData.actions?.onChange(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'change', propName, this.filterValue);
   }
 
   optionChanged(event: MatAutocompleteSelectedEvent) {

package/lib/field/check-box/check-box.component.ts

@@ -9,8 +9,8 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
-import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
 
 interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Checkbox here
@@ -234,8 +234,9 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
     if (this.selectionMode === 'multi') {
       this.pConn$.getValidationApi().validate(this.selectedvalues, this.selectionList);
     } else {
-      event.value = event.checked;
-      this.angularPConnectData.actions?.onBlur(this, event);
+      const actionsApi = this.pConn$?.getActionsApi();
+      const propName = (this.pConn$?.getStateProps() as any).value;
+      handleEvent(actionsApi, 'changeNblur', propName, event.checked);
     }
   }
 

package/lib/field/currency/currency.component.ts

@@ -8,6 +8,7 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { getCurrencyCharacters } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface CurrrencyProps extends PConnFieldProps {
@@ -175,7 +176,9 @@ export class CurrencyComponent implements OnInit, OnDestroy {
   fieldOnBlur(event: any) {
     // PConnect wants to use eventHandler for onBlur
 
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/date/date.component.ts

@@ -13,8 +13,9 @@ import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-c
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
-import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { format } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface DateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -222,7 +223,9 @@ export class DateComponent implements OnInit, OnDestroy {
       // convert date to pega "date" format
       event.value = event.value?.toISOString();
     }
-    this.angularPConnectData.actions?.onBlur(this, { value: event.value });
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.value);
   }
 
   hasErrors() {

package/lib/field/date-time/date-time.component.ts

@@ -202,10 +202,9 @@ export class DateTimeComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    if (event.target.value) event.value = event.target.value;
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/dropdown/dropdown.component.ts

@@ -214,11 +214,6 @@ export class DropdownComponent implements OnInit, OnDestroy {
     }
   }
 
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
-  }
-
   getLocalizedOptionValue(opt: IOption) {
     return this.pConn$.getLocalizedValue(
       opt.value,

package/lib/field/email/email.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface EmailProps extends PConnFieldProps {
@@ -157,8 +158,9 @@ export class EmailComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/integer/integer.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface IntegerProps extends PConnFieldProps {
@@ -160,8 +161,9 @@ export class IntegerComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/percentage/percentage.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface PercentageProps extends PConnFieldProps {
@@ -158,9 +159,9 @@ export class PercentageComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/phone/phone.component.ts

@@ -176,8 +176,9 @@ export class PhoneComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/radio-buttons/radio-buttons.component.ts

@@ -8,6 +8,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface IOption {
@@ -205,12 +206,9 @@ export class RadioButtonsComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.value);
   }
 
   getLocalizedOptionValue(opt: IOption) {

package/lib/field/text-area/text-area.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface TextAreaProps extends PConnFieldProps {
@@ -156,13 +157,9 @@ export class TextAreaComponent implements OnInit, OnDestroy {
   }
 
   fieldOnChange(event: any) {
-    // PConnect wants to use changeHandler for onChange
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
-  fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/text-input/text-input.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectService, AngularPConnectData } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface TextInputProps extends PConnFieldProps {
@@ -160,8 +161,9 @@ export class TextInputComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/time/time.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface TimeProps extends PConnFieldProps {
@@ -157,9 +158,9 @@ export class TimeComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    event.value = event.target.value;
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/url/url.component.ts

@@ -7,6 +7,7 @@ import { interval } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 interface URLProps extends PConnFieldProps {
@@ -158,8 +159,9 @@ export class UrlComponent implements OnInit, OnDestroy {
   }
 
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
   }
 
   getErrorMessage() {

package/lib/field/user-reference/user-reference.component.ts

@@ -9,6 +9,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
 const OPERATORS_DP = 'D_pyGetOperatorsForCurrentApplication';
@@ -189,11 +190,9 @@ export class UserReferenceComponent implements OnInit, OnDestroy {
       key = index > -1 ? (key = this.options$[index].key) : event.target.value;
     }
 
-    const eve = {
-      value: key
-    };
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onChange(this, eve);
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, key);
   }
 
   getErrorMessage() {

package/lib/infra/Containers/modal-view-container/modal-view-container.component.ts

@@ -23,7 +23,6 @@ import { ReferenceComponent } from '@pega/angular-sdk-components';
 })
 export class ModalViewContainerComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
-  @Input() displayOnlyFA$: boolean;
 
   // for when non modal
   @Output() modalVisibleChange = new EventEmitter<boolean>();
@@ -73,11 +72,6 @@ export class ModalViewContainerComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    if (this.displayOnlyFA$) {
-      // for when non modal
-      this.bShowAsModal$ = false;
-    }
-
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 

package/lib/infra/reference/reference.component.ts

@@ -33,13 +33,9 @@ export class ReferenceComponent {
   static createFullReferencedViewFromRef(inPConn: any) {
     // BAIL and ERROR if inPConn is NOT a reference!
     if (inPConn.getComponentName() !== 'reference') {
-      // debugger;
-
       console.error(`Reference component: createFullReferencedViewFromRef inPConn is NOT a reference! ${inPConn.getComponentName()}`);
     }
 
-    const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
-
     const referenceConfig = { ...inPConn.getComponentConfig() } || {};
 
     // Since SDK-A implements Reference as static methods and we don't rely on
@@ -47,8 +43,8 @@ export class ReferenceComponent {
     //  (and also leaving the others in for now) so the referenced View can act on
     //  the visibility prop. (The following 3 lines were carried over from React SDK)
     delete referenceConfig?.name;
-    // delete referenceConfig?.type;
-    // delete referenceConfig?.visibility;
+    delete referenceConfig?.type;
+    delete referenceConfig?.visibility;
 
     const viewMetadata = inPConn.getReferencedView();
 
@@ -67,13 +63,15 @@ export class ReferenceComponent {
         ...referenceConfig
       }
     };
+    const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
+    const { visibility = true, context, readOnly = false, displayMode = '' } = theResolvedConfigProps;
 
     if (ReferenceComponent.bLogging) {
-      console.log(`Reference: about to call createComponent with pageReference: context: ${theResolvedConfigProps.context}`);
+      console.log(`Reference: about to call createComponent with pageReference: context: ${inPConn.getContextName()}`);
     }
 
     const viewComponent = inPConn.createComponent(viewObject, null, null, {
-      pageReference: theResolvedConfigProps.context
+      pageReference: context && context.startsWith('@CLASS') ? '' : context
     });
 
     // updating the referencedComponent should trigger a render
@@ -81,8 +79,8 @@ export class ReferenceComponent {
 
     newCompPConnect.setInheritedConfig({
       ...referenceConfig,
-      readOnly: theResolvedConfigProps.readOnly ? theResolvedConfigProps.readOnly : false,
-      displayMode: theResolvedConfigProps.displayMode ? theResolvedConfigProps.displayMode : null
+      readOnly,
+      displayMode
     });
 
     if (ReferenceComponent.bLogging) {
@@ -93,7 +91,11 @@ export class ReferenceComponent {
       );
     }
 
-    return newCompPConnect;
+    if (visibility !== false) {
+      return newCompPConnect;
+    }
+
+    return null;
   }
 
   // STATIC method that other components can call to normalize
@@ -130,7 +132,7 @@ export class ReferenceComponent {
         // debugger;
         let theRefViewPConn = this.createFullReferencedViewFromRef(inPConn.getPConnect());
         // now return its PConnect
-        theRefViewPConn = theRefViewPConn.getComponent();
+        theRefViewPConn = theRefViewPConn?.getComponent();
 
         // const theFullReference = theRefViewPConn.getPConnect().getFullReference();
         // console.log(`theFullReference: ${theFullReference}`);

package/lib/infra/root-container/root-container.component.html

@@ -5,20 +5,11 @@
 <div *ngIf="bShowRoot$">
   <div [ngSwitch]="componentName$">
     <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$, displayOnlyFA$ }"></component-mapper>
-    <!-- <app-reference *ngSwitchCase="'reference'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-reference> -->
     <component-mapper
       *ngSwitchCase="'ViewContainer'"
       name="ViewContainer"
-      [props]="{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }"
+      [props]="{ pConn$: viewContainerPConn$, displayOnlyFA$ }"
     ></component-mapper>
-    <app-hybrid-view-container *ngSwitchCase="'HybridViewContainer'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-hybrid-view-container>
-    <app-modal-view-container
-      *ngSwitchCase="'ModalViewContainer'"
-      [pConn$]="pConn$"
-      [displayOnlyFA$]="displayOnlyFA$"
-      (modalVisibleChange)="modalVisibleChanged($event)"
-    ></app-modal-view-container>
-    <div *ngSwitchCase="''"></div>
     <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>
   </div>
 </div>
@@ -28,9 +19,5 @@
 </div>
 
 <div *ngIf="mConn$ != null">
-  <app-modal-view-container
-    [pConn$]="mConn$"
-    [displayOnlyFA$]="displayOnlyFA$"
-    (modalVisibleChange)="modalVisibleChanged($event)"
-  ></app-modal-view-container>
+  <app-modal-view-container [pConn$]="mConn$"></app-modal-view-container>
 </div>

package/lib/infra/root-container/root-container.component.ts

@@ -128,16 +128,6 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     }
   }
 
-  modalVisibleChanged(isVisible) {
-    if (this.displayOnlyFA$) {
-      if (isVisible) {
-        this.bShowRoot$ = false;
-      } else {
-        this.bShowRoot$ = true;
-      }
-    }
-  }
-
   updateSelf() {
     // need to call this.getCurrentCompleteProps (not this.thePConn.getConfigProps)
     //  to get full set of props that affect this component in Redux

package/lib/template/default-form/default-form.component.ts

@@ -1,10 +1,22 @@
-import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
 
+function areViewsChanged(oldViews: any[], newViews: any[]): boolean {
+  if (oldViews.length !== newViews.length) {
+    return true;
+  }
+
+  return !oldViews.every((oldView, index) => {
+    const newView = newViews[index];
+    return oldView.getPConnect().viewName === newView.getPConnect().viewName;
+  });
+}
+
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
   NumCols: string;
@@ -19,11 +31,14 @@ interface DefaultFormProps {
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent implements OnInit {
+export class DefaultFormComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
-  arChildren$: any[];
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  arChildren$: any[] = [];
   divClass$: string;
   template: any;
   showLabel: any;
@@ -41,9 +56,29 @@ export class DefaultFormComponent implements OnInit {
     'Confirmation'
   ];
 
-  constructor(private templateUtils: TemplateUtils) {}
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private templateUtils: TemplateUtils
+  ) {}
 
   ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.updateSelf();
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    this.updateSelf();
+  }
+
+  updateSelf() {
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
     this.template = configProps?.template;
     const propToUse: any = { ...this.pConn$.getInheritedProps() };
@@ -71,6 +106,12 @@ export class DefaultFormComponent implements OnInit {
     // repoint children before getting templateArray
     // Children may contain 'reference' component, so we need to
     //  normalize them
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+    const children = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+
+    const visibleChildren = children.filter(child => child !== undefined);
+
+    if (areViewsChanged(this.arChildren$, visibleChildren)) {
+      this.arChildren$ = visibleChildren;
+    }
   }
 }

package/lib/template/field-group-template/field-group-template.component.ts

@@ -117,7 +117,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
       this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
     }
     this.referenceList = this.configProps$.referenceList;
-    if (this.prevRefLength != this.referenceList.length) {
+    if (this.prevRefLength != this.referenceList?.length) {
       // eslint-disable-next-line sonarjs/no-collapsible-if
       if (!this.readonlyMode) {
         if (this.referenceList?.length === 0 && this.allowAddEdit !== false) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.23.9",
+  "version": "0.23.10",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"