@pega/angular-sdk-overrides 0.23.5 → 0.23.7

package/lib/field/auto-complete/auto-complete.component.ts

@@ -118,7 +118,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy {
 
   private _filter(value: string): string[] {
     const filterVal = (value || this.filterValue).toLowerCase();
-    return this.options$?.filter(option => option.value.toLowerCase().includes(filterVal));
+    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
   }
 
   // Callback passed when subscribing to store change

package/lib/field/group/group.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngIf="visibility$">
+<ng-container *ngIf="visibility$ && arChildren$.length">
   <component-mapper
     name="FieldGroup"
     [props]="{

package/lib/field/group/group.component.ts

@@ -69,6 +69,10 @@ export class GroupComponent implements OnInit {
     this.instructions$ = this.configProps$.instructions;
     this.collapsible$ = this.configProps$.collapsible;
 
+    if (this.configProps$.visibility === undefined) {
+      this.visibility$ = this.pConn$.getComputedVisibility();
+    }
+
     if (this.configProps$.displayMode === 'LABELS_LEFT') {
       if (this.configProps$.visibility === undefined) this.visibility$ = true;
 

package/lib/field/rich-text/rich-text.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$, isHtml$: true }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$; else noEdit">

package/lib/field/time/time.component.html

@@ -12,6 +12,7 @@
           type="time"
           [value]="value$"
           [required]="bRequired$"
+          [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"

package/lib/field/time/time.component.ts

@@ -36,6 +36,7 @@ export class TimeComponent implements OnInit, OnDestroy {
   bVisible$ = true;
   displayMode$?: string = '';
   controlName$: string;
+  testId = '';
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
@@ -100,6 +101,7 @@ export class TimeComponent implements OnInit, OnDestroy {
     // moved this from ngOnInit() and call this from there instead...
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as TimeProps;
 
+    this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
 

package/lib/field/url/url.component.html

@@ -12,6 +12,7 @@
           type="url"
           [value]="value$"
           [required]="bRequired$"
+          [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"

package/lib/field/url/url.component.ts

@@ -36,6 +36,7 @@ export class UrlComponent implements OnInit, OnDestroy {
   bVisible$ = true;
   displayMode$?: string = '';
   controlName$: string;
+  testId = '';
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
@@ -106,6 +107,7 @@ export class UrlComponent implements OnInit, OnDestroy {
       this.value$ = this.configProps$.value;
     }
 
+    this.testId = this.configProps$.testId;
     this.label$ = this.configProps$.label;
     this.displayMode$ = this.configProps$.displayMode;
     this.helperText = this.configProps$.helperText;

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

@@ -163,6 +163,7 @@ mat-horizontal-stepper {
 .psdk-horizontal-stepper-header-container {
   white-space: nowrap;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   text-align: left;
 }

package/lib/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/lib/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/lib/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>
@@ -163,7 +163,7 @@
               <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/lib/template/list-view/list-view.component.ts

@@ -619,10 +619,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 +651,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 +686,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/lib/template/list-view/utils.ts

@@ -680,10 +680,12 @@ export const readContextResponse = async (context, params) => {
     const dataViewName = PCore.getDataTypeUtils().getSavableDataPage(classID);
     const dataPageKeys = PCore.getDataTypeUtils().getDataPageKeys(dataViewName);
     dataPageKeys?.forEach(item => (item.isAlternateKeyStorage ? compositeKeys.push(item.linkedField) : compositeKeys.push(item.keyName)));
-    if (compositeKeys.length) {
+    if (compositeKeys.length && otherContext) {
       otherContext.setCompositeKeys(compositeKeys);
     }
-    otherContext.fetchRowActionDetails = null;
+    if (otherContext) {
+      otherContext.fetchRowActionDetails = null;
+    }
   }
 
   const presetArray = [];

package/lib/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/lib/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/lib/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;
@@ -300,6 +303,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,6 +353,21 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     //  ties the 3 data structures together.
   }
 
+  initializeDefaultPageInstructions() {
+    if (this.isInitialized) {
+      this.isInitialized = false;
+      if (this.allowEditingInModal) {
+        this.pConn$.getListActions().initDefaultPageInstructions(
+          this.pConn$.getReferenceList(),
+          this.fieldDefs.filter(item => item.name).map(item => item.name)
+        );
+      } else {
+        // @ts-ignore - An argument for 'fields' 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' : ''}`;
@@ -369,13 +389,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 +924,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/angular-sdk-overrides",
-  "version": "0.23.5",
+  "version": "0.23.7",
   "description": "Angular SDK - Code for overriding components",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"