@pega/angular-sdk-overrides 0.23.1

package/lib/infra/dashboard-filter/dashboard-filter.component.ts

@@ -0,0 +1,90 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { debounceTime } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getFilterExpression, getFormattedDate, createFilter, combineFilters } from '@pega/angular-sdk-components';
+
+@Component({
+  selector: 'app-dashboard-filter',
+  templateUrl: './dashboard-filter.component.html',
+  styleUrls: ['./dashboard-filter.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatDatepickerModule,
+    MatButtonModule,
+    MatNativeDateModule,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class DashboardFilterComponent implements OnInit {
+  @Input() pConn$: typeof PConnect;
+  @Input() filtersFormGroup$: FormGroup;
+  @Input() inlineProps;
+  @Input() children;
+
+  arChildren$: any[];
+  private filterChangeSubject = new Subject<string>();
+
+  constructor() {
+    this.filterChangeSubject.pipe(debounceTime(500)).subscribe(val => this.fireFilterChange(val));
+  }
+
+  ngOnInit() {
+    if (this.filtersFormGroup$ != null) {
+      this.filtersFormGroup$.addControl('start', new FormControl(null));
+      this.filtersFormGroup$.addControl('end', new FormControl(null));
+    }
+  }
+
+  clearFilters() {
+    this.filtersFormGroup$.reset();
+    // @ts-ignore - second parameter “payload” for publish method should be optional
+    PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CLEAR_ALL);
+  }
+
+  updateTmpData(filterData) {
+    this.filterChangeSubject.next(filterData);
+  }
+
+  dateRangeChangeHandler(field) {
+    const { filterId, name } = field;
+    const start = (this.filtersFormGroup$.get('start') as FormControl).value;
+    const end = (this.filtersFormGroup$.get('end') as FormControl).value;
+    if (start && end) {
+      let startDate = getFormattedDate(start);
+      let endDate = getFormattedDate(end);
+
+      if (startDate && endDate) {
+        startDate = `${startDate}T00:00:00`;
+        endDate = `${endDate}T00:00:00`;
+        const startFilter = createFilter(startDate, name, 'GT');
+        const endFilter = createFilter(endDate, name, 'LT');
+
+        const filterData = {
+          filterId,
+          filterExpression: combineFilters([startFilter, endFilter], null)
+        };
+        PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
+      }
+    }
+  }
+
+  fireFilterChange(data: any) {
+    const { event, field } = data;
+    const filterData = {
+      filterId: field.filterId,
+      filterExpression: getFilterExpression(event.target.value, field.name, field.metadata)
+    };
+
+    PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_DASHBOARD_FILTER_CHANGE, filterData);
+  }
+}

package/lib/infra/defer-load/defer-load.component.html

@@ -0,0 +1,3 @@
+<div *ngIf="loadedPConn$">
+  <component-mapper [name]="componentName$" [props]="{ pConn$: loadedPConn$ }" errorMsg="Defer Load Missing: {{ componentName$ }}"></component-mapper>
+</div>

package/lib/infra/defer-load/defer-load.component.spec.ts

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

package/lib/infra/defer-load/defer-load.component.ts

@@ -0,0 +1,169 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy, OnChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { publicConstants } from '@pega/pcore-pconnect-typedefs/constants';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { AngularPConnectData, AngularPConnectService } 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.
+ */
+
+@Component({
+  selector: 'app-defer-load',
+  templateUrl: './defer-load.component.html',
+  styleUrls: ['./defer-load.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DeferLoadComponent implements OnInit, OnDestroy, OnChanges {
+  @Input() pConn$: typeof PConnect;
+  @Input() loadData$: any;
+  @Input() name;
+
+  componentName$: string;
+  loadedPConn$: any;
+  bShowDefer$ = false;
+
+  angularPConnectData: AngularPConnectData = {};
+  constants: typeof publicConstants;
+  currentLoadedAssignment = '';
+  isContainerPreview: boolean;
+  loadViewCaseID: any;
+  resourceType: any;
+  deferLoadId: any;
+  containerName: any;
+  CASE: any;
+  PAGE: any;
+  DATA: any;
+  constructor(private angularPConnect: AngularPConnectService) {
+    this.constants = PCore.getConstants();
+  }
+
+  ngOnInit(): void {
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.loadActiveTab();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  onStateChange() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    // @ts-ignore - second parameter pageReference for getValue method should be optional
+    const theRequestedAssignment = this.pConn$.getValue(PCore.getConstants().CASE_INFO.ASSIGNMENT_LABEL);
+    if (theRequestedAssignment !== this.currentLoadedAssignment) {
+      this.currentLoadedAssignment = theRequestedAssignment;
+      this.loadActiveTab();
+    }
+  }
+
+  ngOnChanges() {
+    // @ts-ignore - second parameter pageReference for getValue method should be optional
+    this.loadViewCaseID = this.pConn$.getValue(this.constants.PZINSKEY) || this.pConn$.getValue(this.constants.CASE_INFO.CASE_INFO_ID);
+    let containerItemData;
+    const targetName = this.pConn$.getTarget();
+    if (targetName) {
+      this.containerName = PCore.getContainerUtils().getActiveContainerItemName(targetName);
+      containerItemData = PCore.getContainerUtils().getContainerItemData(targetName, this.containerName);
+    }
+    const { CASE, PAGE, DATA } = this.constants.RESOURCE_TYPES;
+    this.CASE = CASE;
+    this.PAGE = PAGE;
+    this.DATA = DATA;
+
+    const { resourceType = this.CASE } = containerItemData || { resourceType: this.loadViewCaseID ? this.CASE : this.PAGE };
+    this.resourceType = resourceType;
+    this.isContainerPreview = /preview_[0-9]*/g.test(this.pConn$.getContextName());
+
+    const theConfigProps: any = this.pConn$.getConfigProps();
+    this.deferLoadId = theConfigProps.deferLoadId;
+    this.name = this.name || theConfigProps.name;
+
+    this.loadActiveTab();
+  }
+
+  getViewOptions = () => ({
+    viewContext: this.resourceType,
+    // @ts-ignore - parameter “contextName” for getDataObject method should be optional
+    pageClass: this.loadViewCaseID ? '' : this.pConn$.getDataObject().pyPortal.classID,
+    container: this.isContainerPreview ? 'preview' : null,
+    containerName: this.isContainerPreview ? 'preview' : null,
+    updateData: this.isContainerPreview
+  });
+
+  onResponse(data) {
+    if (this.deferLoadId) {
+      PCore.getDeferLoadManager().start(
+        this.name,
+        this.pConn$.getCaseInfo().getKey(),
+        this.pConn$.getPageReference().replace('caseInfo.content', ''),
+        this.pConn$.getContextName(),
+        this.deferLoadId
+      );
+    }
+
+    if (data && !(data.type && data.type === 'error')) {
+      const config = {
+        meta: data,
+        options: {
+          context: this.pConn$.getContextName(),
+          pageReference: this.pConn$.getPageReference()
+        }
+      };
+      const configObject = PCore.createPConnect(config);
+      configObject.getPConnect().setInheritedProp('displayMode', 'LABELS_LEFT');
+      this.loadedPConn$ = ReferenceComponent.normalizePConn(configObject.getPConnect());
+      this.componentName$ = this.loadedPConn$.getComponentName();
+      if (this.deferLoadId) {
+        PCore.getDeferLoadManager().stop(this.deferLoadId, this.pConn$.getContextName());
+      }
+    }
+    // this.cdRef.detectChanges();
+  }
+
+  loadActiveTab() {
+    if (this.resourceType === this.DATA) {
+      // Rendering defer loaded tabs in data context
+      if (this.containerName) {
+        const dataContext = PCore.getStoreValue('.dataContext', 'dataInfo', this.containerName);
+        const dataContextParameters = PCore.getStoreValue('.dataContextParameters', 'dataInfo', this.containerName);
+
+        this.pConn$
+          .getActionsApi()
+          .showData(this.name, dataContext, dataContextParameters, {
+            // @ts-ignore - skipSemanticUrl should be boolean type
+            skipSemanticUrl: true,
+            // @ts-ignore
+            isDeferLoaded: true
+          })
+          .then(data => {
+            this.onResponse(data);
+          });
+      } else {
+        console.error('Cannot load the defer loaded view without container information');
+      }
+    } else if (this.resourceType === this.PAGE) {
+      // Rendering defer loaded tabs in case/ page context
+      this.pConn$
+        .getActionsApi()
+        .loadView(encodeURI(this.loadViewCaseID), this.name, this.getViewOptions())
+        .then(data => {
+          this.onResponse(data);
+        });
+    } else {
+      this.pConn$
+        .getActionsApi()
+        .refreshCaseView(encodeURI(this.loadViewCaseID), this.name, null)
+        .then(data => {
+          this.onResponse(data.root);
+        });
+    }
+  }
+}

package/lib/infra/error-boundary/error-boundary.component.html

@@ -0,0 +1 @@
+<p>{{ localizedVal(message, localeCategory) }}</p>

package/lib/infra/error-boundary/error-boundary.component.spec.ts

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

package/lib/infra/error-boundary/error-boundary.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-error-boundary',
+  templateUrl: './error-boundary.component.html',
+  styleUrls: ['./error-boundary.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
+})
+export class ErrorBoundaryComponent {
+  @Input() message: string;
+
+  localizedVal = window.PCore.getLocaleUtils().getLocaleValue;
+  localeCategory = 'Messages';
+}

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

@@ -0,0 +1,98 @@
+<div *ngIf="bShow$">
+  <div *ngIf="bIsVertical$" class="psdk-vertical-stepper">
+    <div *ngFor="let mainStep of arNavigationSteps$; let i = index" class="psdk-vertical-step">
+      <div class="psdk-vertical-step-header">
+        <div class="{{ _getVIconClass(mainStep.visited_status) }}">
+          <div class="psdk-vertical-step-icon-content">
+            <span>{{ i + 1 }}</span>
+          </div>
+        </div>
+        <div class="{{ _getVLabelClass(mainStep.visited_status) }}">
+          {{ mainStep.name }}
+        </div>
+      </div>
+      <div class="{{ _getVBodyClass(i) }}">
+        <ng-container *ngIf="mainStep?.steps">
+          <ul style="padding-inline-start: 0rem; margin-left: -7px">
+            <li *ngFor="let subStep of mainStep.steps" class="psdk-sub-step-list">
+              <div style="display: inline-flex">
+                <img *ngIf="subStep.visited_status == 'current'" class="psdk-current-svg-icon" src="{{ svgCurrent$ }}" />
+                <img *ngIf="subStep.visited_status != 'current'" class="psdk-not-current-svg-icon" src="{{ svgNotCurrent$ }}" />
+                <label *ngIf="subStep.visited_status == 'current'" class="psdk-sub-step-current">{{ subStep.name }}</label>
+                <label *ngIf="subStep.visited_status != 'current'" class="psdk-sub-step-not-current">{{ subStep.name }}</label>
+              </div>
+              <div *ngIf="subStep.visited_status == 'current'">
+                <component-mapper
+                  name="AssignmentCard"
+                  [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
+                  [parent]="this"
+                  [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+                ></component-mapper>
+              </div>
+            </li>
+          </ul>
+        </ng-container>
+
+        <ng-container *ngIf="!mainStep?.steps && mainStep.visited_status == 'current'">
+          <component-mapper
+            name="AssignmentCard"
+            [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
+            [parent]="this"
+            [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+          ></component-mapper>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+
+  <div *ngIf="!bIsVertical$" class="psdk-horizontal-stepper">
+    <div class="psdk-horizontal-stepper-header-container">
+      <ng-container *ngFor="let mainStep of arNavigationSteps$; let i = index">
+        <div class="psdk-horizontal-step-header">
+          <div class="{{ _getHIconClass(mainStep.visited_status) }}">
+            <div class="psdk-horizontal-step-icon-content">
+              <span>{{ i + 1 }}</span>
+            </div>
+          </div>
+          <div class="{{ _getHLabelClass(mainStep.visited_status) }}">
+            <div class="psdk-horizontal-step-text-label">
+              {{ mainStep.name }}
+            </div>
+          </div>
+        </div>
+        <div *ngIf="_showHLine(i)" class="psdk-horizontal-step-line"></div>
+      </ng-container>
+    </div>
+    <div *ngFor="let mainStep of arNavigationSteps$" class="psdk-horizontal-stepper-body">
+      <ng-container *ngIf="mainStep?.steps">
+        <ul style="padding-inline-start: 0rem; margin-left: 35px">
+          <li *ngFor="let subStep of mainStep.steps" class="psdk-sub-step-list">
+            <div style="display: inline-flex">
+              <img *ngIf="subStep.visited_status == 'current'" class="psdk-current-svg-icon" src="{{ svgCurrent$ }}" />
+              <img *ngIf="subStep.visited_status != 'current'" class="psdk-not-current-svg-icon" src="{{ svgNotCurrent$ }}" />
+              <label *ngIf="subStep.visited_status == 'current'" class="psdk-sub-step-current">{{ subStep.name }}</label>
+              <label *ngIf="subStep.visited_status != 'current'" class="psdk-sub-step-not-current">{{ subStep.name }}</label>
+            </div>
+            <div *ngIf="subStep.visited_status == 'current'">
+              <component-mapper
+                name="AssignmentCard"
+                [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
+                [parent]="this"
+                [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+              ></component-mapper>
+            </div>
+          </li>
+        </ul>
+      </ng-container>
+
+      <ng-container *ngIf="!mainStep?.steps && mainStep.visited_status == 'current'">
+        <component-mapper
+          name="AssignmentCard"
+          [props]="{ pConn$, formGroup$, arChildren$, arMainButtons$, arSecondaryButtons$ }"
+          [parent]="this"
+          [outputEvents]="{ actionButtonClick: onActionButtonClick }"
+        ></component-mapper>
+      </ng-container>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,247 @@
+@import '@pega/angular-sdk-components/_shared/styles.scss';
+
+.psdk-case-view-divider {
+  border-bottom: 0.0625rem solid $app-neutral-light-color;
+}
+
+.psdk-icon {
+  padding: 0rem 0.125rem;
+  min-width: unset;
+}
+
+.psdk-icon-current {
+  color: $app-primary-color;
+}
+
+.psdk-icon-not-current {
+  color: $app-neutral-color;
+}
+
+.psdk-current-svg-icon {
+  width: 1rem;
+  filter: $app-primary-color-filter;
+}
+
+.psdk-not-current-svg-icon {
+  width: 1rem;
+  filter: $app-neutral-color-filter;
+}
+
+mat-vertical-stepper {
+  background-color: transparent;
+}
+mat-horizontal-stepper {
+  background-color: transparent;
+}
+
+.psdk-sub-step-current {
+  padding-left: 0.625rem;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.psdk-sub-step-not-current {
+  padding-left: 0.625rem;
+  color: rgba(0, 0, 0, 0.54);
+}
+
+.psdk-flow-container-top {
+  background-color: $app-form-color;
+  padding: 0rem 0.625rem;
+  border-radius: 0.3125rem;
+}
+.psdk-flow-container {
+  padding-left: 2.1875rem;
+}
+
+.psdk-sub-step-list {
+  list-style: none;
+  padding-bottom: 0.625rem;
+}
+
+.psdk-vertical-stepper {
+  background-color: transparent;
+  display: block;
+  text-align: left;
+}
+
+.psdk-vertical-step {
+  display: block;
+}
+
+.psdk-vertical-step-header {
+  overflow: hidden;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding: 24px 24px;
+}
+
+.psdk-vertical-step-icon {
+  margin-right: 12px;
+  background-color: $app-neutral-color;
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.psdk-vertical-step-icon-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #fff;
+}
+
+.psdk-vertical-step-icon-selected {
+  margin-right: 12px;
+  background-color: $app-primary-color;
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.psdk-vertical-step-label {
+  color: rgba(0, 0, 0, 0.54);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.psdk-vertical-step-label-selected {
+  color: rgba(0, 0, 0, 0.87);
+  display: inline-block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.psdk-vertical-step-body {
+  margin-left: 36px;
+  border: 0;
+  position: relative;
+  display: block;
+  text-align: left;
+}
+.psdk-vertical-step-line {
+  display: block;
+}
+
+.psdk-vertical-step-line::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  border-left-width: 1px;
+  border-left-style: solid;
+  top: -16px;
+  bottom: -16px;
+  border-left-color: rgba(0, 0, 0, 0.12);
+}
+
+.psdk-horizontal-stepper {
+  background-color: transparent;
+  display: block;
+}
+
+.psdk-horizontal-stepper-header-container {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  text-align: left;
+}
+
+.psdk-horizontal-step-header {
+  overflow: hidden;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+  display: flex;
+  height: 72px;
+  overflow: hidden;
+  align-items: center;
+  padding: 0 24px;
+}
+
+.psdk-horizontal-step-icon {
+  background-color: $app-neutral-color;
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+  display: block;
+  margin-right: 8px;
+  flex: none;
+}
+
+.psdk-horizontal-step-icon-content {
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.psdk-horizontal-step-icon-selected {
+  background-color: $app-primary-color;
+  color: #fff;
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  flex-shrink: 0;
+  position: relative;
+  display: block;
+  margin-right: 8px;
+  flex: none;
+}
+
+.psdk-horizontal-step-label {
+  color: rgba(0, 0, 0, 0.54);
+  display: inline-block;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: initial;
+}
+
+.psdk-horizontal-step-label-selected {
+  color: rgba(0, 0, 0, 0.87);
+  display: inline-block;
+  min-width: 50px;
+  vertical-align: middle;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: initial;
+}
+
+.psdk-horizontal-step-line {
+  border-top-color: rgba(0, 0, 0, 0.12);
+  border-top-width: 1px;
+  border-top-style: solid;
+  flex: auto;
+  height: 0;
+  margin: 0 -16px;
+  min-width: 32px;
+}