@pega/angular-sdk-overrides 0.242.1 → 0.242.3

package/lib/infra/stages/stages.component.scss

@@ -59,13 +59,13 @@
   border-radius: 0.5rem;
   border: 0.0625rem solid var(--app-neutral-light-color);
   overflow: hidden;
-  height: 2rem;
   display: flex;
+  flex-wrap: wrap;
 }
 
 .psdk-stages-chevron {
   position: relative;
-  padding: calc(1rem);
+  padding: calc(0.5rem);
   display: flex;
   justify-content: center;
   align-items: center;

package/lib/infra/view/view.component.html

@@ -14,25 +14,12 @@
   </ng-container>
 
   <ng-template #noTemplate>
-    <div *ngIf="displayOnlyFA$; else displayAll">
-      <div *ngFor="let kid of arChildren$">
-        <div [ngSwitch]="kid.getPConnect().getComponentName()">
-          <component-mapper
-            [name]="kid.getPConnect().getComponentName()"
-            [props]="{ pConn$: kid.getPConnect() }"
-            errorMsg="View Missing (displayOnlyFA): {{ kid.getPConnect().getComponentName() }}"
-          ></component-mapper>
-        </div>
-      </div>
+    <div *ngFor="let kid of arChildren$">
+      <component-mapper
+        [name]="kid.getPConnect().getComponentName()"
+        [props]="{ pConn$: kid.getPConnect() }"
+        errorMsg="View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}"
+      ></component-mapper>
     </div>
-    <ng-template #displayAll>
-      <div *ngFor="let kid of arChildren$">
-        <component-mapper
-          [name]="kid.getPConnect().getComponentName()"
-          [props]="{ pConn$: kid.getPConnect() }"
-          errorMsg="View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}"
-        ></component-mapper>
-      </div>
-    </ng-template>
   </ng-template>
 </div>

package/lib/template/data-reference/data-reference.component.ts

@@ -113,7 +113,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     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;

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

@@ -4,6 +4,7 @@ import { FormGroup } from '@angular/forms';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { TemplateUtils } from '@pega/angular-sdk-components';
+import { FormTemplateBaseComponent } from '@pega/angular-sdk-components';
 
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
@@ -19,8 +20,8 @@ interface DefaultFormProps {
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent implements OnInit {
-  @Input() pConn$: typeof PConnect;
+export class DefaultFormComponent extends FormTemplateBaseComponent implements OnInit {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -41,7 +42,9 @@ export class DefaultFormComponent implements OnInit {
     'Confirmation'
   ];
 
-  constructor(private templateUtils: TemplateUtils) {}
+  constructor(private templateUtils: TemplateUtils) {
+    super();
+  }
 
   ngOnInit(): void {
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;

package/lib/template/details/details.component.ts

@@ -79,7 +79,7 @@ export class DetailsComponent implements OnInit, OnDestroy {
         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 = {

package/lib/template/details-one-column/details-one-column.component.ts

@@ -70,7 +70,7 @@ export class DetailsOneColumnComponent implements OnInit, OnDestroy {
       });
     }
 
-    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     this.pConn$.setInheritedProp('readOnly', true);
 
     const kids = this.pConn$.getChildren() as any[];

package/lib/template/details-three-column/details-three-column.component.ts

@@ -75,7 +75,7 @@ export class DetailsThreeColumnComponent implements OnInit, OnDestroy {
       });
     }
 
-    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     this.pConn$.setInheritedProp('readOnly', true);
 
     const kids = this.pConn$.getChildren() as any[];

package/lib/template/details-two-column/details-two-column.component.ts

@@ -63,7 +63,7 @@ export class DetailsTwoColumnComponent implements OnInit, OnDestroy {
 
     if (this.showHighlightedData) {
       const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
+      this.highlightedDataArr = highlightedData?.map(field => {
         field.config.displayMode = 'STACKED_LARGE_VAL';
 
         if (field.config.value === '@P .pyStatusWork') {
@@ -75,7 +75,7 @@ export class DetailsTwoColumnComponent implements OnInit, OnDestroy {
       });
     }
 
-    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     this.pConn$.setInheritedProp('readOnly', true);
 
     const kids = this.pConn$.getChildren() as any[];

package/lib/template/details-wide-narrow/details-wide-narrow.component.ts

@@ -71,7 +71,7 @@ export class DetailsWideNarrowComponent implements OnInit, OnDestroy {
       });
     }
 
-    this.pConn$.setInheritedProp('displayMode', 'LABELS_LEFT');
+    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
     this.pConn$.setInheritedProp('readOnly', true);
 
     const kids = this.pConn$.getChildren() as any[];

package/lib/template/dynamic-tabs/dynamic-tabs.component.ts

@@ -59,7 +59,7 @@ export class DynamicTabsComponent implements OnInit, OnDestroy {
     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

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

@@ -105,7 +105,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
 
     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';
@@ -114,7 +114,7 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
     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) {

package/lib/template/field-value-list/field-value-list.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
+<div *ngIf="displayMode$ === 'DISPLAY_ONLY'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
   <div class="psdk-grid-label">{{ label$ }}</div>
   <div class="psdk-val-labels-left">
     <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>

package/lib/template/field-value-list/field-value-list.component.scss

@@ -4,6 +4,7 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
+  padding-block: 8px;
 }
 .psdk-value {
   margin: 8px 0px;
@@ -14,5 +15,4 @@
   font-size: 1.25rem;
 }
 .psdk-val-labels-left {
-  margin: 8px 0px;
 }

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

@@ -0,0 +1,10 @@
+import { Directive, OnDestroy } from '@angular/core';
+
+@Directive()
+export class FormTemplateBaseComponent implements OnDestroy {
+  pConn$: any;
+
+  ngOnDestroy(): void {
+    PCore.getContextTreeManager().removeContextTreeNode(this.pConn$.getContextName());
+  }
+}

package/lib/template/list-view/list-view.component.ts

@@ -961,7 +961,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
   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) {

package/lib/template/one-column/one-column.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBaseComponent } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-one-column',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class OneColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class OneColumnComponent extends FormTemplateBaseComponent implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];

package/lib/template/page/page.component.ts

@@ -42,6 +42,9 @@ export class PageComponent implements OnInit, OnDestroy {
     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(): void {

package/lib/template/simple-table-manual/helpers.ts

@@ -190,7 +190,7 @@ export const createMetaForTable = (fields, renderMode) => {
 
 export 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) {

package/lib/template/three-column/three-column.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBaseComponent } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-three-column',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class ThreeColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class ThreeColumnComponent extends FormTemplateBaseComponent implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];

package/lib/template/two-column/two-column.component.ts

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

package/lib/template/wide-narrow-form/wide-narrow-form.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { FormTemplateBaseComponent } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-wide-narrow-form',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class WideNarrowFormComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class WideNarrowFormComponent extends FormTemplateBaseComponent implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];

package/package.json

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