@pega/angular-sdk-overrides 24.2.12 → 25.1.11

package/lib/template/simple-table-manual/simple-table-manual.component.scss

@@ -26,7 +26,7 @@ table {
 ::ng-deep th.mat-mdc-header-cell,
 td.mat-mdc-cell,
 td.mat-mdc-footer-cell {
-  border-right: 1px solid var(--app-neutral-light-color);
+  border-right: 1px solid var(--mat-sys-outline-variant);
   padding: 8px !important;
   min-width: 10rem;
 }
@@ -76,13 +76,6 @@ td.mat-mdc-cell:last-child {
   padding-left: 0.625rem;
 }
 
-.psdk-icon-search {
-  vertical-align: sub;
-  padding: 0rem 0.125rem;
-  min-width: unset;
-  width: 1.1rem;
-}
-
 .psdk-outer-div-in-form {
   display: inline-grid;
 }
@@ -121,7 +114,7 @@ td.mat-mdc-cell:last-child {
   display: table;
   margin: auto;
   min-width: 100px;
-  background-color: var(--app-form-color);
+  background-color: var(--mat-sys-surface-container);
   border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
@@ -137,7 +130,6 @@ td.mat-mdc-cell:last-child {
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: var(--app-dialog-background-color);
   position: fixed;
   z-index: 999;
   top: 0px;
@@ -148,7 +140,6 @@ td.mat-mdc-cell:last-child {
   display: table;
   margin: auto;
   min-width: 150px;
-  background-color: var(--app-form-color);
   border: 1px solid var(--app-inverse-form-color);
   border-radius: 10px;
   padding: 20px;
@@ -160,7 +151,6 @@ tr.mat-mdc-row {
 }
 
 tr.mat-mdc-header-row {
-  background: var(--app-table-header-background-color);
 }
 
 .psdk-data-readonly {
@@ -171,13 +161,13 @@ tr.mat-mdc-header-row {
 .psdk-no-records {
   height: 56px;
   text-align: center;
-  border: 1px solid var(--app-neutral-light-color);
+  border: 1px solid var(--mat-sys-outline-variant);
   border-top: none;
-  background: var(--app-form-color);
 }
 
 .psdk-utility-card-action-svg-icon {
   width: 1.4rem;
+  filter: var(--app-primary-color-filter);
 }
 
 .label {

package/lib/template/simple-table-manual/simple-table-manual.component.ts

@@ -9,6 +9,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSort, MatSortModule } from '@angular/material/sort';
+import { MatIcon } from '@angular/material/icon';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import isEqual from 'fast-deep-equal';
 
@@ -62,7 +63,6 @@ class Group {
   selector: 'app-simple-table-manual',
   templateUrl: './simple-table-manual.component.html',
   styleUrls: ['./simple-table-manual.component.scss'],
-  standalone: true,
   imports: [
     CommonModule,
     MatTableModule,
@@ -74,8 +74,10 @@ class Group {
     MatOptionModule,
     MatSelectModule,
     MatInputModule,
+    MatIcon,
     forwardRef(() => ComponentMapperComponent)
-  ]
+  ],
+  providers: [DatapageService]
 })
 export class SimpleTableManualComponent implements OnInit, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
@@ -216,7 +218,6 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SimpleTableManualProps;
 
     if (this.configProps$.visibility != null) {
-      // eslint-disable-next-line no-multi-assign
       this.bVisible$ = this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
 
@@ -307,6 +308,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.defaultView = editModeConfig ? editModeConfig.defaultView : viewForAddAndEditModal;
     this.bUseSeparateViewForEdit = editModeConfig ? editModeConfig.useSeparateViewForEdit : useSeparateViewForEdit;
     this.editView = editModeConfig ? editModeConfig.editView : viewForEditModal;
+    const primaryFieldsViewIndex = resolvedFields.findIndex(field => field.config.value === 'pyPrimaryFields');
     // const showDeleteButton = !this.readOnlyMode && !hideDeleteRow;
 
     // Nebula has other handling for isReadOnlyMode but has Cosmos-specific code
@@ -317,8 +319,11 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula does). It will also have the "label", and "meta" contains the original,
     //  unchanged config info. For now, much of the info here is carried over from
     //  Nebula and we may not end up using it all.
-    this.fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
-
+    this.fieldDefs = buildFieldsForTable(rawFields, this.pConn$, showDeleteButton, {
+      primaryFieldsViewIndex,
+      fields: resolvedFields
+    });
+    this.fieldDefs = this.fieldDefs?.filter(field => !(field.meta?.config?.hide === true));
     this.initializeDefaultPageInstructions();
 
     // end of from Nebula
@@ -334,10 +339,15 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  from from the fieldDefs. This "name" is the value that
     //  we'll share to connect things together in the table.
 
+    const labelsMap = this.fieldDefs.reduce((acc, curr) => {
+      return { ...acc, [curr.name]: curr.label };
+    }, {});
+
     this.processedFields = [];
 
     this.processedFields = resolvedFields.map((field, i) => {
       field.config.name = this.displayedColumns[i]; // .config["value"].replace(/ ./g,"_");   // replace space dot with underscore
+      field.config.label = labelsMap[field.config.name] || field.config.label;
       return field;
     });
 
@@ -817,7 +827,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     const seen = {};
     return a.filter(item => {
       const k = key(item);
-      // eslint-disable-next-line no-return-assign, no-prototype-builtins
+      // eslint-disable-next-line no-prototype-builtins
       return seen.hasOwnProperty(k) ? false : (seen[k] = true);
     });
   }
@@ -908,7 +918,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
 
   // return the value that should be shown as the contents for the given row data
   //  of the given row field
-  getRowValue(inRowData: Object, inColKey: string): any {
+  getRowValue(inRowData: object, inColKey: string): any {
     // See what data (if any) we have to display
     const refKeys: string[] = inColKey.split('.');
     let valBuilder = inRowData;
@@ -951,6 +961,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     if (this.allowEditingInModal && this.defaultView) {
       this.pConn$
         .getActionsApi()
+        // @ts-expect-error
         .openEmbeddedDataModal(
           this.defaultView,
           this.pConn$ as any,
@@ -972,6 +983,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     if (data) {
       this.pConn$
         .getActionsApi()
+        // @ts-expect-error
         .openEmbeddedDataModal(
           this.bUseSeparateViewForEdit ? this.editView : this.defaultView,
           this.pConn$ as any,
@@ -993,24 +1005,32 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     this.referenceList.forEach((element, index) => {
       const data: any = [];
       this.rawFields?.forEach(item => {
-        item = {
-          ...item,
-          config: { ...item.config, label: '', displayMode: this.readOnlyMode || this.allowEditingInModal ? 'DISPLAY_ONLY' : undefined }
-        };
-        const referenceListData = getReferenceList(this.pConn$);
-        const isDatapage = referenceListData.startsWith('D_');
-        const pageReferenceValue = isDatapage ? `${referenceListData}[${index}]` : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
-        const config = {
-          meta: item,
-          options: {
-            context,
-            pageReference: pageReferenceValue,
-            referenceList: referenceListData,
-            hasForm: true
-          }
-        };
-        const view = PCore.createPConnect(config);
-        data.push(view);
+        if (!item?.config?.hide) {
+          item = {
+            ...item,
+            config: {
+              ...item.config,
+              label: '',
+              displayMode: this.readOnlyMode || this.allowEditingInModal ? 'DISPLAY_ONLY' : undefined
+            }
+          };
+          const referenceListData = getReferenceList(this.pConn$);
+          const isDatapage = referenceListData.startsWith('D_');
+          const pageReferenceValue = isDatapage
+            ? `${referenceListData}[${index}]`
+            : `${this.pConn$.getPageReference()}${referenceListData}[${index}]`;
+          const config = {
+            meta: item,
+            options: {
+              context,
+              pageReference: pageReferenceValue,
+              referenceList: referenceListData,
+              hasForm: true
+            }
+          };
+          const view = PCore.createPConnect(config);
+          data.push(view);
+        }
       });
       eleData.push(data);
     });

package/lib/template/simple-table-select/simple-table-select.component.ts

@@ -8,7 +8,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-simple-table-select',
   templateUrl: './simple-table-select.component.html',
   styleUrls: ['./simple-table-select.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class SimpleTableSelectComponent implements OnInit, OnDestroy {

package/lib/template/single-reference-readonly/single-reference-readonly.component.html

@@ -1 +1,4 @@
-<component-mapper name="SemanticLink" [props]="{ pConn$ }"></component-mapper>
+<div [ngClass]="displayMode ? 'psdk-grid-display' : 'psdk-grid-nondisplay'">
+  <div *ngIf="label" class="psdk-grid-label">{{ label }}</div>
+  <component-mapper name="SemanticLink" [props]="{ pConn$: newPconn, formGroup$ }"></component-mapper>
+</div>

package/lib/template/single-reference-readonly/single-reference-readonly.component.scss

@@ -0,0 +1,21 @@
+.psdk-grid-display {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.psdk-grid-nondisplay {
+  margin-top: 1rem;
+}
+
+.psdk-label {
+  color: var(--app-label-color);
+  margin: 8px 0px;
+}
+
+.psdk-value {
+  margin: 8px 0px;
+}

package/lib/template/single-reference-readonly/single-reference-readonly.component.ts

@@ -1,15 +1,115 @@
-import { Component, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Component, Input, forwardRef, OnInit, OnDestroy } from '@angular/core';
 import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getDataRelationshipContextFromKey } from '@pega/angular-sdk-components';
 
 @Component({
   selector: 'app-single-reference-readonly',
   templateUrl: './single-reference-readonly.component.html',
   styleUrls: ['./single-reference-readonly.component.scss'],
-  standalone: true,
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class SingleReferenceReadonlyComponent {
+export class SingleReferenceReadonlyComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
+  @Input() dataRelationshipContext?: any;
+
+  angularPConnectData: AngularPConnectData = {};
+  configProps: any;
+  component: any;
+  label: string;
+  newPconn: typeof PConnect;
+  displayMode: string;
+
+  constructor(private angularPConnect: 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(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  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.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    const rawViewMetadata = this.pConn$.getRawMetadata();
+    const label = this.configProps.label;
+    const showLabel = this.configProps.showLabel;
+    const propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
+    const type = (rawViewMetadata?.config as any)?.componentType;
+    this.displayMode = this.configProps.displayMode;
+    const targetObjectType = this.configProps.targetObjectType;
+    const referenceType = targetObjectType === 'case' ? 'Case' : 'Data';
+    const hideLabel = this.configProps.hideLabel;
+    // const additionalFields = this.configProps.additionalFields;
+    const displayAs = this.configProps.displayAs ?? 'readonly';
+    const dataRelationshipContext = (rawViewMetadata?.config as any)?.displayField
+      ? getDataRelationshipContextFromKey((rawViewMetadata?.config as any)?.displayField)
+      : this.dataRelationshipContext;
+    if (propsToUse.showLabel === false) {
+      propsToUse.label = '';
+    }
+    this.label = propsToUse.label;
+
+    const editableComponents = ['AutoComplete', 'SimpleTableSelect', 'Dropdown', 'RadioButtons'];
+    const config: any = {
+      ...rawViewMetadata?.config,
+      primaryField: (rawViewMetadata?.config as any)?.displayField,
+      label: this.label
+    };
+
+    const activeViewRuleClass = (rawViewMetadata?.config as any)?.targetObjectClass;
+    if (editableComponents.includes(type)) {
+      config.caseClass = activeViewRuleClass;
+      config.text = config.primaryField;
+      config.caseID = config.value;
+      config.contextPage = `@P .${dataRelationshipContext}`;
+      config.resourceParams = {
+        workID: displayAs === 'table' ? (config as any)?.selectionKey : config.value
+      };
+      config.resourcePayload = {
+        caseClassName: activeViewRuleClass
+      };
+    }
+
+    this.component = this.pConn$.createComponent(
+      {
+        type: 'SemanticLink',
+        config: {
+          ...config,
+          displayMode: this.displayMode,
+          referenceType,
+          hideLabel,
+          dataRelationshipContext
+        }
+      },
+      '',
+      0,
+      {}
+    );
+    this.newPconn = this.component.getPConnect();
+  }
 }

package/lib/template/sub-tabs/sub-tabs.component.ts

@@ -10,7 +10,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-sub-tabs',
   templateUrl: './sub-tabs.component.html',
   styleUrls: ['./sub-tabs.component.scss'],
-  standalone: true,
   imports: [MatTabsModule, CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class SubTabsComponent implements OnInit, OnDestroy {

package/lib/template/three-column/three-column.component.ts

@@ -8,7 +8,6 @@ import { FormTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-three-column',
   templateUrl: './three-column.component.html',
   styleUrls: ['./three-column.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class ThreeColumnComponent extends FormTemplateBase implements OnInit, OnChanges {

package/lib/template/three-column-page/three-column-page.component.ts

@@ -6,7 +6,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-three-column-page',
   templateUrl: './three-column-page.component.html',
   styleUrls: ['./three-column-page.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class ThreeColumnPageComponent {

package/lib/template/two-column/two-column.component.ts

@@ -8,7 +8,6 @@ import { FormTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-two-column',
   templateUrl: './two-column.component.html',
   styleUrls: ['./two-column.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class TwoColumnComponent extends FormTemplateBase implements OnInit, OnChanges {

package/lib/template/two-column-page/two-column-page.component.ts

@@ -7,7 +7,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-two-column-page',
   templateUrl: './two-column-page.component.html',
   styleUrls: ['./two-column-page.component.scss'],
-  standalone: true,
   imports: [forwardRef(() => ComponentMapperComponent)]
 })
 export class TwoColumnPageComponent implements OnInit, OnDestroy {

package/lib/template/two-column-tab/two-column-tab.component.ts

@@ -7,7 +7,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-two-column-tab',
   templateUrl: './two-column-tab.component.html',
   styleUrls: ['./two-column-tab.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class TwoColumnTabComponent implements OnInit, OnChanges {

package/lib/template/utils.ts

@@ -37,3 +37,45 @@ export const evaluateAllowRowAction = (allowRowDelete, rowData) => {
   }
   return false;
 };
+
+export function prepareCaseSummaryData(caseSummaryRegion, portalSpecificVisibilityChecker?) {
+  const filterVisibleChildren = children => {
+    return children
+      ?.getPConnect()
+      ?.getChildren()
+      ?.filter(child => {
+        const configProps = child.getPConnect().getConfigProps();
+        const defaultVisibilityCn = !('visibility' in configProps) || configProps.visibility === true;
+        return defaultVisibilityCn && (portalSpecificVisibilityChecker?.(configProps) ?? true);
+      });
+  };
+  const convertChildrenToSummaryData = children => {
+    return children?.map(childItem => {
+      const childPConnData = childItem.getPConnect().resolveConfigProps(childItem.getPConnect().getRawMetadata());
+      childPConnData.kid = childItem.getPConnect();
+      return childPConnData;
+    });
+  };
+
+  const summaryFieldChildren = caseSummaryRegion
+    .getPConnect()
+    .getChildren()[0]
+    ?.getPConnect()
+    ?.getReferencedViewPConnect()
+    ?.getPConnect()
+    ?.getChildren();
+
+  const primarySummaryFields =
+    summaryFieldChildren && summaryFieldChildren.length > 0
+      ? convertChildrenToSummaryData(filterVisibleChildren(summaryFieldChildren[0]))
+      : undefined;
+  const secondarySummaryFields =
+    summaryFieldChildren && summaryFieldChildren.length > 1
+      ? convertChildrenToSummaryData(filterVisibleChildren(summaryFieldChildren[1]))
+      : undefined;
+
+  return {
+    primarySummaryFields,
+    secondarySummaryFields
+  };
+}

package/lib/template/wide-narrow-form/wide-narrow-form.component.ts

@@ -8,7 +8,6 @@ import { FormTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-wide-narrow-form',
   templateUrl: './wide-narrow-form.component.html',
   styleUrls: ['./wide-narrow-form.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class WideNarrowFormComponent extends FormTemplateBase implements OnInit, OnChanges {

package/lib/template/wide-narrow-page/wide-narrow-page.component.ts

@@ -8,7 +8,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-wide-narrow-page',
   templateUrl: './wide-narrow-page.component.html',
   styleUrls: ['./wide-narrow-page.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class WideNarrowPageComponent implements OnInit, OnDestroy {

package/lib/template/wss-nav-bar/wss-nav-bar.component.html

@@ -1,21 +1,23 @@
-<mat-toolbar style="margin-bottom: 5px; background-color: #262626">
+<mat-toolbar>
   <mat-toolbar-row mat-icon-button>
     <div class="psdk-nav-header" (click)="navPanelButtonClick(homePage)">
       <div>
         <img src="{{ portalLogoImage$ }}" class="psdk-nav-logo" />
       </div>
       <div class="psdk-nav-portal-info">
-        <div class="psdk-nav-portal-app">{{ portalApp$ }}</div>
+        <div class="psdk-nav-portal-app">{{ appName$ }}</div>
       </div>
     </div>
 
+    <span class="spacer"></span>
+
     <div *ngFor="let page of navPages$">
-      <div class="flex-box mat-list-item" style="cursor: pointer" (click)="navPanelButtonClick(page)">
+      <div class="flex-box mat-list-item" style="cursor: pointer; font-size: 1rem; text-transform: capitalize" (click)="navPanelButtonClick(page)">
         <div mat-button class="psdk-nav-button-span">{{ page.pyLabel }}</div>
       </div>
     </div>
 
-    <span class="spacer"></span>
+    <!-- <span class="spacer"></span> -->
 
     <mat-list>
       <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
@@ -24,7 +26,6 @@
         </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>

package/lib/template/wss-nav-bar/wss-nav-bar.component.scss

@@ -15,16 +15,12 @@
   padding-top: 0.625rem;
   cursor: pointer;
   padding-right: 1rem;
-  &:hover {
-    background-color: var(--app-neutral-color);
-  }
   align-items: center;
 }
 
 .psdk-nav-logo {
-  width: 3.75rem;
-  padding: 0.625rem;
-  margin-right: 1.25rem;
+  max-width: 100%;
+  height: 3rem;
 }
 
 .psdk-nav-svg-icon {
@@ -108,14 +104,11 @@
 
 .psdk-nav-button-span {
   padding: 0 1rem;
-  color: var(--app-nav-color);
-
-  &:hover {
-    background-color: var(--app-neutral-color);
-  }
 }
 
 .psdk-nav-oper-avatar {
+  border-radius: 100%;
+  background-color: var(--mat-sys-primary);
   margin: 0rem;
   padding: 0rem;
   min-width: 2.5rem;
@@ -127,12 +120,14 @@
   align-items: center;
   text-align: center;
   display: inline-flex;
-  background: var(--app-neutral-color);
-  color: var(--app-form-color);
   font-weight: normal;
   font-size: 1rem;
 }
 
+mat-toolbar {
+  background-color: var(--mat-sys-surface-variant);
+}
+
 mat-list {
   padding: 0;
 }
@@ -147,10 +142,6 @@ mat-list-item {
   cursor: pointer !important;
   height: auto !important;
 
-  &:hover {
-    // background-color: rgba(0, 0, 0, 0.5);
-  }
-
   .flex-box {
     display: flex;
     align-items: center;

package/lib/template/wss-nav-bar/wss-nav-bar.component.ts

@@ -19,7 +19,6 @@ interface WssNavBarProps {
   templateUrl: './wss-nav-bar.component.html',
   styleUrls: ['./wss-nav-bar.component.scss'],
   providers: [Utils],
-  standalone: true,
   imports: [CommonModule, MatListModule, MatMenuModule, MatIconModule, MatToolbarModule]
 })
 export class WssNavBarComponent implements OnInit, OnDestroy {
@@ -28,6 +27,7 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   @Input() pages$: any[];
   @Input() caseTypes$: any[];
   @Input() homePage: any;
+  @Input() portalLogoImage$: string;
 
   // For interaction with AngularPConnect
   angularPConnectData: AngularPConnectData = {};
@@ -37,10 +37,6 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
   navExpandCollapse$: string;
   bShowCaseTypes$ = false;
 
-  portalApp$: string | undefined = '';
-  portalLogoImage$: string;
-  showAppName$ = false;
-
   portalOperator$: string | undefined;
   portalOperatorInitials$: string;
 
@@ -127,12 +123,8 @@ export class WssNavBarComponent implements OnInit, OnDestroy {
 
       // const oData = this.pConn$.getDataObject();
 
-      this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
       this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
       this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$ ?? '');
-      this.showAppName$ = this.configProps$.showAppName;
-
-      this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
     });
   }
 

package/lib/widget/app-announcement/app-announcement.component.html

@@ -3,11 +3,10 @@
   <div>
     <p>{{ configProps$.description }}</p>
     <div>
-      <h3>{{ configProps$.label }}</h3>
       <ul>
         <li *ngFor="let detail of details$">{{ detail }}</li>
       </ul>
     </div>
   </div>
-  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
+  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button [href]="configProps$.whatsnewlink">See what's new</a>
 </article>

package/lib/widget/app-announcement/app-announcement.component.scss

@@ -10,10 +10,10 @@ ul {
   padding-inline-start: 20px;
 }
 .psdk-announcement {
-  background-color: var(--app-form-color);
+  background-color: var(--mat-sys-surface-container);
   padding: 1rem;
   margin: 1rem 0;
   border-radius: 0.6125rem;
   border-left: 6px solid;
-  border-left-color: var(--app-primary-color);
+  border-left-color: var(--mat-sys-primary);
 }