@pega/angular-sdk-overrides 0.24.9 → 0.25.2

package/lib/infra/reference/reference.component.ts

@@ -13,53 +13,42 @@ import { Component } from '@angular/core';
   standalone: true
 })
 export class ReferenceComponent {
-  referencedComponent: any = null;
-
   /* Used to toggle some class-wide logging */
   private static bLogging = false;
 
-  constructor() {
-    // With new static method approach, this shouldn't be called any more
-    window.alert(`in ReferenceComponent constructor!`);
-
-    console.error(`in ReferenceComponent constructor!`);
-  }
-
-  // onStateChange and updateSelf methods removed from original implementation
-  //  when we moved to the static method implementation.
-
-  // STATIC method to create a normalized PConn (a fully realized View that the 'reference'
-  //  component refers to) from the given pConn. Has to add in some stuff as in the constructor
-  static createFullReferencedViewFromRef(inPConn: any) {
-    // BAIL and ERROR if inPConn is NOT a reference!
+  /**
+   * Creates a normalized PConn from a reference component.
+   * Resolves the reference to its fully realized View with proper configuration.
+   *
+   * @param inPConn - The PConn object that represents a reference component
+   * @returns The dereferenced PConnect object, or null if reference can't be resolved
+   */
+  static createFullReferencedViewFromRef(inPConn: any): any {
+    // Validate that inPConn is a reference component
     if (inPConn.getComponentName() !== 'reference') {
-      // debugger;
-
       console.error(`Reference component: createFullReferencedViewFromRef inPConn is NOT a reference! ${inPConn.getComponentName()}`);
+      return null;
     }
 
-    const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
-
-    const referenceConfig = { ...inPConn.getComponentConfig() } || {};
+    // Get reference configuration and make a copy
+    const referenceConfig = { ...inPConn.getComponentConfig() };
 
-    // Since SDK-A implements Reference as static methods and we don't rely on
-    //  the Reference component's handling of the visibility prop, we leave it in
-    //  (and also leaving the others in for now) so the referenced View can act on
-    //  the visibility prop. (The following 3 lines were carried over from React SDK)
+    // Remove properties that should not be inherited by the referenced view
+    // (Maintained from React SDK implementation)
     delete referenceConfig?.name;
-    // delete referenceConfig?.type;
-    // delete referenceConfig?.visibility;
+    delete referenceConfig?.type;
+    delete referenceConfig?.visibility;
 
+    // Get the metadata for the referenced view
     const viewMetadata = inPConn.getReferencedView();
 
+    // Return null if view metadata is not found
     if (!viewMetadata) {
       console.log('View not found ', inPConn.getComponentConfig());
       return null;
     }
 
-    // If we get here, we have metadata for a View component...
-    // const referencedComponentName = viewMetadata.type;
-
+    // Create the view object by merging metadata with reference config
     const viewObject = {
       ...viewMetadata,
       config: {
@@ -68,23 +57,31 @@ export class ReferenceComponent {
       }
     };
 
+    // Resolve configuration properties
+    const resolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
+    const { visibility = true, context, readOnly = false, displayMode = '' } = resolvedConfigProps;
+
+    // Log debug information if logging is enabled
     if (ReferenceComponent.bLogging) {
-      console.log(`Reference: about to call createComponent with pageReference: context: ${theResolvedConfigProps.context}`);
+      console.log(`Reference: about to call createComponent with pageReference: context: ${inPConn.getContextName()}`);
     }
 
+    // Create the component with the right context
     const viewComponent = inPConn.createComponent(viewObject, null, null, {
-      pageReference: theResolvedConfigProps.context
+      pageReference: context && context.startsWith('@CLASS') ? '' : context
     });
 
-    // updating the referencedComponent should trigger a render
+    // Get the PConnect object from the created component
     const newCompPConnect = viewComponent.getPConnect();
 
+    // Set inherited configuration on the new component
     newCompPConnect.setInheritedConfig({
       ...referenceConfig,
-      readOnly: theResolvedConfigProps.readOnly ? theResolvedConfigProps.readOnly : false,
-      displayMode: theResolvedConfigProps.displayMode ? theResolvedConfigProps.displayMode : null
+      readOnly,
+      displayMode
     });
 
+    // Log debug information if logging is enabled
     if (ReferenceComponent.bLogging) {
       console.log(
         `Angular Reference component: createFullReferencedViewFromRef -> newCompPConnect configProps: ${JSON.stringify(
@@ -93,73 +90,63 @@ export class ReferenceComponent {
       );
     }
 
-    return newCompPConnect;
+    // Return the component if it should be visible, otherwise null
+    return visibility !== false ? newCompPConnect : null;
   }
 
-  // STATIC method that other components can call to normalize
-  //  a pConn object that might be a 'reference'. If the incoming
-  //  pConn is a reference, return its dereferenced View PConnect's
-  //  getPConnect. Otherwise, return the passed in pConn unchanged
-  //  inPConn = a PConn object (ex: { getPConnect()} )
-  static normalizePConn(inPConn: any) {
-    // debugger;
-
-    let returnObj = false;
-    let thePConnType = '';
-
-    if (inPConn.getPConnect) {
-      // inPConn is an object (ex: { getPConnect()} ), so we want to return
-      //  any referenced view as the object containing the
-      //  the getPConnect function
-      returnObj = true;
-      thePConnType = inPConn.getPConnect().getComponentName();
-    } else {
-      // inPConn is an object with the PConnect function, so we want
-      //  to return any referenced view as the object containing the
-      //  the c11n function
-      returnObj = false;
-      thePConnType = inPConn.getComponentName();
+  /**
+   * Normalizes a PConn object that might be a 'reference'.
+   * If the incoming PConn is a reference, returns its dereferenced View.
+   * Otherwise, returns the passed in PConn unchanged.
+   *
+   * @param inPConn - A PConn object (ex: { getPConnect() } or direct PConnect)
+   * @returns The normalized PConn object with references resolved
+   */
+  static normalizePConn(inPConn: any): any {
+    // Early return for null or undefined input
+    if (!inPConn) {
+      return inPConn;
     }
 
-    if (thePConnType === 'reference') {
-      if (returnObj) {
-        //  WAS...
-        // const theRefViewPConn = inPConn.getPConnect().getReferencedViewPConnect(true);
-        // Now: ALWAYS calling createFullReferencedViewFromRef to have options, PageReference, etc.
-        //  set correctly in the C11nEnv (PConnect) object
-        // debugger;
-        let theRefViewPConn = this.createFullReferencedViewFromRef(inPConn.getPConnect());
-        // now return its PConnect
-        theRefViewPConn = theRefViewPConn.getComponent();
-
-        // const theFullReference = theRefViewPConn.getPConnect().getFullReference();
-        // console.log(`theFullReference: ${theFullReference}`);
-
-        return theRefViewPConn;
+    // Determine if we have an object with getPConnect method or direct PConnect
+    const hasGetPConnectMethod = !!inPConn.getPConnect;
+
+    // Get the component name in the appropriate way based on the object type
+    const componentName = hasGetPConnectMethod ? inPConn.getPConnect().getComponentName() : inPConn.getComponentName();
+
+    // Only process if this is a reference component
+    if (componentName === 'reference') {
+      if (hasGetPConnectMethod) {
+        // For objects with getPConnect method, get the referenced view and its component
+        const refViewPConn = this.createFullReferencedViewFromRef(inPConn.getPConnect());
+        return refViewPConn?.getComponent();
       }
-      // console.log(`created theFullRefView full reference: ${theFullRefView.getFullReference()}`);
-      // debugger;
 
+      // For direct PConnect objects, just create the referenced view
       return this.createFullReferencedViewFromRef(inPConn);
     }
+
+    // Not a reference component, return unchanged
     return inPConn;
   }
 
-  // STATIC method that other components can call to normalize
-  //  an array of pConn objects where any of the children might
-  //  be a 'reference'. The array returns an array of children
-  //  where any 'reference' is replaced with its ReferencedView
-  //  inPConnArray is an array of PConn objects or functions.
-  //    Its value is passed to normalizePConn
-
-  static normalizePConnArray(inPConnArray: any) {
-    if (!(inPConnArray?.length > 0)) {
-      // null or empty array, return what was passed in
-      return inPConnArray;
+  /**
+   * Normalizes an array of PConn objects by replacing any 'reference' components
+   * with their referenced views.
+   *
+   * @param inPConnArray - Array of PConn objects to normalize
+   * @returns Normalized array with references resolved, or empty array if input is invalid
+   */
+  static normalizePConnArray(inPConnArray: any[]): any[] {
+    // Handle null, undefined, or empty array case
+    if (!inPConnArray?.length) {
+      return inPConnArray || [];
     }
 
-    return inPConnArray.map(child => {
-      return ReferenceComponent.normalizePConn(child);
-    });
+    // Process array: normalize each item and filter out any null/undefined results
+    const normalizedArray = inPConnArray.map(child => ReferenceComponent.normalizePConn(child)).filter(Boolean);
+
+    // Ensure we always return an array (even if filter removes all items)
+    return normalizedArray || [];
   }
 }

package/lib/infra/region/region.component.ts

@@ -8,7 +8,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-region',
   templateUrl: './region.component.html',
   styleUrls: ['./region.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class RegionComponent implements OnInit, OnChanges {

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.scss

@@ -5,7 +5,6 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-background-color);
   position: fixed;
   z-index: 99999;
   top: 0rem;

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

@@ -1,13 +1,13 @@
-import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { interval, Subscription } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ServerConfigService } from '@pega/angular-sdk-components';
 import { ProgressSpinnerService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { PreviewViewContainerComponent } from '@pega/angular-sdk-components';
 import { ModalViewContainerComponent } from '@pega/angular-sdk-components';
-import { HybridViewContainerComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 
 /**
@@ -22,11 +22,9 @@ const options = { context: 'app' };
   selector: 'app-root-container',
   templateUrl: './root-container.component.html',
   styleUrls: ['./root-container.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatProgressSpinnerModule,
-    HybridViewContainerComponent,
     ModalViewContainerComponent,
     PreviewViewContainerComponent,
     forwardRef(() => ComponentMapperComponent)
@@ -37,6 +35,8 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   @Input() displayOnlyFA$: boolean;
   @Input() isMashup$: boolean;
 
+  scService = inject(ServerConfigService);
+
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
 
@@ -62,12 +62,10 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    const myContext = 'app';
-
     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
@@ -84,24 +82,11 @@ export class RootContainerComponent implements OnInit, OnDestroy {
 
     this.pvConn$ = configObjPreview.getPConnect();
 
-    const configObjModal = PCore.createPConnect({
-      meta: {
-        type: 'ModalViewContainer',
-        config: {
-          name: 'modal'
-        }
-      },
-      options: {
-        pageReference: 'pyPortal',
-        context: myContext
-      }
-    });
+    this.configureModalContainer();
 
     // 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);
 
@@ -128,16 +113,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
@@ -156,7 +131,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
@@ -191,6 +166,25 @@ export class RootContainerComponent implements OnInit, OnDestroy {
     }
   }
 
+  async configureModalContainer() {
+    const sdkConfig = await this.scService.getSdkConfig();
+    const showModalsInEmbeddedMode = sdkConfig.serverConfig.showModalsInEmbeddedMode;
+
+    if (!this.displayOnlyFA$ || showModalsInEmbeddedMode) {
+      const configObjModal = PCore.createPConnect({
+        meta: {
+          type: 'ModalViewContainer',
+          config: {
+            name: 'modal'
+          }
+        },
+        options
+      });
+
+      this.mConn$ = configObjModal.getPConnect();
+    }
+  }
+
   generateViewContainerForNoPortal() {
     // bootstrap loadMashup resolves to here
     const arChildren = this.pConn$.getChildren() as any[];
@@ -202,7 +196,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',
@@ -222,7 +216,6 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   showHideProgress(bShow: boolean) {
     // only show spinner after 500ms wait, so if server fast, won't see
     if (bShow) {
-      // eslint-disable-next-line sonarjs/no-collapsible-if
       if (!this.bIsProgress$) {
         // makes sure Angular tracks these changes
         if (!this.spinnerTimer || this.spinnerTimer.isStopped) {
@@ -230,7 +223,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
             try {
               this.spinnerTimer.unsubscribe();
             } catch (ex) {
-              /* empty */
+              console.log(ex);
             }
 
             this.ngZone.run(() => {

package/lib/infra/stages/stages.component.html

@@ -4,10 +4,10 @@
       <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
     </div>
     <div *ngIf="stage.visited_status == 'active'" class="psdk-stages-inner-present">
-      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+      {{ localizationService.getLocalizedText(stage.name) }}
     </div>
     <div *ngIf="stage.visited_status == 'future'" class="psdk-stages-inner-future">
-      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+      {{ localizationService.getLocalizedText(stage.name) }}
     </div>
   </div>
 </div>

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

@@ -8,45 +8,18 @@
   font-size: 1.5rem;
 }
 
-.psdk-stages-div {
-  display: inline-flex;
-  padding: 0.3125rem;
-  font-weight: bold;
-  font-size: 1.3rem;
-  color: var(--app-neutral-color);
-}
-
-.psdk-stages-past {
-  color: var(--app-primary-color);
-  padding-right: 0.3125rem;
-}
-
-.psdk-stages-present {
-  color: var(--app-secondary-color);
-  padding-right: 0.3125rem;
-}
-
-.psdk-stages-future {
-  color: var(--app-neutral-color);
-  padding-right: 0.3125rem;
-}
-
 .psdk-stages-full {
   display: block;
 }
 
 .psdk-stages-divider {
-  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+  border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
 }
 
 .psdk-stages-full {
   display: block;
 }
 
-.psdk-stages-divider {
-  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
-}
-
 .psdk-stages-icon {
   width: 1.4rem;
   display: inline-block;
@@ -54,18 +27,17 @@
 }
 
 .psdk-stages-bar {
-  margin: 1rem 0rem;
-  background-color: var(--app-form-color);
+  background-color: var(--mat-sys-surface-container);
   border-radius: 0.5rem;
-  border: 0.0625rem solid var(--app-neutral-light-color);
+  border: 0.0625rem solid var(--mat-sys-outline-variant);
   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;
@@ -84,7 +56,7 @@
   right: calc(-0.4375rem);
   background: inherit;
   border-style: solid;
-  border-color: rgb(207, 207, 207);
+  border-color: var(--mat-sys-outline-variant);
   border-width: 0.0625rem 0.0625rem 0px 0px;
   border-radius: 0px calc(0.3125rem) 0px 0px;
   transform: rotateZ(45deg) skew(15deg, 15deg);
@@ -92,17 +64,17 @@
 }
 
 .psdk-stages-inner-past {
-  color: var(--app-inverse-form-color);
+  color: var(--mat-sys-outline-variant);
   font-size: 1rem;
 }
 
 .psdk-stages-inner-present {
-  color: var(--app-primary-color);
+  color: var(--mat-sys-primary);
   font-weight: bold;
   font-size: 1rem;
 }
 
 .psdk-stages-inner-future {
-  color: var(--app-neutral-color);
+  color: var(--mat-sys-on-surface);
   font-size: 1rem;
 }

package/lib/infra/stages/stages.component.ts

@@ -13,7 +13,6 @@ interface StagesProps {
   selector: 'app-stages',
   templateUrl: './stages.component.html',
   styleUrls: ['./stages.component.scss'],
-  standalone: true,
   imports: [CommonModule]
 })
 export class StagesComponent implements OnInit, OnDestroy {
@@ -27,7 +26,8 @@ export class StagesComponent implements OnInit, OnDestroy {
   arStageResults$: any[];
   lastStage$: any;
   checkSvgIcon$: string;
-  key: string;
+  key: any;
+  localizationService: any;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -40,7 +40,8 @@ export class StagesComponent implements OnInit, OnDestroy {
 
     // const imagePath = this.utils.getIconPath(this.utils.getSDKStaticContentUrl());
     this.checkSvgIcon$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
-    this.key = `${this.pConn$.getCaseInfo().getClassName()}!CASE!${this.pConn$.getCaseInfo().getName()}`.toUpperCase();
+    this.key = this.pConn$?.getCaseLocaleReference();
+    this.localizationService = this.pConn$?.getLocalizationService();
   }
 
   ngOnDestroy(): void {

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(), formGroup$ }"
+        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>