@pega/angular-sdk-overrides 0.24.9 → 0.25.2

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

@@ -7,6 +7,22 @@ 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 DETAILS_TEMPLATES = [
+  'Details',
+  'DetailsFields',
+  'DetailsOneColumn',
+  'DetailsSubTabs',
+  'DetailsThreeColumn',
+  'DetailsTwoColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails'
+];
+
+function isDetailsTemplate(template) {
+  return DETAILS_TEMPLATES.includes(template);
+}
+
 /**
  * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
  * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
@@ -66,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 {
@@ -77,13 +92,15 @@ export class ViewComponent implements OnInit, OnDestroy, OnChanges {
 
   angularPConnectData: AngularPConnectData = {};
 
+  noHeaderTemplates = NO_HEADER_TEMPLATES;
+
   configProps$: ViewProps;
   inheritedProps$: any;
   arChildren$: any[];
   templateName$: string;
   title$ = '';
   label$ = '';
-  showLabel$ = true;
+  showLabel$ = false;
   visibility$ = true;
 
   constructor(
@@ -142,13 +159,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 || this.showLabel$;
+    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$;
     // 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>

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;