@pega/dx-component-builder-sdk 25.1.11 → 25.1.13

package/tests/assets/sdk-a/components/create/override-sdk/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;
 
@@ -79,6 +84,11 @@ export class AppShellComponent implements OnInit, OnDestroy {
       this.bShowAppShell$ = true;
     }
 
+    /* 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) {
@@ -100,8 +110,6 @@ export class AppShellComponent implements OnInit, OnDestroy {
 
     this.arChildren$ = this.pConn$.getChildren();
 
-    this.portalTemplate = this.configProps$.portalTemplate;
-
     // handle showing and hiding the progress spinner
     this.errorMessagesSubscription = this.erService.getMessage().subscribe(message => {
       this.showDismissErrorMessages(message);
@@ -138,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;
@@ -149,6 +163,30 @@ export class AppShellComponent implements OnInit, OnDestroy {
       this.caseTypes$ = this.configProps$.caseTypes;
       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
@@ -156,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');
 
@@ -169,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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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
@@ -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/tests/assets/sdk-a/components/create/override-sdk/template/case-view/case-view.component.html

@@ -1,7 +1,7 @@
 <div class="psdk-case-view" id="case-view">
   <div class="psdk-case-view-info">
-    <mat-toolbar color="primary" class="psdk-case-view-toolbar">
-      <mat-toolbar-row style="padding-left: 1rem">
+    <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>
@@ -73,8 +73,8 @@
       </div>
     </div>
 
-    <div>
-      <component-mapper name="DeferLoad" [props]="{ pConn$, loadData$: tabData$, name: tabData$?.config?.name }"></component-mapper>
+    <div *ngIf="tabData$">
+      <component-mapper name="DeferLoad" [props]="{ pConn$, name: tabData$?.config?.name }"></component-mapper>
     </div>
   </div>
   <div>

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/template/case-view/case-view.component.ts

@@ -21,7 +21,6 @@ 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 {
@@ -50,7 +49,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
   caseSummaryPConn$: any;
   currentCaseID = '';
   editAction: boolean;
-  bHasNewAttachments = false;
   localizedVal: any;
   localeCategory = 'CaseView';
   localeKey: string;
@@ -114,14 +112,6 @@ export class CaseViewComponent implements OnInit, OnDestroy {
 
   updateHeaderAndSummary() {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as CaseViewProps;
-    const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
-
-    if (hasNewAttachments !== this.bHasNewAttachments) {
-      this.bHasNewAttachments = hasNewAttachments;
-      if (this.bHasNewAttachments) {
-        PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
-      }
-    }
 
     const kids = this.pConn$.getChildren() as any[];
     for (const kid of kids) {
@@ -135,7 +125,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');
     });

package/tests/assets/sdk-a/components/create/override-sdk/template/confirmation/confirmation.component.html

@@ -1,7 +1,7 @@
 <div>
   <div *ngIf="showConfirmView">
     <h2 id="confirm-label" class="confirm-label">{{ label }}</h2>
-    <div *ngIf="showDetails">
+    <div *ngIf="showDetails" class="confirmation-details">
       <component-mapper name="Details" [props]="{ pConn$ }"></component-mapper>
     </div>
     <div *ngIf="showTasks && toDoList?.length > 0">

package/tests/assets/sdk-a/components/create/override-sdk/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 {

package/tests/assets/sdk-a/components/create/override-sdk/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>