@pega/dx-component-builder-sdk 8.23.16 → 8.23.17

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/confirmation/confirmation.component.ts

@@ -0,0 +1,87 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { getToDoAssignments } from '@pega/angular-sdk-library';
+import { ComponentMapperComponent } from '@pega/angular-sdk-library';
+
+declare const window: any;
+
+@Component({
+  selector: 'app-confirmation',
+  templateUrl: './confirmation.component.html',
+  styleUrls: ['./confirmation.component.scss'],
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ConfirmationComponent implements OnInit {
+  rootInfo: any;
+  datasource: any;
+  showTasks: any;
+  detailProps: any;
+  toDoList: any;
+  label: any;
+  CONSTS: any;
+  showDetails: boolean;
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  @Input() pConn$: any;
+
+  angularPConnectData: any = {};
+  PCore$: any;
+  configProps$: any;
+  showConfirmView = true;
+
+  ngOnInit(): void {
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    if (!this.PCore$) {
+      this.PCore$ = window.PCore;
+    }
+    this.CONSTS = this.PCore$.getConstants();
+    const activeContainerItemID = this.PCore$.getContainerUtils().getActiveContainerItemName(this.pConn$.getTarget());
+    this.rootInfo = this.PCore$.getContainerUtils().getContainerItemData(this.pConn$.getTarget(), activeContainerItemID);
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy() {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  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() {
+    const theConfigProps = this.pConn$.getConfigProps();
+    this.datasource = theConfigProps?.datasource;
+    this.showTasks = theConfigProps?.showTasks;
+    this.label = theConfigProps?.label;
+    // Get the inherited props from the parent to determine label settings
+    // Not using whatsNext at the moment, need to figure out the use of it
+    const whatsNext = this.datasource?.source;
+    const items = whatsNext?.length > 0 ? whatsNext.map((item) => item.label) : '';
+    const todoProps = { ...theConfigProps, renderTodoInConfirm: true };
+    this.toDoList = getToDoAssignments(this.pConn$);
+    this.detailProps = { ...theConfigProps, showLabel: false };
+    this.showDetails = this.pConn$?.getChildren()?.[0]?.getPConnect()?.getChildren()?.length > 0;
+  }
+
+  onConfirmViewClose() {
+    this.showConfirmView = false;
+    this.PCore$.getPubSubUtils().publish(this.PCore$.getConstants().PUB_SUB_EVENTS.CASE_EVENTS.CLOSE_CONFIRM_VIEW, this.rootInfo);
+  }
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/data-reference/data-reference.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="childrenToRender && childrenToRender.length > 0">
+  <div *ngIf="!displayMultiRef">
+    <div *ngFor="let kid of childrenToRender">
+      <component-mapper [name]="kid?.getPConnect().getComponentName()" [props]="{ pConn$: kid.getPConnect(), formGroup$ }"></component-mapper>
+    </div>
+  </div>
+  <div *ngIf="displaySingleRef">
+    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
+  </div>
+  <div *ngIf="displayMultiRef">
+    <component-mapper name="MultiReferenceReadOnly" [props]="{ pConn$: firstChildPConnect() }"></component-mapper>
+  </div>
+</div>

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/data-reference/data-reference.component.spec.ts

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

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/data-reference/data-reference.component.ts

@@ -0,0 +1,251 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { AngularPConnectService } from '@pega/angular-sdk-library';
+import { MultiReferenceReadonlyComponent } from '@pega/angular-sdk-library';
+import { SingleReferenceReadonlyComponent } from '@pega/angular-sdk-library';
+import { ComponentMapperComponent } from '@pega/angular-sdk-library';
+
+declare const window: any;
+
+const SELECTION_MODE = { SINGLE: 'single', MULTI: 'multi' };
+
+@Component({
+  selector: 'app-data-reference',
+  templateUrl: './data-reference.component.html',
+  styleUrls: ['./data-reference.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    SingleReferenceReadonlyComponent,
+    MultiReferenceReadonlyComponent,
+    forwardRef(() => ComponentMapperComponent)
+  ]
+})
+export class DataReferenceComponent implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: any = {};
+  PCore$: any;
+
+  arFields$: Array<any> = [];
+  referenceType = '';
+  selectionMode = '';
+  parameters;
+  hideLabel = false;
+  childrenToRender: Array<any> = [];
+  dropDownDataSource: String = '';
+  isDisplayModeEnabled: Boolean = false;
+  propsToUse: any = {};
+  rawViewMetadata: any = {};
+  viewName: String = '';
+  firstChildMeta: any = {};
+  canBeChangedInReviewMode: Boolean = false;
+  propName: String = '';
+  firstChildPConnect;
+  children;
+  displaySingleRef: boolean;
+  displayMultiRef: boolean;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    if (!this.PCore$) {
+      this.PCore$ = window.PCore;
+    }
+
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+    this.children = this.pConn$.getChildren();
+    this.updateSelf();
+  }
+
+  ngOnDestroy(): void {
+    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);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
+
+  updateSelf() {
+    // Update properties based on configProps
+    const theConfigProps = this.pConn$.getConfigProps();
+    const label = theConfigProps.label;
+    const showLabel = theConfigProps.showLabel;
+    const displayMode = theConfigProps.displayMode;
+    const allowAndPersistChangesInReviewMode = theConfigProps.allowAndPersistChangesInReviewMode;
+    this.referenceType = theConfigProps.referenceType;
+    this.selectionMode = theConfigProps.selectionMode;
+    const displayAs = theConfigProps.displayAs;
+    this.parameters = theConfigProps.parameters;
+    this.hideLabel = theConfigProps.hideLabel;
+
+    this.propsToUse = { label, showLabel, ...this.pConn$.getInheritedProps() };
+    if (this.propsToUse.showLabel === false) {
+      this.propsToUse.label = '';
+    }
+    this.rawViewMetadata = this.pConn$.getRawMetadata();
+    this.viewName = this.rawViewMetadata.name;
+    this.firstChildMeta = this.rawViewMetadata.children[0];
+    const refList = this.rawViewMetadata.config.referenceList;
+    this.canBeChangedInReviewMode =
+      allowAndPersistChangesInReviewMode && (displayAs === 'autocomplete' || displayAs === 'dropdown');
+    // this.childrenToRender = this.children;
+    this.isDisplayModeEnabled = ['LABELS_LEFT', 'STACKED_LARGE_VAL'].includes(displayMode);
+
+    if (this.firstChildMeta?.type !== 'Region') {
+      this.firstChildPConnect = this.pConn$.getChildren()[0].getPConnect;
+
+      /* remove refresh When condition from those old view so that it will not be used for runtime */
+      if (this.firstChildMeta.config?.readOnly) {
+        delete this.firstChildMeta.config.readOnly;
+      }
+      if (this.firstChildMeta?.type === 'Dropdown') {
+        this.firstChildMeta.config.datasource.source = this.rawViewMetadata.config?.parameters
+          ? this.dropDownDataSource
+          : '@DATASOURCE '.concat(refList).concat('.pxResults');
+      } else if (this.firstChildMeta?.type === 'AutoComplete') {
+        this.firstChildMeta.config.datasource = refList;
+
+        /* Insert the parameters to the component only if present */
+        if (this.rawViewMetadata.config?.parameters) {
+          this.firstChildMeta.config.parameters = this.parameters;
+        }
+      }
+      // set displayMode conditionally
+      if (!this.canBeChangedInReviewMode) {
+        this.firstChildMeta.config.displayMode = displayMode;
+      }
+      if (this.firstChildMeta.type === 'SimpleTableSelect' && this.selectionMode === SELECTION_MODE.MULTI) {
+        this.propName = this.PCore$.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.selectionList);
+      } else {
+        this.propName = this.PCore$.getAnnotationUtils().getPropertyName(this.firstChildMeta.config.value);
+      }
+
+      const theRecreatedFirstChild = this.recreatedFirstChild();
+      const viewsRegion = this.rawViewMetadata.children[1];
+      if (viewsRegion?.name === 'Views' && viewsRegion.children.length) {
+        this.childrenToRender = [theRecreatedFirstChild, ...this.children.slice(1)];
+      } else {
+        this.childrenToRender = [theRecreatedFirstChild];
+      }
+    }
+  }
+
+  handleSelection(event) {
+    const caseKey = this.pConn$.getCaseInfo().getKey();
+    const refreshOptions = { autoDetectRefresh: true };
+    if (this.canBeChangedInReviewMode && this.pConn$.getValue('__currentPageTabViewName')) {
+      this.pConn$
+        .getActionsApi()
+        .refreshCaseView(caseKey, this.pConn$.getValue('__currentPageTabViewName'), null, refreshOptions);
+      this.PCore$.getDeferLoadManager().refreshActiveComponents(this.pConn$.getContextName());
+    } else {
+      const pgRef = this.pConn$.getPageReference().replace('caseInfo.content', '');
+      this.pConn$.getActionsApi().refreshCaseView(caseKey, this.viewName, pgRef, refreshOptions);
+    }
+
+    // AutoComplete sets value on event.id whereas Dropdown sets it on event.target.value
+    const propValue = event?.id || event?.target?.value;
+    if (propValue && this.canBeChangedInReviewMode && this.isDisplayModeEnabled) {
+      this.PCore$.getDataApiUtils()
+        .getCaseEditLock(caseKey)
+        .then((caseResponse) => {
+          const pageTokens = this.pConn$.getPageReference().replace('caseInfo.content', '').split('.');
+          let curr = {};
+          const commitData = curr;
+
+          pageTokens.forEach((el) => {
+            if (el !== '') {
+              curr[el] = {};
+              curr = curr[el];
+            }
+          });
+
+          // expecting format like {Customer: {pyID:"C-100"}}
+          const propArr = this.propName.split('.');
+          propArr.forEach((element, idx) => {
+            if (idx + 1 === propArr.length) {
+              curr[element] = propValue;
+            } else {
+              curr[element] = {};
+              curr = curr[element];
+            }
+          });
+
+          this.PCore$.getDataApiUtils()
+            .updateCaseEditFieldsData(
+              caseKey,
+              { [caseKey]: commitData },
+              caseResponse.headers.etag,
+              this.pConn$.getContextName()
+            )
+            .then((response) => {
+              this.PCore$.getContainerUtils().updateChildContainersEtag(
+                this.pConn$.getContextName(),
+                response.headers.etag
+              );
+            });
+        });
+    }
+  }
+
+  // Re-create first child with overridden props
+  // Memoized child in order to stop unmount and remount of the child component when data reference
+  // rerenders without any actual change
+  recreatedFirstChild() {
+    const { type, config } = this.firstChildMeta;
+    if (this.firstChildMeta?.type !== 'Region') {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
+      });
+      if (!this.canBeChangedInReviewMode && this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.SINGLE) {
+        this.displaySingleRef = true;
+      }
+
+      if (this.isDisplayModeEnabled && this.selectionMode === SELECTION_MODE.MULTI) {
+        this.displayMultiRef = true;
+      }
+
+      // In the case of a datasource with parameters you cannot load the dropdown before the parameters
+      if (type === 'Dropdown' && this.rawViewMetadata.config?.parameters && this.dropDownDataSource === null) {
+        return null;
+      }
+
+      return this.firstChildPConnect().createComponent({
+        type,
+        config: {
+          ...config,
+          required: this.propsToUse.required,
+          visibility: this.propsToUse.visibility,
+          disabled: this.propsToUse.disabled,
+          label: this.propsToUse.label,
+          viewName: this.pConn$.getCurrentView(),
+          parameters: this.rawViewMetadata.config.parameters,
+          readOnly: false,
+          localeReference: this.rawViewMetadata.config.localeReference,
+          ...(this.selectionMode === SELECTION_MODE.SINGLE ? { referenceType: this.referenceType } : ''),
+          dataRelationshipContext:
+            this.rawViewMetadata.config.contextClass && this.rawViewMetadata.config.name
+              ? this.rawViewMetadata.config.name
+              : null,
+          hideLabel: this.hideLabel,
+          onRecordChange: this.handleSelection.bind(this)
+        }
+      });
+    }
+  }
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/default-form/default-form.component.html

@@ -0,0 +1,20 @@
+<!-- When adding a component here, add the same component in 'region' template as well -->
+<div *ngIf="!NO_HEADER_TEMPLATES.includes(template) && showLabel">
+  <div class="template-title-container">{{label}}</div>
+</div>
+<div *ngIf="instructions" class='psdk-default-form-instruction-text'>
+  <div key="instructions" id="instruction-text" [innerHTML]="instructions">
+  </div>
+</div>
+<div [className]="divClass$">
+  <div *ngFor="let kid of arChildren$" [ngClass]="{ 'grid-column': kid.getPConnect().getComponentName() === 'View' }">
+    <component-mapper
+      [name]="kid.getPConnect().getComponentName()"
+      [props]="{
+        pConn$: kid.getPConnect(),
+        formGroup$: formGroup$
+      }"
+      errorMsg="DefaultForm wants component not yet available: {{ kid.getPConnect().getComponentName() }}"
+    ></component-mapper>
+  </div>
+</div>

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/default-form/default-form.component.scss

@@ -0,0 +1,38 @@
+@import '@pega/angular-sdk-library/_shared/styles.scss';
+
+.psdk-default-form-one-column {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-three-column {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(1rem);
+}
+
+.psdk-default-form-two-column .grid-column {
+  grid-column: 1 / span 2;
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
+}
+
+.template-title-container {
+  font-size: calc(0.9375rem);
+  font-weight: 600;
+  margin: 10px 0px;
+}
+
+.psdk-default-form-instruction-text{
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/default-form/default-form.component.spec.ts

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

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/default-form/default-form.component.ts

@@ -0,0 +1,71 @@
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+import { ReferenceComponent } from '@pega/angular-sdk-library';
+import { ComponentMapperComponent } from '@pega/angular-sdk-library';
+import { TemplateUtils } from '@pega/angular-sdk-library';
+
+@Component({
+  selector: 'app-default-form',
+  templateUrl: './default-form.component.html',
+  styleUrls: ['./default-form.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class DefaultFormComponent implements OnInit {
+  @Input() pConn$: any;
+  @Input() formGroup$: FormGroup;
+
+  configProps$: Object;
+  arChildren$: Array<any>;
+  divClass$: string;
+  template: any;
+  showLabel: any;
+  label: any;
+  instructions: string;
+
+  NO_HEADER_TEMPLATES = [
+    'SubTabs',
+    'SimpleTable',
+    'Details',
+    'DetailsTwoColumn',
+    'DetailsThreeColumn',
+    'NarrowWideDetails',
+    'WideNarrowDetails',
+    'Confirmation'
+  ];
+  
+  constructor(private templateUtils: TemplateUtils) {}
+
+  ngOnInit(): void {
+    let configProps = this.pConn$.getConfigProps();
+    this.template = configProps?.template;
+    const propToUse = { ...this.pConn$.getInheritedProps() };
+    this.showLabel = propToUse?.showLabel;
+    this.label = propToUse?.label;
+    let kids = this.pConn$.getChildren();
+    this.instructions = this.templateUtils.getInstructions(this.pConn$, configProps?.instructions);
+    console.log("instructions" + this.instructions);
+
+    let numCols = configProps.NumCols ? configProps.NumCols : '1';
+    switch (numCols) {
+      case '1':
+        this.divClass$ = 'psdk-default-form-one-column';
+        break;
+      case '2':
+        this.divClass$ = 'psdk-default-form-two-column';
+        break;
+      case '3':
+        this.divClass$ = 'psdk-default-form-three-column';
+        break;
+      default:
+        this.divClass$ = 'psdk-default-form-one-column';
+        break;
+    }
+
+    // repoint children before getting templateArray
+    // Children may contain 'reference' component, so we need to
+    //  normalize them
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
+  }
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/details/config.json

@@ -0,0 +1,16 @@
+{
+  "name": "Details",
+  "label": "Details (One column)",
+  "description": "Details (One column)",
+  "type": "Template",
+  "subtype": "DETAILS",
+  "icon": "OneColumnDetails.svg",
+  "properties": [
+    {
+      "name": "A",
+      "label": "Region A",
+      "format": "CONTENTPICKER",
+      "addTypeList": ["Fields", "Views", "UIComponents"]
+    }
+  ]
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/details/details.component.html

@@ -0,0 +1,7 @@
+<div>
+  <app-material-details
+    [arFields$]="arFields$"
+    [arHighlightedFields]="highlightedDataArr"
+    layout="'one-column'"
+  ></app-material-details>
+</div>

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/details/details.component.scss

@@ -0,0 +1,7 @@
+.psdk-grid-filter {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: calc(2 * 0.5rem);
+  row-gap: calc(2 * 0.5rem);
+  align-items: start;
+}

package/tests/assets/components/SDK-Angular/createAll/override-sdk/template/details/details.component.spec.ts

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