@pega/angular-sdk-overrides 0.24.9 → 0.25.2

package/lib/template/page/page.component.ts

@@ -14,7 +14,6 @@ interface PageProps {
   selector: 'app-page',
   templateUrl: './page.component.html',
   styleUrls: ['./page.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class PageComponent implements OnInit, OnDestroy {
@@ -34,7 +33,7 @@ export class PageComponent implements OnInit, OnDestroy {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
 
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PageProps;
-    this.arChildren$ = this.pConn$.getChildren() as any[];
+    this.arChildren$ = this.pConn$.getChildren();
 
     this.title$ = this.configProps$.title;
     const operator = this.configProps$.operator;

package/lib/template/promoted-filters/promoted-filters.component.ts

@@ -26,7 +26,6 @@ const SUPPORTED_TYPES_IN_PROMOTED_FILTERS = [
   selector: 'app-promoted-filters',
   templateUrl: './promoted-filters.component.html',
   styleUrls: ['./promoted-filters.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class PromotedFiltersComponent implements OnInit, OnDestroy {
@@ -81,7 +80,7 @@ export class PromotedFiltersComponent implements OnInit, OnDestroy {
     });
 
     const filtersWithClassID = { ...this.filtersProperties, classID: this.pageClass };
-    this.transientItemID = (this.pConn$.getContainerManager() as any).addTransientItem({ id: this.viewName, data: filtersWithClassID });
+    this.transientItemID = this.pConn$.getContainerManager().addTransientItem({ id: this.viewName, data: filtersWithClassID });
     this.processedFilters = [];
     this.filters.forEach(filter => {
       const filterClone = { ...filter };

package/lib/template/repeating-structures/repeating-structures.component.ts

@@ -18,7 +18,6 @@ interface RepeatingStructuresProps {
   selector: 'app-repeating-structures',
   templateUrl: './repeating-structures.component.html',
   styleUrls: ['./repeating-structures.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTableModule, MatSortModule, MatPaginatorModule]
 })
 export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
@@ -69,7 +68,6 @@ export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
   }
 
   rowClick(row) {
-    // eslint-disable-next-line sonarjs/no-small-switch
     switch (this.configProps$.rowClickAction) {
       case 'openAssignment':
         this.psService.sendMessage(true);
@@ -107,7 +105,7 @@ export class RepeatingStructuresComponent implements OnInit, AfterViewInit {
   openAssignment(row) {
     const { pxRefObjectClass, pzInsKey } = row;
     const sTarget = this.pConn$.getContainerName();
-    const options: any = { containerName: sTarget };
+    const options = { containerName: sTarget };
     this.pConn$
       .getActionsApi()
       .openAssignment(pzInsKey, pxRefObjectClass, options)

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

@@ -0,0 +1,80 @@
+<div *ngIf="showCaseActions" class="psdk-self-service-case-view-header">
+  <div>{{ this.heading$ }}</div>
+  <div class="psdk-case-view-buttons">
+    <button mat-raised-button color="secondary" [matMenuTriggerFor]="actionMenu">{{ localizedVal('Actions...', localeCategory) }}</button>
+    <mat-menu #actionMenu="matMenu" overlapTrigger="false">
+      <ng-container *ngFor="let action of arAvailableActions$">
+        <button mat-menu-item (click)="_menuActionClick(action)">
+          {{ localizedVal(action.name, '', localeKey) }}
+        </button>
+      </ng-container>
+      <ng-container *ngFor="let process of arAvailabeProcesses$">
+        <button mat-menu-item (click)="_menuProcessClick(process)">
+          {{ process.name }}
+        </button>
+      </ng-container>
+    </mat-menu>
+  </div>
+</div>
+<div class="psdk-case-view" id="case-view">
+  <div class="psdk-case-view-info">
+    <div *ngIf="showSummaryRegion && (primarySummaryFields.length > 0 || secondarySummaryFields.length > 0)">
+      <mat-toolbar class="psdk-case-view-toolbar">
+        <mat-toolbar-row class="psdk-case-view-toolbar-row">
+          <div class="psdk-case-view-heading">
+            <div>
+              <h1 id="case-name">{{ heading$ }}</h1>
+            </div>
+            <div id="current-caseID" [hidden]="true">{{ currentCaseID }}</div>
+            <div class="psdk-case-view-heading-id" id="caseId">{{ id$ }}</div>
+          </div>
+        </mat-toolbar-row>
+      </mat-toolbar>
+      <div class="psdk-case-view-divider"></div>
+      <div class="psdk-case-view-summary">
+        <component-mapper
+          name="CaseSummaryFields"
+          [props]="{ primaryFields$: primarySummaryFields, secondaryFields$: secondarySummaryFields }"
+        ></component-mapper>
+      </div>
+    </div>
+  </div>
+  <div class="psdk-case-view-main">
+    <div>
+      <div *ngFor="let kid of arChildren$">
+        <div
+          *ngIf="
+            kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' &&
+            kid.getPConnect().getRawMetadata().name.toLowerCase() == 'stages' &&
+            showCaseLifecycle
+          "
+        >
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+        </div>
+      </div>
+    </div>
+
+    <div *ngFor="let kid of arChildren$">
+      <div
+        *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name.toLowerCase() == 'todo'"
+      >
+        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+      </div>
+    </div>
+
+    <div *ngFor="let kid of arChildren$">
+      <div *ngIf="kid.getPConnect().getRawMetadata().type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata().name == 'Main'">
+        <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+      </div>
+    </div>
+  </div>
+  <div class="psdk-case-view-utilities">
+    <div *ngIf="arChildren$ && showUtilitiesRegion && isUtilitiesRegionNotEmpty()">
+      <div *ngFor="let kid of arChildren$">
+        <div *ngIf="kid.getPConnect().getRawMetadata()?.type.toLowerCase() == 'region' && kid.getPConnect().getRawMetadata()?.name == 'Utilities'">
+          <component-mapper name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -28,7 +28,6 @@ interface SimpleTableProps {
   selector: 'app-simple-table',
   templateUrl: './simple-table.component.html',
   styleUrls: ['./simple-table.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class SimpleTableComponent implements OnInit, OnDestroy {
@@ -80,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);
     }