@pega/sdk 0.0.13 → 0.0.14

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

@@ -0,0 +1,39 @@
+/**
+ * Region — a layout region within a template (e.g., left/right column, region A/B).
+ * Renders its children directly via PConnectBridge.
+ *
+ * Pattern reference: angular-sdk-components RegionComponent + sdk-react Region
+ */
+
+/* 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-region',
+  standalone: true,
+  imports: [CommonModule, PConnectBridgeComponent],
+  template: `
+    <div>
+      <div *ngFor="let getter of childGetters">
+        <pconnect-bridge [getPConnect]="getter"></pconnect-bridge>
+      </div>
+    </div>
+  `,
+})
+export class RegionComponent implements OnInit {
+  @Input() props: any;
+
+  childGetters: Array<() => typeof PConnect> = [];
+
+  ngOnInit(): void {
+    const pConn = this.props.getPConnect();
+    const children = pConn.getChildren?.() ?? [];
+    this.childGetters = children.map((child: any) => {
+      const getter = child.getPConnect ?? (() => child);
+      return getter;
+    });
+  }
+}

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

@@ -0,0 +1,193 @@
+/**
+ * RootContainer — top-level container that initializes Redux containers
+ * and renders either a View (portal mode) or ViewContainer (mashup/noPortal mode).
+ *
+ * In mashup mode (loadMashup), renderingMode === 'noPortal':
+ *   - Gets children from pConn, finds a ViewContainer child
+ *   - Creates a ViewContainer PConnect via PCore.createPConnect
+ *   - Renders the ViewContainer which handles container init and routing
+ *
+ * Pattern reference: angular-sdk-components RootContainerComponent
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, NgZone, ChangeDetectorRef } 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';
+
+const options = { context: 'app' };
+
+@Component({
+  selector: 'pega-root-container',
+  standalone: true,
+  imports: [CommonModule, PConnectBridgeComponent],
+  template: `
+    <div *ngIf="bShowRoot">
+      <!-- ViewContainer mode (mashup / noPortal) -->
+      <div *ngIf="viewContainerPConn">
+        <pconnect-bridge [getPConnect]="viewContainerGetter!"></pconnect-bridge>
+      </div>
+
+      <!-- Portal/View mode — render resolved pConn -->
+      <div *ngIf="!viewContainerPConn && resolvedPConn">
+        <pconnect-bridge [getPConnect]="resolvedPConnGetter!"></pconnect-bridge>
+      </div>
+
+      <!-- Fallback: render children -->
+      <div *ngIf="!viewContainerPConn && !resolvedPConn && children.length > 0">
+        <pconnect-bridge *ngFor="let child of children" [getPConnect]="child.getPConnect"></pconnect-bridge>
+      </div>
+    </div>
+  `,
+})
+export class RootContainerComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  bShowRoot = false;
+  componentName = '';
+  viewContainerPConn: any = null;
+  viewContainerGetter: (() => typeof PConnect) | null = null;
+  resolvedPConn: any = null;
+  resolvedPConnGetter: (() => typeof PConnect) | null = null;
+  children: Array<{ getPConnect: () => 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();
+
+    // Add root container items to Redux
+    const { containers } = PCore.getStore().getState();
+    const items = Object.keys(containers).filter((item) => item.includes('root'));
+    (PCore.getContainerUtils() as any).getContainerAPI().addContainerItems(items);
+
+    // Clear out hasViewContainer so ViewContainer can initialize
+    sessionStorage.setItem('hasViewContainer', 'false');
+
+    // Create observable for store-driven updates
+    // @ts-ignore
+    const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
+    this.observable = new PConnectObservable(this.pConn);
+
+    // Initial update
+    this.updateSelf();
+
+    // Subscribe to store changes
+    this.storeUnsub = this.observable.subscribe(() => {
+      this.updateSelf();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.storeUnsub?.();
+    this.observable?.destroy();
+  }
+
+  private updateSelf(): void {
+    // Get fresh props from Redux (not the initial props)
+    const myProps = this.pConn.resolveConfigProps(this.pConn.getConfigProps()) as any;
+
+    // Also get populated additional props (routingInfo comes from here)
+    const additionalProps = this.pConn.getComponentProps?.() ?? {};
+    const routingInfo = additionalProps.routingInfo ?? myProps.routingInfo;
+    const renderingMode = myProps.renderingMode ?? this.props.renderingMode;
+    const children = myProps.children ?? this.props.children;
+    const skeleton = myProps.skeleton;
+
+    const renderingModes = ['portal', 'view'];
+    const noPortalMode = 'noPortal';
+
+    if (routingInfo && renderingModes.includes(renderingMode)) {
+      this.handlePortalMode(routingInfo);
+    } else if (renderingMode === noPortalMode) {
+      this.generateViewContainerForNoPortal();
+    } else if (children && children.length > 0) {
+      // Render children directly
+      this.ngZone.run(() => {
+        this.children = children.map((child: any) => ({
+          getPConnect: child.getPConnect ?? (() => child),
+        }));
+        this.bShowRoot = true;
+        this.cdr.detectChanges();
+      });
+    } else if (skeleton !== undefined) {
+      // TODO: handle skeletons when available
+    }
+  }
+
+  private handlePortalMode(routingInfo: any): void {
+    const { accessedOrder, items } = routingInfo;
+    if (!accessedOrder || !items) return;
+
+    const key = accessedOrder[accessedOrder.length - 1];
+    if (items[key]?.view && Object.keys(items[key].view).length > 0) {
+      const itemView = items[key].view;
+      const rootObject = PCore.createPConnect({
+        meta: itemView,
+        options: {
+          context: items[key].context,
+        },
+      });
+
+      this.ngZone.run(() => {
+        const theNewPConn = (rootObject as any).getPConnect();
+        this.componentName = theNewPConn.getComponentName();
+        this.resolvedPConn = theNewPConn;
+        this.resolvedPConnGetter = () => theNewPConn;
+        this.bShowRoot = true;
+        this.cdr.detectChanges();
+      });
+    }
+  }
+
+  /**
+   * Mashup / noPortal mode:
+   * Gets children from pConn, finds the ViewContainer child,
+   * creates a ViewContainer PConnect, and sets it for rendering.
+   */
+  private generateViewContainerForNoPortal(): void {
+    const arChildren = this.pConn.getChildren() as any[];
+    if (!arChildren || arChildren.length === 0) return;
+
+    const localPConn = arChildren[0].getPConnect();
+    this.componentName = localPConn.getComponentName();
+
+    if (this.componentName === 'ViewContainer') {
+      const configProps = this.pConn.getConfigProps();
+      const viewContConfig = {
+        meta: {
+          type: 'ViewContainer',
+          config: configProps,
+        },
+        options,
+      };
+
+      const createdViewContainer = PCore.createPConnect(viewContConfig) as any;
+      const vcPConn = createdViewContainer.getPConnect();
+
+      this.ngZone.run(() => {
+        this.viewContainerPConn = vcPConn;
+        this.viewContainerGetter = () => vcPConn;
+        this.bShowRoot = true;
+        this.cdr.detectChanges();
+      });
+    } else {
+      // Non-ViewContainer child — render via bridge
+      this.ngZone.run(() => {
+        this.resolvedPConn = localPConn;
+        this.resolvedPConnGetter = () => localPConn;
+        this.bShowRoot = true;
+        this.cdr.detectChanges();
+      });
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+/**
+ * Stages — renders the case stage progress bar.
+ *
+ * Pattern reference: angular-sdk-components StagesComponent + sdk-react Stages
+ */
+
+/* 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';
+
+@Component({
+  selector: 'pega-stages',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div *ngIf="stages.length > 0" style="display: flex; gap: 0.25rem; margin-bottom: 1rem;">
+      <div
+        *ngFor="let stage of stages"
+        [style.flex]="1"
+        [style.textAlign]="'center'"
+        [style.padding]="'0.5rem'"
+        [style.fontSize]="'0.75rem'"
+        [style.fontWeight]="stage.visited_status === 'active' ? '600' : '400'"
+        [style.background]="
+          stage.visited_status === 'completed' ? '#dcfce7' : stage.visited_status === 'active' ? '#dbeafe' : '#f3f4f6'
+        "
+        [style.color]="
+          stage.visited_status === 'completed' ? '#166534' : stage.visited_status === 'active' ? '#1d4ed8' : '#6b7280'
+        "
+        [style.borderRadius]="'0.25rem'"
+      >
+        {{ stage.name }}
+      </div>
+    </div>
+  `,
+})
+export class StagesComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  stages: Array<{ name: string; visited_status?: string }> = [];
+
+  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.stages = configProps.stages ?? this.props.stages ?? [];
+
+    this.ngZone.run(() => {
+      this.cdr.detectChanges();
+    });
+  }
+}

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

@@ -0,0 +1,139 @@
+/**
+ * View — renders a named template (DefaultForm, OneColumn, etc.) or falls back
+ * to rendering children directly.
+ *
+ * Resolves template name from config, handles visibility, label display,
+ * and delegates to the appropriate template component via PConnectBridge.
+ *
+ * Pattern reference: angular-sdk-components ViewComponent + sdk-react View
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
+import type { OnInit, OnDestroy, Type } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import type { Unsubscribe } from '@pega/sdk-angular';
+import { PConnectBridgeComponent, getAngularComponent } from '@pega/sdk-angular';
+
+const NO_HEADER_TEMPLATES = [
+  'SubTabs',
+  'SimpleTable',
+  'Details',
+  'DetailsTwoColumn',
+  'DetailsThreeColumn',
+  'NarrowWideDetails',
+  'WideNarrowDetails',
+  'Confirmation',
+  'DynamicTabs',
+  'DetailsSubTabs',
+  'ListView',
+];
+
+@Component({
+  selector: 'pega-view',
+  standalone: true,
+  imports: [CommonModule, PConnectBridgeComponent],
+  template: `
+    <div *ngIf="visibility !== false">
+      <!-- Label/header -->
+      <div
+        *ngIf="showLabel && label && !isNoHeaderTemplate"
+        style="font-weight: 600; font-size: 0.875rem; margin-bottom: 0.5rem;"
+      >
+        {{ label }}
+      </div>
+
+      <!-- Template mode: render the named template component directly (NOT through bridge) -->
+      <ng-container *ngIf="templateComponent">
+        <ng-container *ngComponentOutlet="templateComponent; inputs: templateInputs"></ng-container>
+      </ng-container>
+
+      <!-- No template: render children directly -->
+      <div *ngIf="!templateComponent && childGetters.length > 0">
+        <div *ngFor="let getter of childGetters">
+          <pconnect-bridge [getPConnect]="getter"></pconnect-bridge>
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class ViewComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  visibility: boolean | undefined = true;
+  showLabel = false;
+  label = '';
+  templateName = '';
+  isNoHeaderTemplate = false;
+  templateComponent: Type<unknown> | null = null;
+  templateInputs: Record<string, unknown> = {};
+  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());
+    const inheritedProps = this.pConn.getInheritedProps?.() ?? {};
+
+    this.templateName = configProps.template ?? '';
+    this.label = inheritedProps.label || configProps.label || '';
+    this.showLabel = inheritedProps.showLabel || configProps.showLabel || false;
+    this.visibility = configProps.visibility ?? true;
+    this.isNoHeaderTemplate = NO_HEADER_TEMPLATES.includes(this.templateName);
+
+    const children = this.pConn.getChildren?.() ?? [];
+
+    if (this.templateName) {
+      // Look up the template component directly from the registry.
+      // Do NOT pass through the bridge — the bridge would call getComponentName()
+      // on the same pConn, returning "View" and causing infinite recursion.
+      this.templateComponent = getAngularComponent(this.templateName) ?? null;
+      if (this.templateComponent) {
+        this.templateInputs = {
+          props: {
+            ...configProps,
+            getPConnect: () => this.pConn,
+          },
+        };
+      }
+      this.childGetters = [];
+    } else {
+      // No template — render children directly
+      this.templateComponent = null;
+      this.templateInputs = {};
+      this.childGetters = children.map((child: any) => {
+        const getter = child.getPConnect ?? (() => child);
+        return getter;
+      });
+    }
+
+    this.ngZone.run(() => {
+      this.cdr.detectChanges();
+    });
+  }
+}

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

@@ -0,0 +1,191 @@
+/**
+ * ViewContainer — manages view routing within a single container.
+ *
+ * Initializes containers via containerManager, subscribes to Redux store for
+ * routingInfo changes, and dynamically creates PConnect for the active view/assignment.
+ *
+ * Key flow:
+ *   1. sessionStorage('hasViewContainer') gate prevents double init
+ *   2. containerMgr.initializeContainers + addContainerItem
+ *   3. Store subscription fires updateSelf on every Redux change
+ *   4. updateSelf reads routingInfo (populated by populateAdditionalProps)
+ *   5. Creates new PConnect config for the active container item
+ *   6. Renders via PConnectBridgeComponent
+ *
+ * Pattern reference: angular-sdk-components ViewContainerComponent
+ */
+
+/* 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 { PConnectBridgeComponent } from '@pega/sdk-angular';
+
+@Component({
+  selector: 'pega-view-container',
+  standalone: true,
+  imports: [CommonModule, PConnectBridgeComponent],
+  template: `
+    <div [id]="buildName">
+      <!-- Resolved view via routing -->
+      <div *ngIf="isViewContainer && createdViewGetPConnect">
+        <pconnect-bridge
+          [getPConnect]="createdViewGetPConnect"
+        ></pconnect-bridge>
+      </div>
+
+      <!-- Reference handling — delegate to bridge -->
+      <div *ngIf="!isViewContainer && viewPConnGetter">
+        <pconnect-bridge [getPConnect]="viewPConnGetter"></pconnect-bridge>
+      </div>
+
+      <!-- Fallback: render children directly -->
+      <div
+        *ngIf="
+          !createdViewGetPConnect && !viewPConnGetter && children.length > 0
+        "
+      >
+        <pconnect-bridge
+          *ngFor="let child of children"
+          [getPConnect]="child.getPConnect"
+        ></pconnect-bridge>
+      </div>
+    </div>
+  `,
+})
+export class ViewContainerComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  buildName = '';
+  isViewContainer = true;
+  createdViewGetPConnect: (() => typeof PConnect) | null = null;
+  viewPConnGetter: (() => typeof PConnect) | null = null;
+  children: Array<{ getPConnect: () => typeof PConnect }> = [];
+
+  private pConn: any;
+  private storeUnsub: (() => void) | undefined;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private ngZone: NgZone,
+  ) {}
+
+  ngOnInit(): void {
+    this.pConn = this.props.getPConnect();
+
+    // Get children
+    this.children = (this.pConn.getChildren?.() ?? []).map((child: any) => ({
+      getPConnect: child.getPConnect ?? (() => child),
+    }));
+
+    this.buildName = this.getBuildName();
+
+    const configProps = this.pConn.resolveConfigProps(
+      this.pConn.getConfigProps(),
+    );
+    const { CONTAINER_TYPE, APP } = PCore.getConstants() as any;
+    const { name, mode, limit } = configProps;
+
+    this.pConn.isBoundToState();
+
+    // Subscribe to store FIRST — before any dispatches so we catch all updates
+    this.storeUnsub = PCore.getStore().subscribe(() => {
+      this.updateSelf();
+    });
+
+    const containerMgr = this.pConn.getContainerManager();
+    const context = this.pConn.getContextName();
+    const containerName = this.pConn.getContainerName();
+
+    // Use PCore's isContainerInitialized API instead of fragile sessionStorage gate
+    const isInitialized = (
+      PCore.getContainerUtils() as any
+    ).isContainerInitialized(context, containerName);
+
+    if (!isInitialized) {
+      containerMgr.initializeContainers({
+        type:
+          mode === CONTAINER_TYPE.MULTIPLE
+            ? CONTAINER_TYPE.MULTIPLE
+            : CONTAINER_TYPE.SINGLE,
+      });
+
+      if (mode === CONTAINER_TYPE.MULTIPLE && limit) {
+        (PCore.getContainerUtils() as any).setContainerLimit(
+          `${APP.APP}/${name}`,
+          limit,
+        );
+      }
+    }
+
+    // Add container item if not using semantic URL
+    if (!PCore.checkIfSemanticURL()) {
+      containerMgr.addContainerItem(this.pConn);
+    }
+
+    // Explicit initial check — routingInfo may already be in the store
+    this.updateSelf();
+  }
+
+  ngOnDestroy(): void {
+    this.storeUnsub?.();
+  }
+
+  private updateSelf(): 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 { CREATE_DETAILS_VIEW_NAME } = PCore.getConstants() as any;
+    const { accessedOrder, items } = routingInfo;
+
+    if (!accessedOrder || !items) return;
+
+    const key = accessedOrder[accessedOrder.length - 1];
+
+    if (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);
+      const newComp = (configObject as any).getPConnect();
+
+      this.ngZone.run(() => {
+        if (newComp.getComponentName() === 'reference') {
+          // Hand off reference to the bridge for de-referencing
+          this.isViewContainer = false;
+          this.viewPConnGetter = () => newComp;
+          this.createdViewGetPConnect = null;
+        } else {
+          this.isViewContainer = true;
+          this.createdViewGetPConnect = () => newComp;
+          this.viewPConnGetter = null;
+
+          // Update children from the newly created view
+          const newChildren = newComp.getChildren?.() ?? [];
+          this.children = newChildren.map((child: any) => ({
+            getPConnect: child.getPConnect ?? (() => child),
+          }));
+        }
+        this.cdr.detectChanges();
+      });
+    }
+  }
+
+  private getBuildName(): string {
+    const sContext = this.pConn.getContextName?.() ?? '';
+    const sName = this.pConn.getContainerName?.() ?? '';
+    return `${sContext.toUpperCase()}/${sName.toUpperCase()}`;
+  }
+}