@pega/angular-sdk-overrides 0.23.1

package/lib/infra/multi-step/multi-step.component.spec.ts

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

package/lib/infra/multi-step/multi-step.component.ts

@@ -0,0 +1,85 @@
+import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { Utils } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-multi-step',
+  templateUrl: './multi-step.component.html',
+  styleUrls: ['./multi-step.component.scss'],
+  providers: [Utils],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class MultiStepComponent implements OnInit {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() arMainButtons$: any[];
+  @Input() arSecondaryButtons$: any[];
+  @Input() arChildren$: any[];
+  @Input() bIsVertical$: boolean;
+  @Input() arCurrentStepIndicies$: number[];
+  @Input() arNavigationSteps$: any[];
+  @Output() actionButtonClick: EventEmitter<any> = new EventEmitter();
+
+  svgCurrent$: string;
+  svgNotCurrent$: string;
+  bShow$ = true;
+
+  constructor(private utils: Utils) {}
+
+  ngOnInit(): void {
+    // svg icons
+    this.svgCurrent$ = this.utils.getImageSrc('circle-solid', this.utils.getSDKStaticContentUrl());
+    this.svgNotCurrent$ = this.utils.getImageSrc('circle-solid', this.utils.getSDKStaticContentUrl());
+  }
+
+  onActionButtonClick(oData: any) {
+    this.actionButtonClick.emit(oData);
+  }
+
+  _getVIconClass(status): string {
+    if (status == 'current') {
+      return 'psdk-vertical-step-icon-selected';
+    }
+
+    return 'psdk-vertical-step-icon';
+  }
+
+  _getVLabelClass(status): string {
+    if (status == 'current') {
+      return 'psdk-vertical-step-label-selected';
+    }
+
+    return 'psdk-vertical-step-label';
+  }
+
+  _getVBodyClass(index: number): string {
+    if (index < this.arNavigationSteps$.length - 1) {
+      return 'psdk-vertical-step-body psdk-vertical-step-line';
+    }
+
+    return 'psdk-vertical-step-body';
+  }
+
+  _getHIconClass(status): string {
+    if (status == 'current') {
+      return 'psdk-horizontal-step-icon-selected';
+    }
+
+    return 'psdk-horizontal-step-icon';
+  }
+
+  _getHLabelClass(status): string {
+    if (status == 'current') {
+      return 'psdk-horizontal-step-label-selected';
+    }
+
+    return 'psdk-horizontal-step-label';
+  }
+
+  _showHLine(index: number): boolean {
+    return index < this.arNavigationSteps$.length - 1;
+  }
+}

package/lib/infra/navbar/navbar.component.html

@@ -0,0 +1,55 @@
+<div class="psdk-appshell-nav">
+  <div class="psdk-nav-header">
+    <div>
+      <img src="{{ portalLogoImage$ }}" class="psdk-nav-logo" />
+    </div>
+    <div class="psdk-nav-portal-info">
+      <div class="psdk-nav-portal-app">{{ portalApp$ }}</div>
+    </div>
+  </div>
+  <div class="psdk-nav-divider"></div>
+  <div>
+    <mat-list>
+      <mat-list-item id="create-case-button" (click)="navPanelCreateButtonClick()">
+        <div class="flex-box">
+          <img class="psdk-nav-svg-icon" src="{{ navExpandCollapse$ }}" />
+          <span class="psdk-nav-button-span">Create</span>
+        </div>
+      </mat-list-item>
+      <mat-list *ngIf="bShowCaseTypes$" style="margin-left: 40px">
+        <mat-list-item
+          id="case-list-item"
+          *ngFor="let caseType of caseTypes$"
+          (click)="navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)"
+        >
+          <span class="psdk-nav-button-span">{{ caseType.pyLabel }}</span>
+        </mat-list-item>
+      </mat-list>
+    </mat-list>
+  </div>
+  <div style="height: 100%">
+    <mat-list *ngFor="let page of navPages$">
+      <mat-list-item (click)="navPanelButtonClick(page)">
+        <div class="flex-box">
+          <img class="psdk-nav-svg-icon" src="{{ page.iconName }}" />
+          <span class="psdk-nav-button-span">{{ localizedVal(page.pyLabel, localeCategory) }}</span>
+        </div>
+      </mat-list-item>
+    </mat-list>
+  </div>
+  <div class="psdk-nav-divider"></div>
+  <div>
+    <mat-list>
+      <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
+        <div class="flex-box">
+          <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
+          <span class="psdk-nav-button-span">{{ portalOperator$ }}</span>
+        </div>
+      </mat-list-item>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item>Profile</button>
+        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Logoff', localeCategory) }}</button>
+      </mat-menu>
+    </mat-list>
+  </div>
+</div>

package/lib/infra/navbar/navbar.component.scss

@@ -0,0 +1,154 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+// Things related to movement
+$transition-slow: 0.5s !default;
+$transition-medium: 0.3s !default;
+$transition-fast: 0.1s !default;
+$natural-ease: cubic-bezier(0.4, 0.6, 0.1, 1) !default;
+
+.psdk-nav-divider {
+  border-bottom: 0.0625rem solid invert($app-nav-bg, 15%);
+  width: 100%;
+  align-items: center;
+}
+
+.psdk-nav-header {
+  display: flex;
+  padding-top: 0.625rem;
+}
+
+.psdk-nav-logo {
+  width: 3.75rem;
+  padding: 0.625rem;
+  margin-right: 1.25rem;
+}
+
+// background color white
+.psdk-nav-svg-icon {
+  filter: $app-white-color-filter;
+  width: 1.6rem;
+  padding-right: 0.625rem;
+}
+
+.psdk-nav-portal-name {
+  font-size: 0.875rem;
+}
+
+.psdk-nav-portal-app {
+  font-size: 1.25rem;
+}
+
+.psdk-appshell-nav {
+  z-index: 199;
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: $app-nav-bg;
+  width: $app-nav-width;
+  height: 100%;
+  color: invert($app-nav-bg, 100%);
+  overflow-y: auto;
+  overflow-x: hidden;
+  white-space: nowrap;
+  transition: width $transition-medium $natural-ease;
+  will-change: width;
+}
+
+.psdk-appshell-nav:hover {
+  width: $app-nav-width-expanded;
+}
+
+.psdk-appshell-topnav {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: $app-nav-bg;
+  width: $app-nav-width;
+  height: 15%;
+  color: invert($app-nav-bg, 100%);
+  overflow: hidden;
+  white-space: nowrap;
+  transition: width $transition-medium $natural-ease;
+  will-change: width;
+}
+
+.psdk-appshell-middlenav {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: $app-nav-bg;
+  width: $app-nav-width;
+  height: 50%;
+  color: invert($app-nav-bg, 100%);
+  overflow: hidden;
+  white-space: nowrap;
+  transition: width $transition-medium $natural-ease;
+  will-change: width;
+}
+
+.psdk-nav-ul-middle {
+  display: block;
+  list-style-type: none;
+  margin: 0rem;
+  padding-inline-start: 30px;
+}
+
+.psdk-nav-li-middle {
+  box-sizing: border-box;
+  text-align: left;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-nav-button-span {
+  padding: 0 1rem;
+  color: invert($app-nav-bg, 100%);
+}
+
+.psdk-nav-oper-avatar {
+  margin: 0rem;
+  padding: 0rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  max-width: 2.5rem;
+  max-height: 2.5rem;
+  border-radius: 50%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: inline-flex;
+  background: $app-neutral-color;
+  color: white;
+  font-weight: normal;
+  font-size: 1rem;
+}
+
+mat-list {
+  padding: 0;
+}
+
+.psdk-profile-list-item {
+  padding-left: 24px;
+}
+
+mat-list-item {
+  padding: 20px 30px;
+  padding-right: 0;
+  cursor: pointer !important;
+  height: auto !important;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  .flex-box {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    text-align: left;
+  }
+}

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

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

package/lib/infra/navbar/navbar.component.ts

@@ -0,0 +1,175 @@
+import { Component, OnInit, Input, ChangeDetectorRef, NgZone, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatListModule } from '@angular/material/list';
+import { logout } from '@pega/auth/lib/sdk-auth-manager';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { Utils } from '@pega/angular-sdk-components';
+
+declare const window: any;
+
+interface NavBarProps {
+  // If any, enter additional props that only exist on this component
+  showAppName?: boolean;
+}
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss'],
+  providers: [Utils],
+  standalone: true,
+  imports: [CommonModule, MatListModule, MatMenuModule]
+})
+export class NavbarComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() appName$: string;
+  @Input() pages$: any[];
+  @Input() caseTypes$: any[];
+
+  // For interaction with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: NavBarProps;
+
+  navPages$: any[];
+  navExpandCollapse$: string;
+  bShowCaseTypes$ = false;
+
+  portalApp$ = '';
+  portalLogoImage$: string;
+  showAppName$?: boolean = false;
+
+  portalOperator$: string;
+  portalOperatorInitials$: string;
+
+  actionsAPI: any;
+  createWork: any;
+  showPage: any;
+  logout: any;
+
+  navIcon$: string;
+  localizedVal: any;
+  localeCategory = 'AppShell';
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private chRef: ChangeDetectorRef,
+    private psService: ProgressSpinnerService,
+    private ngZone: NgZone,
+    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.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+
+    // this is a dummy "get", because right now images are in http and the main screen is https
+    // so the images don't load automatically.  This call, makes an initial hit that allows the
+    // rest of the images to show up
+    this.loadImage(this.navIcon$);
+
+    this.initComponent();
+    this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  }
+
+  // ngOnDestroy
+  //  unsubscribe from Store
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  loadImage(src: string) {
+    return new Promise(resolve => {
+      resolve(src);
+    });
+  }
+
+  // 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);
+
+    // NOTE: can call angularPConnect.getState with optional args for detailed logging: bLogMsg and component object
+    this.angularPConnect.getState();
+
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf(): void {
+    this.initComponent();
+  }
+
+  initComponent() {
+    this.ngZone.run(() => {
+      this.navIcon$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+
+      // Then, continue on with other initialization
+
+      // making a copy, so can add info
+      this.navPages$ = JSON.parse(JSON.stringify(this.pages$));
+
+      this.navPages$.forEach(page => {
+        page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
+      });
+
+      this.actionsAPI = this.pConn$.getActionsApi();
+      this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
+      this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
+      this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as NavBarProps;
+      this.logout = this.actionsAPI.logout.bind(this.actionsAPI);
+
+      // const oData = this.pConn$.getDataObject();
+
+      this.portalLogoImage$ = this.utils.getSDKStaticContentUrl().concat('assets/pzpega-logo-mark.svg');
+      this.portalOperator$ = PCore.getEnvironmentInfo().getOperatorName();
+      this.portalOperatorInitials$ = this.utils.getInitials(this.portalOperator$);
+      this.showAppName$ = this.configProps$.showAppName;
+
+      this.portalApp$ = PCore.getEnvironmentInfo().getApplicationLabel();
+    });
+  }
+
+  navPanelButtonClick(oPageData: any) {
+    const { pyClassName, pyRuleName } = oPageData;
+
+    this.showPage(pyRuleName, pyClassName);
+  }
+
+  navPanelCreateButtonClick() {
+    if (this.navExpandCollapse$.indexOf('plus') > 0) {
+      this.navExpandCollapse$ = this.utils.getImageSrc('times', this.utils.getSDKStaticContentUrl());
+      this.bShowCaseTypes$ = true;
+    } else {
+      this.navExpandCollapse$ = this.utils.getImageSrc('plus', this.utils.getSDKStaticContentUrl());
+      this.bShowCaseTypes$ = false;
+    }
+
+    this.chRef.detectChanges();
+  }
+
+  navPanelCreateCaseType(sCaseType: string, sFlowType: string) {
+    this.psService.sendMessage(true);
+    this.navPanelCreateButtonClick();
+
+    const actionInfo = {
+      containerName: 'primary',
+      flowType: sFlowType || 'pyStartCase'
+    };
+    this.createWork(sCaseType, actionInfo);
+  }
+
+  navPanelLogoutClick() {
+    logout().then(() => {
+      // Reload the page to kick off the login
+      window.location.reload();
+    });
+  }
+}

package/lib/infra/reference/reference.component.html

@@ -0,0 +1 @@
+<!-- Reference component is all static methods so .html not used -->

package/lib/infra/reference/reference.component.ts

@@ -0,0 +1,165 @@
+import { Component } from '@angular/core';
+
+/**
+ * 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.
+ */
+
+@Component({
+  selector: 'app-reference',
+  templateUrl: './reference.component.html',
+  styleUrls: ['./reference.component.scss'],
+  standalone: true
+})
+export class ReferenceComponent {
+  referencedComponent: any = null;
+
+  /* Used to toggle some class-wide logging */
+  private static bLogging = false;
+
+  constructor() {
+    // With new static method approach, this shouldn't be called any more
+    window.alert(`in ReferenceComponent constructor!`);
+
+    console.error(`in ReferenceComponent constructor!`);
+  }
+
+  // onStateChange and updateSelf methods removed from original implementation
+  //  when we moved to the static method implementation.
+
+  // STATIC method to create a normalized PConn (a fully realized View that the 'reference'
+  //  component refers to) from the given pConn. Has to add in some stuff as in the constructor
+  static createFullReferencedViewFromRef(inPConn: any) {
+    // BAIL and ERROR if inPConn is NOT a reference!
+    if (inPConn.getComponentName() !== 'reference') {
+      // debugger;
+
+      console.error(`Reference component: createFullReferencedViewFromRef inPConn is NOT a reference! ${inPConn.getComponentName()}`);
+    }
+
+    const theResolvedConfigProps = inPConn.resolveConfigProps(inPConn.getConfigProps());
+
+    const referenceConfig = { ...inPConn.getComponentConfig() } || {};
+
+    // Since SDK-A implements Reference as static methods and we don't rely on
+    //  the Reference component's handling of the visibility prop, we leave it in
+    //  (and also leaving the others in for now) so the referenced View can act on
+    //  the visibility prop. (The following 3 lines were carried over from React SDK)
+    delete referenceConfig?.name;
+    // delete referenceConfig?.type;
+    // delete referenceConfig?.visibility;
+
+    const viewMetadata = inPConn.getReferencedView();
+
+    if (!viewMetadata) {
+      console.log('View not found ', inPConn.getComponentConfig());
+      return null;
+    }
+
+    // If we get here, we have metadata for a View component...
+    // const referencedComponentName = viewMetadata.type;
+
+    const viewObject = {
+      ...viewMetadata,
+      config: {
+        ...viewMetadata.config,
+        ...referenceConfig
+      }
+    };
+
+    if (ReferenceComponent.bLogging) {
+      console.log(`Reference: about to call createComponent with pageReference: context: ${theResolvedConfigProps.context}`);
+    }
+
+    const viewComponent = inPConn.createComponent(viewObject, null, null, {
+      pageReference: theResolvedConfigProps.context
+    });
+
+    // updating the referencedComponent should trigger a render
+    const newCompPConnect = viewComponent.getPConnect();
+
+    newCompPConnect.setInheritedConfig({
+      ...referenceConfig,
+      readOnly: theResolvedConfigProps.readOnly ? theResolvedConfigProps.readOnly : false,
+      displayMode: theResolvedConfigProps.displayMode ? theResolvedConfigProps.displayMode : null
+    });
+
+    if (ReferenceComponent.bLogging) {
+      console.log(
+        `Angular Reference component: createFullReferencedViewFromRef -> newCompPConnect configProps: ${JSON.stringify(
+          newCompPConnect.getConfigProps()
+        )}`
+      );
+    }
+
+    return newCompPConnect;
+  }
+
+  // STATIC method that other components can call to normalize
+  //  a pConn object that might be a 'reference'. If the incoming
+  //  pConn is a reference, return its dereferenced View PConnect's
+  //  getPConnect. Otherwise, return the passed in pConn unchanged
+  //  inPConn = a PConn object (ex: { getPConnect()} )
+  static normalizePConn(inPConn: any) {
+    // debugger;
+
+    let returnObj = false;
+    let thePConnType = '';
+
+    if (inPConn.getPConnect) {
+      // inPConn is an object (ex: { getPConnect()} ), so we want to return
+      //  any referenced view as the object containing the
+      //  the getPConnect function
+      returnObj = true;
+      thePConnType = inPConn.getPConnect().getComponentName();
+    } else {
+      // inPConn is an object with the PConnect function, so we want
+      //  to return any referenced view as the object containing the
+      //  the c11n function
+      returnObj = false;
+      thePConnType = inPConn.getComponentName();
+    }
+
+    if (thePConnType === 'reference') {
+      if (returnObj) {
+        //  WAS...
+        // const theRefViewPConn = inPConn.getPConnect().getReferencedViewPConnect(true);
+        // Now: ALWAYS calling createFullReferencedViewFromRef to have options, PageReference, etc.
+        //  set correctly in the C11nEnv (PConnect) object
+        // debugger;
+        let theRefViewPConn = this.createFullReferencedViewFromRef(inPConn.getPConnect());
+        // now return its PConnect
+        theRefViewPConn = theRefViewPConn.getComponent();
+
+        // const theFullReference = theRefViewPConn.getPConnect().getFullReference();
+        // console.log(`theFullReference: ${theFullReference}`);
+
+        return theRefViewPConn;
+      }
+      // console.log(`created theFullRefView full reference: ${theFullRefView.getFullReference()}`);
+      // debugger;
+
+      return this.createFullReferencedViewFromRef(inPConn);
+    }
+    return inPConn;
+  }
+
+  // STATIC method that other components can call to normalize
+  //  an array of pConn objects where any of the children might
+  //  be a 'reference'. The array returns an array of children
+  //  where any 'reference' is replaced with its ReferencedView
+  //  inPConnArray is an array of PConn objects or functions.
+  //    Its value is passed to normalizePConn
+
+  static normalizePConnArray(inPConnArray: any) {
+    if (!(inPConnArray?.length > 0)) {
+      // null or empty array, return what was passed in
+      return inPConnArray;
+    }
+
+    return inPConnArray.map(child => {
+      return ReferenceComponent.normalizePConn(child);
+    });
+  }
+}

package/lib/infra/region/region.component.html

@@ -0,0 +1,11 @@
+<!-- When adding a component here, add the same component in 'default-form' template as well -->
+<div *ngFor="let kid of arChildren$">
+  <component-mapper
+    [name]="kid.getPConnect().getComponentName()"
+    [props]="{
+      pConn$: kid.getPConnect(),
+      formGroup$: formGroup$
+    }"
+    errorMsg="Region wants component not yet available: {{ kid.getPConnect().getComponentName() }}"
+  ></component-mapper>
+</div>