@pega/dx-component-builder-sdk 0.24.2 → 0.24.4

package/tests/assets/sdk-a/components/create/override-sdk/template/field-group-template/field-group-template.component.ts

@@ -149,20 +149,12 @@ export class FieldGroupTemplateComponent implements OnInit, OnDestroy, OnChanges
   };
 
   addFieldGroupItem() {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
-    } else {
-      // @ts-ignore - second parameter "pageRef" is optional for insert method
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
-    }
+    // @ts-ignore - second parameter "pageRef" is optional for insert method
+    this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
   }
 
   deleteFieldGroupItem(index) {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().deleteEntry(index, this.pageReference);
-    } else {
-      // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
-      this.pConn$.getListActions().deleteEntry(index);
-    }
+    // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
+    this.pConn$.getListActions().deleteEntry(index);
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/template/field-value-list/field-value-list.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="displayMode$ === 'LABELS_LEFT'; else STACKED_LARGE_VAL" class="psdk-container-labels-left">
   <div class="psdk-grid-label">{{ label$ }}</div>
   <div class="psdk-val-labels-left">
-    {{ value$ || '---' }}
+    <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
   </div>
 </div>
 
@@ -9,7 +9,12 @@
   <div *ngIf="displayMode$ === 'STACKED_LARGE_VAL'" class="psdk-container-stacked-large-val">
     <div class="psdk-grid-label">{{ label$ }}</div>
     <div class="psdk-val-stacked">
-      {{ value$ || '---' }}
+      <ng-container *ngTemplateOutlet="valueTemplate"></ng-container>
     </div>
   </div>
 </ng-template>
+
+<ng-template #valueTemplate>
+  <div *ngIf="isHtml$; else valueOnly" id="instruction-text" [innerHTML]="value$ || '---'"></div>
+  <ng-template #valueOnly>{{ value$ || '---' }}</ng-template>
+</ng-template>

package/tests/assets/sdk-a/components/create/override-sdk/template/field-value-list/field-value-list.component.ts

@@ -12,4 +12,5 @@ export class FieldValueListComponent {
   @Input() label$: any;
   @Input() value$: any;
   @Input() displayMode$: any;
+  @Input() isHtml$ = false;
 }

package/tests/assets/sdk-a/components/create/override-sdk/template/list-view/list-view.component.html

@@ -50,7 +50,7 @@
                   color="primary"
                   (click)="_listViewClick(dCol.config, element)"
                 >
-                  {{ element[dCol.config.name] }}
+                  {{ element[dCol.config.name] || '---' }}
                 </button>
                 <ng-template #regular>
                   {{ element[dCol.config.name] || '---' }}
@@ -114,10 +114,10 @@
                   color="primary"
                   (click)="_listViewClick(dCol.config, element)"
                 >
-                  {{ element[dCol.config.name] }}
+                  {{ element[dCol.config.name] || '---' }}
                 </button>
                 <ng-template #regular>
-                  {{ element[dCol.config.name] }}
+                  {{ element[dCol.config.name] || '---' }}
                 </ng-template>
               </td>
             </ng-container>
@@ -150,20 +150,20 @@
             <ng-container *ngIf="singleSelectionMode" matColumnDef="select">
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let row">
-                <mat-radio-button [value]="row[rowID]" (change)="fieldOnChange(row)"></mat-radio-button>
+                <mat-radio-button [value]="row[rowID]" [checked]="row[rowID] === checkBoxValue" (change)="fieldOnChange(row)"></mat-radio-button>
               </td>
             </ng-container>
             <ng-container *ngIf="multiSelectionMode" matColumnDef="select">
               <th mat-header-cell *matHeaderCellDef></th>
               <td mat-cell *matCellDef="let row">
-                <mat-checkbox [value]="row[rowID]" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
+                <mat-checkbox [value]="row[rowID]" [checked]="isChecked(row)" (change)="onCheckboxClick(row, $event)"></mat-checkbox>
               </td>
             </ng-container>
             <ng-container *ngFor="let dCol of fields$" [matColumnDef]="dCol.config.name">
               <th mat-header-cell *matHeaderCellDef mat-sort-header (click)="_headerSortClick($event, dCol)" arrowPosition="before">
                 {{ dCol.config.label }}
               </th>
-              <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] }}</td>
+              <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
             </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns$"></tr>

package/tests/assets/sdk-a/components/create/override-sdk/template/list-view/list-view.component.ts

@@ -40,6 +40,8 @@ interface ListViewProps {
   presets?: any;
   reorderFields: string | boolean;
   grouping: string | boolean;
+  value: any;
+  readonlyContextList: any;
 }
 
 export class Group {
@@ -156,6 +158,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
   fieldDefs: any;
   xRayApis = PCore.getDebugger().getXRayRuntime();
   xRayUid = this.xRayApis.startXRay();
+  checkBoxValue: string;
 
   constructor(
     private psService: ProgressSpinnerService,
@@ -184,6 +187,8 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
     this.selectionMode = this.configProps$.selectionMode;
 
+    this.checkBoxValue = this.configProps$.value;
+
     this.arFilterMainButtons$.push({ actionID: 'submit', jsAction: 'submit', name: 'Submit' });
     this.arFilterSecondaryButtons$.push({ actionID: 'cancel', jsAction: 'cancel', name: 'Cancel' });
 
@@ -353,7 +358,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
   }
 
   getListData() {
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
     const componentConfig = this.pConn$.getComponentConfig();
     if (this.configProps$) {
       this.preparePayload();
@@ -364,8 +368,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
       const dataViewParameters = this.payload.parameters;
 
       const workListDataPromise = !this.bInForm$
-        ? // @ts-ignore - 3rd parameter "context" should be optional in getData method
-          PCore.getDataApiUtils().getData(refList, payload)
+        ? PCore.getDataApiUtils().getData(refList, payload)
         : PCore.getDataPageUtils().getDataAsync(
             refList,
             this.pConn$.getContextName(),
@@ -505,6 +508,13 @@ export class ListViewComponent implements OnInit, OnDestroy {
     }
   }
 
+  isChecked(rowIn): any {
+    const initialVal = false;
+    return this.configProps$?.readonlyContextList?.reduce((acc, currRow) => {
+      return acc || rowIn[this.rowID] === currRow[this.rowID];
+    }, initialVal);
+  }
+
   fieldOnChange(row) {
     const value = row[this.rowID];
     const reqObj = {};
@@ -517,6 +527,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     } else {
       reqObj[this.rowID] = value;
     }
+    this.checkBoxValue = value;
     this.pConn$?.getListActions?.()?.setSelectedRows([reqObj]);
   }
 
@@ -601,7 +612,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
         this.pConn$.getActionsApi().openAssignment(pzInsKey, pxObjClass, {
           containerName: 'primary',
           channelName: ''
-        });
+        } as any);
       } else {
         this.pConn$.getActionsApi().openWorkByHandle(pzInsKey, pxObjClass);
       }
@@ -619,10 +630,6 @@ export class ListViewComponent implements OnInit, OnDestroy {
     }
   }
 
-  compare(a: number | string, b: number | string, isAsc: boolean) {
-    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
-  }
-
   _headerSortClick(event, columnData) {
     // images 0 - filter, 1 - arrow, 2 - more
 
@@ -655,21 +662,22 @@ export class ListViewComponent implements OnInit, OnDestroy {
     this.filterSortGroupBy();
   }
 
-  clearOutArrows(event, columnData) {
-    const arImages = event.srcElement.parentElement.getElementsByTagName('img');
-
-    for (const theImage of arImages) {
-      // let theImage = arImages[i]
-      const arrow = theImage.getAttribute('arrow');
-      if (arrow) {
-        const arrowId = theImage.getAttribute('arrowid');
-        if (arrow != 'none' && arrowId != columnData.config.name) {
-          theImage.setAttribute('arrow', 'none');
-          theImage.src = '';
-        }
-      }
-    }
-  }
+  // Commenting below method, since the code which is using it, is already commented
+  // clearOutArrows(event, columnData) {
+  //   const arImages = event.srcElement.parentElement.getElementsByTagName('img');
+
+  //   for (const theImage of arImages) {
+  //     // let theImage = arImages[i]
+  //     const arrow = theImage.getAttribute('arrow');
+  //     if (arrow) {
+  //       const arrowId = theImage.getAttribute('arrowid');
+  //       if (arrow != 'none' && arrowId != columnData.config.name) {
+  //         theImage.setAttribute('arrow', 'none');
+  //         theImage.src = '';
+  //       }
+  //     }
+  //   }
+  // }
 
   sortCompare(a, b): number {
     let aValue = a[this.compareRef];
@@ -689,18 +697,18 @@ export class ListViewComponent implements OnInit, OnDestroy {
 
     switch (this.arrowDirection) {
       case 'up':
-        if (aValue < bValue) {
+        if (!aValue || aValue < bValue) {
           return -1;
         }
-        if (aValue > bValue) {
+        if (!bValue || aValue > bValue) {
           return 1;
         }
         break;
       case 'down':
-        if (aValue > bValue) {
+        if (!bValue || aValue > bValue) {
           return -1;
         }
-        if (aValue < bValue) {
+        if (!aValue || aValue < bValue) {
           return 1;
         }
         break;

package/tests/assets/sdk-a/components/create/override-sdk/template/list-view/listViewHelpers.ts

@@ -25,7 +25,6 @@ export function useInit(props) {
   let selectionCountThreshold;
 
   // promise to fetch metadata
-  // @ts-ignore - 3rd parameter "associationFilter" should be optional for getDataViewMetadata method
   const metaDataPromise = PCore.getAnalyticsUtils().getDataViewMetadata(referenceList, showDynamicFields);
 
   const promisesArray = [metaDataPromise];

package/tests/assets/sdk-a/components/create/override-sdk/template/repeating-structures/repeating-structures.component.ts

@@ -41,8 +41,7 @@ export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.fields$ = this.initializeColumns(componentConfig.fields);
 
-    const refList = this.configProps$.referenceList;
-    // @ts-ignore - second parameter pageReference for getValue method should be optional
+    const refList: any = this.configProps$.referenceList;
     const tableDataResults = JSON.parse(JSON.stringify(this.pConn$.getValue(refList)));
 
     // update elements like date format

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table/simple-table.component.ts

@@ -87,10 +87,8 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     const { multiRecordDisplayAs } = this.configProps$;
     let { contextClass } = this.configProps$;
     if (!contextClass) {
-      // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
       let listName = this.pConn$.getComponentConfig().referenceList;
       listName = PCore.getAnnotationUtils().getPropertyName(listName);
-      // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
       contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
     }
     if (multiRecordDisplayAs === 'fieldGroup') {

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/helpers.ts

@@ -130,7 +130,7 @@ export const buildFieldsForTable = (configFields, fields, showDeleteButton) => {
       type: 'text',
       label: fields[index].config.label || fields[index].config.caption,
       fillAvailableSpace: !!field.config.fillAvailableSpace,
-      id: index,
+      id: `${index}`,
       name: field.config.value.substr(4),
       cellRenderer: TABLE_CELL,
       sort: false,

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/simple-table-manual.component.html

@@ -27,7 +27,7 @@
             </mat-menu>
           </div>
         </th>
-        <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] }}</td>
+        <td mat-cell *matCellDef="let element">{{ element[dCol.config.name] || '---' }}</td>
       </ng-container>
       <ng-container matColumnDef="DeleteIcon">
         <div *ngIf="allowEditingInModal">

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-manual/simple-table-manual.component.ts

@@ -157,6 +157,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   editView: any;
   settingsSvgIcon$: string;
 
+  isInitialized = false;
+
   constructor(
     private angularPConnect: AngularPConnectService,
     private utils: Utils,
@@ -164,6 +166,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
+    this.isInitialized = true;
     // First thing in initialization is registering and subscribing to the AngularPConnect service
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.configProps$ = this.pConn$.getConfigProps() as SimpleTableManualProps;
@@ -246,10 +249,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     let { contextClass } = this.configProps$;
     this.referenceList = referenceList;
     if (!contextClass) {
-      // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
       let listName = this.pConn$.getComponentConfig().referenceList;
       listName = PCore.getAnnotationUtils().getPropertyName(listName);
-      // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
       contextClass = this.pConn$.getFieldMetadata(listName)?.pageClass;
     }
     this.contextClass = contextClass;
@@ -300,6 +301,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  Nebula and we may not end up using it all.
     this.fieldDefs = buildFieldsForTable(rawFields, resolvedFields, showDeleteButton);
 
+    this.initializeDefaultPageInstructions();
+
     // end of from Nebula
 
     // Here, we use the "name" field in fieldDefs since that has the assoicated property
@@ -348,9 +351,25 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  ties the 3 data structures together.
   }
 
+  initializeDefaultPageInstructions() {
+    if (this.isInitialized) {
+      this.isInitialized = false;
+      if (this.allowEditingInModal) {
+        // @ts-ignore - An argument for 'uniqueField' was not provided.
+        this.pConn$.getListActions().initDefaultPageInstructions(
+          this.pConn$.getReferenceList(),
+          this.fieldDefs.filter(item => item.name).map(item => item.name)
+        );
+      } else {
+        // @ts-ignore - An argument for 'propertyNames' was not provided.
+        this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
+      }
+    }
+  }
+
   getResultsText() {
     const recordsCount = this.readOnlyMode ? this.rowData?.data.length : this.referenceList?.length;
-    return `${recordsCount} result${recordsCount > 1 ? 's' : ''}`;
+    return `${recordsCount || 0} result${recordsCount > 1 ? 's' : ''}`;
   }
 
   sortCompare(a, b): number {
@@ -369,13 +388,28 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
       }
     }
 
-    if (aValue === bValue) {
-      return 0;
+    //
+    switch (this.arrowDirection) {
+      case 'up':
+        if (!aValue || aValue < bValue) {
+          return -1;
+        }
+        if (!bValue || aValue > bValue) {
+          return 1;
+        }
+        break;
+      case 'down':
+        if (!bValue || aValue > bValue) {
+          return -1;
+        }
+        if (!aValue || aValue < bValue) {
+          return 1;
+        }
+        break;
+      default:
+        break;
     }
 
-    if (this.arrowDirection === 'up') return aValue - bValue;
-    if (this.arrowDirection === 'down') return bValue - aValue;
-
     return 0;
   }
 
@@ -889,12 +923,14 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
           this.referenceList.length,
           PCore.getConstants().RESOURCE_STATUS.CREATE
         );
-    } else if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length, this.pageReference);
     } else {
       // @ts-ignore - second parameter "pageRef" is optional for insert method
       this.pConn$.getListActions().insert({ classID: this.contextClass }, this.referenceList.length);
     }
+
+    this.pConn$.clearErrorMessages({
+      property: (this.pConn$.getStateProps() as any)?.referenceList?.substring(1)
+    } as any);
   }
 
   editRecord(data, index) {
@@ -912,12 +948,8 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
   }
 
   deleteRecord(index) {
-    if (PCore.getPCoreVersion()?.includes('8.7')) {
-      this.pConn$.getListActions().deleteEntry(index, this.pageReference);
-    } else {
-      // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
-      this.pConn$.getListActions().deleteEntry(index);
-    }
+    // @ts-ignore - second parameter "pageRef" is optional for deleteEntry method
+    this.pConn$.getListActions().deleteEntry(index);
   }
 
   buildElementsForTable() {

package/tests/assets/sdk-a/components/create/override-sdk/template/simple-table-select/simple-table-select.component.ts

@@ -85,10 +85,8 @@ export class SimpleTableSelectComponent implements OnInit, OnDestroy {
         contextPageReference = pageReference.concat('.').concat(referenceProp);
       }
       const metadata = isMultiSelectMode
-        ? // @ts-ignore - Property 'getFieldMetadata' is private and only accessible within class 'C11nEnv'
-          this.pConn$.getFieldMetadata(`@P .${referenceProp}`)
-        : // @ts-ignore - Property 'getCurrentPageFieldMetadata' is private and only accessible within class 'C11nEnv'
-          this.pConn$.getCurrentPageFieldMetadata(contextPageReference);
+        ? this.pConn$.getFieldMetadata(`@P .${referenceProp}`)
+        : this.pConn$.getCurrentPageFieldMetadata(contextPageReference);
 
       const { datasource: { parameters: fieldParameters = {} } = {}, pageClass } = metadata;
 

package/tests/assets/sdk-a/components/create/override-sdk/template/wss-nav-bar/wss-nav-bar.component.html

@@ -0,0 +1,32 @@
+<mat-toolbar style="margin-bottom: 5px; background-color: #262626">
+  <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>
+    </div>
+
+    <div *ngFor="let page of navPages$">
+      <div class="flex-box mat-list-item" style="cursor: pointer" (click)="navPanelButtonClick(page)">
+        <div mat-button class="psdk-nav-button-span">{{ page.pyLabel }}</div>
+      </div>
+    </div>
+
+    <span class="spacer"></span>
+
+    <mat-list>
+      <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
+        <div class="flex-box">
+          <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
+        </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>
+  </mat-toolbar-row>
+</mat-toolbar>

package/tests/assets/sdk-a/components/create/override-sdk/template/wss-nav-bar/wss-nav-bar.component.scss

@@ -0,0 +1,164 @@
+// // Things related to movement
+// $transition-slow: 0.5s !default;
+// $transition-medium: 0.3s !default;
+// $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);
+  width: 100%;
+  align-items: center;
+}
+
+.psdk-nav-header {
+  display: flex;
+  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;
+}
+
+.psdk-nav-svg-icon {
+  filter: var(--app-white-color-filter);
+  width: 1.6rem;
+  padding-right: 0.625rem;
+}
+
+.psdk-nav-portal-name {
+  font-size: 0.875rem;
+}
+
+.psdk-nav-portal-app {
+  font-size: 1.5rem;
+  color: var(--app-nav-color);
+}
+
+.psdk-appshell-nav {
+  z-index: 3;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 100%;
+  color: var(--app-nav-color);
+  overflow-y: auto;
+  overflow-x: hidden;
+  white-space: nowrap;
+  will-change: width;
+}
+
+.psdk-appshell-nav:hover {
+  width: var(--app-nav-width-expanded);
+}
+
+.psdk-appshell-topnav {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 15%;
+  color: var(--app-nav-color);
+  overflow: hidden;
+  white-space: nowrap;
+  will-change: width;
+}
+
+.psdk-appshell-middlenav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--app-nav-bg);
+  width: var(--app-nav-width);
+  height: 50%;
+  color: var(--app-nav-color);
+  overflow: hidden;
+  white-space: nowrap;
+  //   transition: width $transition-medium $natural-ease;
+  will-change: width;
+}
+
+.psdk-nav-ul-middle {
+  display: block;
+  list-style-type: none;
+  margin: 0rem;
+  padding-inline-start: 30px;
+}
+
+.psdk-nav-li-middle {
+  box-sizing: border-box;
+  text-align: left;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-nav-button-span {
+  padding: 0 1rem;
+  color: var(--app-nav-color);
+
+  &:hover {
+    background-color: var(--app-neutral-color);
+  }
+}
+
+.psdk-nav-oper-avatar {
+  margin: 0rem;
+  padding: 0rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  max-width: 2.5rem;
+  max-height: 2.5rem;
+  border-radius: 50%;
+  justify-content: center;
+  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-list {
+  padding: 0;
+}
+
+.psdk-profile-list-item {
+  padding-left: 24px;
+}
+
+mat-list-item {
+  padding: 20px 30px;
+  padding-right: 0;
+  cursor: pointer !important;
+  height: auto !important;
+
+  &:hover {
+    // background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .flex-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+  }
+}
+
+.spacer {
+  flex: 1 1 auto;
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/wss-nav-bar/wss-nav-bar.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WssNavBarComponent } from './wss-nav-bar.component';
+
+describe('WssNavBarComponent', () => {
+  let component: WssNavBarComponent;
+  let fixture: ComponentFixture<WssNavBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [WssNavBarComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(WssNavBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});