@pega/angular-sdk-components 0.242.1 → 0.242.2

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, forwardRef, Injectable, Inject, ViewChild, ViewContainerRef, Directive, HostListener } from '@angular/core';
+import { EventEmitter, Component, Input, Output, forwardRef, Injectable, Inject, Directive, ViewChild, ViewContainerRef, HostListener } from '@angular/core';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3$1 from '@angular/material/button';
@@ -1790,7 +1790,7 @@ class DeferLoadComponent {
                 }
             };
             const configObject = PCore.createPConnect(config);
-            configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+            configObject.getPConnect().setInheritedProp('displayMode', 'DISPLAY_ONLY');
             this.loadedPConn$ = ReferenceComponent.normalizePConn(configObject.getPConnect());
             this.componentName$ = this.loadedPConn$.getComponentName();
             if (this.deferLoadId) {
@@ -2056,6 +2056,7 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
         // with init, force children to be loaded of global pConn
         this.initComponent(true);
         this.initContainer();
+        this.checkAndUpdate();
         PCore.getPubSubUtils().subscribe(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL, () => {
             this.handleCancel();
         }, 'cancelAssignment');
@@ -2339,7 +2340,9 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
     }
     showCaseMessages() {
         this.caseMessages$ = this.localizedVal(this.pConn$.getValue('caseMessages'), this.localeCategory);
-        if (this.caseMessages$ || !this.hasAssignments()) {
+        // caseMessages's behavior has changed in 24.2, and hence it doesn't let Optional Action work.
+        // Changing the below condition for now. Was: (theCaseMessages || !hasAssignments())
+        if (!this.hasAssignments()) {
             this.bHasCaseMessages$ = true;
             this.bShowConfirm = true;
             this.checkSvg$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
@@ -2454,7 +2457,6 @@ class FlowContainerComponent extends FlowContainerBaseComponent {
             control.markAsTouched();
         });
     }
-    // eslint-disable-next-line sonarjs/no-identical-functions
     topViewRefresh() {
         Object.values(this.formGroup$.controls).forEach(control => {
             control.markAsTouched();
@@ -3222,6 +3224,8 @@ class RootContainerComponent {
                 context: myContext
             }
         });
+        // clear out hasViewContainer
+        sessionStorage.setItem('hasViewContainer', 'false');
         this.mConn$ = configObjModal.getPConnect();
         // First thing in initialization is registering and subscribing to the AngularPConnect service
         this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
@@ -3727,11 +3731,11 @@ class ViewComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ViewComponent, deps: [{ token: AngularPConnectService }, { token: Utils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ViewComponent, isStandalone: true, selector: "app-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"visibility$ !== false\" class=\"ng-view-top\">\n  <div *ngIf=\"showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'\" class=\"template-title-container\">\n    <span>{{ label$ }}</span>\n  </div>\n\n  <ng-container *ngIf=\"templateName$; else noTemplate\">\n    <div>\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{ formGroup$, pConn$, displayOnlyFA$ }\"\n        errorMsg=\"View template not recognized: [{{ templateName$ }}]\"\n      ></component-mapper>\n    </div>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    <div *ngIf=\"displayOnlyFA$; else displayAll\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n          <component-mapper\n            [name]=\"kid.getPConnect().getComponentName()\"\n            [props]=\"{ pConn$: kid.getPConnect() }\"\n            errorMsg=\"View Missing (displayOnlyFA): {{ kid.getPConnect().getComponentName() }}\"\n          ></component-mapper>\n        </div>\n      </div>\n    </div>\n    <ng-template #displayAll>\n      <div *ngFor=\"let kid of arChildren$\">\n        <component-mapper\n          [name]=\"kid.getPConnect().getComponentName()\"\n          [props]=\"{ pConn$: kid.getPConnect() }\"\n          errorMsg=\"View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}\"\n        ></component-mapper>\n      </div>\n    </ng-template>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.ng-view-top{padding:0}.template-title-container{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600;padding:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgSwitch), selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ViewComponent, isStandalone: true, selector: "app-view", inputs: { pConn$: "pConn$", formGroup$: "formGroup$", displayOnlyFA$: "displayOnlyFA$" }, usesOnChanges: true, ngImport: i0, template: "<div *ngIf=\"visibility$ !== false\" class=\"ng-view-top\">\n  <div *ngIf=\"showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'\" class=\"template-title-container\">\n    <span>{{ label$ }}</span>\n  </div>\n\n  <ng-container *ngIf=\"templateName$; else noTemplate\">\n    <div>\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{ formGroup$, pConn$, displayOnlyFA$ }\"\n        errorMsg=\"View template not recognized: [{{ templateName$ }}]\"\n      ></component-mapper>\n    </div>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    <div *ngFor=\"let kid of arChildren$\">\n      <component-mapper\n        [name]=\"kid.getPConnect().getComponentName()\"\n        [props]=\"{ pConn$: kid.getPConnect() }\"\n        errorMsg=\"View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}\"\n      ></component-mapper>\n    </div>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.ng-view-top{padding:0}.template-title-container{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600;padding:1rem 0}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-view', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"visibility$ !== false\" class=\"ng-view-top\">\n  <div *ngIf=\"showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'\" class=\"template-title-container\">\n    <span>{{ label$ }}</span>\n  </div>\n\n  <ng-container *ngIf=\"templateName$; else noTemplate\">\n    <div>\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{ formGroup$, pConn$, displayOnlyFA$ }\"\n        errorMsg=\"View template not recognized: [{{ templateName$ }}]\"\n      ></component-mapper>\n    </div>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    <div *ngIf=\"displayOnlyFA$; else displayAll\">\n      <div *ngFor=\"let kid of arChildren$\">\n        <div [ngSwitch]=\"kid.getPConnect().getComponentName()\">\n          <component-mapper\n            [name]=\"kid.getPConnect().getComponentName()\"\n            [props]=\"{ pConn$: kid.getPConnect() }\"\n            errorMsg=\"View Missing (displayOnlyFA): {{ kid.getPConnect().getComponentName() }}\"\n          ></component-mapper>\n        </div>\n      </div>\n    </div>\n    <ng-template #displayAll>\n      <div *ngFor=\"let kid of arChildren$\">\n        <component-mapper\n          [name]=\"kid.getPConnect().getComponentName()\"\n          [props]=\"{ pConn$: kid.getPConnect() }\"\n          errorMsg=\"View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}\"\n        ></component-mapper>\n      </div>\n    </ng-template>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.ng-view-top{padding:0}.template-title-container{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600;padding:1rem 0}\n"] }]
+            args: [{ selector: 'app-view', standalone: true, imports: [CommonModule, forwardRef(() => ComponentMapperComponent)], template: "<div *ngIf=\"visibility$ !== false\" class=\"ng-view-top\">\n  <div *ngIf=\"showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'\" class=\"template-title-container\">\n    <span>{{ label$ }}</span>\n  </div>\n\n  <ng-container *ngIf=\"templateName$; else noTemplate\">\n    <div>\n      <component-mapper\n        [name]=\"templateName$\"\n        [props]=\"{ formGroup$, pConn$, displayOnlyFA$ }\"\n        errorMsg=\"View template not recognized: [{{ templateName$ }}]\"\n      ></component-mapper>\n    </div>\n  </ng-container>\n\n  <ng-template #noTemplate>\n    <div *ngFor=\"let kid of arChildren$\">\n      <component-mapper\n        [name]=\"kid.getPConnect().getComponentName()\"\n        [props]=\"{ pConn$: kid.getPConnect() }\"\n        errorMsg=\"View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}\"\n      ></component-mapper>\n    </div>\n  </ng-template>\n</div>\n", styles: ["h3{margin-left:.8rem}.ng-view-top{padding:0}.template-title-container{display:flex;justify-content:space-between;align-items:center;font-size:.9375rem;font-weight:600;padding:1rem 0}\n"] }]
         }], ctorParameters: () => [{ type: AngularPConnectService }, { type: Utils }], propDecorators: { pConn$: [{
                 type: Input
             }], formGroup$: [{
@@ -3799,17 +3803,20 @@ class ViewContainerComponent {
             dispatchObject: this.dispatchObject,
             visible: !PCore.checkIfSemanticURL()
         };
-        containerMgr.initializeContainers({
-            type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
-        });
-        if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
-            /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
-            PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
-        }
-        if (!PCore.checkIfSemanticURL())
-            containerMgr.addContainerItem(this.pConn$);
-        if (!this.displayOnlyFA$)
-            configureBrowserBookmark(this.pConn$);
+        if (sessionStorage.getItem('hasViewContainer') == 'false') {
+            containerMgr.initializeContainers({
+                type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
+            });
+            if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
+                /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
+                PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
+            }
+            if (!PCore.checkIfSemanticURL())
+                containerMgr.addContainerItem(this.pConn$);
+            if (!this.displayOnlyFA$)
+                configureBrowserBookmark(this.pConn$);
+            sessionStorage.setItem('hasViewContainer', 'true');
+        }
         // cannot call checkAndUpdate becasue first time through, will call updateSelf and that is incorrect (causes issues).
         // however, need angularPConnect to be initialized with currentProps for future updates, so calling shouldComponentUpdate directly
         // without checking to update here in init, will initialize and this is correct
@@ -7098,12 +7105,12 @@ class GroupComponent {
         if (this.configProps$.visibility === undefined) {
             this.visibility$ = this.pConn$.getComputedVisibility();
         }
-        if (this.configProps$.displayMode === 'LABELS_LEFT') {
+        if (this.configProps$.displayMode === 'DISPLAY_ONLY') {
             if (this.configProps$.visibility === undefined)
                 this.visibility$ = true;
             this.arChildren$.forEach(child => {
                 const pConn = child.getPConnect();
-                pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+                pConn.setInheritedProp('displayMode', 'DISPLAY_ONLY');
                 pConn.setInheritedProp('readOnly', true);
                 return child;
             });
@@ -8807,14 +8814,14 @@ class ScalarListComponent {
                 type: componentType,
                 config: {
                     value: scalarValue,
-                    displayMode: 'LABELS_LEFT',
+                    displayMode: 'DISPLAY_ONLY',
                     label: this.label$,
                     ...restProps,
                     readOnly: true
                 }
             }, '', 0, {}); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional;
         });
-        this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$);
+        this.isDisplayModeEnabled = ['STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(this.displayMode$);
         this.value$ = this.items;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ScalarListComponent, deps: [{ token: AngularPConnectService }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -9521,7 +9528,7 @@ class DataReferenceComponent {
         this.refList = this.rawViewMetadata.config.referenceList;
         this.canBeChangedInReviewMode = theConfigProps.allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
         // this.childrenToRender = this.children;
-        this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
+        this.isDisplayModeEnabled = ['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(displayMode);
         if (this.firstChildMeta?.type !== 'Region') {
             this.firstChildPConnect = this.pConn$.getChildren()[0].getPConnect;
             /* remove refresh When condition from those old view so that it will not be used for runtime */
@@ -9674,6 +9681,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
+class FormTemplateBaseComponent {
+    ngOnDestroy() {
+        PCore.getContextTreeManager().removeContextTreeNode(this.pConn$.getContextName());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormTemplateBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: FormTemplateBaseComponent, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FormTemplateBaseComponent, decorators: [{
+            type: Directive
+        }] });
+
 class TemplateUtils {
     /**
      * Determine if the current view is the view of the case step/assignment.
@@ -9728,8 +9746,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 }]
         }] });
 
-class DefaultFormComponent {
+class DefaultFormComponent extends FormTemplateBaseComponent {
     constructor(templateUtils) {
+        super();
         this.templateUtils = templateUtils;
         this.NO_HEADER_TEMPLATES = [
             'SubTabs',
@@ -9771,7 +9790,7 @@ class DefaultFormComponent {
         this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DefaultFormComponent, deps: [{ token: TemplateUtils }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: DefaultFormComponent, isStandalone: true, selector: "app-default-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, 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(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: DefaultFormComponent, decorators: [{
             type: Component,
@@ -9838,7 +9857,7 @@ class DetailsComponent {
                 if (theCompType === 'reference' || theCompType === 'group') {
                     const configProps = thePConn.getConfigProps();
                     configProps.readOnly = true;
-                    configProps.displayMode = 'LABELS_LEFT';
+                    configProps.displayMode = 'DISPLAY_ONLY';
                     const propToUse = { ...thePConn.getInheritedProps() };
                     configProps.label = propToUse?.label;
                     const options = {
@@ -9993,7 +10012,7 @@ class DetailsOneColumnComponent {
                 return field;
             });
         }
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
@@ -10120,7 +10139,7 @@ class DetailsThreeColumnComponent {
                 return field;
             });
         }
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
@@ -10196,7 +10215,7 @@ class DetailsTwoColumnComponent {
                 return field;
             });
         }
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
@@ -10269,7 +10288,7 @@ class DetailsWideNarrowComponent {
                 return field;
             });
         }
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const kids = this.pConn$.getChildren();
         for (const kid of kids) {
@@ -10336,8 +10355,8 @@ const buildView = (pConn, index, viewConfigPath) => {
         }
     };
     const view = PCore.createPConnect(config);
-    if (pConn.getConfigProps()?.displayMode === 'LABELS_LEFT') {
-        view.getPConnect()?.setInheritedProp('displayMode', 'LABELS_LEFT');
+    if (pConn.getConfigProps()?.displayMode === 'DISPLAY_ONLY') {
+        view.getPConnect()?.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     }
     return view;
 };
@@ -10372,7 +10391,7 @@ class DynamicTabsComponent {
         const { referenceList } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
         const { tablabel } = this.pConn$.getComponentConfig();
         const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
-        this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+        this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         this.pConn$.setInheritedProp('readOnly', true);
         const referenceListData = this.pConn$.getValue(`${referenceList}.pxResults`, ''); // 2nd arg empty string until typedefs properly allow optional
         this.tabsItems =
@@ -10476,7 +10495,7 @@ class FieldGroupTemplateComponent {
         this.allowAddEdit = this.configProps$.allowTableEdit;
         const renderMode = this.configProps$.renderMode;
         const displayMode = this.configProps$.displayMode;
-        this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'LABELS_LEFT';
+        this.readonlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY';
         this.contextClass = this.configProps$.contextClass;
         const lookForChildInConfig = this.configProps$.lookForChildInConfig;
         this.heading = this.configProps$.heading ?? 'Row';
@@ -10485,7 +10504,7 @@ class FieldGroupTemplateComponent {
         this.pageReference = `${this.pConn$.getPageReference()}${resolvedList}`;
         this.pConn$.setReferenceList(resolvedList);
         if (this.readonlyMode) {
-            this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+            this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
         }
         this.referenceList = this.configProps$.referenceList;
         if (this.prevRefLength != this.referenceList.length) {
@@ -10532,11 +10551,11 @@ class FieldValueListComponent {
         this.isHtml$ = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FieldValueListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FieldValueListComponent, isStandalone: true, selector: "app-field-value-list", inputs: { label$: "label$", value$: "value$", displayMode$: "displayMode$", isHtml$: "isHtml$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n  <div class=\"psdk-grid-label\">{{ label$ }}</div>\n  <div class=\"psdk-val-labels-left\">\n    <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n  </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n  <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-val-stacked\">\n      <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n  <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}.psdk-val-labels-left{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: FieldValueListComponent, isStandalone: true, selector: "app-field-value-list", inputs: { label$: "label$", value$: "value$", displayMode$: "displayMode$", isHtml$: "isHtml$" }, ngImport: i0, template: "<div *ngIf=\"displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n  <div class=\"psdk-grid-label\">{{ label$ }}</div>\n  <div class=\"psdk-val-labels-left\">\n    <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n  </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n  <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-val-stacked\">\n      <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n  <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}.psdk-val-labels-left{margin:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FieldValueListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-field-value-list', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n  <div class=\"psdk-grid-label\">{{ label$ }}</div>\n  <div class=\"psdk-val-labels-left\">\n    <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n  </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n  <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-val-stacked\">\n      <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n  <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}.psdk-val-labels-left{margin:8px 0}\n"] }]
+            args: [{ selector: 'app-field-value-list', standalone: true, imports: [CommonModule], template: "<div *ngIf=\"displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL\" class=\"psdk-container-labels-left\">\n  <div class=\"psdk-grid-label\">{{ label$ }}</div>\n  <div class=\"psdk-val-labels-left\">\n    <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n  </div>\n</div>\n\n<ng-template #STACKED_LARGE_VAL>\n  <div *ngIf=\"displayMode$ === 'STACKED_LARGE_VAL'\" class=\"psdk-container-stacked-large-val\">\n    <div class=\"psdk-grid-label\">{{ label$ }}</div>\n    <div class=\"psdk-val-stacked\">\n      <ng-container *ngTemplateOutlet=\"valueTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #valueTemplate>\n  <div *ngIf=\"isHtml$; else valueOnly\" id=\"instruction-text\" [innerHTML]=\"value$ || '---'\"></div>\n  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>\n</ng-template>\n", styles: [".psdk-container-labels-left{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:1rem;row-gap:1rem;align-items:start}.psdk-value{margin:8px 0}.psdk-value-hf{margin:8px 0;font-weight:500;font-size:1.25rem}.psdk-val-labels-left{margin:8px 0}\n"] }]
         }], propDecorators: { label$: [{
                 type: Input
             }], value$: [{
@@ -12266,7 +12285,7 @@ class ListViewComponent {
     }
     filterDataWithDate(item, filterObj, filterValue) {
         let bKeep;
-        let value = item[filterObj.ref] != null ?? item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
+        let value = item[filterObj.ref] != null || item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
         filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
         switch (filterObj.containsFilter) {
             case 'notequal':
@@ -13234,7 +13253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
-class OneColumnComponent {
+class OneColumnComponent extends FormTemplateBaseComponent {
     ngOnInit() {
         this.updateSelf();
     }
@@ -13247,8 +13266,8 @@ class OneColumnComponent {
     updateSelf() {
         this.arChildren$ = this.pConn$.getChildren();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OneColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: OneColumnComponent, isStandalone: true, selector: "app-one-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let kid of arChildren$\">\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'Region' && kid.getPConnect().getRawMetadata()['name'] === 'A'\">\n    <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'View'\">\n    <component-mapper name=\"View\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'CaseCreateStage'\">\n    <component-mapper name=\"CaseCreateStage\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OneColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: OneColumnComponent, isStandalone: true, selector: "app-one-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div *ngFor=\"let kid of arChildren$\">\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'Region' && kid.getPConnect().getRawMetadata()['name'] === 'A'\">\n    <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'View'\">\n    <component-mapper name=\"View\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n  <div *ngIf=\"kid.getPConnect().getRawMetadata()['type'] === 'CaseCreateStage'\">\n    <component-mapper name=\"CaseCreateStage\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: OneColumnComponent, decorators: [{
             type: Component,
@@ -13312,6 +13331,8 @@ class PageComponent {
         if (operator && operator != '') {
             this.title$ += `, ${operator}`;
         }
+        // when showing a page, similar to updating root, need to cause viewContainer to call "initContainer"
+        sessionStorage.setItem('hasViewContainer', 'false');
     }
     ngOnDestroy() {
         if (this.angularPConnectData.unsubscribeFn) {
@@ -13660,7 +13681,7 @@ const createMetaForTable = (fields, renderMode) => {
 };
 const filterDataByDate = (item, filterObj) => {
     let bKeep;
-    let value = item[filterObj.ref] != null ?? item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
+    let value = item[filterObj.ref] != null || item[filterObj.ref] != '' ? getSeconds(item[filterObj.ref]) : null;
     let filterValue = filterObj.containsFilterValue != null && filterObj.containsFilterValue != '' ? getSeconds(filterObj.containsFilterValue) : null;
     switch (filterObj.containsFilter) {
         case 'notequal':
@@ -14732,7 +14753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
-class ThreeColumnComponent {
+class ThreeColumnComponent extends FormTemplateBaseComponent {
     ngOnInit() {
         this.updateSelf();
     }
@@ -14745,8 +14766,8 @@ class ThreeColumnComponent {
     updateSelf() {
         this.arChildren$ = this.pConn$.getChildren();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ThreeColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ThreeColumnComponent, isStandalone: true, selector: "app-three-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-three-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'c'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-three-column{display:flow-root;height:100%}.psdk-three-column-column{width:33%;float:left;padding:0rem .3125rem;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ThreeColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ThreeColumnComponent, isStandalone: true, selector: "app-three-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-three-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-three-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'c'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-three-column{display:flow-root;height:100%}.psdk-three-column-column{width:33%;float:left;padding:0rem .3125rem;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ThreeColumnComponent, decorators: [{
             type: Component,
@@ -14770,7 +14791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
-class TwoColumnComponent {
+class TwoColumnComponent extends FormTemplateBaseComponent {
     ngOnInit() {
         this.updateSelf();
     }
@@ -14783,8 +14804,8 @@ class TwoColumnComponent {
     updateSelf() {
         this.arChildren$ = this.pConn$.getChildren();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TwoColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: TwoColumnComponent, isStandalone: true, selector: "app-two-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-two-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-two-column-left\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-right\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-two-column{display:flow-root;height:100%}.psdk-two-column-column{width:50%;float:left;padding:0rem .3125rem;height:100%}.psdk-two-column-left{float:left;min-width:50%;padding:0rem .3125rem}.psdk-two-column-right{float:left;width:50%;padding:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TwoColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: TwoColumnComponent, isStandalone: true, selector: "app-two-column", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-two-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-two-column-left\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-right\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-two-column-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-two-column{display:flow-root;height:100%}.psdk-two-column-column{width:50%;float:left;padding:0rem .3125rem;height:100%}.psdk-two-column-left{float:left;min-width:50%;padding:0rem .3125rem}.psdk-two-column-right{float:left;width:50%;padding:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TwoColumnComponent, decorators: [{
             type: Component,
@@ -14856,7 +14877,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
                 type: Input
             }] } });
 
-class WideNarrowFormComponent {
+class WideNarrowFormComponent extends FormTemplateBaseComponent {
     ngOnInit() {
         this.updateSelf();
     }
@@ -14869,8 +14890,8 @@ class WideNarrowFormComponent {
     updateSelf() {
         this.arChildren$ = this.pConn$.getChildren();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WideNarrowFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: WideNarrowFormComponent, isStandalone: true, selector: "app-wide-narrow-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-narrow-wide-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-wide-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-narrow-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-wide-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-narrow-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-narrow-wide-column{display:flow-root;height:100%}.psdk-narrow-column{float:left;min-width:30%;padding:0rem .3125rem}.psdk-wide-column{float:left;width:70%;padding:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WideNarrowFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: WideNarrowFormComponent, isStandalone: true, selector: "app-wide-narrow-form", inputs: { pConn$: "pConn$", formGroup$: "formGroup$" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"psdk-narrow-wide-column\">\n  <div *ngFor=\"let kid of arChildren$\">\n    <div class=\"psdk-wide-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'left'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-narrow-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'right'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-wide-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'a'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n    <div class=\"psdk-narrow-column\" *ngIf=\"kid.getPConnect().getRawMetadata()['name'].toLowerCase() === 'b'\">\n      <component-mapper name=\"Region\" [props]=\"{ pConn$: kid.getPConnect(), formGroup$ }\"></component-mapper>\n    </div>\n  </div>\n</div>\n", styles: ["*{box-sizing:border-box}.psdk-narrow-wide-column{display:flow-root;height:100%}.psdk-narrow-column{float:left;min-width:30%;padding:0rem .3125rem}.psdk-wide-column{float:left;width:70%;padding:0rem .3125rem}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i3.NgForOf), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(() => i3.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i0.forwardRef(() => ComponentMapperComponent), selector: "component-mapper", inputs: ["name", "props", "errorMsg", "outputEvents", "parent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: WideNarrowFormComponent, decorators: [{
             type: Component,
@@ -18292,5 +18313,5 @@ const localSdkComponentMap = {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionButtonsComponent, AlertBannerComponent, AlertComponent, AngularPConnectService, AppAnnouncementComponent, AppShellComponent, AssignmentCardComponent, AssignmentComponent, AttachmentComponent, AutoCompleteComponent, CancelAlertComponent, CaseCreateStageComponent, CaseHistoryComponent, CaseService, CaseSummaryComponent, CaseViewComponent, CheckBoxComponent, ComponentMapperComponent, ConfirmationComponent, CurrencyComponent, DELETE_ICON, DashboardFilterComponent, DataReferenceComponent, DatapageService, DateComponent, DateTimeComponent, DecimalComponent, DefaultFormComponent, DeferLoadComponent, DetailsComponent, DetailsNarrowWideComponent, DetailsOneColumnComponent, DetailsSubTabsComponent, DetailsThreeColumnComponent, DetailsTwoColumnComponent, DetailsWideNarrowComponent, DropdownComponent, EmailComponent, ErrorBoundaryComponent, ErrorMessagesService, FeedContainerComponent, FieldGroupListComponent, FieldGroupTemplateComponent, FieldValueListComponent, FileUtilityComponent, FlowContainerBaseComponent, FlowContainerComponent, Group$1 as Group, HybridViewContainerComponent, InlineDashboardComponent, InlineDashboardPageComponent, IntegerComponent, ListPageComponent, ListUtilityComponent, ListViewComponent, MaterialCaseSummaryComponent, MaterialDetailsComponent, MaterialDetailsFieldsComponent, MaterialSummaryItemComponent, MaterialSummaryListComponent, MaterialUtilityComponent, MaterialVerticalTabsComponent, ModalViewContainerComponent, MultiReferenceReadonlyComponent, MultiStepComponent, NarrowWideFormComponent, NavbarComponent, OneColumnComponent, OneColumnPageComponent, OneColumnTabComponent, OperatorComponent, PageComponent, PercentageComponent, PhoneComponent, PreviewViewContainerComponent, ProgressSpinnerService, PromotedFiltersComponent, PulseComponent, RadioButtonsComponent, ReferenceComponent, RegionComponent, RepeatingStructuresComponent, RichTextComponent, RichTextEditorComponent, RootContainerComponent, SdkComponentMap, SemanticLinkComponent, ServerConfigService, SimpleTableComponent, SimpleTableManualComponent, SimpleTableSelectComponent, SingleReferenceReadonlyComponent, StagesComponent, SubTabsComponent, TABLE_CELL, TemplateUtils, TextAreaComponent, TextComponent, TextContentComponent, TextInputComponent, ThousandSeparatorDirective, ThreeColumnComponent, ThreeColumnPageComponent, TimeComponent, TodoComponent, TwoColumnComponent, TwoColumnPageComponent, TwoColumnTabComponent, UpdateWorklistService, UrlComponent, UserReferenceComponent, UtilityComponent, Utils, ViewComponent, ViewContainerComponent, WideNarrowFormComponent, WideNarrowPageComponent, buildFieldsForTable, buildFilterComponents, buildMetaForListView, buildView, combineFilters, compareSdkPCoreVersions, createFilter, createFilterComponent, createMetaForTable, createPConnect, currencyMap, dateFormatInfoDefault, deleteInstruction, endpoints, filterDataByCommonFields, filterDataByDate, filterForFieldValueList, format, formatters, getAddRowCallback, getAllFields, getApiContext, getBanners, getComponentFromMap, getContext, getCurrencyCharacters, getCurrencyOptions, getCurrentTimezone$1 as getCurrentTimezone, getDateFormatInfo, getDeferFriendlyTabs, getFilterExpression, getFormattedDate, getLocale$1 as getLocale, getMessagesGrouped, getReferenceList, getSdkComponentMap, getSeconds, getToDoAssignments, getTransientTabs, getVisibleTabs, handleEvent, insertInstruction, loginBoxType, populateRowKey, sdkVersion, showBanner, tabClick, updateNewInstructions };
+export { ActionButtonsComponent, AlertBannerComponent, AlertComponent, AngularPConnectService, AppAnnouncementComponent, AppShellComponent, AssignmentCardComponent, AssignmentComponent, AttachmentComponent, AutoCompleteComponent, CancelAlertComponent, CaseCreateStageComponent, CaseHistoryComponent, CaseService, CaseSummaryComponent, CaseViewComponent, CheckBoxComponent, ComponentMapperComponent, ConfirmationComponent, CurrencyComponent, DELETE_ICON, DashboardFilterComponent, DataReferenceComponent, DatapageService, DateComponent, DateTimeComponent, DecimalComponent, DefaultFormComponent, DeferLoadComponent, DetailsComponent, DetailsNarrowWideComponent, DetailsOneColumnComponent, DetailsSubTabsComponent, DetailsThreeColumnComponent, DetailsTwoColumnComponent, DetailsWideNarrowComponent, DropdownComponent, EmailComponent, ErrorBoundaryComponent, ErrorMessagesService, FeedContainerComponent, FieldGroupListComponent, FieldGroupTemplateComponent, FieldValueListComponent, FileUtilityComponent, FlowContainerBaseComponent, FlowContainerComponent, FormTemplateBaseComponent, Group$1 as Group, HybridViewContainerComponent, InlineDashboardComponent, InlineDashboardPageComponent, IntegerComponent, ListPageComponent, ListUtilityComponent, ListViewComponent, MaterialCaseSummaryComponent, MaterialDetailsComponent, MaterialDetailsFieldsComponent, MaterialSummaryItemComponent, MaterialSummaryListComponent, MaterialUtilityComponent, MaterialVerticalTabsComponent, ModalViewContainerComponent, MultiReferenceReadonlyComponent, MultiStepComponent, NarrowWideFormComponent, NavbarComponent, OneColumnComponent, OneColumnPageComponent, OneColumnTabComponent, OperatorComponent, PageComponent, PercentageComponent, PhoneComponent, PreviewViewContainerComponent, ProgressSpinnerService, PromotedFiltersComponent, PulseComponent, RadioButtonsComponent, ReferenceComponent, RegionComponent, RepeatingStructuresComponent, RichTextComponent, RichTextEditorComponent, RootContainerComponent, SdkComponentMap, SemanticLinkComponent, ServerConfigService, SimpleTableComponent, SimpleTableManualComponent, SimpleTableSelectComponent, SingleReferenceReadonlyComponent, StagesComponent, SubTabsComponent, TABLE_CELL, TemplateUtils, TextAreaComponent, TextComponent, TextContentComponent, TextInputComponent, ThousandSeparatorDirective, ThreeColumnComponent, ThreeColumnPageComponent, TimeComponent, TodoComponent, TwoColumnComponent, TwoColumnPageComponent, TwoColumnTabComponent, UpdateWorklistService, UrlComponent, UserReferenceComponent, UtilityComponent, Utils, ViewComponent, ViewContainerComponent, WideNarrowFormComponent, WideNarrowPageComponent, buildFieldsForTable, buildFilterComponents, buildMetaForListView, buildView, combineFilters, compareSdkPCoreVersions, createFilter, createFilterComponent, createMetaForTable, createPConnect, currencyMap, dateFormatInfoDefault, deleteInstruction, endpoints, filterDataByCommonFields, filterDataByDate, filterForFieldValueList, format, formatters, getAddRowCallback, getAllFields, getApiContext, getBanners, getComponentFromMap, getContext, getCurrencyCharacters, getCurrencyOptions, getCurrentTimezone$1 as getCurrentTimezone, getDateFormatInfo, getDeferFriendlyTabs, getFilterExpression, getFormattedDate, getLocale$1 as getLocale, getMessagesGrouped, getReferenceList, getSdkComponentMap, getSeconds, getToDoAssignments, getTransientTabs, getVisibleTabs, handleEvent, insertInstruction, loginBoxType, populateRowKey, sdkVersion, showBanner, tabClick, updateNewInstructions };
 //# sourceMappingURL=pega-angular-sdk-components.mjs.map