@pega/angular-sdk-overrides 0.25.1 → 0.25.3

package/lib/template/self-service-case-view/self-service-case-view.component.scss

@@ -0,0 +1,124 @@
+h1 {
+  font-size: 1.1rem;
+  line-height: 1.3rem;
+}
+
+::ng-deep .mat-mdc-menu-panel {
+  overflow: unset;
+  max-width: unset;
+}
+
+.psdk-case-view-label {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(0.2em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(0.2em) scale(0.75);
+  width: 133.33333%;
+  border-radius: 0.6125rem;
+}
+
+.psdk-case-view {
+  box-sizing: border-box;
+  display: flex;
+}
+
+.ng-case-view-toolbar {
+  padding: 0.625rem 0.625rem;
+}
+
+.psdk-case-icon-div {
+  background-color: var(--mat-sys-on-primary-fixed);
+  border-radius: 1rem;
+  padding: 0.5rem 0.3rem 0.3rem 0.3rem;
+}
+.psdk-case-svg-icon {
+  width: 2rem;
+  padding: 0rem 0.3125rem;
+  filter: var(--app-white-color-filter);
+}
+
+.psdk-case-view-info-box {
+  display: flex;
+  flex-direction: row;
+  padding: 0rem 0.3125rem 0rem 0rem;
+}
+
+.psdk-case-view-info {
+  flex: 0 0 auto;
+  width: 25rem;
+  float: left;
+  // padding: 0rem 0.3125rem 0rem 0rem;
+  background-color: var(--mat-sys-surface-container);
+  height: 100%;
+}
+
+.psdk-case-view-main {
+  flex-grow: 2;
+  float: left;
+  padding: 0rem 0.3125rem;
+  height: 100%; /* Should be removed. Only for demonstration */
+}
+
+.psdk-case-view-summary {
+  padding-left: 0.75rem;
+}
+
+.psdk-case-view-heading {
+  display: block;
+  text-align: left;
+  padding-left: 0.5rem;
+  padding-bottom: 0;
+  padding-top: 5px;
+}
+.psdk-case-view-heading-id {
+  font-size: 0.9rem;
+  font-weight: normal;
+}
+
+.psdk-case-view-buttons {
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.3125rem;
+}
+
+.psdk-case-view-utilities {
+  background-color: var(--mat-sys-surface-container);
+  width: 21.875rem;
+  float: left;
+  padding: 0rem 0.3125rem;
+}
+
+.psdk-case-view-divider {
+  border-bottom: 0.0625rem solid var(--mat-sys-outline-variant);
+}
+
+.psdk-status {
+  padding: 0.3125rem 0.3125rem;
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-surface-container);
+  width: fit-content;
+  margin: 0.625rem;
+}
+
+.psdk-case-view-toolbar {
+  background-color: var(--mat-sys-primary);
+  justify-content: center;
+}
+
+button {
+  margin: 0rem 0.3125rem;
+}
+
+.psdk-case-view-toolbar-row {
+  padding-left: 1rem;
+  white-space: normal;
+  height: auto;
+}
+
+.psdk-self-service-case-view-header {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  margin: 10px;
+  background-color: var(--mat-sys-primary);
+}

package/lib/template/self-service-case-view/self-service-case-view.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { SelfServiceCaseViewComponent } from './self-service-case-view.component';
+
+describe('SelfServiceCaseViewComponent', () => {
+  let component: SelfServiceCaseViewComponent;
+  let fixture: ComponentFixture<SelfServiceCaseViewComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [SelfServiceCaseViewComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelfServiceCaseViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/lib/template/self-service-case-view/self-service-case-view.component.ts

@@ -0,0 +1,216 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatMenuModule } from '@angular/material/menu';
+import { interval } from 'rxjs';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { prepareCaseSummaryData } from '@pega/angular-sdk-components';
+
+interface SelfServiceCaseViewProps {
+  // If any, enter additional props that only exist on this component
+  icon: string;
+  subheader: string;
+  header: string;
+  showCaseLifecycle: any;
+  showSummaryRegion: any;
+  showUtilitiesRegion: any;
+  showCaseActions: any;
+  caseClass: any;
+}
+
+@Component({
+  selector: 'app-self-service-case-view',
+  templateUrl: './self-service-case-view.component.html',
+  styleUrls: ['./self-service-case-view.component.scss'],
+  providers: [Utils],
+  imports: [CommonModule, MatToolbarModule, MatButtonModule, MatMenuModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class SelfServiceCaseViewComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: SelfServiceCaseViewProps;
+
+  arChildren$: any[];
+
+  heading$ = '';
+  id$ = '';
+  status$ = '';
+
+  arAvailableActions$: any[] = [];
+  arAvailabeProcesses$: any[] = [];
+
+  caseSummaryPConn$: any;
+  currentCaseID = '';
+  editAction: boolean;
+  bHasNewAttachments = false;
+  localizedVal: any;
+  localeCategory = 'CaseView';
+  localeKey: any;
+  showCaseLifecycle: boolean;
+  showSummaryRegion: boolean;
+  showUtilitiesRegion: boolean;
+  showCaseActions: boolean;
+  utilityRegion: any;
+  primarySummaryFields: any;
+  secondarySummaryFields: any;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private utils: Utils
+  ) {}
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.checkAndUpdate();
+    this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  }
+
+  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
+    //    AND removing the "gate" that was put there since shouldComponentUpdate
+    //      should be the real "gate"
+    if (bUpdateSelf) {
+      // generally, don't want to refresh everything when data changes in caseView, it is usually the
+      // case summary.  But check if the case ID changes, this means a different case and we should
+      // update all.
+      if (this.hasCaseIDChanged()) {
+        this.fullUpdate();
+
+        // update okToInitFlowContainer, because case view was drawn, flow container will need to be init
+        // to match Nebula/Constellation
+        sessionStorage.setItem('okToInitFlowContainer', 'true');
+      } else {
+        this.updateHeaderAndSummary();
+      }
+    }
+  }
+
+  hasCaseIDChanged(): boolean {
+    if (this.currentCaseID !== this.pConn$.getDataObject().caseInfo.ID) {
+      this.currentCaseID = this.pConn$.getDataObject().caseInfo.ID;
+      return true;
+    }
+    return false;
+  }
+
+  updateHeaderAndSummary() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SelfServiceCaseViewProps;
+    const hasNewAttachments = this.pConn$.getDataObject().caseInfo?.hasNewAttachments;
+
+    if (hasNewAttachments !== this.bHasNewAttachments) {
+      this.bHasNewAttachments = hasNewAttachments;
+      if (this.bHasNewAttachments) {
+        PCore.getPubSubUtils().publish(PCore.getEvents().getCaseEvent().CASE_ATTACHMENTS_UPDATED_FROM_CASEVIEW, true);
+      }
+    }
+
+    const kids = this.pConn$.getChildren() as any[];
+    for (const kid of kids) {
+      const meta = kid.getPConnect().getRawMetadata();
+      if (meta.type.toLowerCase() == 'region' && meta.name.toLowerCase() == 'summary') {
+        this.caseSummaryPConn$ = kid.getPConnect().getChildren()[0].getPConnect();
+      }
+    }
+
+    // have to put in a timeout, otherwise get an angular change event error
+    const timer = interval(100).subscribe(() => {
+      timer.unsubscribe();
+
+      this.heading$ = PCore.getLocaleUtils().getLocaleValue(this.configProps$.header, '', this.localeKey);
+      this.id$ = this.configProps$.subheader;
+      this.status$ = this.pConn$.getValue('.pyStatusWork');
+    });
+  }
+
+  fullUpdate() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SelfServiceCaseViewProps;
+    this.localeKey = this.pConn$?.getCaseLocaleReference();
+    this.updateHeaderAndSummary();
+
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+
+    const caseInfo = this.pConn$.getDataObject().caseInfo;
+    this.currentCaseID = caseInfo.ID;
+    this.arAvailableActions$ = caseInfo?.availableActions ? caseInfo.availableActions : [];
+    this.editAction = this.arAvailableActions$.find(action => action.ID === 'pyUpdateCaseDetails');
+    this.arAvailabeProcesses$ = caseInfo?.availableProcesses ? caseInfo.availableProcesses : [];
+
+    const { showCaseLifecycle = true, showSummaryRegion = true, showUtilitiesRegion = true, showCaseActions = true, caseClass } = this.configProps$;
+    this.showCaseLifecycle = this.utils.getBooleanValue(showCaseLifecycle);
+    this.showSummaryRegion = this.utils.getBooleanValue(showSummaryRegion);
+    this.showUtilitiesRegion = this.utils.getBooleanValue(showUtilitiesRegion);
+    this.showCaseActions = this.utils.getBooleanValue(showCaseActions);
+    const isObjectType: boolean = (PCore.getCaseUtils() as any).isObjectCaseType(caseClass);
+    this.utilityRegion = isObjectType ? this.filterUtilities(this.arChildren$[2]) : this.filterUtilities(this.arChildren$[4]);
+    if (this.showSummaryRegion) {
+      const { primarySummaryFields, secondarySummaryFields } = prepareCaseSummaryData(
+        this.arChildren$[0],
+        (config: any) => config?.availableInChannel?.selfService === true
+      );
+      this.primarySummaryFields = primarySummaryFields;
+      this.secondarySummaryFields = secondarySummaryFields;
+    }
+  }
+
+  filterUtilities(utils) {
+    let utilsMeta;
+    const pConnect = utils.getPConnect();
+    utilsMeta = pConnect.getRawMetadata?.();
+    if (!utilsMeta?.children?.length) return;
+    utilsMeta = {
+      ...utilsMeta,
+      children: utilsMeta.children.filter((child: any) => child.config?.availableInChannel?.selfService === true)
+    };
+    return utilsMeta.children?.length ? pConnect.createComponent(utilsMeta) : undefined;
+  }
+
+  isUtilitiesRegionNotEmpty() {
+    if (this.utilityRegion && this.utilityRegion.getPConnect()?.getChildren()?.length > 0) {
+      return this.utilityRegion
+        .getPConnect()
+        .getChildren()
+        .some((prop: { getPConnect: () => any }) => prop.getPConnect().getConfigProps().visibility !== false);
+    }
+    return false;
+  }
+
+  updateSelf() {
+    this.fullUpdate();
+  }
+
+  _menuActionClick(data) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
+
+    openLocalAction(data.ID, { ...data, containerName: 'modal', type: 'express' });
+  }
+
+  _menuProcessClick(data) {
+    const actionsAPI = this.pConn$.getActionsApi();
+    const openProcessAction = actionsAPI.openProcessAction.bind(actionsAPI);
+
+    openProcessAction(data.ID, { ...data });
+  }
+}

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

@@ -79,7 +79,6 @@ export class SimpleTableComponent implements OnInit, OnDestroy {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as SimpleTableProps;
 
     if (this.configProps$.visibility != null) {
-      // eslint-disable-next-line no-multi-assign
       this.bVisible$ = this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
     }
 

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

@@ -238,7 +238,7 @@ export const buildFieldsForTable = (configFields, pConnect, showDeleteButton, op
 
   // get resolved field labels for primary fields raw config included in configFields
   const fieldsLabels = updateFieldLabels(fields, configFields, primaryFieldsViewIndex, pConnect, {
-    columnsRawConfig: pConnect.getRawConfigProps()?.children.find(item => item?.name === 'Columns')?.children
+    columnsRawConfig: pConnect.getRawConfigProps()?.children?.find(item => item?.name === 'Columns')?.children
   });
 
   const fieldDefs = configFields?.map((field, index) => {
@@ -404,7 +404,7 @@ export const createPConnect = (contextName, referenceList, pageReference) => {
 
   // create PConnect object
   const config = { meta: {}, options };
-  const { getPConnect } = PCore.createPConnect(config);
+  const { getPConnect } = PCore.createPConnect(config as any);
 
   return getPConnect();
 };

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

@@ -44,7 +44,7 @@
           <td mat-cell *matCellDef="let element; index as j">
             <div class="header-icon">
               <button mat-icon-button [matMenuTriggerFor]="utilityMenu">
-                <img class="psdk-utility-card-actions-svg-icon" src="{{ settingsSvgIcon$ }}" />
+                <mat-icon>more_vert</mat-icon>
               </button>
               <mat-menu #utilityMenu="matMenu" overlapTrigger="false">
                 <button mat-menu-item (click)="editRecord(element, j)">Edit</button>
@@ -58,7 +58,7 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       <tr class="mat-row psdk-no-records" *matNoDataRow>
         <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
-          {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </td>
       </tr>
     </table>
@@ -82,7 +82,7 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element; index as j">
           <button id="delete-button" mat-icon-button (click)="deleteRecord(j)">
-            <img class="psdk-utility-card-action-svg-icon" src="{{ menuIconOverride$ }}" />
+            <mat-icon>delete</mat-icon>
           </button>
         </td>
       </ng-container>
@@ -90,7 +90,7 @@
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       <tr class="mat-row psdk-no-records" *matNoDataRow>
         <td id="no-records" class="mat-cell" [attr.colspan]="displayedColumns.length">
-          {{ utils.getGenericFieldsLocalizedValue('CosmosFields.fields.lists', 'No records found.') }}
+          {{ utils.getGenericFieldsLocalizedValue('COSMOSFIELDS.lists', 'No records found.') }}
         </td>
       </tr>
     </table>

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';
 
@@ -73,8 +74,10 @@ class Group {
     MatOptionModule,
     MatSelectModule,
     MatInputModule,
+    MatIcon,
     forwardRef(() => ComponentMapperComponent)
-  ]
+  ],
+  providers: [DatapageService]
 })
 export class SimpleTableManualComponent implements OnInit, OnDestroy {
   @ViewChild(MatSort) sort: MatSort;
@@ -215,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);
     }
 
@@ -825,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);
     });
   }
@@ -916,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;
@@ -959,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,
@@ -980,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,

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;
+}