@pega/sdk 0.0.13 → 0.0.14

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

@@ -0,0 +1,84 @@
+/**
+ * Checkbox — boolean checkbox field.
+ *
+ * Pattern reference: sdk-react Checkbox
+ */
+
+/* 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-checkbox',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div style="margin-bottom: 1rem;">
+      <label
+        style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem;"
+        [style.cursor]="disabled || readOnly ? 'default' : 'pointer'"
+      >
+        <input
+          type="checkbox"
+          [attr.data-testid]="testId"
+          [checked]="checked"
+          [disabled]="disabled || readOnly"
+          (change)="onCheckChange($event)"
+        />
+        {{ label }}
+        <span *ngIf="required" style="color: #dc2626;">*</span>
+      </label>
+      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+        {{ validatemessage }}
+      </div>
+    </div>
+  `,
+})
+export class CheckboxComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  checked = false;
+  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.checked = p.value === true || p.value === 'true';
+    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) ?? '';
+  }
+
+  onCheckChange(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    if (this.actions && this.propName) {
+      handleEvent(this.actions, 'changeNblur', this.propName, target.checked);
+    }
+  }
+}

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

@@ -0,0 +1,97 @@
+/**
+ * Currency — currency input field with formatting.
+ *
+ * Pattern reference: sdk-react Currency
+ */
+
+/* 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-currency',
+  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>
+      <div style="display: flex; align-items: center;">
+        <span style="margin-right: 0.25rem; font-size: 0.875rem;">{{ currencySymbol }}</span>
+        <input
+          type="number"
+          step="0.01"
+          [attr.data-testid]="testId"
+          [value]="value"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [required]="required"
+          (blur)="onBlur($event)"
+          style="flex: 1; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;"
+          [style.border]="validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'"
+        />
+      </div>
+      <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;">{{ currencySymbol }}{{ value }}</div>
+    </div>
+  `,
+})
+export class CurrencyComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  value: any = '';
+  placeholder = '';
+  testId = '';
+  required = false;
+  disabled = false;
+  readOnly = false;
+  validatemessage = '';
+  currencySymbol = '$';
+
+  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 ?? '';
+    this.currencySymbol = p.currencyISOCode ?? p.currencySymbol ?? '$';
+
+    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/fields/date-input/date-input.component.ts

@@ -0,0 +1,88 @@
+/**
+ * DateInput — date picker field.
+ *
+ * Pattern reference: sdk-react DateInput
+ */
+
+/* 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-date-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="date"
+        [attr.data-testid]="testId"
+        [value]="value"
+        [disabled]="disabled"
+        [required]="required"
+        (change)="onDateChange($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 DateInputComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  value = '';
+  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.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) ?? '';
+  }
+
+  onDateChange(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/dropdown/dropdown.component.ts

@@ -0,0 +1,101 @@
+/**
+ * Dropdown — select/dropdown field.
+ *
+ * Pattern reference: sdk-react Dropdown
+ */
+
+/* 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-dropdown',
+  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>
+      <select
+        [attr.data-testid]="testId"
+        [disabled]="disabled"
+        [required]="required"
+        (change)="onSelectChange($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'"
+      >
+        <option value="" [selected]="!value">
+          {{ placeholder || 'Select...' }}
+        </option>
+        <option *ngFor="let opt of options" [value]="opt.value" [selected]="opt.value === value">
+          {{ opt.text || opt.value }}
+        </option>
+      </select>
+      <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 DropdownComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  value: any = '';
+  placeholder = '';
+  testId = '';
+  required = false;
+  disabled = false;
+  readOnly = false;
+  validatemessage = '';
+  options: Array<{ value: string; text?: string }> = [];
+  displayValue = '';
+
+  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 ?? '';
+    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) ?? '';
+  }
+
+  onSelectChange(event: Event): void {
+    const target = event.target as HTMLSelectElement;
+    if (this.actions && this.propName) {
+      handleEvent(this.actions, 'changeNblur', this.propName, target.value);
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+/**
+ * Email — email input field.
+ *
+ * Pattern reference: sdk-react Email
+ */
+
+/* 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-email',
+  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="email"
+        [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;">{{ value }}</div>
+    </div>
+  `,
+})
+export class EmailComponent 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/fields/integer/integer.component.ts

@@ -0,0 +1,93 @@
+/**
+ * Integer — numeric integer input field.
+ *
+ * Pattern reference: sdk-react Integer
+ */
+
+/* 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-integer',
+  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="number"
+        step="1"
+        [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;">{{ value }}</div>
+    </div>
+  `,
+})
+export class IntegerComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  value: any = '';
+  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) {
+      const intVal = target.value ? parseInt(target.value, 10) : '';
+      handleEvent(this.actions, 'changeNblur', this.propName, intVal);
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+/**
+ * Phone — telephone input field.
+ *
+ * Pattern reference: sdk-react Phone
+ */
+
+/* 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-phone',
+  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="tel"
+        [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;">{{ value }}</div>
+    </div>
+  `,
+})
+export class PhoneComponent 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);
+    }
+  }
+}