@pega/angular-sdk-overrides 24.2.12 → 25.1.11

package/lib/infra/multi-step/multi-step.component.scss

@@ -1,5 +1,5 @@
 .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-icon {
@@ -7,14 +7,6 @@
   min-width: unset;
 }
 
-.psdk-icon-current {
-  color: var(--app-primary-color);
-}
-
-.psdk-icon-not-current {
-  color: var(--app-neutral-color);
-}
-
 .psdk-current-svg-icon {
   width: 1rem;
   filter: var(--app-primary-color-filter);
@@ -35,16 +27,15 @@ mat-horizontal-stepper {
 .psdk-sub-step-current {
   padding-left: 0.625rem;
   font-weight: bold;
-  color: var(--app-label-selected-color);
+  color: var(--mat-sys-on-secondary-container);
 }
 
 .psdk-sub-step-not-current {
+  color: var(--mat-sys-on-surface-variant);
   padding-left: 0.625rem;
-  color: var(--app-label-color);
 }
 
 .psdk-flow-container-top {
-  background-color: var(--app-form-color);
   padding: 0rem 0.625rem;
   border-radius: 0.3125rem;
 }
@@ -81,8 +72,7 @@ mat-horizontal-stepper {
 
 .psdk-vertical-step-icon {
   margin-right: 12px;
-  background-color: var(--app-neutral-color);
-  color: var(--app-form-color);
+  background-color: var(--mat-sys-secondary);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -95,13 +85,12 @@ mat-horizontal-stepper {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: var(--app-form-color);
 }
 
 .psdk-vertical-step-icon-selected {
   margin-right: 12px;
-  background-color: var(--app-primary-color);
-  color: var(--app-form-color);
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -110,7 +99,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label {
-  color: var(--app-label-color);
+  color: var(--mat-sys-on-surface-variant);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -122,7 +111,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-vertical-step-label-selected {
-  color: var(--app-label-selected-color);
+  color: var(--mat-sys-on-secondary-container);
   display: inline-block;
   white-space: nowrap;
   overflow: hidden;
@@ -152,7 +141,6 @@ mat-horizontal-stepper {
   border-left-style: solid;
   top: -16px;
   bottom: -16px;
-  border-left-color: var(--app-multi-step-border-color);
 }
 
 .psdk-horizontal-stepper {
@@ -182,8 +170,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon {
-  background-color: var(--app-neutral-color);
-  color: var(--app-form-color);
+  background-color: var(--mat-sys-secondary);
+  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -203,8 +191,8 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-icon-selected {
-  background-color: var(--app-primary-color);
-  color: var(--app-form-color);
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-surface);
   border-radius: 50%;
   height: 24px;
   width: 24px;
@@ -216,7 +204,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label {
-  color: var(--app-label-color);
+  color: var(--mat-sys-on-surface-variant);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -226,7 +214,7 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-label-selected {
-  color: var(--app-label-selected-color);
+  color: var(--mat-sys-on-secondary-container);
   display: inline-block;
   min-width: 50px;
   vertical-align: middle;
@@ -236,7 +224,6 @@ mat-horizontal-stepper {
 }
 
 .psdk-horizontal-step-line {
-  border-top-color: var(--app-multi-step-border-color);
   border-top-width: 1px;
   border-top-style: solid;
   flex: auto;

package/lib/infra/multi-step/multi-step.component.ts

@@ -9,7 +9,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   templateUrl: './multi-step.component.html',
   styleUrls: ['./multi-step.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class MultiStepComponent implements OnInit {

package/lib/infra/navbar/navbar.component.html

@@ -8,48 +8,43 @@
     </div>
   </div>
   <div class="psdk-nav-divider"></div>
-  <div>
-    <mat-list>
-      <mat-list-item id="create-case-button" (click)="navPanelCreateButtonClick()">
-        <div class="flex-box">
-          <img class="psdk-nav-svg-icon" src="{{ navExpandCollapse$ }}" />
-          <span class="psdk-nav-button-span">Create</span>
-        </div>
+  <mat-list>
+    <mat-list-item id="create-case-button" (click)="navPanelCreateButtonClick()">
+      <div class="flex-box">
+        <img class="psdk-nav-svg-icon" src="{{ navExpandCollapse$ }}" />
+        <span class="psdk-nav-button-span">Create</span>
+      </div>
+    </mat-list-item>
+    <mat-list *ngIf="bShowCaseTypes$" style="margin-left: 40px">
+      <mat-list-item
+        id="case-list-item"
+        *ngFor="let caseType of caseTypes$"
+        (click)="navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)"
+      >
+        <span class="psdk-nav-button-span">{{
+          localeUtils.getLocaleValue(caseType.pyLabel, '', localeUtils.getCaseLocaleReference(caseType.pyClassName))
+        }}</span>
       </mat-list-item>
-      <mat-list *ngIf="bShowCaseTypes$" style="margin-left: 40px">
-        <mat-list-item
-          id="case-list-item"
-          *ngFor="let caseType of caseTypes$"
-          (click)="navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)"
-        >
-          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference) }}</span>
-        </mat-list-item>
-      </mat-list>
     </mat-list>
-  </div>
-  <div style="height: 100%">
-    <mat-list *ngFor="let page of navPages$">
-      <mat-list-item (click)="navPanelButtonClick(page)">
-        <div class="flex-box">
-          <img class="psdk-nav-svg-icon" src="{{ page.iconName }}" />
-          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(page.pyLabel, '', localeReference) }}</span>
-        </div>
-      </mat-list-item>
-    </mat-list>
-  </div>
+  </mat-list>
+  <mat-list *ngFor="let page of navPages$">
+    <mat-list-item (click)="navPanelButtonClick(page)">
+      <div class="flex-box">
+        <img class="psdk-nav-svg-icon" src="{{ page.iconName }}" />
+        <span class="psdk-nav-button-span">{{ page.name }}</span>
+      </div>
+    </mat-list-item>
+  </mat-list>
   <div class="psdk-nav-divider"></div>
-  <div>
-    <mat-list id="profile">
-      <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
-        <div class="flex-box">
-          <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
-          <span class="psdk-nav-button-span">{{ portalOperator$ }}</span>
-        </div>
-      </mat-list-item>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item>Profile</button>
-        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
-      </mat-menu>
-    </mat-list>
-  </div>
+  <mat-list id="profile" class="psdk-logout-button">
+    <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
+      <div class="flex-box">
+        <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
+        <span class="psdk-nav-button-span">{{ portalOperator$ }}</span>
+      </div>
+    </mat-list-item>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
+    </mat-menu>
+  </mat-list>
 </div>

package/lib/infra/navbar/navbar.component.scss

@@ -5,7 +5,7 @@ $transition-fast: 0.1s !default;
 $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
 
 .psdk-nav-divider {
-  border-bottom: 0.0625rem solid var(--app-divider-color);
+  border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
   width: 100%;
   align-items: center;
 }
@@ -39,6 +39,7 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
 .psdk-appshell-nav {
   z-index: 199;
   position: fixed;
+  top: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -119,8 +120,8 @@ $natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
   align-items: center;
   text-align: center;
   display: inline-flex;
-  background: var(--app-neutral-color);
-  color: var(--app-form-color);
+  background: var(--mat-sys-background);
+  color: var(--mat-sys-on-background);
   font-weight: normal;
   font-size: 1rem;
 }
@@ -140,7 +141,7 @@ mat-list-item {
   height: auto !important;
 
   &:hover {
-    background-color: var(--app-label-color);
+    background-color: rgba(0, 0, 0, 0.54);
   }
 
   .flex-box {
@@ -150,3 +151,20 @@ mat-list-item {
     text-align: left;
   }
 }
+
+.theme-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.color-preview {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+}
+
+.psdk-logout-button {
+  flex: 1;
+  align-content: flex-end;
+}

package/lib/infra/navbar/navbar.component.ts

@@ -17,7 +17,6 @@ interface NavBarProps {
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, MatListModule, MatMenuModule]
 })
 export class NavbarComponent implements OnInit, OnDestroy {
@@ -50,7 +49,6 @@ export class NavbarComponent implements OnInit, OnDestroy {
   localizedVal: any;
   localeCategory = 'AppShell';
   localeUtils = PCore.getLocaleUtils();
-  localeReference: any;
   constructor(
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
@@ -114,11 +112,17 @@ export class NavbarComponent implements OnInit, OnDestroy {
 
       // making a copy, so can add info
       this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
-
+      // @ts-ignore
+      const localeReference = PCore.getLocaleUtils().getPortalLocaleReference() || this.pConn$.getValue('.pyLocaleReference');
       this.navPages$.forEach(page => {
+        const destinationObject: any = {};
+        this.pConn$.resolveConfigProps(
+          { defaultHeading: page.pyDefaultHeading || page.pyLabel, localeReference: page.pyLocalizationReference },
+          destinationObject
+        );
+        page.name = this.localeUtils.getLocaleValue(destinationObject.defaultHeading, '', destinationObject.localeReference || localeReference);
         page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
       });
-      this.localeReference = this.pConn$.getValue('.pyLocaleReference');
       this.actionsAPI = this.pConn$.getActionsApi();
       this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
       this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);

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

@@ -71,6 +71,11 @@ export class ReferenceComponent {
       pageReference: context && context.startsWith('@CLASS') ? '' : context
     });
 
+    if (referenceConfig.inheritedProps && referenceConfig.inheritedProps.length > 0) {
+      const inheritedProps = inPConn.getInheritedProps();
+      referenceConfig.inheritedProps = Object.keys(inheritedProps).map(prop => ({ prop, value: inheritedProps[prop] }));
+    }
+
     // Get the PConnect object from the created component
     const newCompPConnect = viewComponent.getPConnect();
 

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

@@ -8,7 +8,6 @@ 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';
 
 /**
@@ -23,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)
@@ -219,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) {
@@ -227,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>