@pega/angular-sdk-overrides 0.23.1

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

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

package/lib/infra/region/region.component.ts

@@ -0,0 +1,37 @@
+import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-region',
+  templateUrl: './region.component.html',
+  styleUrls: ['./region.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class RegionComponent implements OnInit, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  arChildren$: any[];
+
+  ngOnInit() {
+    // console.log(`ngOnInit (no registerAndSubscribe!): Region`);
+    this.updateSelf();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { pConn$ } = changes;
+
+    if (pConn$.previousValue && pConn$.previousValue !== pConn$.currentValue) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    // The children may contain 'reference' components, so normalize the children...
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+  }
+}

package/lib/infra/root-container/root-container.component.html

@@ -0,0 +1,36 @@
+<div class="progress-box" *ngIf="bIsProgress$">
+  <mat-spinner class="progress-spinner"></mat-spinner>
+</div>
+
+<div *ngIf="bShowRoot$">
+  <div [ngSwitch]="componentName$">
+    <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$, displayOnlyFA$ }"></component-mapper>
+    <!-- <app-reference *ngSwitchCase="'reference'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-reference> -->
+    <component-mapper
+      *ngSwitchCase="'ViewContainer'"
+      name="ViewContainer"
+      [props]="{ pConn$: displayOnlyFA$ ? viewContainerPConn$ : pConn$, displayOnlyFA$ }"
+    ></component-mapper>
+    <app-hybrid-view-container *ngSwitchCase="'HybridViewContainer'" [pConn$]="pConn$" [displayOnlyFA$]="displayOnlyFA$"></app-hybrid-view-container>
+    <app-modal-view-container
+      *ngSwitchCase="'ModalViewContainer'"
+      [pConn$]="pConn$"
+      [displayOnlyFA$]="displayOnlyFA$"
+      (modalVisibleChange)="modalVisibleChanged($event)"
+    ></app-modal-view-container>
+    <div *ngSwitchCase="''"></div>
+    <div *ngSwitchDefault>{{ localizedVal('RootContainer Missing: ' + componentName$, localeCategory) }}.</div>
+  </div>
+</div>
+
+<div *ngIf="pvConn$ != null">
+  <app-preview-view-container [pConn$]="pvConn$"></app-preview-view-container>
+</div>
+
+<div *ngIf="mConn$ != null">
+  <app-modal-view-container
+    [pConn$]="mConn$"
+    [displayOnlyFA$]="displayOnlyFA$"
+    (modalVisibleChange)="modalVisibleChanged($event)"
+  ></app-modal-view-container>
+</div>

package/lib/infra/root-container/root-container.component.scss

@@ -0,0 +1,20 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.progress-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  background-color: whitesmoke;
+  position: fixed;
+  z-index: 99999;
+  top: 0rem;
+  left: 0rem;
+  opacity: 0.5;
+}
+
+.progress-spinner {
+  text-align: center;
+}

package/lib/infra/root-container/root-container.component.spec.ts

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

package/lib/infra/root-container/root-container.component.ts

@@ -0,0 +1,256 @@
+import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { interval, Subscription } from 'rxjs';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { PreviewViewContainerComponent } from '@pega/angular-sdk-components';
+import { ModalViewContainerComponent } from '@pega/angular-sdk-components';
+import { HybridViewContainerComponent } 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.
+ */
+
+const options = { context: 'app' };
+
+@Component({
+  selector: 'app-root-container',
+  templateUrl: './root-container.component.html',
+  styleUrls: ['./root-container.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatProgressSpinnerModule,
+    HybridViewContainerComponent,
+    ModalViewContainerComponent,
+    PreviewViewContainerComponent,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class RootContainerComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() displayOnlyFA$: boolean;
+  @Input() isMashup$: boolean;
+
+  // For interaction with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  componentName$ = '';
+  bIsProgress$ = false;
+
+  // preview and modalview pConn
+  pvConn$: any = null;
+  mConn$: any = null;
+
+  bShowRoot$ = true;
+
+  progressSpinnerSubscription: Subscription;
+  spinnerTimer: any = null;
+  viewContainerPConn$: any = null;
+  localizedVal: any;
+  localeCategory = 'Messages';
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private psService: ProgressSpinnerService,
+    private ngZone: NgZone
+  ) {}
+
+  ngOnInit(): void {
+    const myContext = 'app';
+
+    const { containers } = PCore.getStore().getState();
+    const items = Object.keys(containers).filter(item => item.includes('root'));
+
+    (PCore.getContainerUtils().getContainerAPI() as any).addContainerItems(items);
+
+    // add preview and modalview containers to redux
+    // keep local copies of the the pConnect that is related
+
+    const configObjPreview = PCore.createPConnect({
+      meta: {
+        type: 'PreviewViewContainer',
+        config: {
+          name: 'preview'
+        }
+      },
+      options
+    });
+
+    this.pvConn$ = configObjPreview.getPConnect();
+
+    const configObjModal = PCore.createPConnect({
+      meta: {
+        type: 'ModalViewContainer',
+        config: {
+          name: 'modal'
+        }
+      },
+      options: {
+        pageReference: 'pyPortal',
+        context: myContext
+      }
+    });
+
+    // clear out hasViewContainer
+    sessionStorage.setItem('hasViewContainer', 'false');
+
+    this.mConn$ = configObjModal.getPConnect();
+
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    // handle showing and hiding the progress spinner
+    this.progressSpinnerSubscription = this.psService.getMessage().subscribe(message => {
+      this.showHideProgress(message.show);
+    });
+    this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    // Should always check the bridge to see if the component should update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  modalVisibleChanged(isVisible) {
+    if (this.displayOnlyFA$) {
+      if (isVisible) {
+        this.bShowRoot$ = false;
+      } else {
+        this.bShowRoot$ = true;
+      }
+    }
+  }
+
+  updateSelf() {
+    // need to call this.getCurrentCompleteProps (not this.thePConn.getConfigProps)
+    //  to get full set of props that affect this component in Redux
+    const myProps: any = this.angularPConnect.getCurrentCompleteProps(this);
+
+    const renderingModes = ['portal', 'view'];
+    const noPortalMode = 'noPortal';
+
+    const { renderingMode, children, skeleton, routingInfo } = myProps;
+
+    if (routingInfo && renderingModes.includes(renderingMode)) {
+      const { accessedOrder, items } = routingInfo;
+      if (accessedOrder && items) {
+        // bootstrap loadPortal resolves to here
+        const key = accessedOrder[accessedOrder.length - 1];
+        if (items[key] && items[key].view && Object.keys(items[key].view).length > 0) {
+          const itemView = items[key].view;
+
+          const rootObject: any = PCore.createPConnect({
+            meta: itemView,
+            options: {
+              context: items[key].context
+            }
+          });
+
+          setTimeout(() => {
+            // makes sure Angular tracks these changes
+            this.ngZone.run(() => {
+              // the new rootObject may be a 'reference'. So,
+              //  normalize it to get the referencedView if that's the case
+              const theNewPConn = ReferenceComponent.normalizePConn(rootObject.getPConnect());
+              // update ComponentName$ before we update pConn$ to make sure they're in sync
+              //  when rendering...
+              this.componentName$ = theNewPConn.getComponentName();
+
+              this.pConn$ = theNewPConn;
+              // this.pConn$ = rootObject.getPConnect();
+
+              console.log(`RootContainer updated pConn$ to be: ${this.componentName$}`);
+            });
+          });
+        }
+      }
+    } else if (renderingMode === noPortalMode) {
+      // console.log(`RootContainer: renderingMode === noPortalMode: ${noPortalMode}`);
+      this.generateViewContainerForNoPortal();
+    } else if (children && children.length > 0) {
+      // haven't resolved to here
+    } else if (skeleton !== undefined) {
+      // TODO: need to update once skeletons are available;
+    }
+  }
+
+  generateViewContainerForNoPortal() {
+    // bootstrap loadMashup resolves to here
+    const arChildren = this.pConn$.getChildren() as any[];
+    if (arChildren && arChildren.length == 1) {
+      // have to have a quick timeout or get an "expressions changed" angular error
+      setTimeout(() => {
+        this.ngZone.run(() => {
+          const localPConn = arChildren[0].getPConnect();
+
+          this.componentName$ = localPConn.getComponentName();
+          if (this.componentName$ === 'ViewContainer') {
+            const configProps: any = this.pConn$.getConfigProps();
+            const viewContConfig = {
+              meta: {
+                type: 'ViewContainer',
+                config: configProps
+              },
+              options
+            };
+
+            this.viewContainerPConn$ = PCore.createPConnect(viewContConfig).getPConnect();
+          }
+          this.bShowRoot$ = true;
+        });
+      });
+    }
+  }
+
+  showHideProgress(bShow: boolean) {
+    // only show spinner after 500ms wait, so if server fast, won't see
+    if (bShow) {
+      // eslint-disable-next-line sonarjs/no-collapsible-if
+      if (!this.bIsProgress$) {
+        // makes sure Angular tracks these changes
+        if (!this.spinnerTimer || this.spinnerTimer.isStopped) {
+          this.spinnerTimer = interval(500).subscribe(() => {
+            try {
+              this.spinnerTimer.unsubscribe();
+            } catch (ex) {
+              /* empty */
+            }
+
+            this.ngZone.run(() => {
+              this.bIsProgress$ = true;
+            });
+          });
+        }
+      }
+    } else {
+      if (this.spinnerTimer && !this.spinnerTimer.isStopped) {
+        this.spinnerTimer.unsubscribe();
+      }
+
+      // don't touch bIsProgress$ unless differnent
+      if (bShow != this.bIsProgress$) {
+        // makes sure Angular tracks these changes
+        this.ngZone.run(() => {
+          this.bIsProgress$ = bShow;
+        });
+      }
+    }
+  }
+}

package/lib/infra/stages/stages.component.html

@@ -0,0 +1,15 @@
+<div class="psdk-stages-bar">
+  <div class="psdk-stages-chevron" *ngFor="let stage of arStageResults$">
+    <div *ngIf="stage.visited_status == 'completed'" class="psdk-stages-inner-past">
+      <img class="psdk-stages-icon" src="{{ checkSvgIcon$ }}" />{{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+    </div>
+    <div *ngIf="stage.visited_status == 'active'" class="psdk-stages-inner-present">
+      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+    </div>
+    <div *ngIf="stage.visited_status == 'future'" class="psdk-stages-inner-future">
+      {{ PCore$.getLocaleUtils().getLocaleValue(stage.name, '', key) }}
+    </div>
+  </div>
+</div>
+
+<div class="psdk-stages-divider"></div>

package/lib/infra/stages/stages.component.scss

@@ -0,0 +1,109 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-stages {
+  padding: 0.625rem 0rem;
+}
+
+.psdk-stages-span span {
+  padding: 0.3125rem;
+  font-weight: bold;
+  font-size: 1.5rem;
+}
+
+.psdk-stages-div {
+  display: inline-flex;
+  padding: 0.3125rem;
+  font-weight: bold;
+  font-size: 1.3rem;
+  color: $app-neutral-color;
+}
+
+.psdk-stages-past {
+  color: $app-primary-color;
+  padding-right: 0.3125rem;
+}
+
+.psdk-stages-present {
+  color: $app-secondary-color;
+  padding-right: 0.3125rem;
+}
+
+.psdk-stages-future {
+  color: $app-neutral-color;
+  padding-right: 0.3125rem;
+}
+
+.psdk-stages-full {
+  display: block;
+}
+
+.psdk-stages-divider {
+  border-bottom: 0.0625rem solid $app-neutral-light-color;
+}
+
+.psdk-stages-full {
+  display: block;
+}
+
+.psdk-stages-divider {
+  border-bottom: 0.0625rem solid $app-neutral-light-color;
+}
+
+.psdk-stages-icon {
+  width: 1.4rem;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.psdk-stages-bar {
+  margin: 1rem 0rem;
+  background-color: rgb(255, 255, 255);
+  border-radius: 0.5rem;
+  border: 0.0625rem solid $app-neutral-light-color;
+  overflow: hidden;
+  height: 2rem;
+  display: flex;
+}
+
+.psdk-stages-chevron {
+  position: relative;
+  padding: calc(1rem);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  min-width: 0px;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.psdk-stages-chevron:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  display: block;
+  z-index: 2;
+  width: calc(1.75rem);
+  right: calc(-0.4375rem);
+  background: inherit;
+  border-style: solid;
+  border-color: rgb(207, 207, 207);
+  border-width: 0.0625rem 0.0625rem 0px 0px;
+  border-radius: 0px calc(0.3125rem) 0px 0px;
+  transform: rotateZ(45deg) skew(15deg, 15deg);
+  height: 2rem;
+}
+
+.psdk-stages-inner-past {
+  color: black;
+  font-size: 1rem;
+}
+
+.psdk-stages-inner-present {
+  color: $app-primary-color;
+  font-weight: bold;
+  font-size: 1rem;
+}
+.psdk-stages-inner-future {
+  color: $app-neutral-color;
+  font-size: 1rem;
+}

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

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

package/lib/infra/stages/stages.component.ts

@@ -0,0 +1,83 @@
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { interval } from 'rxjs';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+
+interface StagesProps {
+  // If any, enter additional props that only exist on this component
+  stages: any[];
+}
+
+@Component({
+  selector: 'app-stages',
+  templateUrl: './stages.component.html',
+  styleUrls: ['./stages.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
+})
+export class StagesComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  PCore$: typeof PCore = PCore;
+  configProps$: StagesProps;
+
+  arStageResults$: any[];
+  lastStage$: any;
+  checkSvgIcon$: string;
+  key: string;
+
+  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);
+
+    // const imagePath = this.utils.getIconPath(this.utils.getSDKStaticContentUrl());
+    this.checkSvgIcon$ = this.utils.getImageSrc('check', this.utils.getSDKStaticContentUrl());
+    this.key = `${this.pConn$.getCaseInfo().getClassName()}!CASE!${this.pConn$.getCaseInfo().getName()}`.toUpperCase();
+  }
+
+  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 StagesProps;
+
+    const timer = interval(50).subscribe(() => {
+      timer.unsubscribe();
+
+      const arStages = this.angularPConnect.getComponentProp(this, 'stages');
+
+      // this.stageResults$ = this.configProps$.stages;
+      if (arStages != null) {
+        this.arStageResults$ = arStages;
+        this.lastStage$ = this.arStageResults$[this.arStageResults$.length - 1];
+      }
+    });
+  }
+}

package/lib/infra/view/view.component.html

@@ -0,0 +1,38 @@
+<div *ngIf="visibility$ !== false" class="ng-view-top">
+  <div *ngIf="showLabel$ && label$ && templateName$ !== 'SimpleTable' && templateName$ !== 'DefaultForm'" class="template-title-container">
+    <span>{{ label$ }}</span>
+  </div>
+
+  <ng-container *ngIf="templateName$; else noTemplate">
+    <div>
+      <component-mapper
+        [name]="templateName$"
+        [props]="{ formGroup$, pConn$, displayOnlyFA$ }"
+        errorMsg="View template not recognized: [{{ templateName$ }}]"
+      ></component-mapper>
+    </div>
+  </ng-container>
+
+  <ng-template #noTemplate>
+    <div *ngIf="displayOnlyFA$; else displayAll">
+      <div *ngFor="let kid of arChildren$">
+        <div [ngSwitch]="kid.getPConnect().getComponentName()">
+          <component-mapper
+            [name]="kid.getPConnect().getComponentName()"
+            [props]="{ pConn$: kid.getPConnect() }"
+            errorMsg="View Missing (displayOnlyFA): {{ kid.getPConnect().getComponentName() }}"
+          ></component-mapper>
+        </div>
+      </div>
+    </div>
+    <ng-template #displayAll>
+      <div *ngFor="let kid of arChildren$">
+        <component-mapper
+          [name]="kid.getPConnect().getComponentName()"
+          [props]="{ pConn$: kid.getPConnect() }"
+          errorMsg="View Missing (displayAll): {{ kid.getPConnect().getComponentName() }}"
+        ></component-mapper>
+      </div>
+    </ng-template>
+  </ng-template>
+</div>

package/lib/infra/view/view.component.scss

@@ -0,0 +1,16 @@
+h3 {
+  margin-left: 0.8rem;
+}
+
+.ng-view-top {
+  padding: 0;
+}
+
+.template-title-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: calc(0.9375rem);
+  font-weight: 600;
+  padding: 1rem 0;
+}