@pega/angular-sdk-components 0.23.9 → 0.23.11

package/fesm2022/pega-angular-sdk-components.mjs

@@ -121,18 +121,16 @@ class ReferenceComponent {
     static createFullReferencedViewFromRef(inPConn) {
         // 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
         //  the Reference component's handling of the visibility prop, we leave it in
         //  (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();
         if (!viewMetadata) {
             console.log('View not found ', inPConn.getComponentConfig());
@@ -147,23 +145,28 @@ 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
         const newCompPConnect = viewComponent.getPConnect();
         newCompPConnect.setInheritedConfig({
             ...referenceConfig,
-            readOnly: theResolvedConfigProps.readOnly ? theResolvedConfigProps.readOnly : false,
-            displayMode: theResolvedConfigProps.displayMode ? theResolvedConfigProps.displayMode : null
+            readOnly,
+            displayMode
         });
         if (ReferenceComponent.bLogging) {
             console.log(`Angular Reference component: createFullReferencedViewFromRef -> newCompPConnect configProps: ${JSON.stringify(newCompPConnect.getConfigProps())}`);
         }
-        return newCompPConnect;
+        if (visibility !== false) {
+            return newCompPConnect;
+        }
+        return null;
     }
     // STATIC method that other components can call to normalize
     //  a pConn object that might be a 'reference'. If the incoming
@@ -197,7 +200,7 @@ 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}`);
                 return theRefViewPConn;
@@ -249,11 +252,11 @@ class AssignmentCardComponent {
         this.actionButtonClick.emit(oData);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignmentCardComponent, isStandalone: true, selector: "app-assignment-card", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arMainButtons$: "arMainButtons$", arSecondaryButtons$: "arSecondaryButtons$", arChildren$: "arChildren$", updateToken$: "updateToken$" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup$\" name=\"flowContainer\" class=\"psdk-flow-container\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper\n        *ngSwitchCase=\"'CaseCreateStage'\"\n        name=\"CaseCreateStage\"\n        [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"\n      ></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Assignment Card wants component not yet available: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</form>\n\n<div>\n  <br />\n  <div class=\"psdk-case-view-divider\"></div>\n\n  <component-mapper\n    name=\"ActionButtons\"\n    [props]=\"{ arMainButtons$, arSecondaryButtons$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-flow-container{padding:0rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.ɵNgNoValidate; }), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AssignmentCardComponent, isStandalone: true, selector: "app-assignment-card", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", arMainButtons$: "arMainButtons$", arSecondaryButtons$: "arSecondaryButtons$", arChildren$: "arChildren$", updateToken$: "updateToken$" }, outputs: { actionButtonClick: "actionButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup$\" name=\"flowContainer\" class=\"psdk-flow-container\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper\n        *ngSwitchCase=\"'CaseCreateStage'\"\n        name=\"CaseCreateStage\"\n        [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"\n      ></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Assignment Card wants component not yet available: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</form>\n\n<div>\n  <br />\n  <div class=\"psdk-case-view-divider\"></div>\n\n  <component-mapper\n    *ngIf=\"arMainButtons$ && arSecondaryButtons$\"\n    name=\"ActionButtons\"\n    [props]=\"{ arMainButtons$, arSecondaryButtons$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-flow-container{padding:0rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: i0.forwardRef(function () { return ReactiveFormsModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i4.ɵNgNoValidate; }), selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i0.forwardRef(function () { return i4.NgControlStatusGroup; }), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(function () { return i4.FormGroupDirective; }), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AssignmentCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-assignment-card', standalone: true, imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)], template: "<form [formGroup]=\"formGroup$\" name=\"flowContainer\" class=\"psdk-flow-container\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper\n        *ngSwitchCase=\"'CaseCreateStage'\"\n        name=\"CaseCreateStage\"\n        [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"\n      ></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Assignment Card wants component not yet available: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</form>\n\n<div>\n  <br />\n  <div class=\"psdk-case-view-divider\"></div>\n\n  <component-mapper\n    name=\"ActionButtons\"\n    [props]=\"{ arMainButtons$, arSecondaryButtons$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-flow-container{padding:0rem 1rem}\n"] }]
+            args: [{ selector: 'app-assignment-card', standalone: true, imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)], template: "<form [formGroup]=\"formGroup$\" name=\"flowContainer\" class=\"psdk-flow-container\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n      <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <component-mapper\n        *ngSwitchCase=\"'CaseCreateStage'\"\n        name=\"CaseCreateStage\"\n        [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"\n      ></component-mapper>\n      <component-mapper *ngSwitchCase=\"'Region'\" name=\"Region\" [props]=\"{ formGroup$, pConn$: kid.getPConnect() }\"></component-mapper>\n      <div *ngSwitchDefault>Assignment Card wants component not yet available: {{ kid.getPConnect().getComponentName() }}</div>\n    </div>\n  </div>\n</form>\n\n<div>\n  <br />\n  <div class=\"psdk-case-view-divider\"></div>\n\n  <component-mapper\n    *ngIf=\"arMainButtons$ && arSecondaryButtons$\"\n    name=\"ActionButtons\"\n    [props]=\"{ arMainButtons$, arSecondaryButtons$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ actionButtonClick: onActionButtonClick }\"\n  ></component-mapper>\n</div>\n", styles: [".psdk-case-view-divider{border-bottom:.0625rem solid var(--app-neutral-light-color)}.psdk-flow-container{padding:0rem 1rem}\n"] }]
         }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -961,13 +964,25 @@ class AngularPConnectService {
         }
         else {
             returnObject.compID = theCompID;
-            returnObject.unsubscribeFn = theUnsub;
+            returnObject.unsubscribeFn = () => {
+                this.removeFormField(inComp);
+                theUnsub();
+            };
         }
         // initialize this components entry in the componentPropsArr
         this.componentPropsArr[theCompID] = {};
+        this.addFormField(inComp);
         // return object with compID and unsubscribe...
         return returnObject;
     }
+    addFormField(inComp) {
+        inComp.pConn$?.addFormField();
+    }
+    removeFormField(inComp) {
+        if (inComp.pConn$?.removeFormField) {
+            inComp.pConn$?.removeFormField();
+        }
+    }
     // Returns true if the component's entry in ___componentPropsArr___ is
     //  the same as the inCompProps passed in.
     //  As a side effect, update the component's entry in componentPropsArr
@@ -2594,10 +2609,6 @@ class ModalViewContainerComponent {
         this.formGroup$ = fb.group({ hideRequired: false });
     }
     ngOnInit() {
-        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);
         const baseContext = this.pConn$.getContextName();
@@ -2873,15 +2884,13 @@ class ModalViewContainerComponent {
         return `${this.localizedVal('Create', this.localeCategory)} ${this.localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalViewContainerComponent, deps: [{ token: AngularPConnectService }, { token: i0.NgZone }, { token: ProgressSpinnerService }, { token: i4.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalViewContainerComponent, isStandalone: true, selector: "app-modal-view-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$" }, outputs: { modalVisibleChange: "modalVisibleChange" }, ngImport: i0, template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ModalViewContainerComponent, isStandalone: true, selector: "app-modal-view-container", inputs: { pConn$: "pConn$" }, outputs: { modalVisibleChange: "modalVisibleChange" }, ngImport: i0, template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ModalViewContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-modal-view-container', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div id=\"dialog\" *ngIf=\"bShowModal$ && bShowAsModal$\" class=\"psdk-dialog-background\">\n  <div class=\"psdk-modal-view-container-top\" id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }\"\n    ></component-mapper>\n    <div *ngIf=\"isMultiRecord\">\n      <component-mapper\n        name=\"ListViewActionButtons\"\n        [props]=\"{ pConn$: createdViewPConn$, context$ }\"\n        [outputEvents]=\"{ closeActionsDialog: closeActionsDialog }\"\n      ></component-mapper>\n    </div>\n  </div>\n</div>\n\n<div *ngIf=\"bShowModal$ && !bShowAsModal$\">\n  <div id=\"{{ buildName$ }}\">\n    <h3 *ngIf=\"title$ != ''\">{{ title$ }}</h3>\n    <component-mapper\n      name=\"Assignment\"\n      [props]=\"{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }\"\n    ></component-mapper>\n  </div>\n</div>\n\n<div *ngIf=\"bShowCancelAlert$\">\n  <component-mapper\n    name=\"CancelAlert\"\n    [props]=\"{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }\"\n    [parent]=\"this\"\n    [outputEvents]=\"{ onAlertState$: onAlertState }\"\n  ></component-mapper>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: i0.NgZone }, { type: ProgressSpinnerService }, { type: i4.FormBuilder }]; }, propDecorators: { pConn$: [{
                 type: Input
-            }], displayOnlyFA$: [{
-                type: Input
             }], modalVisibleChange: [{
                 type: Output
             }] } });
@@ -3232,16 +3241,6 @@ class RootContainerComponent {
             this.updateSelf();
         }
     }
-    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
@@ -3350,7 +3349,7 @@ class RootContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootContainerComponent, deps: [{ token: AngularPConnectService }, { token: ProgressSpinnerService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RootContainerComponent, isStandalone: true, selector: "app-root-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$", isMashup$: "isMashup$" }, ngImport: i0, template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <!-- <app-reference *ngSwitchCase=\"'reference'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-reference> -->\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <app-hybrid-view-container *ngSwitchCase=\"'HybridViewContainer'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-hybrid-view-container>\n    <app-modal-view-container\n      *ngSwitchCase=\"'ModalViewContainer'\"\n      [pConn$]=\"pConn$\"\n      [displayOnlyFA$]=\"displayOnlyFA$\"\n      (modalVisibleChange)=\"modalVisibleChanged($event)\"\n    ></app-modal-view-container>\n    <div *ngSwitchCase=\"''\"></div>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container\n    [pConn$]=\"mConn$\"\n    [displayOnlyFA$]=\"displayOnlyFA$\"\n    (modalVisibleChange)=\"modalVisibleChanged($event)\"\n  ></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(function () { return HybridViewContainerComponent; }), selector: "app-hybrid-view-container", inputs: ["pConn$", "formGroup$", "displayOnlyFA$"] }, { kind: "component", type: i0.forwardRef(function () { return ModalViewContainerComponent; }), selector: "app-modal-view-container", inputs: ["pConn$", "displayOnlyFA$"], outputs: ["modalVisibleChange"] }, { kind: "component", type: i0.forwardRef(function () { return PreviewViewContainerComponent; }), selector: "app-preview-view-container", inputs: ["pConn$"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: RootContainerComponent, isStandalone: true, selector: "app-root-container", inputs: { pConn$: "pConn$", displayOnlyFA$: "displayOnlyFA$", isMashup$: "isMashup$" }, ngImport: i0, template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: viewContainerPConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container [pConn$]=\"mConn$\"></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitch; }), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchCase; }), selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgSwitchDefault; }), selector: "[ngSwitchDefault]" }, { kind: "ngmodule", type: i0.forwardRef(function () { return MatProgressSpinnerModule; }) }, { kind: "component", type: i0.forwardRef(function () { return i4$3.MatProgressSpinner; }), selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: i0.forwardRef(function () { return ModalViewContainerComponent; }), selector: "app-modal-view-container", inputs: ["pConn$"], outputs: ["modalVisibleChange"] }, { kind: "component", type: i0.forwardRef(function () { return PreviewViewContainerComponent; }), selector: "app-preview-view-container", inputs: ["pConn$"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: RootContainerComponent, decorators: [{
             type: Component,
@@ -3361,7 +3360,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ModalViewContainerComponent,
                         PreviewViewContainerComponent,
                         forwardRef(() => ComponentMapperComponent)
-                    ], template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <!-- <app-reference *ngSwitchCase=\"'reference'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-reference> -->\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <app-hybrid-view-container *ngSwitchCase=\"'HybridViewContainer'\" [pConn$]=\"pConn$\" [displayOnlyFA$]=\"displayOnlyFA$\"></app-hybrid-view-container>\n    <app-modal-view-container\n      *ngSwitchCase=\"'ModalViewContainer'\"\n      [pConn$]=\"pConn$\"\n      [displayOnlyFA$]=\"displayOnlyFA$\"\n      (modalVisibleChange)=\"modalVisibleChanged($event)\"\n    ></app-modal-view-container>\n    <div *ngSwitchCase=\"''\"></div>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container\n    [pConn$]=\"mConn$\"\n    [displayOnlyFA$]=\"displayOnlyFA$\"\n    (modalVisibleChange)=\"modalVisibleChanged($event)\"\n  ></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"] }]
+                    ], template: "<div class=\"progress-box\" *ngIf=\"bIsProgress$\">\n  <mat-spinner class=\"progress-spinner\"></mat-spinner>\n</div>\n\n<div *ngIf=\"bShowRoot$\">\n  <div [ngSwitch]=\"componentName$\">\n    <component-mapper *ngSwitchCase=\"'View'\" name=\"View\" [props]=\"{ pConn$, displayOnlyFA$ }\"></component-mapper>\n    <component-mapper\n      *ngSwitchCase=\"'ViewContainer'\"\n      name=\"ViewContainer\"\n      [props]=\"{ pConn$: viewContainerPConn$, displayOnlyFA$ }\"\n    ></component-mapper>\n    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>\n  </div>\n</div>\n\n<div *ngIf=\"pvConn$ != null\">\n  <app-preview-view-container [pConn$]=\"pvConn$\"></app-preview-view-container>\n</div>\n\n<div *ngIf=\"mConn$ != null\">\n  <app-modal-view-container [pConn$]=\"mConn$\"></app-modal-view-container>\n</div>\n", styles: [".progress-box{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;background-color:var(--app-background-color);position:fixed;z-index:99999;top:0rem;left:0rem;opacity:.5}.progress-spinner{text-align:center}\n"] }]
         }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: ProgressSpinnerService }, { type: i0.NgZone }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], displayOnlyFA$: [{
@@ -4272,7 +4271,9 @@ class AutoCompleteComponent {
         // PConnect wants to use changeHandler for onChange
         // this.angularPConnect.changeHandler( this, event);
         this.filterValue = event.target.value;
-        this.angularPConnectData.actions?.onChange(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'change', propName, this.filterValue);
     }
     optionChanged(event) {
         this.angularPConnectData.actions?.onChange(this, event);
@@ -4608,8 +4609,9 @@ class CheckBoxComponent {
             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()).value;
+            handleEvent(actionsApi, 'changeNblur', propName, event.checked);
         }
     }
     handleChangeMultiMode(event, element) {
@@ -5817,7 +5819,9 @@ class CurrencyComponent {
     }
     fieldOnBlur(event) {
         // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -6340,7 +6344,9 @@ class DateComponent {
             // 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()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.value);
     }
     hasErrors() {
         return this.fieldControl.status === 'INVALID';
@@ -6526,10 +6532,9 @@ class DateTimeComponent {
         handleEvent(actionsApi, 'changeNblur', propName, value?.toISOString());
     }
     fieldOnBlur(event) {
-        // 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()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -6881,10 +6886,6 @@ class DropdownComponent {
             this.configProps$.onRecordChange(event);
         }
     }
-    fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
-    }
     getLocalizedOptionValue(opt) {
         return this.pConn$.getLocalizedValue(opt.value, this.localePath, 
         // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'.
@@ -7023,8 +7024,9 @@ class EmailComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -7220,8 +7222,9 @@ class IntegerComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -7398,8 +7401,9 @@ class PercentageComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -7552,8 +7556,9 @@ class PhoneComponent {
         }
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -7716,11 +7721,9 @@ class RadioButtonsComponent {
         return this.value$ === buttonValue;
     }
     fieldOnChange(event) {
-        this.angularPConnectData.actions?.onChange(this, event);
-    }
-    fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.value);
     }
     getLocalizedOptionValue(opt) {
         return this.pConn$.getLocalizedValue(opt.value, this.localePath, 
@@ -7910,12 +7913,9 @@ class TextAreaComponent {
         }
     }
     fieldOnChange(event) {
-        // PConnect wants to use changeHandler for onChange
-        this.angularPConnectData.actions?.onChange(this, event);
-    }
-    fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         // field control gets error message from here
@@ -8247,8 +8247,9 @@ class TextInputComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8385,9 +8386,9 @@ class TimeComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // 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()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8524,8 +8525,9 @@ class UrlComponent {
         this.angularPConnectData.actions?.onChange(this, event);
     }
     fieldOnBlur(event) {
-        // PConnect wants to use eventHandler for onBlur
-        this.angularPConnectData.actions?.onBlur(this, event);
+        const actionsApi = this.pConn$?.getActionsApi();
+        const propName = (this.pConn$?.getStateProps()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, event?.target?.value);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -8669,11 +8671,9 @@ class UserReferenceComponent {
             const index = this.options$?.findIndex(element => element.value === event.target.value);
             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()).value;
+        handleEvent(actionsApi, 'changeNblur', propName, key);
     }
     getErrorMessage() {
         let errMessage = '';
@@ -9656,9 +9656,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+function areViewsChanged(oldViews, newViews) {
+    if (oldViews.length !== newViews.length) {
+        return true;
+    }
+    return !oldViews.every((oldView, index) => {
+        const newView = newViews[index];
+        return oldView.getPConnect().viewName === newView.getPConnect().viewName;
+    });
+}
 class DefaultFormComponent {
-    constructor(templateUtils) {
+    constructor(angularPConnect, templateUtils) {
+        this.angularPConnect = angularPConnect;
         this.templateUtils = templateUtils;
+        // Used with AngularPConnect
+        this.angularPConnectData = {};
+        this.arChildren$ = [];
         this.NO_HEADER_TEMPLATES = [
             'SubTabs',
             'SimpleTable',
@@ -9671,6 +9684,19 @@ class DefaultFormComponent {
         ];
     }
     ngOnInit() {
+        // 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();
         this.template = configProps?.template;
         const propToUse = { ...this.pConn$.getInheritedProps() };
@@ -9696,15 +9722,19 @@ class DefaultFormComponent {
         // 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;
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultFormComponent, deps: [{ token: TemplateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultFormComponent, deps: [{ token: AngularPConnectService }, { token: TemplateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DefaultFormComponent, isStandalone: true, selector: "app-default-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, ngImport: i0, template: "<!-- When adding a component here, add the same component in 'region' template as well -->\n<div *ngIf=\"!NO_HEADER_TEMPLATES.includes(template) && showLabel\">\n  <div class=\"template-title-container\">{{ label }}</div>\n</div>\n<div *ngIf=\"instructions\" class=\"psdk-default-form-instruction-text\">\n  <div key=\"instructions\" id=\"instruction-text\" [innerHTML]=\"instructions\"></div>\n</div>\n<div [className]=\"divClass$\">\n  <div *ngFor=\"let kid of arChildren$\" [ngClass]=\"{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }\">\n    <component-mapper\n      [name]=\"kid.getPConnect().getComponentName()\"\n      [props]=\"{\n        pConn$: kid.getPConnect(),\n        formGroup$: formGroup$\n      }\"\n      errorMsg=\"DefaultForm wants component not yet available: {{ kid.getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-default-form-one-column{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem}.psdk-default-form-two-column{display:grid;grid-template-columns:repeat(2,1fr);column-gap:1rem}.psdk-default-form-three-column{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1rem}.psdk-default-form-three-column .grid-column{grid-column:1/span 3}.psdk-default-form-two-column .grid-column{grid-column:1/span 2}.psdk-default-form-one-column .grid-column{grid-column:1}.template-title-container{font-size:.9375rem;font-weight:600;margin:10px 0}.psdk-default-form-instruction-text{padding-top:.625rem;padding-bottom:.625rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(function () { return CommonModule; }) }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(function () { return ComponentMapperComponent; }), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DefaultFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-default-form', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<!-- When adding a component here, add the same component in 'region' template as well -->\n<div *ngIf=\"!NO_HEADER_TEMPLATES.includes(template) && showLabel\">\n  <div class=\"template-title-container\">{{ label }}</div>\n</div>\n<div *ngIf=\"instructions\" class=\"psdk-default-form-instruction-text\">\n  <div key=\"instructions\" id=\"instruction-text\" [innerHTML]=\"instructions\"></div>\n</div>\n<div [className]=\"divClass$\">\n  <div *ngFor=\"let kid of arChildren$\" [ngClass]=\"{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }\">\n    <component-mapper\n      [name]=\"kid.getPConnect().getComponentName()\"\n      [props]=\"{\n        pConn$: kid.getPConnect(),\n        formGroup$: formGroup$\n      }\"\n      errorMsg=\"DefaultForm wants component not yet available: {{ kid.getPConnect().getComponentName() }}\"\n    ></component-mapper>\n  </div>\n</div>\n", styles: [".psdk-default-form-one-column{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));column-gap:1rem}.psdk-default-form-two-column{display:grid;grid-template-columns:repeat(2,1fr);column-gap:1rem}.psdk-default-form-three-column{display:grid;grid-template-columns:repeat(3,1fr);column-gap:1rem}.psdk-default-form-three-column .grid-column{grid-column:1/span 3}.psdk-default-form-two-column .grid-column{grid-column:1/span 2}.psdk-default-form-one-column .grid-column{grid-column:1}.template-title-container{font-size:.9375rem;font-weight:600;margin:10px 0}.psdk-default-form-instruction-text{padding-top:.625rem;padding-bottom:.625rem}\n"] }]
-        }], ctorParameters: function () { return [{ type: TemplateUtils }]; }, propDecorators: { pConn$: [{
+        }], ctorParameters: function () { return [{ type: AngularPConnectService }, { type: TemplateUtils }]; }, propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
                 type: Input
@@ -10417,7 +10447,7 @@ class FieldGroupTemplateComponent {
             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) {
@@ -13464,16 +13494,17 @@ function getFieldWidth(field, label) {
 const getContext = thePConn => {
     const contextName = thePConn.getContextName();
     const pageReference = thePConn.getPageReference();
-    // 8.7 change = referenceList may now be in top-level of state props,
-    //  not always in config of state props
-    let { referenceList } = thePConn.getStateProps()?.config || thePConn.getStateProps();
+    const { readonlyContextList, referenceList = readonlyContextList } = thePConn.getStateProps()?.config || thePConn.getStateProps();
     const pageReferenceForRows = referenceList.startsWith('.') ? `${pageReference}.${referenceList.substring(1)}` : referenceList;
+    const viewName = thePConn.viewName;
     // removing "caseInfo.content" prefix to avoid setting it as a target while preparing pageInstructions
-    referenceList = pageReferenceForRows.replace(PCore.getConstants().CASE_INFO.CASE_INFO_CONTENT, '');
+    // skipping the removal as StateMachine itself is removing this case info prefix while preparing pageInstructions
+    // referenceList = pageReferenceForRows.replace(PCore.getConstants().CASE_INFO.CASE_INFO_CONTENT, '');
     return {
         contextName,
         referenceListStr: referenceList,
-        pageReferenceForRows
+        pageReferenceForRows,
+        viewName
     };
 };
 const populateRowKey = rawData => {