@pega/sdk 0.0.13 → 0.0.15

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

@@ -0,0 +1,304 @@
+/**
+ * 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 { getOptionList, handleEvent } from '../../helpers/sdk-helpers';
+
+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,89 @@
+/**
+ * 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/sdk-helpers';
+
+@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,112 @@
+/**
+ * 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/sdk-helpers';
+
+@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,101 @@
+/**
+ * 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/sdk-helpers';
+
+@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);
+    }
+  }
+}