@pega/angular-sdk-overrides 24.2.10 → 25.1.10

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,8 +62,6 @@ 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'));
 
@@ -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
@@ -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[];
@@ -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

@@ -1,13 +1,14 @@
 <div class="psdk-stages-bar">
   <div class="psdk-stages-chevron" *ngFor="let stage of arStageResults$">
     <div *ngIf="stage.visited_status == 'completed'" class="psdk-stages-inner-past">
-      <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+      <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />
+      <div>{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}</div>
     </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,56 +8,30 @@
   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;
+  width: 18px;
   display: inline-block;
   vertical-align: top;
+  filter: var(--app-primary-color-filter);
+  margin-right: 2px;
 }
 
 .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;
   display: flex;
   flex-wrap: wrap;
@@ -84,7 +58,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 +66,19 @@
 }
 
 .psdk-stages-inner-past {
-  color: var(--app-inverse-form-color);
+  color: var(--mat-sys-outline-variant);
   font-size: 1rem;
+  display: flex;
+  align-items: center;
 }
 
 .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

@@ -17,7 +17,7 @@
     <div *ngFor="let kid of arChildren$">
       <component-mapper
         [name]="kid.getPConnect().getComponentName()"
-        [props]="{ pConn$: kid.getPConnect() }"
+        [props]="{ pConn$: kid.getPConnect(), formGroup$ }"
         errorMsg="View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}"
       ></component-mapper>
     </div>

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

@@ -7,7 +7,7 @@ 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 NO_HEADER_TEMPLATES = ['SubTabs', 'SimpleTable', 'Confirmation', 'DynamicTabs', 'DetailsSubTabs', 'ListView'];
 const DETAILS_TEMPLATES = [
   'Details',
   'DetailsFields',
@@ -82,7 +82,6 @@ interface ViewProps {
   selector: 'app-view',
   templateUrl: './view.component.html',
   styleUrls: ['./view.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class ViewComponent implements OnInit, OnDestroy, OnChanges {
@@ -159,14 +158,11 @@ 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 || 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$;
+    this.label$ = this.inheritedProps$.label || this.configProps$.label || '';
+    this.showLabel$ = this.inheritedProps$.showLabel || this.configProps$.showLabel || isDetailsTemplate(this.templateName$);
     // children may have a 'reference' so normalize the children array
     this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
-
     this.visibility$ = this.configProps$.visibility ?? this.visibility$;
 
     /**

package/lib/template/advanced-search/advanced-search.component.html

@@ -0,0 +1,12 @@
+<div class="advanced-search">
+  <!-- Search Groups Component -->
+  <component-mapper name="SearchGroups" [props]="{ pConn$, formGroup$, searchGroupsProps }"></component-mapper>
+  <!-- Editable Field Component -->
+  <ng-container *ngIf="editableFieldComp">
+    <component-mapper
+      [name]="editableFieldComp.getPConnect().getComponentName()"
+      [props]="{ pConn$: editableFieldComp.getPConnect() }"
+      errorMsg="View Missing (displayAll): {{ editableFieldComp.getPConnect().getComponentName() }}"
+    ></component-mapper>
+  </ng-container>
+</div>

package/lib/template/advanced-search/advanced-search.component.ts

@@ -0,0 +1,112 @@
+import { Component, forwardRef, Input, OnInit, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { DataReferenceAdvancedSearchService } from '@pega/angular-sdk-components';
+import { getFirstChildConfig } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-advanced-search',
+  templateUrl: './advanced-search.component.html',
+  styleUrls: ['./advanced-search.component.scss'],
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class AdvancedSearchComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() searchSelectCacheKey;
+
+  isInitialized = false;
+
+  configProps$: any;
+  showRecords: any;
+  searchGroupsProps: any;
+  editableFieldComp: any;
+
+  constructor(private advancedSearchService: DataReferenceAdvancedSearchService) {}
+
+  ngOnInit(): void {
+    this.isInitialized = true;
+    this.updateSelf();
+  }
+
+  ngOnChanges() {
+    if (this.isInitialized) {
+      this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    const targetObjectClass = this.configProps$.targetObjectClass;
+    const localeReference = this.configProps$.localeReference;
+    const data: any = this.advancedSearchService.getConfig();
+    const { dataReferenceConfigToChild, isCreateNewReferenceEnabled, disableStartingFieldsForReference, pyID, searchSelectCacheKey } = data;
+    const { selectionMode, value: singleSelectFieldValue, readonlyContextList: multiSelectField } = dataReferenceConfigToChild;
+
+    // let isSelectionExist = false;
+    const { MULTI } = PCore.getConstants().LIST_SELECTION_MODE;
+
+    if (selectionMode === MULTI) {
+      this.showRecords = this.pConn$.getValue(multiSelectField)?.length || false;
+    } else {
+      this.showRecords = this.pConn$.getValue(singleSelectFieldValue) || false;
+    }
+
+    const rawViewMetadata = this.pConn$.getRawMetadata() as any;
+
+    const searchFieldsSet = new Set();
+    const searchFields: any = [];
+    rawViewMetadata?.config?.searchGroups?.forEach((group: any) => {
+      group.children.forEach((child: any) => {
+        if (!searchFieldsSet.has(child.config.value) && !child.config.validator) {
+          searchFields.push(child);
+          searchFieldsSet.add(child.config.value);
+        }
+      });
+    });
+
+    const firstChildPConnect = this.pConn$.getChildren()[0].getPConnect as any;
+    const [firstChildMeta] = rawViewMetadata.children;
+
+    const localizedVal = PCore.getLocaleUtils().getLocaleValue;
+    // @ts-ignore
+    const cache = PCore.getNavigationUtils().getComponentCache(searchSelectCacheKey) ?? {};
+
+    this.editableFieldComp = firstChildPConnect().createComponent({
+      type: firstChildMeta.type,
+      config: {
+        ...getFirstChildConfig({
+          firstChildMeta,
+          getPConnect: this.pConn$,
+          rawViewMetadata,
+          contextClass: targetObjectClass,
+          dataReferenceConfigToChild,
+          isCreateNewReferenceEnabled,
+          disableStartingFieldsForReference,
+          pyID
+        }),
+        searchFields,
+        showRecords: this.showRecords,
+        label: localizedVal('Search results', 'DataReference'),
+        searchSelectCacheKey,
+        cache
+      }
+    });
+
+    const { selectionList, dataRelationshipContext } = this.editableFieldComp.getPConnect().getConfigProps();
+    const editableField = selectionMode === MULTI ? selectionList.substring(1) : dataRelationshipContext;
+
+    this.searchGroupsProps = {
+      getPConnect: this.pConn$,
+      editableField,
+      localeReference,
+      setShowRecords: (value: boolean) => {
+        this.showRecords = value;
+      },
+      searchSelectCacheKey: dataReferenceConfigToChild.searchSelectCacheKey,
+      cache
+    };
+  }
+}

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

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AdvancedSearchService {
+  initializeSearchFields(rawViewMetadata: any): any[] {
+    const searchFieldsSet = new Set();
+    const searchFields: any[] = [];
+
+    rawViewMetadata.config.searchGroups.forEach((group: any) => {
+      group.children.forEach((child: any) => {
+        if (!searchFieldsSet.has(child.config.value) && !child.config.validator) {
+          searchFields.push(child);
+          searchFieldsSet.add(child.config.value);
+        }
+      });
+    });
+
+    return searchFields;
+  }
+
+  getLocalizedValue(key: string, context: string): string {
+    // Mock implementation for localized value retrieval
+    return `${context}: ${key}`;
+  }
+}

package/lib/template/advanced-search/search-group/persist-utils.ts

@@ -0,0 +1,56 @@
+const SKIP_CACHE_KEY = '';
+
+export function getMappedKey(key) {
+  const mappedKey = PCore.getEnvironmentInfo().getKeyMapping(key);
+  if (!mappedKey) {
+    return key;
+  }
+  return mappedKey;
+}
+
+const getComponentStateKey = (getPConnect, propertyName: string) => {
+  const pConnect = getPConnect;
+  const caseID = `.${getMappedKey('pyID')}`; // Enhance this later when use-case arrives for data objects using S&S.
+  const resolvedCaseID = pConnect.getValue(caseID);
+
+  if (!resolvedCaseID) {
+    return SKIP_CACHE_KEY;
+  }
+
+  return `Search-${resolvedCaseID}-${pConnect.getPageReference()}-${propertyName}-${pConnect.getCurrentView()}`;
+};
+
+const getComponentStateOptions = getPConnect => {
+  return { clearOnCancelForContext: getPConnect.getContextName() };
+};
+
+interface SearchCategory {
+  // tabId of search category selected
+  selectedCategory: string;
+}
+
+interface SearchGroup {
+  // searchFields can be any object based on what fields are authored.
+  searchFields: unknown;
+  activeGroupId: string;
+}
+
+const setComponentCache = ({
+  cacheKey,
+  state,
+  options
+}: {
+  cacheKey: string;
+  state: SearchCategory | SearchGroup;
+  options: ReturnType<typeof getComponentStateOptions>;
+}) => {
+  if (cacheKey !== SKIP_CACHE_KEY) {
+    (PCore.getNavigationUtils() as any).setComponentCache(cacheKey, state, options);
+  }
+};
+
+export const componentCachePersistUtils = {
+  getComponentStateKey,
+  getComponentStateOptions,
+  setComponentCache
+};

package/lib/template/advanced-search/search-groups/search-groups.component.html

@@ -0,0 +1,32 @@
+<div class="search-groups-container" fxLayout="column" fxLayoutGap="16px">
+  <!-- Dropdown if multiple groups -->
+  <div *ngIf="groups && groups.length > 1">
+    <mat-form-field appearance="fill" style="width: 100%">
+      <mat-label>Search By</mat-label>
+      <mat-select [value]="activeGroupId" (selectionChange)="onActiveGroupChange($event.value)">
+        <mat-option *ngFor="let group of groups" [value]="group.config.id">
+          {{ group.config.label }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <!-- Search Fields Form -->
+  <div *ngIf="transientItemID">
+    <component-mapper
+      [name]="searchFieldsC11nEnv()?.getPConnect().getComponentName()"
+      [props]="{ pConn$: searchFieldsC11nEnv()?.getPConnect(), formGroup$ }"
+      errorMsg="View Missing (displayAll): {{ searchFieldsC11nEnv()?.getPConnect().getComponentName() }}"
+    ></component-mapper>
+  </div>
+
+  <!-- Action Buttons -->
+  <div style="display: flex; gap: 8px; margin-bottom: 10px">
+    <button mat-stroked-button type="button" (click)="resetFilterData()">
+      {{ localizedVal('Reset', 'SimpleTable') }}
+    </button>
+    <button mat-raised-button color="primary" type="button" (click)="getFilterData()">
+      {{ localizedVal('Search', 'SimpleTable') }}
+    </button>
+  </div>
+</div>