@pega/angular-sdk-overrides 0.24.9 → 0.25.2

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

@@ -5,6 +5,7 @@ import { Subscription } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ErrorMessagesService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
 
 interface IPage {
   classID: string;
@@ -24,14 +25,13 @@ interface AppShellProps {
   portalTemplate: string;
   readOnly?: boolean;
   showAppHeaderBar: boolean;
-  showAppName: boolean;
+  showAppName: any;
 }
 
 @Component({
   selector: 'app-app-shell',
   templateUrl: './app-shell.component.html',
   styleUrls: ['./app-shell.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatSnackBarModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class AppShellComponent implements OnInit, OnDestroy {
@@ -45,19 +45,22 @@ export class AppShellComponent implements OnInit, OnDestroy {
   caseTypes$?: object[];
   arChildren$: any[];
   bShowAppShell$ = false;
-  appName$ = 'PEGA';
+  appName$ = '';
   errorMessagesSubscription: Subscription;
   sErrorMessages = '';
   snackBarRef: any;
   bOkDisplayError = false;
   portalTemplate: string;
   links: any = [];
+  imageURL: string | Blob;
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
   constructor(
     private angularPConnect: AngularPConnectService,
     private erService: ErrorMessagesService,
     private snackBar: MatSnackBar,
-    private ngZone: NgZone
+    private ngZone: NgZone,
+    private utils: Utils
   ) {}
 
   ngOnInit() {
@@ -68,6 +71,8 @@ export class AppShellComponent implements OnInit, OnDestroy {
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as AppShellProps;
 
+    this.portalTemplate = this.configProps$.portalTemplate;
+
     // making a copy, so can add info
     this.pages$ = this.configProps$.pages;
 
@@ -78,11 +83,32 @@ export class AppShellComponent implements OnInit, OnDestroy {
     if (this.pages$) {
       this.bShowAppShell$ = true;
     }
-    this.caseTypes$ = this.configProps$.caseTypes;
 
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    /* TODO: We're setting the `pyPortalTemplate` for now, this would be handled by the CoreJS in the future releases */
+    if (this.portalTemplate === 'wss') {
+      PCore.getEnvironmentInfo().setEnvironmentInfo({ ...PCore.getEnvironmentInfo().environmentInfoObject, pyPortalTemplate: 'wss' } as any);
+    }
+
+    // @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.portalTemplate = this.configProps$.portalTemplate;
+    this.caseTypes$ = this.configProps$.caseTypes;
+
+    this.arChildren$ = this.pConn$.getChildren();
 
     // handle showing and hiding the progress spinner
     this.errorMessagesSubscription = this.erService.getMessage().subscribe(message => {
@@ -120,6 +146,12 @@ export class AppShellComponent implements OnInit, OnDestroy {
   updateSelf() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as AppShellProps;
 
+    const showAppName = this.configProps$.showAppName;
+    const envInfo = PCore.getEnvironmentInfo();
+    const appNameToDisplay = showAppName ? envInfo.getApplicationLabel() : '';
+    const portalClass = this.pConn$.getValue('.classID', ''); // 2nd arg empty string until typedef marked correctly
+    const envPortalName = envInfo.getPortalName();
+
     this.ngZone.run(() => {
       // making a copy, so can add info
       this.pages$ = this.configProps$.pages;
@@ -129,8 +161,32 @@ export class AppShellComponent implements OnInit, OnDestroy {
       }
 
       this.caseTypes$ = this.configProps$.caseTypes;
-      this.arChildren$ = this.pConn$.getChildren() as any[];
+      this.arChildren$ = this.pConn$.getChildren();
     });
+
+    const portalLogo = this.configProps$.portalLogo;
+    // using the default icon then fetch it from the static folder (not auth involved)
+    if (
+      !portalLogo ||
+      portalLogo.toLowerCase().includes('pzpega-logo-mark') ||
+      portalLogo.toLowerCase().includes('py-logo') ||
+      portalLogo.toLowerCase().includes('py-full-logo')
+    ) {
+      const portalLogoImage = this.utils.getIconPath(this.utils.getSDKStaticContentUrl()).concat('pzpega-logo-mark.svg');
+      this.imageURL = portalLogoImage;
+    }
+    // not using default icon to fetch it using the way which uses authentication
+    else {
+      PCore.getAssetLoader()
+        .getSvcImageUrl(portalLogo)
+        .then(data => {
+          this.imageURL = data;
+        })
+        .catch(() => {
+          console.error(`${this.localizedVal('Unable to load the image for the portal logo/icon with the insName', 'AppShell')}:${portalLogo}`);
+        });
+    }
+    this.appName$ = this.localizedVal(appNameToDisplay || '', '', `${portalClass}!PORTAL!${envPortalName}`.toUpperCase());
   }
 
   // fpr show/hiding error messages in the SnackBar component
@@ -138,7 +194,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
     switch (errorMessages.action) {
       case 'update':
         // won't show unless publish is turned on
-        // eslint-disable-next-line @typescript-eslint/prefer-includes
+
         if (this.sErrorMessages.indexOf(errorMessages.actionMessage) < 0) {
           this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
 
@@ -151,7 +207,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
       case 'show':
         // add error message if not in the list
         // won't show unless publish is turned on
-        // eslint-disable-next-line @typescript-eslint/prefer-includes
+
         if (this.sErrorMessages.indexOf(errorMessages.actionMessage) < 0) {
           this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
         }

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

@@ -16,7 +16,6 @@ interface BannerPageProps {
   selector: 'app-banner-page',
   templateUrl: './banner-page.component.html',
   styleUrls: ['./banner-page.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class BannerPageComponent implements OnInit, OnChanges {

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 '@pega/angular-sdk-components';
+
+@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-summary/case-summary.component.scss

@@ -30,8 +30,6 @@
 }
 
 .psdk-status {
-  background-color: var(--app-primary-color);
-  color: var(--app-form-color);
   padding: 0;
   margin-top: 0.625rem;
   width: fit-content;

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

@@ -3,6 +3,7 @@ import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
 
 interface CaseSummaryProps {
   // If any, enter additional props that only exist on this component
@@ -16,7 +17,6 @@ interface CaseSummaryProps {
   selector: 'app-case-summary',
   templateUrl: './case-summary.component.html',
   styleUrls: ['./case-summary.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
@@ -33,7 +33,10 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
   primaryFields$: any[] = [];
   secondaryFields$: any[] = [];
 
-  constructor(private angularPConnect: AngularPConnectService) {}
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private utils: Utils
+  ) {}
 
   ngOnInit(): void {
     // First thing in initialization is registering and subscribing to the AngularPConnect service
@@ -55,7 +58,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();
 
@@ -101,30 +104,11 @@ export class CaseSummaryComponent implements OnInit, OnDestroy, OnChanges {
     });
   }
 
-  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);
+        const caseSummaryComponentObject = this.utils.prepareComponentInCaseSummary(childMeta, childItem.getPConnect);
         caseSummaryComponentObject.id = index + 1;
         return caseSummaryComponentObject;
       });

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

@@ -1,7 +1,7 @@
 <div class="psdk-case-view" id="case-view">
-  <div *ngIf="!displayOnlyFA$" 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-view-info">
+    <mat-toolbar class="psdk-case-view-toolbar">
+      <mat-toolbar-row class="psdk-case-view-toolbar-row">
         <div class="psdk-case-icon-div">
           <img class="psdk-case-svg-icon" src="{{ svgCase$ }}" />
         </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$">
-      <component-mapper name="DeferLoad" [props]="{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }"></component-mapper>
+    <div>
+      <component-mapper name="DeferLoad" [props]="{ pConn$, 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

@@ -27,7 +27,7 @@ h1 {
 }
 
 .psdk-case-icon-div {
-  background-color: var(--app-primary-dark-color);
+  background-color: var(--mat-sys-on-primary-fixed);
   border-radius: 1rem;
   padding: 0.5rem 0.3rem 0.3rem 0.3rem;
 }
@@ -47,11 +47,9 @@ h1 {
   flex: 0 0 auto;
   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);
+  // padding: 0rem 0.3125rem 0rem 0rem;
+  background-color: var(--mat-sys-surface-container);
+  height: 100%;
 }
 
 .psdk-case-view-main {
@@ -84,24 +82,34 @@ h1 {
 }
 
 .psdk-case-view-utilities {
+  background-color: var(--mat-sys-surface-container);
   width: 21.875rem;
   float: left;
   padding: 0rem 0.3125rem;
-  height: 100%; /* Should be removed. Only for demonstration */
 }
 
 .psdk-case-view-divider {
-  border-bottom: 0.0625rem solid var(--app-neutral-light-color);
+  border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
 }
 
 .psdk-status {
   padding: 0.3125rem 0.3125rem;
-  background-color: var(--app-primary-color);
-  color: var(--app-form-color);
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-surface-container);
   width: fit-content;
   margin: 0.625rem;
 }
 
+.psdk-case-view-toolbar {
+  background-color: var(--mat-sys-primary);
+}
+
 button {
   margin: 0rem 0.3125rem;
 }
+
+.psdk-case-view-toolbar-row {
+  padding-left: 1rem;
+  white-space: normal;
+  height: auto;
+}

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

@@ -21,13 +21,11 @@ interface CaseViewProps {
   templateUrl: './case-view.component.html',
   styleUrls: ['./case-view.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class CaseViewComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
-  @Input() displayOnlyFA$: boolean;
 
   // Used with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -120,7 +118,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
     if (hasNewAttachments !== this.bHasNewAttachments) {
       this.bHasNewAttachments = hasNewAttachments;
       if (this.bHasNewAttachments) {
-        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);
       }
     }
 
@@ -136,7 +134,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
     const timer = interval(100).subscribe(() => {
       timer.unsubscribe();
 
-      this.heading$ = PCore.getLocaleUtils().getLocaleValue(this.configProps$.header, '', this.localeKey);
+      this.heading$ = this.pConn$.getLocalizationService().getLocalizedText(this.configProps$.header);
       this.id$ = this.configProps$.subheader;
       this.status$ = this.pConn$.getValue('.pyStatusWork');
     });
@@ -161,19 +159,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.html

@@ -14,7 +14,7 @@
       <button mat-raised-button color="primary" (click)="onConfirmViewClose()">Done</button>
     </div>
   </div>
-  <div *ngIf="toDoList?.length > 0">
+  <div *ngIf="!showConfirmView && toDoList?.length > 0">
     <component-mapper
       name="Todo"
       [props]="{ pConn$, datasource$: { source: toDoList }, headerText$: 'Tasks', type$: CONSTS.TODO, isConfirm: true }"

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

@@ -18,7 +18,6 @@ interface ConfirmationProps {
   selector: 'app-confirmation',
   templateUrl: './confirmation.component.html',
   styleUrls: ['./confirmation.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class ConfirmationComponent implements OnInit, OnDestroy {
@@ -43,7 +42,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();
   }

package/lib/template/data-reference/data-reference-advanced-search.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class DataReferenceAdvancedSearchService {
+  private configSubject = new BehaviorSubject(null);
+  config$ = this.configSubject.asObservable();
+
+  setConfig(config) {
+    this.configSubject.next(config);
+  }
+
+  getConfig() {
+    return this.configSubject.getValue();
+  }
+}

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

@@ -1,13 +1,16 @@
-<div *ngIf="childrenToRender && childrenToRender.length > 0">
-  <div *ngIf="!displayMultiRef">
-    <div *ngFor="let kid of childrenToRender">
-      <component-mapper [name]="kid?.getPConnect().getComponentName()" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
-    </div>
-  </div>
+<div *ngIf="showAdvancedSearch; else notadvancedSearch">
+  <component-mapper name="SearchForm" [props]="{ pConn$: pConn$, formGroup$, searchSelectCacheKey: '' }"></component-mapper>
+</div>
+<ng-template #notadvancedSearch>
   <div *ngIf="displaySingleRef">
-    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
+    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$: firstChildPConnect(), dataRelationshipContext }"></component-mapper>
   </div>
   <div *ngIf="displayMultiRef">
     <component-mapper name="MultiReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
   </div>
-</div>
+  <div *ngIf="displayChild && childrenToRender && childrenToRender.length > 0">
+    <div *ngFor="let kid of childrenToRender">
+      <component-mapper [name]="kid?.getPConnect().getComponentName()" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+  </div>
+</ng-template>