@pega/sdk 0.0.13 → 0.0.14

package/templates/angular-sdk-reference/src/components/fields/radio-buttons/radio-buttons.component.ts

@@ -0,0 +1,102 @@
+/**
+ * RadioButtons — radio button group field.
+ *
+ * Pattern reference: sdk-react RadioButtons
+ */
+
+/* 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 { handleEvent } from '../../../helpers/event-utils';
+
+@Component({
+  selector: 'pega-radio-buttons',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div *ngIf="!readOnly" style="margin-bottom: 1rem;">
+      <fieldset style="border: none; padding: 0; margin: 0;">
+        <legend *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>
+        </legend>
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <label
+            *ngFor="let opt of options"
+            style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer;"
+          >
+            <input
+              type="radio"
+              [attr.data-testid]="testId"
+              [name]="propName"
+              [value]="opt.value"
+              [checked]="opt.value === value"
+              [disabled]="disabled"
+              (change)="onRadioChange($event)"
+            />
+            {{ opt.text || opt.value }}
+          </label>
+        </div>
+      </fieldset>
+      <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;">{{ displayValue }}</div>
+    </div>
+  `,
+})
+export class RadioButtonsComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  value: any = '';
+  testId = '';
+  required = false;
+  disabled = false;
+  readOnly = false;
+  validatemessage = '';
+  options: Array<{ value: string; text?: string }> = [];
+  displayValue = '';
+  propName = '';
+
+  private actions: any;
+
+  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.testId = p.testId ?? '';
+    this.required = p.required ?? false;
+    this.disabled = p.disabled ?? false;
+    this.readOnly = p.readOnly ?? false;
+    this.validatemessage = p.validatemessage ?? '';
+    this.options = Array.isArray(p.datasource) ? p.datasource : [];
+
+    const match = this.options.find((o) => o.value === this.value);
+    this.displayValue = match?.text ?? match?.value ?? String(this.value);
+
+    const pConn = p.getPConnect?.();
+    this.actions = pConn?.getActionsApi?.();
+    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+  }
+
+  onRadioChange(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/text-area/text-area.component.ts

@@ -0,0 +1,98 @@
+/**
+ * TextArea — multi-line text input field.
+ *
+ * Pattern reference: sdk-react TextArea
+ */
+
+/* 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/event-utils';
+
+@Component({
+  selector: 'pega-text-area',
+  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>
+      <textarea
+        [attr.data-testid]="testId"
+        [value]="value"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [required]="required"
+        (change)="onChange($event)"
+        (blur)="onBlur($event)"
+        rows="3"
+        style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; resize: vertical;"
+        [style.border]="validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'"
+      >
+      </textarea>
+      <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; white-space: pre-wrap;">{{ value }}</div>
+    </div>
+  `,
+})
+export class TextAreaComponent 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 HTMLTextAreaElement;
+    this.value = target.value;
+  }
+
+  onBlur(event: Event): void {
+    const target = event.target as HTMLTextAreaElement;
+    if (this.actions && this.propName) {
+      handleEvent(this.actions, 'changeNblur', this.propName, target.value);
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+/**
+ * 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/event-utils';
+
+@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,94 @@
+/**
+ * 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/event-utils';
+
+@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/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,76 @@
+/**
+ * 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 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 || 'Case' }}
+      </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 observable: any;
+  private storeUnsub: Unsubscribe | undefined;
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    // @ts-ignore
+    const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
+
+    this.pConn = this.props.getPConnect();
+    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.header = configProps.header ?? '';
+    this.status = configProps.status ?? '';
+
+    this.ngZone.run(() => {
+      this.cdr.detectChanges();
+    });
+  }
+}