@pega/sdk 0.0.12 → 0.0.14

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

@@ -0,0 +1,267 @@
+/**
+ * AutoComplete — typeahead/autocomplete field.
+ *
+ * Supports associated lists (options from datasource prop) and data page lists
+ * (options fetched via PCore.getDataPageUtils). Also handles deferDatasource mode
+ * where datasourceMetadata transforms into a data page call.
+ *
+ * Pattern reference: angular-sdk-components AutoCompleteComponent + sdk-react AutoComplete
+ */
+
+/* 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';
+import { getOptionList } from '../../../helpers/utils';
+
+interface IOption {
+  key: string;
+  value: string;
+}
+
+@Component({
+  selector: 'pega-auto-complete',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <!-- Read-only / display mode -->
+    <div *ngIf="readOnly || isDisplayMode" style="margin-bottom: 1rem;">
+      <span style="font-size: 0.75rem; color: #6b7280;">{{ label }}</span>
+      <div style="font-size: 0.875rem;">{{ displayValue }}</div>
+    </div>
+
+    <!-- Editable mode -->
+    <div *ngIf="!readOnly && !isDisplayMode" style="margin-bottom: 1rem; position: relative;">
+      <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]="inputValue"
+        [placeholder]="placeholder"
+        [disabled]="disabled"
+        [required]="required"
+        (input)="onInput($event)"
+        (focus)="showDropdown = true"
+        (blur)="onBlur()"
+        autocomplete="off"
+        style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; box-sizing: border-box;"
+        [style.border]="validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'"
+      />
+      <!-- Dropdown list -->
+      <ul
+        *ngIf="showDropdown && filteredOptions.length > 0"
+        style="position: absolute; z-index: 10; width: 100%; max-height: 12rem; overflow-y: auto; background: #fff; border: 1px solid #d1d5db; border-radius: 0.375rem; margin-top: 0.125rem; padding: 0; list-style: none; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"
+      >
+        <li
+          *ngFor="let opt of filteredOptions"
+          (mousedown)="selectOption(opt)"
+          style="padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem;"
+        >
+          {{ opt.value }}
+        </li>
+      </ul>
+      <div
+        *ngIf="helperTextToDisplay"
+        style="font-size: 0.75rem; margin-top: 0.25rem;"
+        [style.color]="validatemessage ? '#dc2626' : '#6b7280'"
+      >
+        {{ helperTextToDisplay }}
+      </div>
+    </div>
+  `,
+})
+export class AutoCompleteComponent implements OnInit, OnChanges {
+  @Input() props: any;
+
+  label = '';
+  value = '';
+  placeholder = '';
+  testId = '';
+  required = false;
+  disabled = false;
+  readOnly = false;
+  validatemessage = '';
+  helperText = '';
+  isDisplayMode = false;
+  displayValue = '';
+  inputValue = '';
+  showDropdown = false;
+  options: IOption[] = [];
+  filteredOptions: IOption[] = [];
+  helperTextToDisplay = '';
+
+  private actions: any;
+  private propName = '';
+  private pConn: any;
+  private listType = '';
+
+  ngOnInit(): void {
+    this.updateFromProps();
+    this.loadOptions();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['props']) {
+      this.updateFromProps();
+      this.loadOptions();
+    }
+  }
+
+  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.helperText = p.helperText ?? '';
+    this.helperTextToDisplay = this.validatemessage || this.helperText;
+    this.isDisplayMode = p.displayMode === 'DISPLAY_ONLY' || p.displayMode === 'STACKED_LARGE_VAL';
+
+    this.pConn = p.getPConnect?.();
+    this.actions = this.pConn?.getActionsApi?.();
+    this.propName = ((this.pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+
+    // Resolve display value from current options
+    this.updateDisplayValue();
+  }
+
+  private updateDisplayValue(): void {
+    const match = this.options.find((o) => o.key === this.value);
+    this.displayValue = match?.value ?? this.value ?? '';
+    if (!this.inputValue || this.inputValue !== this.displayValue) {
+      this.inputValue = this.displayValue;
+    }
+    this.filterOptions();
+  }
+
+  private filterOptions(): void {
+    const text = (this.inputValue ?? '').toLowerCase();
+    this.filteredOptions = text ? this.options.filter((o) => o.value?.toLowerCase().includes(text)) : [...this.options];
+  }
+
+  private loadOptions(): void {
+    const p = this.props;
+    let { listType, parameters, datasource, columns = [] } = p;
+
+    // Handle deferDatasource
+    if (p.deferDatasource && p.datasourceMetadata?.datasource?.name) {
+      listType = 'datapage';
+      datasource = p.datasourceMetadata.datasource.name;
+      const meta = p.datasourceMetadata.datasource;
+      parameters = this.flattenParameters(meta.parameters);
+      const displayProp = meta.propertyForDisplayText?.startsWith('@P')
+        ? meta.propertyForDisplayText.substring(3)
+        : meta.propertyForDisplayText;
+      const valueProp = meta.propertyForValue?.startsWith('@P')
+        ? meta.propertyForValue.substring(3)
+        : meta.propertyForValue;
+      columns = [
+        { key: 'true', setProperty: 'Associated property', value: valueProp },
+        {
+          display: 'true',
+          primary: 'true',
+          useForSearch: 'true',
+          value: displayProp,
+        },
+      ];
+    }
+
+    this.listType = listType ?? '';
+    const processedColumns = this.preProcessColumns(columns ?? []);
+
+    if (this.listType === 'associated') {
+      const dataObject = this.pConn?.getDataObject?.('') ?? {};
+      const optList = getOptionList(p as Record<string, unknown>, dataObject as Record<string, unknown>);
+      this.setOptions(optList.map((o) => ({ key: o.value, value: o.text ?? o.value })));
+    } else if (this.listType === 'datapage' && datasource) {
+      const context = this.pConn?.getContextName?.() ?? '';
+      const flatParams =
+        typeof parameters === 'object' && !Array.isArray(parameters) ? this.flattenParameters(parameters) : {};
+      (PCore.getDataPageUtils() as any)
+        .getDataAsync(datasource, context, flatParams)
+        .then((response: any) => {
+          const results = Array.isArray(response) ? response : (response?.data ?? []);
+          const displayColumn = this.getDisplayFieldsMetaData(processedColumns);
+          const optionsData: IOption[] = results.map((element: Record<string, unknown>) => ({
+            key: String(element[displayColumn.key] ?? element['pyGUID'] ?? ''),
+            value: String(element[displayColumn.primary] ?? ''),
+          }));
+          this.setOptions(optionsData);
+        })
+        .catch(() => {
+          // Data page fetch failed
+        });
+    }
+  }
+
+  private setOptions(opts: IOption[]): void {
+    this.options = opts;
+    this.updateDisplayValue();
+  }
+
+  private flattenParameters(params: Record<string, any> = {}): Record<string, unknown> {
+    const flat: Record<string, unknown> = {};
+    for (const key of Object.keys(params)) {
+      const { name, value: val } = params[key];
+      flat[name] = val;
+    }
+    return flat;
+  }
+
+  private preProcessColumns(columnList: Array<Record<string, string>>): Array<Record<string, string>> {
+    return columnList.map((col) => {
+      const temp = { ...col };
+      temp.value = col.value && col.value.startsWith('.') ? col.value.substring(1) : col.value;
+      return temp;
+    });
+  }
+
+  private getDisplayFieldsMetaData(columnList: Array<Record<string, string>>): {
+    key: string;
+    primary: string;
+    secondary: string[];
+  } {
+    const displayColumns = columnList.filter((col) => col['display'] === 'true');
+    const metaData = { key: '', primary: '', secondary: [] as string[] };
+    const keyCol = columnList.filter((col) => col['key'] === 'true');
+    metaData.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+    for (const col of displayColumns) {
+      if (col['primary'] === 'true') {
+        metaData.primary = col.value;
+      } else {
+        metaData.secondary.push(col.value);
+      }
+    }
+    return metaData;
+  }
+
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.inputValue = target.value;
+    this.showDropdown = true;
+    this.filterOptions();
+  }
+
+  onBlur(): void {
+    // Delay to allow click on an option
+    setTimeout(() => {
+      this.showDropdown = false;
+    }, 200);
+  }
+
+  selectOption(opt: IOption): void {
+    this.inputValue = opt.value;
+    this.showDropdown = false;
+    if (this.actions && this.propName) {
+      handleEvent(this.actions, 'changeNblur', this.propName, opt.key);
+    }
+  }
+}

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);
+    }
+  }
+}