@pega/sdk 0.0.13 → 0.0.15

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

@@ -0,0 +1,118 @@
+/**
+ * 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/sdk-helpers';
+
+@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,104 @@
+/**
+ * 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/sdk-helpers';
+
+@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,106 @@
+/**
+ * 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/sdk-helpers';
+
+@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,104 @@
+/**
+ * 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/sdk-helpers';
+
+@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);
+    }
+  }
+}

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

@@ -0,0 +1,113 @@
+/**
+ * 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/sdk-helpers';
+
+@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,111 @@
+/**
+ * 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/sdk-helpers';
+
+@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);
+    }
+  }
+}