@pega/sdk 0.0.14 → 0.0.15

package/templates/angular-sdk-reference/src/app/pconnect-renderer.component.ts

@@ -0,0 +1,153 @@
+/**
+ * PConnectRendererComponent — Recursive Angular component that renders
+ * the PConnect c11nEnv tree as a visual fallback display.
+ *
+ * This is the Angular equivalent of React's PConnectComponent + FallbackComponent.
+ * It uses PConnectObservable from sdk-core to subscribe to state changes
+ * and recursively renders the component tree.
+ */
+
+import {
+  Component,
+  Input,
+  OnInit,
+  OnDestroy,
+  NgZone,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PegaBridgeService } from '@pega/sdk-angular';
+import type { PConnectState, Unsubscribe } from '@pega/sdk-angular';
+
+@Component({
+  selector: 'app-pconnect-renderer',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="node">
+      <div class="node-header">{{ componentName }}</div>
+
+      <pre *ngIf="displayPropsJson" class="node-props">{{
+        displayPropsJson
+      }}</pre>
+
+      <!-- Recursively render children -->
+      <div *ngIf="childEnvs.length > 0" class="node-children">
+        <app-pconnect-renderer
+          *ngFor="let child of childEnvs; trackBy: trackByIndex"
+          [pConnect]="child"
+        ></app-pconnect-renderer>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .node {
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        margin: 4px;
+        padding: 8px;
+        font-size: 13px;
+        font-family: system-ui, sans-serif;
+      }
+      .node-header {
+        background: #f0f4ff;
+        padding: 4px 8px;
+        border-radius: 3px;
+        font-size: 12px;
+        font-weight: 600;
+        color: #1a56db;
+        margin-bottom: 4px;
+      }
+      .node-props {
+        font-size: 11px;
+        color: #555;
+        margin: 4px 0;
+        max-height: 100px;
+        overflow: auto;
+        background: #fafafa;
+        padding: 4px;
+        border-radius: 3px;
+        white-space: pre-wrap;
+      }
+      .node-children {
+        padding-left: 12px;
+      }
+    `,
+  ],
+})
+export class PConnectRendererComponent implements OnInit, OnDestroy {
+  @Input() pConnect!: typeof PConnect;
+
+  componentName = 'Unknown';
+  displayPropsJson = '';
+  childEnvs: Array<typeof PConnect> = [];
+
+  private bridge = new PegaBridgeService();
+  private unsubscribe: Unsubscribe | null = null;
+
+  constructor(
+    private ngZone: NgZone,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    if (!this.pConnect) return;
+
+    // Resolve component name
+    const pc = this.pConnect as any;
+    this.componentName =
+      pc.getComponentName?.() ?? pc.componentName ?? 'Unknown';
+
+    // Create observable for state changes
+    const subscription = this.bridge.observe(this.pConnect).subscribe((state: PConnectState) => {
+      this.ngZone.run(() => {
+        this.applyState(state);
+        this.cdr.markForCheck();
+      });
+    });
+    this.unsubscribe = () => subscription.unsubscribe();
+
+    // Resolve children
+    this.resolveChildren();
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribe?.();
+  }
+
+  trackByIndex(index: number): number {
+    return index;
+  }
+
+  private applyState(state: PConnectState): void {
+    // Filter out function props and internal props for display
+    const displayProps = Object.fromEntries(
+      Object.entries(state.configProps).filter(
+        ([key, value]) =>
+          typeof value !== 'function' &&
+          !['getPConnect', 'pConnect', 'visibility'].includes(key),
+      ),
+    );
+    const json = JSON.stringify(displayProps, null, 2);
+    this.displayPropsJson = json !== '{}' ? json : '';
+  }
+
+  private resolveChildren(): void {
+    const pc = this.pConnect as any;
+    if (!pc.hasChildren?.()) {
+      this.childEnvs = [];
+      return;
+    }
+
+    const children = pc.getChildren?.() as any[];
+    if (!children) {
+      this.childEnvs = [];
+      return;
+    }
+
+    this.childEnvs = children.map((childEnv: any) => {
+      return childEnv.getPConnect ? childEnv.getPConnect() : childEnv;
+    });
+  }
+}

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

@@ -13,8 +13,7 @@ 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';
+import { getOptionList, handleEvent } from '../../helpers/sdk-helpers';
 
 interface IOption {
   key: string;
@@ -33,9 +32,18 @@ interface IOption {
     </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>
+    <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"
@@ -49,7 +57,9 @@ interface IOption {
         (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'"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
       />
       <!-- Dropdown list -->
       <ul
@@ -123,11 +133,14 @@ export class AutoCompleteComponent implements OnInit, OnChanges {
     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.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) ?? '';
+    this.propName =
+      ((this.pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
 
     // Resolve display value from current options
     this.updateDisplayValue();
@@ -144,7 +157,9 @@ export class AutoCompleteComponent implements OnInit, OnChanges {
 
   private filterOptions(): void {
     const text = (this.inputValue ?? '').toLowerCase();
-    this.filteredOptions = text ? this.options.filter((o) => o.value?.toLowerCase().includes(text)) : [...this.options];
+    this.filteredOptions = text
+      ? this.options.filter((o) => o.value?.toLowerCase().includes(text))
+      : [...this.options];
   }
 
   private loadOptions(): void {
@@ -179,21 +194,34 @@ export class AutoCompleteComponent implements OnInit, OnChanges {
 
     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 })));
+      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) : {};
+        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 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] ?? ''),
-          }));
+          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(() => {
@@ -207,7 +235,9 @@ export class AutoCompleteComponent implements OnInit, OnChanges {
     this.updateDisplayValue();
   }
 
-  private flattenParameters(params: Record<string, any> = {}): Record<string, unknown> {
+  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];
@@ -216,10 +246,15 @@ export class AutoCompleteComponent implements OnInit, OnChanges {
     return flat;
   }
 
-  private preProcessColumns(columnList: Array<Record<string, string>>): Array<Record<string, string>> {
+  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;
+      temp.value =
+        col.value && col.value.startsWith('.')
+          ? col.value.substring(1)
+          : col.value;
       return temp;
     });
   }
@@ -229,7 +264,9 @@ export class AutoCompleteComponent implements OnInit, OnChanges {
     primary: string;
     secondary: string[];
   } {
-    const displayColumns = columnList.filter((col) => col['display'] === 'true');
+    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';

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

@@ -8,7 +8,7 @@
 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';
+import { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-checkbox',
@@ -30,7 +30,10 @@ import { handleEvent } from '../../../helpers/event-utils';
         {{ label }}
         <span *ngIf="required" style="color: #dc2626;">*</span>
       </label>
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -72,7 +75,9 @@ export class CheckboxComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onCheckChange(event: Event): void {

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

@@ -9,7 +9,7 @@ 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 { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-currency',
@@ -17,11 +17,19 @@ import { handleEvent } from '../../../helpers/event-utils';
   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
+        *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>
+        <span style="margin-right: 0.25rem; font-size: 0.875rem;">{{
+          currencySymbol
+        }}</span>
         <input
           type="number"
           step="0.01"
@@ -32,10 +40,15 @@ import { handleEvent } from '../../../helpers/event-utils';
           [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'"
+          [style.border]="
+            validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+          "
         />
       </div>
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -85,7 +98,9 @@ export class CurrencyComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onBlur(event: Event): void {

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

@@ -9,7 +9,7 @@ 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 { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-date-input',
@@ -17,8 +17,14 @@ import { handleEvent } from '../../../helpers/event-utils';
   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
+        *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"
@@ -28,9 +34,14 @@ import { handleEvent } from '../../../helpers/event-utils';
         [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'"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
       />
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -76,7 +87,9 @@ export class DateInputComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onDateChange(event: Event): void {

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

@@ -9,7 +9,7 @@ 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 { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-dropdown',
@@ -17,8 +17,14 @@ import { handleEvent } from '../../../helpers/event-utils';
   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
+        *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"
@@ -26,16 +32,25 @@ import { handleEvent } from '../../../helpers/event-utils';
         [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'"
+        [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">
+        <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;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -89,7 +104,9 @@ export class DropdownComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onSelectChange(event: Event): void {

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

@@ -9,7 +9,7 @@ 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 { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-email',
@@ -17,8 +17,14 @@ import { handleEvent } from '../../../helpers/event-utils';
   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
+        *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"
@@ -29,9 +35,14 @@ import { handleEvent } from '../../../helpers/event-utils';
         [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'"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
       />
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -79,7 +90,9 @@ export class EmailComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onBlur(event: Event): void {

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

@@ -9,7 +9,7 @@ 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 { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-integer',
@@ -17,8 +17,14 @@ import { handleEvent } from '../../../helpers/event-utils';
   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
+        *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"
@@ -30,9 +36,14 @@ import { handleEvent } from '../../../helpers/event-utils';
         [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'"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
       />
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -80,7 +91,9 @@ export class IntegerComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onBlur(event: Event): void {