@pega/angular-sdk-overrides 24.2.10 → 25.1.10

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

@@ -0,0 +1,294 @@
+import { Component, Input, OnInit, OnDestroy, forwardRef, OnChanges, ChangeDetectorRef, signal } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { componentCachePersistUtils } from '@pega/angular-sdk-components';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getCacheInfo, isValidInput } from '@pega/angular-sdk-components';
+import { Subscription } from 'rxjs';
+
+const listViewConstants = {
+  EVENTS: {
+    LIST_VIEW_READY: 'LIST_VIEW_READY'
+  }
+};
+
+export function flattenObj(obj: any): any {
+  const result: any = {};
+  Object.keys(obj).forEach(key => {
+    if (!['context_data', 'pageInstructions'].includes(key)) {
+      if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
+        const temp = flattenObj(obj[key]);
+        Object.keys(temp).forEach(nestedKey => {
+          result[`${key}.${nestedKey}`] = temp[nestedKey];
+        });
+      } else {
+        result[key] = obj[key];
+      }
+    }
+  });
+  return result;
+}
+
+export const initializeSearchFields = (searchFields, getPConnect, referenceListClassID, searchFieldRestoreValues = {}) => {
+  const filtersProperties = {};
+  searchFields?.forEach(field => {
+    let val = '';
+    const { value, defaultValue = '' } = field.config;
+    const propPath = PCore.getAnnotationUtils().getPropertyName(value);
+
+    if (searchFieldRestoreValues[propPath]) {
+      val = searchFieldRestoreValues[propPath];
+    } else if (PCore.getAnnotationUtils().isProperty(defaultValue)) {
+      val = getPConnect().getValue(defaultValue.split(' ')[1]);
+    } else if (defaultValue.startsWith('@L')) {
+      val = defaultValue.split(' ')[1];
+    } else {
+      val = defaultValue;
+    }
+
+    filtersProperties[propPath] = val;
+
+    const valueSplit = value.split('@P ')[1]?.split('.').filter(Boolean) ?? [];
+    valueSplit.pop();
+
+    if (valueSplit.length) {
+      let path = '';
+      let currentClassID = referenceListClassID;
+      valueSplit.forEach(item => {
+        path = path.length ? `${path}.${item}` : item;
+        currentClassID = (PCore.getMetadataUtils().getPropertyMetadata(item, currentClassID) as any).pageClass;
+        if (currentClassID) {
+          filtersProperties[`${path}.classID`] = currentClassID;
+        }
+      });
+    }
+  });
+  return filtersProperties;
+};
+
+@Component({
+  selector: 'app-search-groups',
+  templateUrl: './search-groups.component.html',
+  styleUrls: ['./search-groups.component.scss'],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatOptionModule,
+    MatSelectModule,
+    MatButtonModule,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class SearchGroupsComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() searchGroupsProps;
+
+  configProps$: any;
+  cache: any;
+  previousFormValues: any;
+  isValidatorField: any;
+  searchSelectCacheKey: any;
+  activeGroupId: string;
+  getPConnect: any;
+  searchFields: any;
+  referenceListClassID: any;
+  transientItemID: any;
+  useCache: boolean;
+  searchFieldsC11nEnv: any = signal(null);
+  referenceFieldName: any;
+  viewName: any;
+  subs: Subscription[] = [];
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  setShowRecords: any;
+  groups: any;
+  state: any = {};
+  rawGroupsConfig: any;
+  initialSearchFields: {};
+  constructor(private cdRef: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    console.log('SearchGroupsComponent - ngOnInit');
+  }
+
+  ngOnChanges() {
+    this.updateSelf();
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    const { searchGroups: groups, referenceList } = this.configProps$;
+    const { getPConnect, editableField, searchSelectCacheKey, cache } = this.searchGroupsProps;
+    this.searchSelectCacheKey = searchSelectCacheKey;
+    this.getPConnect = getPConnect;
+    this.cache = cache || {};
+    const referenceFieldName = editableField.replaceAll('.', '_');
+    const { classID: referenceListClassID } = PCore.getMetadataUtils().getDataPageMetadata(referenceList) as any;
+    const { useCache, initialActiveGroupId } = getCacheInfo(cache, groups);
+    this.activeGroupId = initialActiveGroupId;
+    const rawGroupsConfig = this.pConn$.getRawConfigProps().searchGroups;
+    const activeGroupIndex = groups.findIndex(group => group.config.id === this.activeGroupId);
+    const { children: searchFieldsChildren = [] } = activeGroupIndex !== -1 ? rawGroupsConfig[activeGroupIndex] : {};
+    this.searchFields = searchFieldsChildren.map(field => ({
+      ...field,
+      config: { ...field.config, isSearchField: true }
+    }));
+    this.initialSearchFields = initializeSearchFields(
+      this.searchFields,
+      getPConnect,
+      referenceListClassID,
+      useCache && cache.activeGroupId === this.activeGroupId ? cache.searchFields : {}
+    );
+    const filtersWithClassID = {
+      ...this.initialSearchFields,
+      classID: referenceListClassID
+    };
+    const viewName = this.pConn$.getCurrentView();
+    const transientId = getPConnect.getContainerManager().addTransientItem({ id: `${referenceFieldName}-${viewName}`, data: filtersWithClassID });
+    this.transientItemID = transientId;
+    this.createSearchFields();
+  }
+
+  createSearchFields() {
+    const searchFieldsViewConfig = {
+      name: 'SearchFields',
+      type: 'View',
+      config: {
+        template: 'DefaultForm',
+        NumCols: '3',
+        contextName: this.transientItemID, // can be null initially; will be replaced after transient creation
+        readOnly: false,
+        context: this.transientItemID,
+        localeReference: this.searchGroupsProps.localeReference
+      },
+      children: [
+        {
+          name: 'Fields',
+          type: 'Region',
+          children: this.searchFields
+        }
+      ]
+    };
+
+    // Create c11n env (Angular will render this via the SDK host component)
+    this.searchFieldsC11nEnv.set(
+      PCore.createPConnect({
+        meta: searchFieldsViewConfig,
+        options: {
+          hasForm: true,
+          contextName: this.transientItemID
+        }
+      })
+    );
+
+    this.cdRef.detectChanges();
+  }
+
+  getFilterData(): void {
+    let changes = PCore.getFormUtils().getSubmitData(this.transientItemID, {
+      isTransientContext: true,
+      includeDisabledFields: true
+    });
+
+    if (Object.keys(this.cache.searchFields ?? {}).length > 0 && Object.keys(changes).length === 1) {
+      changes = this.cache.searchFields;
+    }
+
+    const formValues = flattenObj(changes);
+
+    if (
+      !PCore.isDeepEqual(this.previousFormValues, formValues) &&
+      PCore.getFormUtils().isFormValid(this.transientItemID) &&
+      isValidInput(formValues)
+    ) {
+      if (this.isValidatorField) {
+        // @ts-ignore
+        PCore.getMessageManager().clearContextMessages({ context: transientItemID });
+      }
+
+      this.previousFormValues = formValues;
+      // this.setShowRecords(true);
+
+      PCore.getPubSubUtils().publish(PCore.getEvents().getTransientEvent().UPDATE_PROMOTED_FILTERS, {
+        payload: formValues,
+        showRecords: true,
+        viewName: this.getPConnect.getCurrentView()
+      });
+    }
+
+    this.state.activeGroupId = this.activeGroupId;
+    this.state.searchFields = changes;
+    this.state.selectedCategory = this.getPConnect.getCurrentView();
+    const options = componentCachePersistUtils.getComponentStateOptions(this.getPConnect);
+    componentCachePersistUtils.setComponentCache({
+      cacheKey: this.searchSelectCacheKey,
+      state: this.state,
+      options
+    });
+  }
+
+  resetFilterData(): void {
+    PCore.getNavigationUtils().resetComponentCache(this.searchSelectCacheKey);
+    const resetPayload = {
+      transientItemID: this.transientItemID,
+      data: initializeSearchFields(this.searchFields, this.getPConnect, this.referenceListClassID),
+      options: { reset: true }
+    };
+    PCore.getContainerUtils().updateTransientData(resetPayload);
+  }
+
+  /** NEW: update existing transient data when active group changes */
+  updateTransientDataForActiveGroup() {
+    const filtersWithClassID = {
+      ...this.initialSearchFields,
+      classID: this.referenceListClassID
+    };
+
+    if (this.transientItemID) {
+      // this mirrors the React: PCore.getContainerUtils().replaceTransientData(...)
+      PCore.getContainerUtils().replaceTransientData({ transientItemID: this.transientItemID, data: filtersWithClassID });
+    }
+  }
+
+  onActiveGroupChange(event: any) {
+    this.activeGroupId = event.value;
+    // update searchFields for the newly selected group (mirror how React recalculates)
+    const activeGroupIndex = this.groups.findIndex(g => g.config.id === this.activeGroupId);
+    const searchFieldsChildren = activeGroupIndex !== -1 ? this.rawGroupsConfig[activeGroupIndex]?.children || [] : [];
+    this.searchFields = searchFieldsChildren.map(field => ({
+      ...field,
+      config: { ...field.config, isSearchField: true }
+    }));
+
+    // IMPORTANT: call replaceTransientData to update the transient with the new group's search fields
+    this.updateTransientDataForActiveGroup();
+  }
+
+  private setupCacheReplayOnListViewReady(): void {
+    if (Object.keys(this.cache?.searchFields ?? {}).length > 0) {
+      const sub: any = PCore.getPubSubUtils().subscribe(
+        listViewConstants.EVENTS.LIST_VIEW_READY,
+        ({ viewName }: { viewName: string }) => {
+          if (viewName === this.viewName && this.useCache) {
+            this.getFilterData();
+          }
+        },
+        `${this.searchSelectCacheKey}-listview-ready`
+      );
+      this.subs.push(sub);
+    }
+  }
+
+  ngOnDestroy(): void {
+    PCore.getPubSubUtils().unsubscribe(listViewConstants.EVENTS.LIST_VIEW_READY, `${this.searchSelectCacheKey}-listview-ready`);
+    this.subs.forEach(s => s.unsubscribe());
+  }
+}

package/lib/template/advanced-search/search-groups/utils.ts

@@ -0,0 +1,29 @@
+function isEmpty(value: any): boolean {
+  return (
+    // null or undefined
+    value === null ||
+    value === undefined ||
+    ((Array.isArray(value) || typeof value === 'string') && value.length === 0) ||
+    // is an Object and has no keys
+    (value.constructor === Object && Object.keys(value).length === 0)
+  );
+}
+
+export function getCacheInfo(
+  cache: { selectedCategory: string; activeGroupId: string; searchFields: unknown },
+  groups: { config: { id: string } }[]
+) {
+  let initialActiveGroupId = groups.length ? groups[0].config.id : '';
+
+  let useCache = false;
+  if (cache.activeGroupId && groups?.find(group => group.config.id === cache.activeGroupId)) {
+    initialActiveGroupId = cache.activeGroupId;
+    useCache = true;
+  }
+
+  return { useCache, initialActiveGroupId };
+}
+
+export function isValidInput(input: { [s: string]: unknown }) {
+  return Object.values(input).some(value => !isEmpty(value));
+}

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

@@ -3,7 +3,10 @@
     <component-mapper name="NavBar" [props]="{ pConn$, appName$, pages$, caseTypes$ }"></component-mapper>
   </div>
   <div *ngIf="bShowAppShell$ && portalTemplate === 'wss'">
-    <component-mapper name="WssNavBar" [props]="{ pConn$, appName$, homePage: pages$[0], pages$: links, caseTypes$ }"></component-mapper>
+    <component-mapper
+      name="WssNavBar"
+      [props]="{ pConn$, appName$, homePage: pages$[0], pages$: links, caseTypes$, portalLogoImage$: imageURL }"
+    ></component-mapper>
   </div>
   <div [ngClass]="{ 'appshell-main': portalTemplate !== 'wss', 'appshell-main-wss': portalTemplate === 'wss' }">
     <div *ngFor="let kid of arChildren$">

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

@@ -1,9 +1,7 @@
 .appshell-top {
-  background-color: var(--app-background-color);
 }
 
 .appshell-top-wss {
-  background-color: var(--app-background-color);
 }
 
 .appshell-main {
@@ -32,7 +30,6 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-background-color);
   position: fixed;
   z-index: 999;
   top: 0rem;

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;
 
@@ -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/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/form-template-base.ts

@@ -1,10 +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
@@ -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 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/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;
+}