@pega/sdk 0.0.13 → 0.0.15

package/templates/angular-sdk-reference/src/components/fields/text-input/text-input.component.ts

@@ -0,0 +1,110 @@
+/**
+ * TextInput — standard text input field.
+ *
+ * Pattern reference: angular-sdk-components TextInputComponent + sdk-react TextInput
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input } from '@angular/core';
+import type { OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { handleEvent } from '../../helpers/sdk-helpers';
+
+@Component({
+  selector: 'pega-text-input',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div *ngIf="!readOnly" style="margin-bottom: 1rem;">
+      <label
+        *ngIf="label"
+        style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;"
+      >
+        {{ label
+        }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;"
+          >*</span
+        >
+      </label>
+      <input
+        type="text"
+        [attr.data-testid]="testId"
+        [value]="value"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [required]="required"
+        (change)="onChange($event)"
+        (blur)="onBlur($event)"
+        style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
+      />
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
+        {{ validatemessage }}
+      </div>
+    </div>
+    <div *ngIf="readOnly" style="margin-bottom: 1rem;">
+      <span style="font-size: 0.75rem; color: #6b7280;">{{ label }}</span>
+      <div style="font-size: 0.875rem;">{{ value }}</div>
+    </div>
+  `,
+})
+export class TextInputComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  value = '';
+  placeholder = '';
+  testId = '';
+  required = false;
+  disabled = false;
+  readOnly = false;
+  validatemessage = '';
+
+  private actions: any;
+  private propName = '';
+
+  ngOnInit(): void {
+    this.updateFromProps();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['props']) {
+      this.updateFromProps();
+    }
+  }
+
+  private updateFromProps(): void {
+    const p = this.props;
+    this.label = p.label ?? '';
+    this.value = p.value ?? '';
+    this.placeholder = p.placeholder ?? '';
+    this.testId = p.testId ?? '';
+    this.required = p.required ?? false;
+    this.disabled = p.disabled ?? false;
+    this.readOnly = p.readOnly ?? false;
+    this.validatemessage = p.validatemessage ?? '';
+
+    const pConn = p.getPConnect?.();
+    this.actions = pConn?.getActionsApi?.();
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
+  }
+
+  onChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.value = target.value;
+  }
+
+  onBlur(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    if (this.actions && this.propName) {
+      handleEvent(this.actions, 'changeNblur', this.propName, target.value);
+    }
+  }
+}

package/templates/angular-sdk-reference/src/components/fields/url-input/url-input.component.ts

@@ -0,0 +1,113 @@
+/**
+ * URLInput — URL input field.
+ *
+ * Pattern reference: sdk-react URL
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Component, Input } from '@angular/core';
+import type { OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { handleEvent } from '../../helpers/sdk-helpers';
+
+@Component({
+  selector: 'pega-url-input',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <div *ngIf="!readOnly" style="margin-bottom: 1rem;">
+      <label
+        *ngIf="label"
+        style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;"
+      >
+        {{ label
+        }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;"
+          >*</span
+        >
+      </label>
+      <input
+        type="url"
+        [attr.data-testid]="testId"
+        [value]="value"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [required]="required"
+        (blur)="onBlur($event)"
+        style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
+      />
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
+        {{ validatemessage }}
+      </div>
+    </div>
+    <div *ngIf="readOnly" style="margin-bottom: 1rem;">
+      <span style="font-size: 0.75rem; color: #6b7280;">{{ label }}</span>
+      <div style="font-size: 0.875rem;">
+        <a
+          *ngIf="value"
+          [href]="value"
+          target="_blank"
+          rel="noopener noreferrer"
+          >{{ value }}</a
+        >
+        <span *ngIf="!value">—</span>
+      </div>
+    </div>
+  `,
+})
+export class URLInputComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  value = '';
+  placeholder = '';
+  testId = '';
+  required = false;
+  disabled = false;
+  readOnly = false;
+  validatemessage = '';
+
+  private actions: any;
+  private propName = '';
+
+  ngOnInit(): void {
+    this.updateFromProps();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['props']) {
+      this.updateFromProps();
+    }
+  }
+
+  private updateFromProps(): void {
+    const p = this.props;
+    this.label = p.label ?? '';
+    this.value = p.value ?? '';
+    this.placeholder = p.placeholder ?? '';
+    this.testId = p.testId ?? '';
+    this.required = p.required ?? false;
+    this.disabled = p.disabled ?? false;
+    this.readOnly = p.readOnly ?? false;
+    this.validatemessage = p.validatemessage ?? '';
+
+    const pConn = p.getPConnect?.();
+    this.actions = pConn?.getActionsApi?.();
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
+  }
+
+  onBlur(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    if (this.actions && this.propName) {
+      handleEvent(this.actions, 'changeNblur', this.propName, target.value);
+    }
+  }
+}

package/templates/angular-sdk-reference/src/components/helpers/sdk-helpers.ts

@@ -0,0 +1,93 @@
+export function handleEvent(
+  actions: any,
+  eventType: string,
+  propName: string,
+  value: unknown,
+): void {
+  switch (eventType) {
+    case 'change':
+      actions.updateFieldValue(propName, value);
+      break;
+    case 'blur':
+      actions.triggerFieldChange(propName, value);
+      break;
+    case 'changeNblur':
+      actions.updateFieldValue(propName, value);
+      actions.triggerFieldChange(propName, value);
+      break;
+  }
+}
+
+export function getOptionList(
+  configProps: Record<string, any>,
+  dataObject: Record<string, any>,
+): any[] {
+  const listType = configProps['listType']?.toLowerCase();
+
+  if (listType === 'associated') {
+    const datasource = configProps['datasource'];
+    return Array.isArray(datasource) ? datasource : [];
+  }
+
+  if (listType === 'datapage') {
+    const datasource = configProps['datasource'];
+    if (typeof datasource === 'string' && dataObject[datasource]) {
+      return [];
+    }
+
+    const listOutput = configProps['listOutput'];
+    const items =
+      typeof datasource === 'object' && !Array.isArray(listOutput)
+        ? datasource?.source
+        : listOutput;
+    return Array.isArray(items)
+      ? items.map((item: any) => ({
+          ...item,
+          value: item.text ?? item.value,
+        }))
+      : [];
+  }
+
+  return [];
+}
+
+function isAssignmentView(pConnect: any): boolean {
+  const caseInfo = PCore.getConstants().CASE_INFO;
+  const assignmentViewId = `${pConnect.getValue(caseInfo.ASSIGNMENTACTION_ID)}!${pConnect.getValue(caseInfo.CASE_INFO_CLASSID)}`;
+  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
+  return assignmentViewId === currentViewId;
+}
+
+export function getInstructions(
+  pConnect: any,
+  instructions = 'casestep',
+): string | undefined {
+  const caseInfo = PCore.getConstants().CASE_INFO;
+  const caseStepInstructions = caseInfo.INSTRUCTIONS
+    ? pConnect.getValue(caseInfo.INSTRUCTIONS)
+    : undefined;
+
+  if (
+    instructions === 'casestep' &&
+    isAssignmentView(pConnect) &&
+    caseStepInstructions?.length
+  ) {
+    return caseStepInstructions;
+  }
+
+  if (
+    instructions === 'none' ||
+    instructions?.startsWith('@PARAGRAPH') ||
+    instructions === 'casestep'
+  ) {
+    return undefined;
+  }
+
+  return instructions;
+}
+
+export function compareSdkPCoreVersions(): void {
+  console.warn(
+    `Using Constellation version ${PCore.getPCoreVersion()}. Ensure this is the same version as your Infinity server.`,
+  );
+}

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

@@ -0,0 +1,206 @@
+/**
+ * Assignment — renders the current assignment step and its action buttons.
+ *
+ * Receives assignment children (the form to fill) and action buttons from the
+ * case's actionButtons metadata. Delegates form rendering to children and
+ * handles submit/cancel/save/navigate actions via the actionsAPI.
+ *
+ * In the component hierarchy, FlowContainer renders Assignment explicitly,
+ * passing routed view children and itemKey. Assignment wraps those children
+ * with action buttons below — matching the reference angular-sdk pattern.
+ *
+ * Pattern reference: angular-sdk-components AssignmentComponent + sdk-react Assignment
+ */
+
+/* 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-assignment',
+  standalone: true,
+  imports: [CommonModule, PConnectBridgeComponent],
+  template: `
+    <div *ngIf="bReady">
+      <!-- Render assignment children (the form) -->
+      <div *ngFor="let child of childGetters">
+        <pconnect-bridge [getPConnect]="child"></pconnect-bridge>
+      </div>
+
+      <!-- Action buttons -->
+      <div
+        *ngIf="arMainButtons.length > 0 || arSecondaryButtons.length > 0"
+        style="display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end;"
+      >
+        <button
+          *ngFor="let btn of arSecondaryButtons"
+          (click)="buttonPress(btn.jsAction, 'secondary')"
+          style="padding: 0.5rem 1rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background: white; cursor: pointer;"
+        >
+          {{ btn.name }}
+        </button>
+        <button
+          *ngFor="let btn of arMainButtons"
+          (click)="buttonPress(btn.jsAction, 'primary')"
+          style="padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; background: #2563eb; color: white; cursor: pointer;"
+        >
+          {{ btn.name }}
+        </button>
+      </div>
+    </div>
+  `,
+})
+export class AssignmentComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  bReady = false;
+  childGetters: Array<() => typeof PConnect> = [];
+  arMainButtons: any[] = [];
+  arSecondaryButtons: any[] = [];
+
+  private pConn: any;
+  private actionsAPI: any;
+  private itemKey = '';
+  private storeUnsub: (() => void) | undefined;
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.pConn = this.props.getPConnect();
+    this.itemKey = this.props.itemKey ?? '';
+
+    this.initComponent();
+
+    // Subscribe to store for updates (action buttons may change between steps)
+    this.storeUnsub = PCore.getStore().subscribe(() => {
+      this.updateSelf();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.storeUnsub?.();
+  }
+
+  private initComponent(): void {
+    const baseContext = this.pConn.getContextName?.() ?? '';
+    const acName = this.pConn.getContainerName?.() ?? '';
+    if (!this.itemKey) {
+      this.itemKey = `${baseContext}/${acName}`;
+    }
+
+    this.pConn.isBoundToState();
+    this.updateSelf();
+  }
+
+  private updateSelf(): void {
+    // Children come from FlowContainer's arChildren prop (the routed view PConnect),
+    // matching the reference pattern where FlowContainer passes arChildren$ to Assignment.
+    const arChildrenFromProps = this.props.arChildren;
+    if (arChildrenFromProps && arChildrenFromProps.length > 0) {
+      this.childGetters = arChildrenFromProps.map((child: any) => {
+        return child.getPConnect ?? (() => child);
+      });
+    } else {
+      // Fallback: get children from pConn
+      const children = this.pConn.getChildren?.() ?? [];
+      this.childGetters = children.map((child: any) => {
+        return child.getPConnect ?? (() => child);
+      });
+    }
+
+    // Update itemKey from props if changed
+    if (this.props.itemKey) {
+      this.itemKey = this.props.itemKey;
+    }
+
+    // Extract action buttons from case data.
+    // Reference pattern: Assignment gets caseInfo from its own pConn's data object,
+    // and actionsAPI from the first child work item's pConn.
+    this.extractActionButtons();
+
+    this.ngZone.run(() => {
+      this.bReady = true;
+      this.cdr.detectChanges();
+    });
+  }
+
+  private extractActionButtons(): void {
+    // Get action buttons from the Assignment's own pConn case data
+    const oData = this.pConn.getDataObject?.() ?? {};
+    const caseInfo = oData?.caseInfo;
+
+    if (caseInfo?.actionButtons) {
+      this.arMainButtons = caseInfo.actionButtons.main ?? [];
+      this.arSecondaryButtons = caseInfo.actionButtons.secondary ?? [];
+    }
+
+    // Get actionsAPI from the Assignment's own pConn (not from child).
+    // The Assignment pConn has the correct context for finishAssignment/cancelAssignment.
+    try {
+      this.actionsAPI = this.pConn.getActionsApi?.() ?? null;
+    } catch {
+      // actionsApi may not be available
+    }
+  }
+
+  buttonPress(sAction: string, sButtonType: string): void {
+    if (!this.actionsAPI) return;
+
+    const finishAssignment = this.actionsAPI.finishAssignment?.bind(
+      this.actionsAPI,
+    );
+    const cancelAssignment = this.actionsAPI.cancelAssignment?.bind(
+      this.actionsAPI,
+    );
+    const navigateToStep = this.actionsAPI.navigateToStep?.bind(
+      this.actionsAPI,
+    );
+    const saveAssignment = this.actionsAPI.saveAssignment?.bind(
+      this.actionsAPI,
+    );
+
+    if (sButtonType === 'secondary') {
+      switch (sAction) {
+        case 'navigateToStep':
+          navigateToStep?.('previous', this.itemKey)?.catch(() => {
+            console.error('Assignment: Navigation failed');
+          });
+          break;
+        case 'saveAssignment':
+          saveAssignment?.(this.itemKey)?.catch(() => {
+            console.error('Assignment: Save failed');
+          });
+          break;
+        case 'cancelAssignment': {
+          const { PUB_SUB_EVENTS } = PCore.getConstants() as any;
+          const { publish } = PCore.getPubSubUtils();
+          cancelAssignment?.(this.itemKey, false)
+            ?.then((data: any) => {
+              publish(PUB_SUB_EVENTS.EVENT_CANCEL, data);
+            })
+            ?.catch(() => {
+              console.error('Assignment: Cancel failed');
+            });
+          break;
+        }
+        default:
+          break;
+      }
+    } else if (sButtonType === 'primary') {
+      switch (sAction) {
+        case 'finishAssignment':
+          finishAssignment?.(this.itemKey)?.catch(() => {
+            console.error('Assignment: Submit failed');
+          });
+          break;
+        default:
+          break;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+/**
+ * CaseSummary — renders case summary header with status badge.
+ *
+ * Pattern reference: angular-sdk-components CaseSummaryComponent + sdk-react CaseSummary
+ */
+
+/* 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 { PegaBridgeService } from '@pega/sdk-angular';
+import type { Unsubscribe } from '@pega/sdk-angular';
+
+@Component({
+  selector: 'pega-case-summary',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div
+      style="display: flex; justify-content: space-between; align-items: center;
+                padding: 0.75rem 1rem; background: #f9fafb; border-radius: 0.375rem; margin-bottom: 1rem;"
+    >
+      <span style="font-weight: 600; font-size: 0.875rem;">
+        {{ header }}
+      </span>
+      <span
+        *ngIf="status"
+        style="font-size: 0.75rem; padding: 0.25rem 0.5rem; background: #dbeafe; color: #1d4ed8; border-radius: 1rem;"
+      >
+        {{ status }}
+      </span>
+    </div>
+  `,
+})
+export class CaseSummaryComponent implements OnInit, OnDestroy {
+  @Input() props: any;
+
+  header = '';
+  status = '';
+
+  private pConn: any;
+  private bridge = new PegaBridgeService();
+  private storeUnsub: Unsubscribe | undefined;
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.pConn = this.props.getPConnect();
+    this.updateSelf();
+
+    const subscription = this.bridge.observe(this.pConn).subscribe(() => {
+      this.updateSelf();
+    });
+    this.storeUnsub = () => subscription.unsubscribe();
+  }
+
+  ngOnDestroy(): void {
+    this.storeUnsub?.();
+  }
+
+  private updateSelf(): void {
+    const configProps = this.pConn.resolveConfigProps(
+      this.pConn.getConfigProps(),
+    );
+    this.header = configProps.header ?? '';
+    this.status = configProps.status ?? '';
+
+    this.ngZone.run(() => {
+      this.cdr.detectChanges();
+    });
+  }
+}