@pega/angular-sdk-overrides 0.242.4 → 0.242.6

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

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

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

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

package/lib/infra/view/view.component.ts

@@ -8,6 +8,20 @@ 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
@@ -146,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$;

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,16 @@
+import { Directive, OnDestroy } from '@angular/core';
+import { AngularPConnectData } from 'packages/angular-sdk-components/src/public-api';
+
+@Directive()
+export class FormTemplateBase implements OnDestroy {
+  pConn$: any;
+  angularPConnectData: AngularPConnectData;
+
+  ngOnDestroy(): void {
+    PCore.getContextTreeManager().removeContextTreeNode(this.pConn$.getContextName());
+
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 <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">
@@ -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.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 = {};
@@ -161,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/default-form/default-form.component.ts

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

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

@@ -1,6 +1,6 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details',
@@ -9,48 +9,14 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
+export class DetailsComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   highlightedDataArr: any[] = [];
   showHighlightedData: boolean;
   arFields$: any[] = [];
 
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    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.updateSelf();
-    }
-  }
-
-  updateSelf() {
+  override updateSelf() {
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

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

@@ -1,6 +1,6 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details-narrow-wide',
@@ -9,48 +9,15 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsNarrowWideComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
+export class DetailsNarrowWideComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   arFields$: any[] = [];
   arFields2$: any[] = [];
   highlightedDataArr: any[] = [];
   showHighlightedData: boolean;
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    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.updateSelf();
-    }
-  }
 
-  updateSelf() {
+  override updateSelf() {
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

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

@@ -1,7 +1,6 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
-import { FormGroup } from '@angular/forms';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details-one-column',
@@ -10,49 +9,15 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsOneColumnComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
+export class DetailsOneColumnComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
   showHighlightedData: boolean;
   highlightedDataArr: any;
 
   arFields$: any[] = [];
 
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    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.updateSelf();
-    }
-  }
-
-  updateSelf() {
+  override updateSelf() {
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;
 

package/lib/template/details-sub-tabs/details-sub-tabs.component.html

@@ -5,8 +5,7 @@
         *ngIf="tab.content?.getPConnect()"
         [name]="tab.content?.getPConnect().getComponentName()"
         [props]="{
-          pConn$: tab.content?.getPConnect(),
-          formGroup$: formGroup$
+          pConn$: tab.content?.getPConnect()
         }"
         errorMsg="Details Sub tabs wants component not yet available: {{ tab.content?.getPConnect().getComponentName() }}"
       ></component-mapper>

package/lib/template/details-sub-tabs/details-sub-tabs.component.ts

@@ -1,10 +1,9 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormGroup } from '@angular/forms';
 import { MatTabsModule } from '@angular/material/tabs';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { getTransientTabs, getVisibleTabs, tabClick } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details-sub-tabs',
@@ -13,45 +12,14 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsSubTabsComponent implements OnInit, OnDestroy {
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
+export class DetailsSubTabsComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
-  angularPConnectData: AngularPConnectData = {};
   currentTabId = '0';
   tabItems: any[];
   availableTabs: any[];
 
-  constructor(private angularPConnect: 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.updateSelf();
-    }
-  }
-
-  updateSelf() {
+  override updateSelf() {
     const children = this.pConn$?.getChildren();
     const deferLoadedTabs = children[0];
     this.availableTabs = getVisibleTabs(deferLoadedTabs, 'tabsSubs');

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

@@ -1,7 +1,6 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
-import { FormGroup } from '@angular/forms';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Component, forwardRef } from '@angular/core';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-details-three-column',
@@ -10,11 +9,8 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsThreeColumnComponent implements OnInit, OnDestroy {
-  constructor(private angularPConnect: AngularPConnectService) {}
-
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
+export class DetailsThreeColumnComponent extends DetailsTemplateBase {
+  override pConn$: typeof PConnect;
 
   showHighlightedData: boolean;
   highlightedDataArr: any;
@@ -25,39 +21,7 @@ export class DetailsThreeColumnComponent implements OnInit, OnDestroy {
 
   propsToUse: any = {};
 
-  // Used with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-
-    // this.updateSelf();
-    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.updateSelf();
-    }
-  }
-
-  updateSelf() {
+  override updateSelf() {
     const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
     this.showHighlightedData = rawMetaData?.showHighlightedData;