@pega/angular-sdk-overrides 0.24.1 → 0.24.3

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

@@ -56,7 +56,6 @@ export class DynamicTabsComponent implements OnInit, OnDestroy {
   updateSelf() {
     const { referenceList } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as DynamicTabsProps;
 
-    // @ts-ignore - Property 'getComponentConfig' is private and only accessible within class 'C11nEnv'
     const { tablabel } = this.pConn$.getComponentConfig();
     const tablabelProp = PCore.getAnnotationUtils().getPropertyName(tablabel);
 

package/lib/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/lib/template/list-view/list-view.component.html

@@ -150,13 +150,13 @@
             <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">

package/lib/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,
@@ -169,7 +172,7 @@ export class ListViewComponent implements OnInit, OnDestroy {
     /** If compositeKeys is defined, use dynamic value, else fallback to pyID or pyGUID. */
     this.compositeKeys = this.configProps$?.compositeKeys;
     this.rowID = this.compositeKeys && this.compositeKeys?.length === 1 ? this.compositeKeys[0] : defRowID;
-    this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$.globalSearch ? this.configProps$.globalSearch : this.payload?.globalSearch);
+    this.bShowSearch$ = this.utils.getBooleanValue(this.configProps$.globalSearch ? this.configProps$.globalSearch : this.payload.globalSearch);
     this.bColumnReorder$ = this.utils.getBooleanValue(this.configProps$.reorderFields);
     this.bGrouping$ = this.utils.getBooleanValue(this.configProps$.grouping);
     this.showDynamicFields = this.configProps$?.showDynamicFields;
@@ -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);
       }

package/lib/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/lib/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/lib/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/lib/template/simple-table-manual/simple-table-manual.component.ts

@@ -249,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;
@@ -357,12 +355,13 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
     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 'fields' was not provided
+        // @ts-ignore - An argument for 'propertyNames' was not provided.
         this.pConn$.getListActions().initDefaultPageInstructions(this.pConn$.getReferenceList());
       }
     }
@@ -370,7 +369,7 @@ export class SimpleTableManualComponent implements OnInit, OnDestroy {
 
   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 {
@@ -949,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/lib/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/lib/widget/attachment/attachment.component.html

@@ -1,39 +1,55 @@
-<div class="psdk-label-infix-readonly" *ngIf="bVisible$">
-  <span class="psdk-label-wrapper-readonly">
-    <label [ngClass]="{ 'psdk-label-readonly': true, 'label-required': bRequired$ === true }" [htmlFor]="att_valueRef">{{ label$ }}</label>
-  </span>
-  <div
-    [ngClass]="{ 'psdk-modal-file-selector': status !== 'error', 'psdk-modal-file-selector-error': status === 'error' }"
-    id="attachment-container"
-    *ngIf="bShowSelector$"
-  >
-    <mat-spinner *ngIf="bLoading$" class="progress-spinner" diameter="40"></mat-spinner>
-    <input hidden type="file" [required]="bRequired$" #uploader [id]="att_valueRef" [multiple]="allowMultiple$" (change)="uploadMyFiles($event)" />
-
-    <button mat-stroked-button color="primary" [disabled]="bDisabled$" (click)="uploader.click()">
-      {{
-        allowMultiple$
-          ? uploadMultipleFilesLabel === 'file_upload_text_multiple'
-            ? 'Choose files'
-            : uploadMultipleFilesLabel
-          : uploadSingleFileLabel === 'file_upload_text_one'
-            ? 'Choose a file'
-            : uploadSingleFileLabel
-      }}
-    </button>
+<div class="file-upload-container" *ngIf="bVisible$">
+  <span class="attachment-label" [ngClass]="{ 'file-label': bRequired$ }">{{ label$ }}</span>
+  <div *ngIf="(files.length === 0 && !allowMultiple$) || allowMultiple$">
+    <div
+      style="margin-bottom: 10px"
+      id="attachment-container"
+      [ngClass]="validateMessage ? 'psdk-modal-file-selector-error' : 'psdk-modal-file-selector'"
+    >
+      <div [hidden]="true" id="attachment-ID">
+        {{ valueRef }}
+      </div>
+      <input hidden type="file" [required]="bRequired$" #uploader [id]="valueRef" [multiple]="allowMultiple$" (change)="onFileAdded($event)" />
+      <button mat-stroked-button color="primary" [disabled]="bDisabled$" (click)="uploader.click()">
+        {{
+          allowMultiple$
+            ? uploadMultipleFilesLabel === 'file_upload_text_multiple'
+              ? 'Choose files'
+              : uploadMultipleFilesLabel
+            : uploadSingleFileLabel === 'file_upload_text_one'
+              ? 'Choose a file'
+              : uploadSingleFileLabel
+        }}
+      </button>
+    </div>
   </div>
   <span *ngIf="validateMessage" class="file-error">{{ validateMessage }}</span>
-
-  <div class="psdk-attachment-list" *ngIf="arFileList$ != null && arFileList$.length > 0">
-    <div *ngFor="let attachment of arFileList$">
-      <component-mapper
-        *ngIf="attachment.noDeleteIcon !== true; else showfull"
-        name="SummaryItem"
-        [props]="{ item$: attachment, menuIconOverride$: 'trash', menuIconOverrideAction$: removeFileFromList$ }"
-      ></component-mapper>
-      <ng-template #showfull>
-        <component-mapper name="SummaryItem" [props]="{ item$: attachment, menuIconOverrideAction$: removeFileFromList$ }"></component-mapper>
-      </ng-template>
+  <div *ngIf="files && files.length > 0">
+    <div *ngFor="let file of files">
+      <div class="psdk-attachment-card">
+        <div className="psdk-utility-card-icon">
+          <img *ngIf="!file.inProgress" class="psdk-attachment-card-svg-icon" src="{{ srcImg }}" />
+          <mat-spinner *ngIf="file.inProgress" class="progress-spinner" diameter="40"></mat-spinner>
+        </div>
+        <div class="psdk-attachment-card-main">
+          <div class="psdk-attachment-card-main-primary-label">{{ file.props.name }}</div>
+          <div *ngIf="file.props.meta" [ngStyle]="{ color: file.props.error ? 'red' : null }">{{ file.props.meta }}</div>
+        </div>
+        <div class="psdk-attachment-action">
+          <button id="delete-attachment" *ngIf="file.ID" class="psdk-utility-button" (click)="deleteFile(file)">
+            <img class="psdk-utility-card-action-svg-icon" src="{{ deleteIcon }}" />
+          </button>
+          <div *ngIf="!file.ID">
+            <button id="setting-button" mat-icon-button [matMenuTriggerFor]="actionMenu">
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #actionMenu="matMenu">
+              <button mat-menu-item (click)="downloadFile(file.responseProps ? file.responseProps : {})">Download</button>
+              <button mat-menu-item (click)="deleteFile(file)">Delete</button>
+            </mat-menu>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>

package/lib/widget/attachment/attachment.component.scss

@@ -53,3 +53,121 @@
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
+.psdk-modal-file-selector {
+  border: 1px dashed var(--app-neutral-dark-color);
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.label-required::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}
+
+.file-error {
+  color: var(--app-error-light-color);
+}
+
+.psdk-modal-file-selector-error {
+  border: 1px dashed var(--app-error-light-color);
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.psdk-full-width {
+  width: 100%;
+}
+
+.psdk-label-readonly {
+  opacity: 54%;
+  font-size: 0.8rem;
+  font-weight: 400;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+.psdk-attachment-list {
+  border: 1px solid var(--app-neutral-color);
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}
+
+.psdk-attachment-card {
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid rgb(207, 207, 207);
+  border-radius: calc(0.25rem);
+  padding: 0.25rem 0rem 0.25rem 0.25rem;
+  min-height: 3rem;
+  margin-bottom: 0.5rem;
+}
+
+.psdk-attachment-card-main-primary-label {
+  font-weight: 500;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: normal;
+}
+
+.psdk-attachment-card-main {
+  flex-grow: 2;
+  margin-left: 5px;
+}
+
+.psdk-attachment-action {
+  flex-grow: 1;
+  text-align: right;
+}
+
+.psdk-attachment-card-svg-icon {
+  width: 2.5rem;
+}
+
+.psdk-utility-button {
+  background: none;
+  border: none;
+  margin-right: 0.5rem;
+  cursor: pointer;
+}
+
+.psdk-utility-card-action-svg-icon {
+  width: 1.4rem;
+  display: inline-block;
+}
+
+.file-div {
+  border: 1px dashed var(--app-neutral-dark-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.file-div-error {
+  border: 1px dashed var(--app-error-light-color);
+  width: 100%;
+  padding: 0.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.attachment-label {
+  display: block;
+  margin-bottom: 10px;
+}
+
+.file-label::after {
+  display: inline;
+  content: ' *';
+  vertical-align: top;
+  color: var(--app-neutral-dark-color);
+}