@pega/angular-sdk-overrides 0.23.1

package/lib/infra/Containers/view-container/view-container.component.html

@@ -0,0 +1,31 @@
+<div class="psdk-view-container-top" id="{{ buildName$ }}">
+  <div *ngIf="isViewContainer$; else isReference">
+    <h3 *ngIf="title$ !== ''">{{ title$ }}</h3>
+    <div *ngIf="templateName$; else showChildren">
+      <component-mapper
+        [name]="templateName$"
+        [props]="{
+          pConn$: createdViewPConn$,
+          formGroup$: formGroup$,
+          displayOnlyFA$: displayOnlyFA$
+        }"
+        errorMsg="View Container missing Template {{ templateName$ }}"
+      ></component-mapper>
+    </div>
+    <ng-template #showChildren>
+      <div *ngFor="let kid of arChildren$">
+        <component-mapper
+          [name]="kid.getPConnect().getComponentName()"
+          [props]="{
+            pConn$: kid.getPConnect(),
+            displayOnlyFA$: displayOnlyFA$
+          }"
+          errorMsg="ViewContainer Missing (no template): {{ kid.getPConnect().getComponentName() }}"
+        ></component-mapper>
+      </div>
+    </ng-template>
+  </div>
+  <ng-template #isReference>
+    <component-mapper name="View" [props]="{ pConn$: viewPConn$, displayOnlyFA$ }"></component-mapper>
+  </ng-template>
+</div>

package/lib/infra/Containers/view-container/view-container.component.scss

@@ -0,0 +1,7 @@
+h3 {
+  margin-left: 0.8rem;
+}
+
+.psdk-view-container-top {
+  padding: 0;
+}

package/lib/infra/Containers/view-container/view-container.component.spec.ts

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

package/lib/infra/Containers/view-container/view-container.component.ts

@@ -0,0 +1,289 @@
+import { Component, OnInit, Input, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ProgressSpinnerService } 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.
+ */
+
+interface ViewContainerProps {
+  // If any, enter additional props that only exist on this component
+  mode?: string;
+  name?: string;
+  limit?: number;
+  template?: string;
+  title?: string;
+  routingInfo: object;
+  readOnly?: boolean;
+}
+
+@Component({
+  selector: 'app-view-container',
+  templateUrl: './view-container.component.html',
+  styleUrls: ['./view-container.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ViewContainerComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() displayOnlyFA$: boolean;
+
+  // For interaction with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: ViewContainerProps;
+
+  arChildren$: any[];
+  templateName$: string;
+  buildName$: string;
+  context$: string;
+  title$ = '';
+
+  viewPConn$: any;
+
+  isViewContainer$ = true;
+
+  // JA - created object is now a View with a Template
+  //  Use its PConnect to render the CaseView; DON'T replace this.pConn$
+  createdViewPConn$: any;
+  state: any;
+  dispatchObject: any;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private psService: ProgressSpinnerService,
+    private ngZone: NgZone
+  ) {}
+
+  ngOnInit() {
+    if (this.displayOnlyFA$ == null) {
+      this.displayOnlyFA$ = false;
+    }
+
+    // debugger;
+
+    // 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$.getConfigProps();
+    // children may have a 'reference' so normalize the children array
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+
+    this.buildName$ = this.buildName();
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ViewContainerProps;
+    this.templateName$ = this.configProps$.template || '';
+    this.title$ = this.configProps$.title || '';
+    const { CONTAINER_TYPE, APP } = PCore.getConstants();
+    const { name, mode, limit } = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as ViewContainerProps;
+
+    this.pConn$.isBoundToState();
+
+    const containerMgr: any = this.pConn$.getContainerManager();
+
+    this.prepareDispatchObject = this.prepareDispatchObject.bind(this);
+
+    this.dispatchObject = this.prepareDispatchObject();
+
+    // TODO: Plan is to rename window.constellationCore to window.pega (or similar)
+    //    And expose less via ui-bootstrap.js
+    this.state = {
+      dispatchObject: this.dispatchObject,
+      // PCore is defined in pxBootstrapShell - eventually will be exported in place of constellationCore
+
+      visible: !PCore.checkIfSemanticURL()
+    };
+
+    // here, to match Nebula/Constellation, the constructor of ViewContainer is only called once, and thus init/add container is only
+    // called once.  Because of Angular creating and destroy components if the parent changes a lot, this component will be
+    // created and destroyed more than once.  So the sessionStore "hasViewContainer" is set to false in rootContainer and then
+    // after first round is true here.  Subsequent ViewContainer creation will not init/add more containers.
+
+    if (sessionStorage.getItem('hasViewContainer') == 'false') {
+      // unlike Nebula/Constellation, have to initializeContainer after we create a dispatcObject and state, otherwise, when calling
+      // initializeContainer before, code will get executed that needs state that wasn't defined.
+
+      containerMgr.initializeContainers({
+        type: mode === CONTAINER_TYPE.MULTIPLE ? CONTAINER_TYPE.MULTIPLE : CONTAINER_TYPE.SINGLE
+      });
+
+      if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
+        /* NOTE: setContainerLimit use is temporary. It is a non-public, unsupported API. */
+        PCore.getContainerUtils().setContainerLimit(`${APP.APP}/${name}`, limit);
+      }
+    }
+
+    if (sessionStorage.getItem('hasViewContainer') == 'false') {
+      // @ts-ignore - Property 'getMetadata' is private and only accessible within class
+      if (this.pConn$.getMetadata().children) {
+        containerMgr.addContainerItem(this.dispatchObject);
+      }
+
+      sessionStorage.setItem('hasViewContainer', 'true');
+    }
+
+    // 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() {
+    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() {
+    //   *** DON'T call updateSelf in ngInit!!  ***
+
+    if (this.arChildren$ == null) {
+      // children may have a 'reference' so normalize the children array
+      this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    }
+
+    // routingInfo was added as component prop in populateAdditionalProps
+    const routingInfo = this.angularPConnect.getComponentProp(this, 'routingInfo');
+
+    let loadingInfo;
+    try {
+      // @ts-ignore - Property 'getLoadingStatus' is private and only accessible within class 'C11nEnv'
+      loadingInfo = this.pConn$.getLoadingStatus();
+
+      this.psService.sendMessage(loadingInfo);
+    } catch (ex) {
+      /* empty */
+    }
+
+    // const buildName = this.buildName();
+    const { CREATE_DETAILS_VIEW_NAME } = PCore.getConstants();
+    if (routingInfo) {
+      const { accessedOrder, items } = routingInfo;
+      if (accessedOrder && items) {
+        const key = accessedOrder[accessedOrder.length - 1];
+        let componentVisible = accessedOrder.length > 0;
+        const { visible } = this.state;
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        componentVisible = visible || componentVisible;
+        if (items[key] && items[key].view && Object.keys(items[key].view).length > 0) {
+          const latestItem = items[key];
+          const rootView = latestItem.view;
+          const { context, name: viewName } = rootView.config;
+          const config: any = { meta: rootView };
+          config.options = {
+            context: latestItem.context,
+            pageReference: context || this.pConn$.getPageReference(),
+            containerName: this.pConn$.getContainerName(),
+            containerItemName: key,
+            hasForm: viewName === CREATE_DETAILS_VIEW_NAME
+          };
+          const configObject = PCore.createPConnect(config);
+
+          // THIS is where the ViewContainer creates a View
+          //    The config has meta.config.type = "view"
+          const newComp = configObject.getPConnect();
+          // const newCompName = newComp.getComponentName();
+          // The metadata for pyDetails changed such that the "template": "CaseView"
+          //  is no longer a child of the created View but is in the created View's
+          //  config. So, we DON'T want to replace this.pConn$ since the created
+          //  component is a View (and not a ViewContainer). We now look for the
+          //  "template" type directly in the created component (newComp) and NOT
+          //  as a child of the newly created component.
+
+          // Use the newly created component (View) info but DO NOT replace
+          //  this ViewContainer's pConn$, etc.
+          //  Note that we're now using the newly created View's PConnect in the
+          //  ViewContainer HTML template to guide what's rendered similar to what
+          //  the Nebula/Constellation return of React.Fragment does
+
+          this.ngZone.run(() => {
+            if (newComp.getComponentName() === 'reference') {
+              // if a refernece, it will de reference to a "view"
+              // so hand this off to the "View" component to do that
+              this.isViewContainer$ = false;
+              this.viewPConn$ = newComp;
+
+              /*
+               ***  this commmented out code should be removed, once we test out that
+               ***  handing off refernce to View component always works
+               */
+
+              // When newComp is a reference, we want to de-reference
+              //  it (to get the View) and then use that View to get the
+              //  template, title, children, etc.
+
+              /*
+
+              const theDereferencedView = ReferenceComponent.normalizePConn(newComp);
+              const newConfigProps = theDereferencedView.getConfigProps();
+
+              // children may have a 'reference' so normalize the children arra
+
+              const theDereferencedViewChildren = ReferenceComponent.normalizePConnArray(theDereferencedView.getChildren());
+              this.templateName$ = ('template' in newConfigProps) ? newConfigProps["template"] : "";
+              this.title$ = ('title' in newConfigProps) ? newConfigProps["title"] : "";
+              this.arChildren$ = theDereferencedViewChildren;
+              this.createdViewPConn$ = theDereferencedView;
+              */
+            } else {
+              // old style when newComp is NOT a 'reference'
+              this.isViewContainer$ = true;
+
+              console.error(`ViewContainer has a newComp that is NOT a reference!`);
+
+              this.createdViewPConn$ = newComp;
+              const newConfigProps: any = newComp.getConfigProps();
+              this.templateName$ = newConfigProps.template || '';
+              this.title$ = newConfigProps.title || '';
+              // update children with new view's children
+              // children may have a 'reference' so normalize the children array
+              this.arChildren$ = ReferenceComponent.normalizePConnArray(newComp.getChildren());
+            }
+          });
+        }
+      }
+    }
+  }
+
+  prepareDispatchObject(): any {
+    const baseContext = this.pConn$.getContextName();
+    // const { acName = "primary" } = pConn.getContainerName(); // doesn't work with 8.23 typings
+    const acName = this.pConn$.getContainerName() || 'primary';
+
+    return {
+      semanticURL: '',
+      context: baseContext,
+      acName
+    };
+  }
+
+  buildName(): string {
+    const sContext = this.pConn$.getContextName();
+    const sName = this.pConn$.getContainerName();
+
+    return `${sContext.toUpperCase()}/${sName.toUpperCase()}`;
+  }
+}

package/lib/infra/action-buttons/action-buttons.component.html

@@ -0,0 +1,12 @@
+<mat-grid-list cols="2" rowHeight="6.25rem">
+  <mat-grid-tile>
+    <button *ngFor="let aButton of arSecondaryButtons$" mat-raised-button color="secondary" (click)="buttonClick(aButton.jsAction, 'secondary')">
+      {{ localizedVal(aButton.name, localeCategory) }}
+    </button>
+  </mat-grid-tile>
+  <mat-grid-tile>
+    <button *ngFor="let aButton of arMainButtons$" mat-raised-button color="primary" (click)="buttonClick(aButton.jsAction, 'primary')">
+      {{ localizedVal(aButton.name, localeCategory) }}
+    </button>
+  </mat-grid-tile>
+</mat-grid-list>

package/lib/infra/action-buttons/action-buttons.component.scss

@@ -0,0 +1 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';

package/lib/infra/action-buttons/action-buttons.component.spec.ts

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

package/lib/infra/action-buttons/action-buttons.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatGridListModule } from '@angular/material/grid-list';
+
+@Component({
+  selector: 'app-action-buttons',
+  templateUrl: './action-buttons.component.html',
+  styleUrls: ['./action-buttons.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatGridListModule, MatButtonModule]
+})
+export class ActionButtonsComponent {
+  @Input() arMainButtons$: any[];
+  @Input() arSecondaryButtons$: any[];
+
+  @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
+
+  localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'Assignment';
+
+  buttonClick(sAction, sButtonType) {
+    this.actionButtonClick.emit({ action: sAction, buttonType: sButtonType });
+  }
+}

package/lib/infra/assignment/assignment.component.html

@@ -0,0 +1,28 @@
+<div>
+  <div><component-mapper name="AlertBanner" [props]="{ banners }" [parent]="this"></component-mapper></div>
+  <div *ngIf="bHasNavigation$" class="psdk-stepper">
+    <component-mapper
+      name="MultiStep"
+      [props]="{
+        pConn$: newPConn$,
+        formGroup$,
+        arChildren$,
+        arMainButtons$,
+        arSecondaryButtons$,
+        bIsVertical$,
+        arCurrentStepIndicies$,
+        arNavigationSteps$
+      }"
+      [parent]="this"
+      [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+    ></component-mapper>
+  </div>
+  <div *ngIf="!bHasNavigation$">
+    <component-mapper
+      name="AssignmentCard"
+      [props]="{ pConn$: newPConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$, updateToken$ }"
+      [parent]="this"
+      [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+    ></component-mapper>
+  </div>
+</div>

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

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