@pega/angular-sdk-overrides 23.1.10 → 24.2.10

package/lib/infra/defer-load/defer-load.component.ts

@@ -44,7 +44,8 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
 
   ngOnInit(): void {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.loadActiveTab();
+    // The below call is causing an error while creating/opening a case, hence commenting it out
+    // this.loadActiveTab();
   }
 
   ngOnDestroy(): void {
@@ -56,7 +57,6 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   onStateChange() {
     // Should always check the bridge to see if the component should
     // update itself (re-render)
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     const theRequestedAssignment = this.pConn$.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
     if (theRequestedAssignment !== this.currentLoadedAssignment) {
       this.currentLoadedAssignment = theRequestedAssignment;
@@ -65,7 +65,6 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
   }
 
   ngOnChanges() {
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
     this.loadViewCaseID = this.pConn$.getValue(this.constants.PZINSKEY) || this.pConn$.getValue(this.constants.CASE_INFO.CASE_INFO_ID);
     let containerItemData;
     const targetName = this.pConn$.getTarget();
@@ -82,7 +81,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     this.resourceType = resourceType;
     this.isContainerPreview = /preview_[0-9]*/g.test(this.pConn$.getContextName());
 
-    const theConfigProps: any = this.pConn$.getConfigProps();
+    const theConfigProps = this.pConn$.getConfigProps();
     this.deferLoadId = theConfigProps.deferLoadId;
     this.name = this.name || theConfigProps.name;
 
@@ -91,10 +90,9 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
 
   getViewOptions = () => ({
     viewContext: this.resourceType,
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject().pyPortal.classID,
-    container: this.isContainerPreview ? 'preview' : null,
-    containerName: this.isContainerPreview ? 'preview' : null,
+    container: this.isContainerPreview ? 'preview' : undefined,
+    containerName: this.isContainerPreview ? 'preview' : undefined,
     updateData: this.isContainerPreview
   });
 
@@ -118,7 +116,7 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
         }
       };
       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) {
@@ -138,9 +136,8 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
         this.pConn$
           .getActionsApi()
           .showData(this.name, dataContext, dataContextParameters, {
-            // @ts-ignore - skipSemanticUrl should be boolean type
             skipSemanticUrl: true,
-            // @ts-ignore
+            // @ts-ignore - Object literal may only specify known properties, and 'isDeferLoaded' does not exist in type '{ containerName: string; skipSemanticUrl: boolean; }'
             isDeferLoaded: true
           })
           .then(data => {
@@ -160,8 +157,8 @@ export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
     } else {
       this.pConn$
         .getActionsApi()
-        .refreshCaseView(encodeURI(this.loadViewCaseID), this.name, null)
-        .then(data => {
+        .refreshCaseView(encodeURI(this.loadViewCaseID), this.name, '')
+        .then((data: any) => {
           this.onResponse(data.root);
         });
     }

package/lib/infra/multi-step/multi-step.component.html

@@ -54,7 +54,7 @@
               <span>{{ i + 1 }}</span>
             </div>
           </div>
-          <div class="{{ _getHLabelClass(mainStep.visited_status) }}">
+          <div id="multi-step-label" class="{{ _getHLabelClass(mainStep.visited_status) }}">
             <div class="psdk-horizontal-step-text-label">
               {{ mainStep.name }}
             </div>

package/lib/infra/multi-step/multi-step.component.scss

@@ -163,6 +163,7 @@ mat-horizontal-stepper {
 .psdk-horizontal-stepper-header-container {
   white-space: nowrap;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   text-align: left;
 }

package/lib/infra/navbar/navbar.component.html

@@ -22,7 +22,7 @@
           *ngFor="let caseType of caseTypes$"
           (click)="navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)"
         >
-          <span class="psdk-nav-button-span">{{ caseType.pyLabel }}</span>
+          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference) }}</span>
         </mat-list-item>
       </mat-list>
     </mat-list>
@@ -32,14 +32,14 @@
       <mat-list-item (click)="navPanelButtonClick(page)">
         <div class="flex-box">
           <img class="psdk-nav-svg-icon" src="{{ page.iconName }}" />
-          <span class="psdk-nav-button-span">{{ localizedVal(page.pyLabel, localeCategory) }}</span>
+          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(page.pyLabel, '', localeReference) }}</span>
         </div>
       </mat-list-item>
     </mat-list>
   </div>
   <div class="psdk-nav-divider"></div>
   <div>
-    <mat-list>
+    <mat-list id="profile">
       <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
         <div class="flex-box">
           <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
@@ -48,7 +48,7 @@
       </mat-list-item>
       <mat-menu #menu="matMenu">
         <button mat-menu-item>Profile</button>
-        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Logoff', localeCategory) }}</button>
+        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
       </mat-menu>
     </mat-list>
   </div>

package/lib/infra/navbar/navbar.component.ts

@@ -36,11 +36,11 @@ export class NavbarComponent implements OnInit, OnDestroy {
   navExpandCollapse$: string;
   bShowCaseTypes$ = false;
 
-  portalApp$ = '';
+  portalApp$: string | undefined = '';
   portalLogoImage$: string;
   showAppName$?: boolean = false;
 
-  portalOperator$: string;
+  portalOperator$: string | undefined;
   portalOperatorInitials$: string;
 
   actionsAPI: any;
@@ -51,7 +51,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
   navIcon$: string;
   localizedVal: any;
   localeCategory = 'AppShell';
-
+  localeUtils = PCore.getLocaleUtils();
+  localeReference: any;
   constructor(
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
@@ -119,7 +120,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
       this.navPages$.forEach(page => {
         page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
       });
-
+      this.localeReference = this.pConn$.getValue('.pyLocaleReference');
       this.actionsAPI = this.pConn$.getActionsApi();
       this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
       this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
@@ -130,7 +131,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
       this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
       this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
-      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$);
+      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
       this.showAppName$ = this.configProps$.showAppName;
 
       this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
@@ -163,7 +164,9 @@ export class NavbarComponent implements OnInit, OnDestroy {
       containerName: 'primary',
       flowType: sFlowType || 'pyStartCase'
     };
-    this.createWork(sCaseType, actionInfo);
+    this.createWork(sCaseType, actionInfo).then(() => {
+      console.log('createWork completed');
+    });
   }
 
   navPanelLogoutClick() {

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

@@ -67,7 +67,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     const { containers } = PCore.getStore().getState();
     const items = Object.keys(containers).filter(item => item.includes('root'));
 
-    (PCore.getContainerUtils().getContainerAPI() as any).addContainerItems(items);
+    PCore.getContainerUtils().getContainerAPI().addContainerItems(items);
 
     // add preview and modalview containers to redux
     // keep local copies of the the pConnect that is related
@@ -156,7 +156,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
         if (items[key] && items[key].view && Object.keys(items[key].view).length > 0) {
           const itemView = items[key].view;
 
-          const rootObject: any = PCore.createPConnect({
+          const rootObject = PCore.createPConnect({
             meta: itemView,
             options: {
               context: items[key].context
@@ -202,7 +202,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
 
           this.componentName$ = localPConn.getComponentName();
           if (this.componentName$ === 'ViewContainer') {
-            const configProps: any = this.pConn$.getConfigProps();
+            const configProps = this.pConn$.getConfigProps();
             const viewContConfig = {
               meta: {
                 type: 'ViewContainer',

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

@@ -1,5 +1,5 @@
 <div *ngIf="visibility$ !== false" class="ng-view-top">
-  <div *ngIf="showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'" class="template-title-container">
+  <div *ngIf="showLabel$ && label$ && !noHeaderTemplates.includes(templateName$)" class="template-title-container">
     <span>{{ label$ }}</span>
   </div>
 
@@ -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/infra/view/view.component.ts

@@ -7,6 +7,22 @@ import { getAllFields } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
+const NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs'];
+const DETAILS_TEMPLATES = [
+  'Details',
+  'DetailsFields',
+  'DetailsOneColumn',
+  'DetailsSubTabs',
+  'DetailsThreeColumn',
+  'DetailsTwoColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails'
+];
+
+function isDetailsTemplate(template) {
+  return DETAILS_TEMPLATES.includes(template);
+}
+
 /**
  * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
  * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
@@ -77,13 +93,15 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
 
   angularPConnectData: AngularPConnectData = {};
 
+  noHeaderTemplates = NO_HEADER_TEMPLATES;
+
   configProps$: ViewProps;
   inheritedProps$: any;
   arChildren$: any[];
   templateName$: string;
   title$ = '';
   label$ = '';
-  showLabel$ = true;
+  showLabel$ = false;
   visibility$ = true;
 
   constructor(
@@ -142,7 +160,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
     this.templateName$ = this.configProps$.template || '';
     this.title$ = this.configProps$.title || '';
     this.label$ = this.configProps$.label || '';
-    this.showLabel$ = this.configProps$.showLabel || this.showLabel$;
+    this.showLabel$ = this.configProps$.showLabel || isDetailsTemplate(this.templateName$) || this.showLabel$;
     // label & showLabel within inheritedProps takes precedence over configProps
     this.label$ = this.inheritedProps$.label || this.label$;
     this.showLabel$ = this.inheritedProps$.showLabel || this.showLabel$;
@@ -159,7 +177,7 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
      * The resolution lies in transferring this responsibility to the Reference component, eliminating the need for this code when Reference
      * component is able to handle it.
      */
-    if (this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
+    if (!this.configProps$.visibility && this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
       this.visibility$ = evaluateVisibility(this.pConn$);
     }
 

package/lib/template/app-shell/app-shell.component.ts

@@ -78,9 +78,27 @@ export class AppShellComponent implements OnInit, OnDestroy {
     if (this.pages$) {
       this.bShowAppShell$ = true;
     }
+
+    // @ts-ignore - Property 'pyCaseTypesAvailableToCreateDP' does not exist on type pxApplication
+    const caseTypesAvailableToCreateDP = PCore.getEnvironmentInfo().environmentInfoObject?.pxApplication?.pyCaseTypesAvailableToCreateDP;
+    if (caseTypesAvailableToCreateDP) {
+      const portalID = this.pConn$.getValue('.pyOwner');
+      PCore.getDataPageUtils()
+        .getPageDataAsync(caseTypesAvailableToCreateDP, this.pConn$.getContextName(), {
+          PortalName: portalID
+        })
+        .then((response: any) => {
+          if (response?.pyCaseTypesAvailableToCreate) {
+            this.pConn$.replaceState('.pyCaseTypesAvailableToCreate', response.pyCaseTypesAvailableToCreate, {
+              skipDirtyValidation: true
+            });
+          }
+        });
+    }
+
     this.caseTypes$ = this.configProps$.caseTypes;
 
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.portalTemplate = this.configProps$.portalTemplate;
 
@@ -129,7 +147,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
       }
 
       this.caseTypes$ = this.configProps$.caseTypes;
-      this.arChildren$ = this.pConn$.getChildren() as any[];
+      this.arChildren$ = this.pConn$.getChildren();
     });
   }
 

package/lib/template/banner-page/config-ext.json

@@ -0,0 +1,9 @@
+{
+  "name": "BannerPage",
+  "label": "Banner",
+  "description": "Banner Page Template",
+  "type": "Template",
+  "subtype": "PAGE",
+  "icon": "BannerPage.svg",
+  "properties": []
+}

package/lib/template/base/details-template-base.ts

@@ -0,0 +1,67 @@
+import { Directive, OnInit, OnDestroy, Injector, Input } from '@angular/core';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+
+@Directive()
+export class DetailsTemplateBase implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+
+  // For interaction with AngularPConnect
+  protected angularPConnectData: AngularPConnectData = {};
+  protected angularPConnect;
+
+  childrenMetadataOld;
+
+  constructor(injector: Injector) {
+    this.angularPConnect = injector.get(AngularPConnectService);
+  }
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    this.checkAndUpdate();
+  }
+
+  checkAndUpdate() {
+    // Should always check the bridge to see if the component should update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // Only call updateSelf when the component should update
+    if (bUpdateSelf || this.hasRawMetadataChanged()) {
+      this.updateSelf();
+    }
+  }
+
+  // this method will get overriden by the child component
+  updateSelf() {}
+
+  hasRawMetadataChanged(): boolean {
+    const newChildrenMetadata = this.fetchChildrenMetadata();
+
+    if (!PCore.isDeepEqual(newChildrenMetadata, this.childrenMetadataOld)) {
+      this.childrenMetadataOld = newChildrenMetadata;
+      return true;
+    }
+
+    return false;
+  }
+
+  fetchChildrenMetadata() {
+    const children = this.pConn$.getChildren() || [];
+
+    return children.map(child => {
+      const pConnect = child.getPConnect();
+      return pConnect.resolveConfigProps(pConnect.getRawMetadata());
+    });
+  }
+}

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

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

package/lib/template/case-summary/case-summary.component.ts

@@ -55,7 +55,7 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
     // Then, continue on with other initialization
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseSummaryProps;
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.generatePrimaryAndSecondaryFields();
 
@@ -92,9 +92,43 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
       this.primaryFields$.push(kid.resolveConfigProps(kid.getRawMetadata()));
     }
 
-    for (const oField of this.arChildren$[1].getPConnect().getChildren()) {
+    const secondarySummaryFields = this.prepareCaseSummaryData(this.arChildren$[1].getPConnect());
+    const secondaryChildren = this.arChildren$[1].getPConnect().getChildren();
+    secondaryChildren.forEach((oField, index) => {
       const kid = oField.getPConnect();
-      this.secondaryFields$.push({ ...kid.resolveConfigProps(kid.getRawMetadata()), kid });
-    }
+      const displayLabel = secondarySummaryFields[index].value.getPConnect().getConfigProps().label;
+      this.secondaryFields$.push({ ...kid.resolveConfigProps(kid.getRawMetadata()), kid, displayLabel });
+    });
+  }
+
+  prepareComponentInCaseSummary(pConnectMeta, getPConnect) {
+    const { config, children } = pConnectMeta;
+    const pConnect = getPConnect();
+
+    const caseSummaryComponentObject: any = {};
+
+    const { type } = pConnectMeta;
+    const createdComponent = pConnect.createComponent({
+      type,
+      children: children ? [...children] : [],
+      config: {
+        ...config
+      }
+    });
+
+    caseSummaryComponentObject.value = createdComponent;
+    return caseSummaryComponentObject;
+  }
+
+  prepareCaseSummaryData(summaryFieldChildren) {
+    const convertChildrenToSummaryData = kid => {
+      return kid?.map((childItem, index) => {
+        const childMeta = childItem.getPConnect().meta;
+        const caseSummaryComponentObject = this.prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
+        caseSummaryComponentObject.id = index + 1;
+        return caseSummaryComponentObject;
+      });
+    };
+    return summaryFieldChildren ? convertChildrenToSummaryData(summaryFieldChildren?.getChildren()) : undefined;
   }
 }

package/lib/template/case-view/case-view.component.html

@@ -1,16 +1,16 @@
 <div class="psdk-case-view" id="case-view">
-  <div *ngIf="!displayOnlyFA$" class="psdk-case-view-info">
+  <div class="psdk-case-view-info">
     <mat-toolbar color="primary" class="psdk-case-view-toolbar">
       <mat-toolbar-row style="padding-left: 1rem">
         <div class="psdk-case-icon-div">
           <img class="psdk-case-svg-icon" src="{{ svgCase$ }}" />
         </div>
         <div class="psdk-case-view-heading">
-          <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
-          <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
           <div>
-            <h1>{{ heading$ }}</h1>
+            <h1 id="case-name">{{ heading$ }}</h1>
           </div>
+          <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
+          <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
         </div>
       </mat-toolbar-row>
     </mat-toolbar>
@@ -47,7 +47,7 @@
     ></component-mapper>
   </div>
   <div class="psdk-case-view-main">
-    <div *ngIf="!displayOnlyFA$">
+    <div>
       <div *ngFor="let kid of arChildren$">
         <div
           *ngIf="
@@ -73,11 +73,11 @@
       </div>
     </div>
 
-    <div *ngIf="!displayOnlyFA$">
+    <div>
       <component-mapper name="DeferLoad" [props]="{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }"></component-mapper>
     </div>
   </div>
-  <div *ngIf="!displayOnlyFA$">
+  <div>
     <div *ngIf="arChildren$" class="psdk-case-view-utilities">
       <div *ngFor="let kid of arChildren$">
         <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">

package/lib/template/case-view/case-view.component.scss

@@ -48,6 +48,8 @@ h1 {
   width: 25rem;
   float: left;
   padding: 0rem 0.3125rem 0rem 0rem;
+  margin-left: 0.5rem;
+  margin-top: 0.5rem;
   height: 100%; /* Should be removed. Only for demonstration */
   background-color: var(--app-form-color);
 }

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

@@ -27,7 +27,6 @@ interface CaseViewProps {
 export class CaseViewComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
-  @Input() displayOnlyFA$: boolean;
 
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -106,9 +105,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
   }
 
   hasCaseIDChanged(): boolean {
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     if (this.currentCaseID !== this.pConn$.getDataObject().caseInfo.ID) {
-      // @ts-ignore - parameter “contextName” for getDataObject method should be optional
       this.currentCaseID = this.pConn$.getDataObject().caseInfo.ID;
       return true;
     }
@@ -117,14 +114,12 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
   updateHeaderAndSummary() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseViewProps;
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
 
     if (hasNewAttachments !== this.bHasNewAttachments) {
       this.bHasNewAttachments = hasNewAttachments;
       if (this.bHasNewAttachments) {
-        // @ts-ignore - Argument of type 'boolean' is not assignable to parameter of type 'object'
-        PCore.getPubSubUtils().publish((PCore.getEvents().getCaseEvent() as any).CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
+        PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
       }
     }
 
@@ -142,7 +137,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
       this.heading$ = PCore.getLocaleUtils().getLocaleValue(this.configProps$.header, '', this.localeKey);
       this.id$ = this.configProps$.subheader;
-      // @ts-ignore - second parameter pageReference for getValue method should be optional
       this.status$ = this.pConn$.getValue('.pyStatusWork');
     });
   }
@@ -158,7 +152,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
     this.arChildren$ = this.pConn$.getChildren() as any[];
 
-    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
     const caseInfo = this.pConn$.getDataObject().caseInfo;
     this.currentCaseID = caseInfo.ID;
     this.arAvailableActions$ = caseInfo?.availableActions ? caseInfo.availableActions : [];
@@ -167,19 +160,15 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
     this.svgCase$ = this.utils.getImageSrc(this.configProps$.icon, this.utils.getSDKStaticContentUrl());
 
-    // this.utils.consoleKidDump(this.pConn$);
-
-    if (!this.displayOnlyFA$) {
-      for (const kid of this.arChildren$) {
-        const kidPConn = kid.getPConnect();
-        if (kidPConn.getRawMetadata().name == 'Tabs') {
-          this.mainTabs = kid;
-          this.mainTabData = this.mainTabs.getPConnect().getChildren();
-        }
+    for (const kid of this.arChildren$) {
+      const kidPConn = kid.getPConnect();
+      if (kidPConn.getRawMetadata().name == 'Tabs') {
+        this.mainTabs = kid;
+        this.mainTabData = this.mainTabs.getPConnect().getChildren();
       }
-
-      this.generateTabsData();
     }
+
+    this.generateTabsData();
   }
 
   generateTabsData() {

package/lib/template/confirmation/confirmation.component.ts

@@ -43,7 +43,7 @@ export class ConfirmationComponent implements OnInit, OnDestroy {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.CONSTS = PCore.getConstants();
-    const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(this.pConn$.getTarget());
+    const activeContainerItemID = PCore.getContainerUtils().getActiveContainerItemName(this.pConn$.getTarget() ?? null);
     this.rootInfo = PCore.getContainerUtils().getContainerItemData(this.pConn$.getTarget(), activeContainerItemID);
     this.checkAndUpdate();
   }