@pega/sdk 0.0.13 → 0.0.14

package/templates/angular-sdk-reference/src/components/infra/case-view/case-view.component.ts

@@ -0,0 +1,114 @@
+/**
+ * CaseView — renders the full case view with header, actions menu, and tabs/content.
+ *
+ * Simplified version that shows heading, status, and renders children.
+ *
+ * Pattern reference: angular-sdk-components CaseViewComponent + sdk-react CaseView
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
+import type { OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { Unsubscribe } from '@pega/sdk-angular';
+import { PConnectBridgeComponent } from '@pega/sdk-angular';
+
+@Component({
+  selector: 'pega-case-view',
+  standalone: true,
+  imports: [CommonModule, PConnectBridgeComponent],
+  template: `
+    <div>
+      <div *ngIf="heading" style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">
+        {{ heading }}
+      </div>
+      <div *ngIf="id" style="font-size: 0.75rem; color: #6b7280; margin-bottom: 1rem;">
+        {{ id }}
+      </div>
+
+      <!-- Case summary -->
+      <div *ngIf="caseSummaryGetPConnect">
+        <pconnect-bridge [getPConnect]="caseSummaryGetPConnect"></pconnect-bridge>
+      </div>
+
+      <!-- Children (tabs, stages, etc.) -->
+      <div *ngFor="let getter of childGetters">
+        <pconnect-bridge [getPConnect]="getter"></pconnect-bridge>
+      </div>
+    </div>
+  `,
+})
+export class CaseViewComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  heading = '';
+  id = '';
+  status = '';
+  caseSummaryGetPConnect: (() => typeof PConnect) | null = null;
+  childGetters: Array<() => typeof PConnect> = [];
+
+  private pConn: any;
+  private observable: any;
+  private storeUnsub: Unsubscribe | undefined;
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.pConn = this.props.getPConnect();
+
+    // @ts-ignore
+    const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
+    this.observable = new PConnectObservable(this.pConn);
+    this.updateSelf();
+
+    this.storeUnsub = this.observable.subscribe(() => {
+      this.updateSelf();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.storeUnsub?.();
+    this.observable?.destroy();
+  }
+
+  private updateSelf(): void {
+    const configProps = this.pConn.resolveConfigProps(this.pConn.getConfigProps());
+
+    this.heading = configProps.header ?? '';
+    this.id = configProps.subheader ?? '';
+
+    const children = this.pConn.getChildren?.() ?? [];
+
+    // First child is typically the case summary (if applicable)
+    if (children.length > 0) {
+      const firstChild = children[0];
+      const firstPConn = firstChild.getPConnect?.() ?? firstChild;
+      const firstCompName = firstPConn.getComponentName?.() ?? '';
+
+      if (firstCompName === 'CaseSummary' || firstCompName === 'CaseSummaryFields') {
+        this.caseSummaryGetPConnect = firstChild.getPConnect ?? (() => firstChild);
+        this.childGetters = children.slice(1).map((child: any) => {
+          return child.getPConnect ?? (() => child);
+        });
+      } else {
+        this.caseSummaryGetPConnect = null;
+        this.childGetters = children.map((child: any) => {
+          return child.getPConnect ?? (() => child);
+        });
+      }
+    } else {
+      this.childGetters = [];
+      this.caseSummaryGetPConnect = null;
+    }
+
+    // Update okToInitFlowContainer
+    sessionStorage.setItem('okToInitFlowContainer', 'true');
+
+    this.ngZone.run(() => {
+      this.cdr.detectChanges();
+    });
+  }
+}

package/templates/angular-sdk-reference/src/components/infra/flow-container/flow-container.component.ts

@@ -0,0 +1,411 @@
+/**
+ * FlowContainer — manages the case execution lifecycle.
+ *
+ * Key flow:
+ *   1. initContainer: checks getActiveContainerItemName, calls initializeContainers + addContainerItem
+ *   2. Store subscription drives updateSelf on every Redux change
+ *   3. updateSelf reads routingInfo from populateAdditionalProps, creates PConnect for active item
+ *   4. Renders the assignment form via PConnectBridgeComponent
+ *   5. sessionStorage('okToInitFlowContainer') gate for re-init on cancel
+ *
+ * Pattern reference: angular-sdk-components FlowContainerComponent
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
+import type { OnInit, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AssignmentComponent } from '../assignment/assignment.component';
+
+@Component({
+  selector: 'pega-flow-container',
+  standalone: true,
+  imports: [CommonModule, AssignmentComponent],
+  template: `
+    <div [id]="buildName" style="text-align: left;">
+      <!-- Confirmation banner -->
+      <div
+        *ngIf="bShowConfirm"
+        style="padding: 1rem; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 0.5rem; margin-bottom: 1rem;"
+      >
+        <p style="color: #166534;">{{ caseMessages }}</p>
+      </div>
+
+      <!-- Assignment view (perform mode) -->
+      <div *ngIf="!bShowConfirm && !showTodo && arChildren.length > 0">
+        <div
+          *ngIf="containerName"
+          style="font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; padding: 0 0.5rem;"
+        >
+          {{ containerName }}
+        </div>
+        <!-- Render Assignment explicitly — it wraps children with action buttons.
+             Matches reference pattern: FlowContainer -> Assignment -> view children -->
+        <pega-assignment [props]="assignmentProps"></pega-assignment>
+      </div>
+
+      <!-- Todo/review mode placeholder -->
+      <div
+        *ngIf="!bShowConfirm && showTodo"
+        style="padding: 1rem; text-align: center; color: #64748b;"
+      >
+        Case is in review mode
+      </div>
+    </div>
+  `,
+})
+export class FlowContainerComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  buildName = '';
+  containerName = '';
+  showTodo = false;
+  bShowConfirm = false;
+  caseMessages = '';
+  itemKey = '';
+  arChildren: Array<{ getPConnect: () => typeof PConnect }> = [];
+  assignmentProps: Record<string, unknown> = {};
+
+  private pConn: any;
+  private storeUnsub: (() => void) | undefined;
+  private localizedVal: any;
+  private bReInit = false;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private ngZone: NgZone,
+  ) {}
+
+  ngOnInit(): void {
+    this.pConn = this.props.getPConnect();
+    this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
+
+    // Load children from pConn
+    this.arChildren = (this.pConn.getChildren?.() ?? []).map((child: any) => ({
+      getPConnect: child.getPConnect ?? (() => child),
+    }));
+
+    this.initComponent();
+
+    // Build initial assignment props for the Assignment component
+    this.updateAssignmentProps();
+
+    // Initialize the container (matching withSimpleViewContainerRenderer pattern from sdk-react)
+    this.ensureContainerInitialized();
+
+    // Add container item if initialized but no items yet (matching sdk-react useEffect pattern)
+    this.ensureContainerItem();
+
+    // Subscribe to store for routing changes
+    this.storeUnsub = PCore.getStore().subscribe(() => {
+      // Re-check container initialization on every store change
+      this.ensureContainerInitialized();
+      this.ensureContainerItem();
+      this.updateSelf();
+    });
+
+    // Subscribe to cancel events
+    PCore.getPubSubUtils().subscribe(
+      (PCore.getConstants() as any).PUB_SUB_EVENTS.EVENT_CANCEL,
+      () => {
+        // cancel happened — allow re-init of flow container
+        this.bReInit = true;
+      },
+      'cancelAssignment',
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.storeUnsub?.();
+
+    PCore.getPubSubUtils().unsubscribe(
+      (PCore.getConstants() as any).PUB_SUB_EVENTS.EVENT_CANCEL,
+      'cancelAssignment',
+    );
+  }
+
+  /**
+   * Ensure the container is initialized.
+   * Matches the useContainerInitializer pattern from sdk-react's
+   * withSimpleViewContainerRenderer HOC.
+   */
+  private ensureContainerInitialized(): void {
+    const context = this.pConn.getContextName();
+    const containerName = this.pConn.getContainerName();
+    const containerMgr = this.pConn.getContainerManager();
+
+    const isInitialized = (
+      PCore.getContainerUtils() as any
+    ).isContainerInitialized(context, containerName);
+
+    if (!isInitialized) {
+      containerMgr.initializeContainers({
+        type: 'single',
+        name: containerName,
+      });
+    }
+  }
+
+  /**
+   * Add a container item if the container is initialized but has no items.
+   * Matches the sdk-react FlowContainer's useEffect + addContainerItem helper.
+   */
+  private ensureContainerItem(): void {
+    const context = this.pConn.getContextName();
+    const containerName = this.pConn.getContainerName();
+    const containerPath = `${context}/${containerName}`;
+
+    const isInitialized = (
+      PCore.getContainerUtils() as any
+    ).isContainerInitialized(context, containerName);
+    const hasItems = (PCore.getContainerUtils() as any).hasContainerItems(
+      containerPath,
+    );
+    const hasMetadataChildren = !!this.pConn.getMetadata?.()?.children;
+
+    if (isInitialized && hasMetadataChildren && !hasItems) {
+      this.addContainerItemWithContext();
+    }
+  }
+
+  /**
+   * Adds a container item with full context — matches sdk-react's addContainerItem helper.
+   * Passes key, flowName, caseViewMode, resourceType, and data so PCore can properly
+   * populate the workarea container.
+   */
+  private addContainerItemWithContext(): void {
+    const containerMgr = this.pConn.getContainerManager();
+    const contextName = this.pConn.getContextName();
+    const caseViewMode = this.pConn.getValue('context_data.caseViewMode');
+
+    let key: string | undefined;
+    let flowName: string | undefined;
+
+    if (caseViewMode !== 'review') {
+      const target = contextName.substring(0, contextName.lastIndexOf('_'));
+      const activeContainerItemID = (
+        PCore.getContainerUtils() as any
+      ).getActiveContainerItemName(target);
+      const containerItemData = (
+        PCore.getContainerUtils() as any
+      ).getContainerItemData(target, activeContainerItemID);
+
+      if (containerItemData) {
+        ({ key, flowName } = containerItemData);
+      }
+    }
+
+    containerMgr.addContainerItem({
+      semanticURL: '',
+      key,
+      flowName,
+      caseViewMode: 'perform',
+      resourceType: 'ASSIGNMENT',
+      data: this.pConn.getDataObject(contextName),
+    });
+  }
+
+  /**
+   * Initialize component state from pConn — name, children, todo visibility.
+   */
+  private initComponent(): void {
+    const baseContext = this.pConn.getContextName();
+    const acName = this.pConn.getContainerName();
+
+    if (this.itemKey === '') {
+      this.itemKey = `${baseContext}/${acName}`;
+    }
+
+    this.pConn.isBoundToState();
+    this.buildName = this.getBuildName();
+    this.showTodo = this.getTodoVisibility();
+
+    // Get container/assignment name
+    if (this.arChildren.length > 0) {
+      const oWorkItem = this.arChildren[0].getPConnect() as any;
+      const oWorkData = oWorkItem.getDataObject?.();
+      if (oWorkData) {
+        this.containerName = this.localizedVal(
+          oWorkData.caseInfo?.assignments?.[0]?.name,
+          undefined,
+          this.pConn.getCaseLocaleReference?.(),
+        );
+      }
+    }
+  }
+
+  private getTodoVisibility(): boolean {
+    const caseViewMode = this.pConn.getValue('context_data.caseViewMode');
+    if (caseViewMode && caseViewMode === 'review') {
+      return true;
+    }
+    return !(caseViewMode && caseViewMode === 'perform');
+  }
+
+  /**
+   * Called on every store change — reads routingInfo, creates new PConnect,
+   * and updates arChildren to render the assignment form.
+   */
+  private updateSelf(): void {
+    const caseViewMode = this.pConn.getValue('context_data.caseViewMode');
+
+    if (caseViewMode === 'review') {
+      this.showTodo = true;
+      if (this.bReInit) {
+        this.bReInit = false;
+        this.ensureContainerInitialized();
+        this.ensureContainerItem();
+      }
+      this.cdr.detectChanges();
+      return;
+    }
+
+    if (caseViewMode === 'perform') {
+      this.showTodo = false;
+      if (this.bReInit) {
+        this.bReInit = false;
+        this.ensureContainerInitialized();
+        this.ensureContainerItem();
+      }
+    }
+
+    // Check for case completion messages
+    this.showCaseMessages();
+
+    // Update children from routingInfo
+    this.updateFlowContainerChildren();
+  }
+
+  private showCaseMessages(): void {
+    const theCaseMessages = this.pConn.getValue('caseMessages');
+    const hasAssignments = this.checkHasAssignments();
+
+    if (!hasAssignments) {
+      this.bShowConfirm = true;
+      this.caseMessages =
+        this.localizedVal(theCaseMessages, 'Messages') ||
+        this.localizedVal(
+          'Thank you! The next step in this case has been routed appropriately.',
+          'Messages',
+        );
+    } else {
+      this.bShowConfirm = false;
+    }
+  }
+
+  private checkHasAssignments(): boolean {
+    const { CASE_INFO } = PCore.getConstants() as any;
+    const assignments = this.pConn.getValue(
+      CASE_INFO.D_CASE_ASSIGNMENTS_RESULTS,
+    );
+    const childCases = this.pConn.getValue(CASE_INFO.CHILD_ASSIGNMENTS);
+
+    return (
+      (assignments && assignments.length > 0) ||
+      (childCases && childCases.length > 0)
+    );
+  }
+
+  /**
+   * Reads routingInfo from Redux props, creates PConnect for active container item,
+   * and updates arChildren to render the assignment form components.
+   */
+  private updateFlowContainerChildren(): void {
+    // routingInfo is populated by PConnectObservable.resolveState() which calls
+    // populateAdditionalProps — it arrives via this.props (set by the bridge),
+    // NOT from pConn.getComponentProps() which skips populateAdditionalProps.
+    const routingInfo = this.props?.routingInfo;
+    if (!routingInfo) return;
+
+    const { accessedOrder, items, type } = routingInfo;
+    if (!accessedOrder || !items) return;
+
+    const key = accessedOrder[accessedOrder.length - 1];
+    if (key && key !== '') {
+      this.itemKey = key;
+    }
+
+    if (
+      accessedOrder.length > 0 &&
+      items[key]?.view &&
+      type === 'single' &&
+      Object.keys(items[key].view).length > 0
+    ) {
+      this.addPConnectAndUpdateChildren(items[key], key);
+    }
+  }
+
+  /**
+   * Creates a new PConnect from the routing item's view metadata,
+   * and replaces arChildren so the template renders the new assignment form.
+   */
+  private addPConnectAndUpdateChildren(currentItem: any, key: string): void {
+    const localPConn =
+      this.arChildren.length > 0
+        ? (this.arChildren[0].getPConnect() as any)
+        : this.pConn;
+
+    const rootView = currentItem.view;
+    const { context, name: viewName } = rootView.config;
+
+    // Don't proceed if View doesn't exist
+    if (!viewName) return;
+
+    const config: any = { meta: rootView };
+    config.options = {
+      context: currentItem.context,
+      pageReference: context || localPConn.getPageReference(),
+      hasForm: true,
+      isFlowContainer: true,
+      containerName: localPConn.getContainerName(),
+      containerItemName: key,
+      parentPageReference: localPConn.getPageReference(),
+    };
+
+    const configObject = PCore.createPConnect(config) as any;
+
+    this.ngZone.run(() => {
+      this.buildName = this.getBuildName();
+      this.arChildren = [
+        {
+          getPConnect:
+            configObject.getPConnect ?? (() => configObject.getPConnect()),
+        },
+      ];
+
+      // Update container/assignment name
+      const oWorkItem = configObject.getPConnect();
+      const oWorkData = oWorkItem.getDataObject?.();
+      if (oWorkData) {
+        this.containerName = this.localizedVal(
+          oWorkData.caseInfo?.assignments?.[0]?.name,
+          undefined,
+          this.pConn.getCaseLocaleReference?.(),
+        );
+      }
+
+      // Update assignment props so Assignment component gets new children + itemKey
+      this.updateAssignmentProps();
+
+      this.cdr.detectChanges();
+    });
+  }
+
+  private getBuildName(): string {
+    const sContext = this.pConn.getContextName?.() ?? '';
+    const sName = this.pConn.getContainerName?.() ?? '';
+    return `${sContext.toUpperCase()}/${sName.toUpperCase()}`;
+  }
+
+  /**
+   * Update assignmentProps passed to the Assignment component.
+   * Must be called whenever arChildren, itemKey, or pConn changes.
+   */
+  private updateAssignmentProps(): void {
+    this.assignmentProps = {
+      getPConnect: () => this.pConn,
+      arChildren: this.arChildren,
+      itemKey: this.itemKey,
+    };
+  }
+}

package/templates/angular-sdk-reference/src/components/infra/reference/reference.component.ts

@@ -0,0 +1,158 @@
+/**
+ * Reference — resolves a 'reference' PConnect to its actual referenced view
+ * and renders it via PConnectBridge.
+ *
+ * Pattern reference: angular-sdk-components ReferenceComponent + sdk-react Reference
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input } from '@angular/core';
+import type { OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PConnectBridgeComponent } from '@pega/sdk-angular';
+
+@Component({
+  selector: 'pega-reference',
+  standalone: true,
+  imports: [CommonModule, PConnectBridgeComponent],
+  template: `
+    <div *ngIf="viewGetPConnect">
+      <pconnect-bridge [getPConnect]="viewGetPConnect"></pconnect-bridge>
+    </div>
+  `,
+})
+export class ReferenceComponent implements OnInit {
+  @Input() props: any;
+
+  viewGetPConnect: (() => typeof PConnect) | null = null;
+
+  ngOnInit(): void {
+    const pConn = this.props.getPConnect();
+    const {
+      visibility = true,
+      context = '',
+      readOnly = false,
+      displayMode = '',
+    } = this.props;
+
+    const referenceConfig: any = { ...pConn.getComponentConfig() };
+    delete referenceConfig?.name;
+    delete referenceConfig?.type;
+    delete referenceConfig?.visibility;
+
+    const viewMetadata = pConn.getReferencedView();
+    if (!viewMetadata) return;
+
+    const viewObject = {
+      ...viewMetadata,
+      config: {
+        ...viewMetadata.config,
+        ...referenceConfig,
+      },
+    };
+
+    const viewComponent = pConn.createComponent(viewObject, null, null, {
+      pageReference: context && context.startsWith('@CLASS') ? '' : context,
+    });
+
+    if (referenceConfig.inheritedProps?.length > 0) {
+      const inheritedProps = pConn.getInheritedProps();
+      referenceConfig.inheritedProps = Object.keys(inheritedProps).map(
+        (prop) => ({ prop, value: inheritedProps[prop] }),
+      );
+    }
+
+    const newPConnect =
+      viewComponent.getPConnect?.() ?? viewComponent.props?.getPConnect?.();
+    if (newPConnect) {
+      newPConnect.setInheritedConfig({
+        ...referenceConfig,
+        readOnly,
+        displayMode,
+      });
+    }
+
+    if (visibility !== false) {
+      const getter =
+        viewComponent.getPConnect ?? (() => newPConnect ?? viewComponent);
+      this.viewGetPConnect = getter;
+    }
+  }
+
+  /**
+   * Static utility: normalizes a PConnect that might be a 'reference' into
+   * its dereferenced view. Returns the input unchanged if not a reference.
+   */
+  static normalizePConn(inPConn: any): any {
+    if (!inPConn) return inPConn;
+
+    const hasGetPConnect = !!inPConn.getPConnect;
+    const componentName = hasGetPConnect
+      ? inPConn.getPConnect().getComponentName()
+      : inPConn.getComponentName?.();
+
+    if (componentName === 'reference') {
+      const pConn = hasGetPConnect ? inPConn.getPConnect() : inPConn;
+      const referenceConfig: any = { ...pConn.getComponentConfig() };
+      delete referenceConfig?.name;
+      delete referenceConfig?.type;
+      delete referenceConfig?.visibility;
+
+      const viewMetadata = pConn.getReferencedView();
+      if (!viewMetadata) return null;
+
+      const viewObject = {
+        ...viewMetadata,
+        config: { ...viewMetadata.config, ...referenceConfig },
+      };
+
+      const resolvedConfigProps = pConn.resolveConfigProps(
+        pConn.getConfigProps(),
+      );
+      const {
+        visibility = true,
+        context,
+        readOnly = false,
+        displayMode = '',
+      } = resolvedConfigProps;
+
+      const viewComponent = pConn.createComponent(viewObject, null, null, {
+        pageReference: context && context.startsWith('@CLASS') ? '' : context,
+      });
+
+      if (referenceConfig.inheritedProps?.length > 0) {
+        const inheritedProps = pConn.getInheritedProps();
+        referenceConfig.inheritedProps = Object.keys(inheritedProps).map(
+          (prop: string) => ({ prop, value: inheritedProps[prop] }),
+        );
+      }
+
+      const newPConnect = viewComponent.getPConnect?.();
+      if (newPConnect) {
+        newPConnect.setInheritedConfig({
+          ...referenceConfig,
+          readOnly,
+          displayMode,
+        });
+      }
+
+      if (visibility !== false) {
+        return hasGetPConnect ? viewComponent : newPConnect;
+      }
+      return null;
+    }
+
+    return inPConn;
+  }
+
+  /**
+   * Static utility: normalizes an array of PConnect objects, replacing any
+   * 'reference' components with their resolved views.
+   */
+  static normalizePConnArray(inArray: any[]): any[] {
+    if (!inArray?.length) return inArray ?? [];
+    return inArray
+      .map((child) => ReferenceComponent.normalizePConn(child))
+      .filter(Boolean);
+  }
+}