@pega/angular-sdk-overrides 0.23.1

package/lib/infra/view/view.component.spec.ts

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

package/lib/infra/view/view.component.ts

@@ -0,0 +1,214 @@
+import { Component, OnInit, Input, forwardRef, SimpleChanges, OnDestroy, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+import { getAllFields } from '@pega/angular-sdk-components';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+/**
+ * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+ * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+ * is totally at your own risk.
+ */
+
+/**
+ *
+ * @param pConnn - PConnect Object
+ * @returns visibility expression result if exists, otherwise true
+ */
+function evaluateVisibility(pConnn) {
+  let bVisibility = true;
+  const sVisibility = pConnn.meta.config.visibility;
+  if (sVisibility && sVisibility.length) {
+    // e.g. "@E .EmbeddedData_SelectedTestName == 'Readonly' && .EmbeddedData_SelectedSubCategory == 'Mode'"
+    const aVisibility = sVisibility.split('&&');
+    // e.g. ["EmbeddedData_SelectedTestName": "Readonly", "EmbeddedData_SelectedSubCategory": "Mode"]
+    const context = pConnn.getContextName();
+    // Reading values from the Store to evaluate the visibility expressions
+    const storeData = PCore.getStore().getState()?.data[context].caseInfo.content;
+
+    const initialVal = {};
+    const oProperties = aVisibility.reduce((properties, property) => {
+      const keyStartIndex = property.indexOf('.');
+      const keyEndIndex = property.indexOf('=') - 1;
+      const valueStartIndex = property.indexOf("'");
+      const valueEndIndex = property.lastIndexOf("'") - 1;
+      return {
+        ...properties,
+        [property.substr(keyStartIndex + 1, keyEndIndex - keyStartIndex - 1)]: property.substr(valueStartIndex + 1, valueEndIndex - valueStartIndex)
+      };
+    }, initialVal);
+
+    const propertyKeys = Object.keys(oProperties);
+    const propertyValues = Object.values(oProperties);
+
+    for (let propertyIndex = 0; propertyIndex < propertyKeys.length; propertyIndex++) {
+      if (storeData[propertyKeys[propertyIndex]] !== propertyValues[propertyIndex]) {
+        bVisibility = false;
+      }
+    }
+  }
+  return bVisibility;
+}
+
+interface ViewProps {
+  // If any, enter additional props that only exist on this component
+  template?: string;
+  label?: string;
+  showLabel: boolean;
+  title?: string;
+  visibility?: boolean;
+}
+
+@Component({
+  selector: 'app-view',
+  templateUrl: './view.component.html',
+  styleUrls: ['./view.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ViewComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() displayOnlyFA$: boolean;
+  // @Input() updateToken$: number;
+
+  angularPConnectData: AngularPConnectData = {};
+
+  configProps$: ViewProps;
+  inheritedProps$: any;
+  arChildren$: any[];
+  templateName$: string;
+  title$ = '';
+  label$ = '';
+  showLabel$ = true;
+  visibility$ = true;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private utils: Utils
+  ) {}
+
+  ngOnInit() {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.checkAndUpdate();
+  }
+
+  // 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
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.checkAndUpdate();
+    }
+  }
+
+  updateSelf() {
+    if (this.angularPConnect.getComponentID(this) === undefined) {
+      return;
+    }
+
+    // debugger;
+
+    // normalize this.pConn$ in case it contains a 'reference'
+    this.pConn$ = ReferenceComponent.normalizePConn(this.pConn$);
+
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ViewProps;
+    this.inheritedProps$ = this.pConn$.getInheritedProps();
+
+    // NOTE: this.configProps$.visibility'] is used in view.component.ts such that
+    //  the View will only be rendered when this.configProps$.visibility'] is false.
+    //  It WILL render if true or undefined.
+
+    this.templateName$ = this.configProps$.template || '';
+    this.title$ = this.configProps$.title || '';
+    this.label$ = this.configProps$.label || '';
+    this.showLabel$ = this.configProps$.showLabel || this.showLabel$;
+    // label & showLabel within inheritedProps takes precedence over configProps
+    this.label$ = this.inheritedProps$.label || this.label$;
+    this.showLabel$ = this.inheritedProps$.showLabel || this.showLabel$;
+    // children may have a 'reference' so normalize the children array
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+
+    this.visibility$ = this.configProps$.visibility ?? this.visibility$;
+
+    /**
+     * In instances where there is context, like with "shippingAddress," the pageReference becomes "caseInfo.content.shippingAddress."
+     * This leads to problems in the getProperty API, as it incorrectly assesses the visibility condition by looking in the wrong location
+     * in the Store for the property values. Reference component should be able to handle such scenarios(as done in SDK-R) since it has the
+     * expected pageReference values, the View component currently cannot handle this.
+     * The resolution lies in transferring this responsibility to the Reference component, eliminating the need for this code when Reference
+     * component is able to handle it.
+     */
+    if (this.pConn$.getPageReference().length > 'caseInfo.content'.length) {
+      this.visibility$ = evaluateVisibility(this.pConn$);
+    }
+
+    // was:  this.arChildren$ = this.pConn$.getChildren() as Array<any>;
+
+    // debug
+    // let  kidList: string = "";
+    // for (let i in this.arChildren$) {
+    //   kidList = kidList.concat(this.arChildren$[i].getPConnect().getComponentName()).concat(",");
+    // }
+    // console.log("-->view update: " + this.angularPConnect.getComponentID(this) + ", template: " + this.templateName$ + ", kids: " + kidList);
+  }
+
+  // JA - adapting additionalProps from Nebula/Constellation version which uses static methods
+  //    on the component classes stored in PComponents (that Angular doesn't have)...
+  additionalProps(state: any, getPConnect: any) {
+    let propObj = {};
+
+    // We already have the template name in this.templateName$
+    if (this.templateName$ !== '') {
+      let allFields = {};
+
+      // These uses are adapted from Nebula/Constellation CaseSummary.additionalProps
+      switch (this.templateName$) {
+        case 'CaseSummary':
+          allFields = getAllFields(getPConnect);
+          // eslint-disable-next-line no-case-declarations
+          const unresFields = {
+            primaryFields: allFields[0],
+            secondaryFields: allFields[1]
+          };
+          propObj = getPConnect.resolveConfigProps(unresFields);
+          break;
+
+        case 'Details':
+          allFields = getAllFields(getPConnect);
+          propObj = { fields: allFields[0] };
+          break;
+        default:
+          break;
+      }
+    }
+
+    return propObj;
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+}

package/lib/template/app-shell/app-shell.component.html

@@ -0,0 +1,15 @@
+<div class="appshell-top">
+  <div *ngIf="bShowAppShell$ && portalTemplate !== 'wss'">
+    <component-mapper name="NavBar" [props]="{ pConn$, appName$, pages$, caseTypes$ }"></component-mapper>
+  </div>
+  <div *ngIf="bShowAppShell$ && portalTemplate === 'wss'">
+    <component-mapper name="WssNavBar" [props]="{ pConn$, appName$, homePage: pages$[0], pages$: links, caseTypes$ }"></component-mapper>
+  </div>
+  <div [ngClass]="{ 'appshell-main': portalTemplate !== 'wss', 'appshell-main-wss': portalTemplate === 'wss' }">
+    <div *ngFor="let kid of arChildren$">
+      <div *ngIf="kid.getPConnect().getComponentName() == 'ViewContainer'">
+        <component-mapper name="ViewContainer" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      </div>
+    </div>
+  </div>
+</div>

package/lib/template/app-shell/app-shell.component.scss

@@ -0,0 +1,51 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.appshell-top {
+  background-color: $app-background-color;
+}
+
+.appshell-top-wss {
+  background-color: $app-background-color;
+}
+
+.appshell-main {
+  position: relative;
+  margin-left: $app-nav-width;
+  min-height: 100vh;
+  display: block;
+}
+
+.appshell-main-wss {
+  position: relative;
+  min-height: 100vh;
+  display: block;
+  width: 100%;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.progress-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: whitesmoke;
+  position: fixed;
+  z-index: 999;
+  top: 0rem;
+  left: 0rem;
+  opacity: 0.5;
+}
+
+.progress-spinner {
+  text-align: center;
+}
+
+::ng-deep snack-bar-container.snackbar-newline {
+  white-space: pre-line;
+}

package/lib/template/app-shell/app-shell.component.spec.ts

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

package/lib/template/app-shell/app-shell.component.ts

@@ -0,0 +1,192 @@
+import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatSnackBarModule, MatSnackBar } from '@angular/material/snack-bar';
+import { Subscription } from 'rxjs';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ErrorMessagesService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface IPage {
+  classID: string;
+  pxPageViewIcon: string;
+  pyClassName: string;
+  pyLabel: string;
+  pyRuleName: string;
+  pyURLContent: string;
+}
+
+interface AppShellProps {
+  // If any, enter additional props that only exist on this component
+  pages: IPage[];
+  caseTypes?: object[];
+  portalLogo: string;
+  portalName: string;
+  portalTemplate: string;
+  readOnly?: boolean;
+  showAppHeaderBar: boolean;
+  showAppName: boolean;
+}
+
+@Component({
+  selector: 'app-app-shell',
+  templateUrl: './app-shell.component.html',
+  styleUrls: ['./app-shell.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatSnackBarModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class AppShellComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+
+  // For interaction with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: AppShellProps;
+
+  pages$: IPage[];
+  caseTypes$?: object[];
+  arChildren$: any[];
+  bShowAppShell$ = false;
+  appName$ = 'PEGA';
+  errorMessagesSubscription: Subscription;
+  sErrorMessages = '';
+  snackBarRef: any;
+  bOkDisplayError = false;
+  portalTemplate: string;
+  links: any = [];
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private erService: ErrorMessagesService,
+    private snackBar: MatSnackBar,
+    private ngZone: NgZone
+  ) {}
+
+  ngOnInit() {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    // Then, continue on with other initialization
+
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as AppShellProps;
+
+    // making a copy, so can add info
+    this.pages$ = this.configProps$.pages;
+
+    this.links = this.pages$.filter((page, index) => {
+      return index !== 0;
+    });
+
+    if (this.pages$) {
+      this.bShowAppShell$ = true;
+    }
+    this.caseTypes$ = this.configProps$.caseTypes;
+
+    this.arChildren$ = this.pConn$.getChildren() as any[];
+
+    this.portalTemplate = this.configProps$.portalTemplate;
+
+    // handle showing and hiding the progress spinner
+    this.errorMessagesSubscription = this.erService.getMessage().subscribe(message => {
+      this.showDismissErrorMessages(message);
+    });
+
+    // cannot call checkAndUpdate becasue first time through, will call updateSelf and that is incorrect (causes issues).
+    // however, need angularPConnect to be initialized with currentProps for future updates, so calling shouldComponentUpdate directly
+    // without checking to update here in init, will initialize and this is correct
+    this.angularPConnect.shouldComponentUpdate(this);
+  }
+
+  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
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as AppShellProps;
+
+    this.ngZone.run(() => {
+      // making a copy, so can add info
+      this.pages$ = this.configProps$.pages;
+
+      if (this.pages$) {
+        this.bShowAppShell$ = true;
+      }
+
+      this.caseTypes$ = this.configProps$.caseTypes;
+      this.arChildren$ = this.pConn$.getChildren() as any[];
+    });
+  }
+
+  // fpr show/hiding error messages in the SnackBar component
+  showDismissErrorMessages(errorMessages: any) {
+    switch (errorMessages.action) {
+      case 'update':
+        // won't show unless publish is turned on
+        // eslint-disable-next-line @typescript-eslint/prefer-includes
+        if (this.sErrorMessages.indexOf(errorMessages.actionMessage) < 0) {
+          this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
+
+          if (this.bOkDisplayError) {
+            const config = { panelClass: ['snackbar-newline'] };
+            this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
+          }
+        }
+        break;
+      case 'show':
+        // add error message if not in the list
+        // won't show unless publish is turned on
+        // eslint-disable-next-line @typescript-eslint/prefer-includes
+        if (this.sErrorMessages.indexOf(errorMessages.actionMessage) < 0) {
+          this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
+        }
+
+        this.bOkDisplayError = true;
+
+        if (this.bOkDisplayError) {
+          const config = { panelClass: ['snackbar-newline'] };
+          this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
+        }
+        // this.snackBarRef.afterDismissed().subscribe( info => {
+        //     this.sErrorMessages = "";
+        //   }
+        // )
+        break;
+      case 'dismiss':
+        // closes snack bar
+        // turns publish off
+        // clears out errors
+        // should be called to dimiss and at "cancel"
+        if (this.snackBarRef != null) {
+          this.snackBarRef.dismiss();
+          this.sErrorMessages = '';
+          this.bOkDisplayError = false;
+        }
+        break;
+      case 'publish':
+        // allows errors to be shown, clears out existing ones
+        // should be turned on at "submit" (finishAssignment, nextAssignment, etc.)
+
+        this.bOkDisplayError = true;
+        this.sErrorMessages = '';
+        break;
+      default:
+        break;
+    }
+  }
+}

package/lib/template/banner-page/banner-page.component.html

@@ -0,0 +1,12 @@
+<component-mapper
+  name="Banner"
+  [props]="{
+    configProps$,
+    arChildren$,
+    title,
+    message,
+    backgroundImage,
+    layout$,
+    divClass$
+  }"
+></component-mapper>

package/lib/template/banner-page/banner-page.component.spec.ts

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

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

@@ -0,0 +1,65 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges, forwardRef } from '@angular/core';
+
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { CommonModule } from '@angular/common';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+interface BannerPageProps {
+  // If any, enter additional props that only exist on this component
+  layout?: string;
+  title?: string;
+  message?: string;
+  backgroundImage?: string;
+}
+
+@Component({
+  selector: 'app-banner-page',
+  templateUrl: './banner-page.component.html',
+  styleUrls: ['./banner-page.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class BannerPageComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: any;
+
+  configProps$: BannerPageProps;
+  arChildren$: any[];
+  title?: string;
+  message: any;
+  backgroundImage?: string;
+  layout$?: string;
+  divClass$: string;
+
+  constructor() {
+    this.backgroundImage = this.configProps$?.backgroundImage;
+  }
+
+  ngOnInit() {
+    // console.log(`ngOnInit (no registerAndSubscribe!): Region`);
+    this.backgroundImage = this.configProps$?.backgroundImage;
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+    this.backgroundImage = this.configProps$?.backgroundImage;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as BannerPageProps;
+    console.log(`url(${this.backgroundImage})`);
+
+    this.layout$ = this.configProps$.layout;
+    this.title = this.configProps$.title;
+    this.message = this.configProps$.message;
+    this.backgroundImage = this.configProps$.backgroundImage;
+
+    // The children may contain 'reference' components, so normalize the children...
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+  }
+}

package/lib/template/case-summary/case-summary.component.html

@@ -0,0 +1 @@
+<component-mapper name="CaseSummaryFields" [props]="{ status$, bShowStatus$, primaryFields$, secondaryFields$ }"></component-mapper>

package/lib/template/case-summary/case-summary.component.scss

@@ -0,0 +1,44 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-case-summary-info-box {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.psdk-case-summary-data {
+  flex: 1;
+}
+
+.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%;
+}
+
+.psdk-label-readonly {
+  font-size: 1rem;
+  display: block;
+  transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
+  -ms-transform: translateY(-1.28125em) scale(0.75);
+  width: 133.33333%;
+}
+
+.psdk-data-readonly {
+  padding-top: 0.625rem;
+  width: 100%;
+}
+
+.psdk-status {
+  background-color: $app-primary-color;
+  color: white;
+  padding: 0;
+  margin-top: 0.625rem;
+  width: fit-content;
+}
+
+::ng-deep .mat-mdc-form-field-infix {
+  width: auto;
+}