@pega/angular-sdk-overrides 25.1.12 → 26.1.10

package/lib/field/auto-complete/auto-complete.component.ts

@@ -1,23 +1,39 @@
-import { Component, EventEmitter, OnInit, Output, forwardRef, inject } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, ViewChild, forwardRef, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatOptionModule } from '@angular/material/core';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatAutocompleteModule, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
 import { Observable } from 'rxjs';
 import { map, startWith } from 'rxjs/operators';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DatapageService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
-interface IOption {
+interface AutoCompleteOption {
   key: string;
   value: string;
+  // Present only when at least one secondary column resolves to a non-empty value
+  secondaryComponents?: any[];
+  secondarySearchText?: string;
+  // Present only when a group-by field is configured for this (datapage-sourced) field
+  group?: string;
 }
+
+// Internal, render-time-only view-model — never part of the PConnect contract
+interface AutoCompleteGroup {
+  label: string;
+  options: AutoCompleteOption[];
+}
+
 interface AutoCompleteProps extends PConnFieldProps {
   // If any, enter additional props that only exist on AutoComplete here
   deferDatasource?: boolean;
@@ -28,6 +44,12 @@ interface AutoCompleteProps extends PConnFieldProps {
   parameters?: any;
   datasource: any;
   columns: any[];
+  allowCreatingRecords?: boolean;
+  onCreateNew?: () => void;
+  createNewLabel?: string;
+  createNewRecord?: () => Promise<unknown>;
+  contextClass?: string;
+  referenceType?: string;
 }
 
 @Component({
@@ -41,6 +63,10 @@ interface AutoCompleteProps extends PConnFieldProps {
     MatInputModule,
     MatAutocompleteModule,
     MatOptionModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDividerModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ],
   providers: [DatapageService]
@@ -50,15 +76,29 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
 
   @Output() onRecordChange: EventEmitter<any> = new EventEmitter();
 
+  @ViewChild(MatAutocompleteTrigger) private autocompleteTrigger?: MatAutocompleteTrigger;
+
   configProps$: AutoCompleteProps;
 
-  options$: any[];
+  options$: AutoCompleteOption[];
   listType: string;
-  columns = [];
+  columns: any[] = [];
   parameters: {};
-  filteredOptions: Observable<any[]>;
+  datasource: any;
+  filteredOptions: Observable<AutoCompleteOption[]>;
+  // Grouped view of filteredOptions, only rendered when hasGroupBy is true
+  groupedFilteredOptions$: Observable<AutoCompleteGroup[]>;
+  hasGroupBy = false;
   filterValue = '';
 
+  // "Create new" footer button state
+  showCreateButton = false;
+  createNewLabel = 'Create new';
+  contextClass?: string;
+  referenceType?: string;
+  private onCreateNewFn?: () => void;
+  private createNewRecordFn?: () => Promise<unknown>;
+
   // Override ngOnInit method
   override async ngOnInit(): Promise<void> {
     super.ngOnInit();
@@ -67,18 +107,36 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
       startWith(''),
       map(value => this._filter((value as string) || ''))
     );
+
+    this.groupedFilteredOptions$ = this.filteredOptions.pipe(map(options => this.buildGroups(options)));
   }
 
-  setOptions(options: IOption[]) {
+  setOptions(options: AutoCompleteOption[]) {
     this.options$ = options;
     const index = this.options$?.findIndex(element => element.key === this.configProps$.value);
     this.value$ = index > -1 ? this.options$[index].value : this.configProps$.value;
     this.fieldControl.setValue(this.value$);
   }
 
-  private _filter(value: string): string[] {
+  // Matches only primary text and secondary search text — group value is never used for search
+  private _filter(value: string): AutoCompleteOption[] {
     const filterVal = (value || this.filterValue).toLowerCase();
-    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal));
+    return this.options$?.filter(option => option.value?.toLowerCase().includes(filterVal) || option.secondarySearchText?.includes(filterVal));
+  }
+
+  // Buckets the already-sorted option list into contiguous groups by exact group value
+  buildGroups(options: AutoCompleteOption[]): AutoCompleteGroup[] {
+    const groups: AutoCompleteGroup[] = [];
+    options?.forEach(option => {
+      const label = option.group ?? '';
+      const lastGroup = groups[groups.length - 1];
+      if (lastGroup && lastGroup.label === label) {
+        lastGroup.options.push(option);
+      } else {
+        groups.push({ label, options: [option] });
+      }
+    });
+    return groups;
   }
 
   /**
@@ -92,24 +150,29 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
     this.updateComponentCommonProperties(this.configProps$);
 
     // Set component specific properties
-    const { value, listType, parameters } = this.configProps$;
-
-    if (value != undefined) {
-      const index = this.options$?.findIndex(element => element.key === value);
-      this.value$ = index > -1 ? this.options$[index].value : value;
-      this.fieldControl.setValue(this.value$);
-    }
+    const { value, listType, parameters, allowCreatingRecords, onCreateNew, createNewLabel, createNewRecord, contextClass, referenceType } =
+      this.configProps$;
 
     this.listType = listType;
     this.parameters = parameters;
 
+    this.showCreateButton = allowCreatingRecords === true;
+    this.createNewLabel = createNewLabel || 'Create new';
+    this.contextClass = contextClass;
+    this.referenceType = referenceType;
+    this.onCreateNewFn = onCreateNew;
+    this.createNewRecordFn = createNewRecord;
+
     const context = this.pConn$.getContextName();
     const { columns, datasource } = this.generateColumnsAndDataSource();
+    this.datasource = datasource;
 
     if (columns) {
       this.columns = this.preProcessColumns(columns);
     }
 
+    this.hasGroupBy = this.columns?.some(col => col.groupBy === 'true') ?? false;
+
     if (this.listType === 'associated') {
       const optionsList = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject('')); // 1st arg empty string until typedef marked correctly
       this.setOptions(optionsList);
@@ -119,6 +182,12 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
       const results = await this.dataPageService.getDataPageData(datasource, this.parameters, context);
       this.fillOptions(results);
     }
+
+    if (value != undefined) {
+      const index = this.options$?.findIndex(element => element.key === value);
+      this.value$ = index > -1 ? this.options$[index].value : value;
+      this.fieldControl.setValue(this.value$);
+    }
   }
 
   generateColumnsAndDataSource() {
@@ -150,22 +219,157 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
       ];
     }
 
+    // Secondary text and grouping are both out of scope for associated/local list options
+    if (this.listType !== 'associated') {
+      const secondaryColumns = this.getSecondaryColumnsFromMetadata();
+      if (secondaryColumns.length > 0) {
+        columns = [...(columns || []), ...secondaryColumns];
+      }
+
+      const groupByColumns = this.getGroupByColumnsFromMetadata();
+      if (groupByColumns.length > 0) {
+        columns = [...(columns || []), ...groupByColumns];
+      }
+    }
+
     return { columns, datasource };
   }
 
+  // Reads unresolved groupsFields metadata to derive group-by column descriptor(s); not a
+  // display/search column, so grouping stays independent of primary/secondary text
+  getGroupByColumnsFromMetadata() {
+    const groupsFields = (this.pConn$.getRawMetadata()?.config as any)?.groupsFields;
+    if (!Array.isArray(groupsFields)) {
+      return [];
+    }
+    return this.mapMetadataColumns(groupsFields, { display: 'false', groupBy: 'true', useForSearch: false });
+  }
+
+  // Reads unresolved columnsFormatter metadata to derive secondary (contextual) display columns
+  getSecondaryColumnsFromMetadata() {
+    const columnsFormatter = (this.pConn$.getRawMetadata()?.config as any)?.columnsFormatter;
+    if (!Array.isArray(columnsFormatter)) {
+      return [];
+    }
+    return this.mapMetadataColumns(columnsFormatter, { display: 'true', secondary: 'true', useForSearch: true });
+  }
+
+  // Shared by getSecondaryColumnsFromMetadata/getGroupByColumnsFromMetadata: value must stay an
+  // unresolved property reference (e.g. "@P .propName") for use as a raw-row lookup key
+  mapMetadataColumns(rawColumns: any[], columnFlags: object): any[] {
+    return rawColumns
+      .map(item => {
+        const property = item?.config?.value;
+        if (typeof property !== 'string' || !property) {
+          return undefined;
+        }
+        let value = property;
+        if (property.startsWith('@P ')) {
+          value = property.substring(3);
+        } else if (property.startsWith('@USER ')) {
+          value = property.substring(6);
+        }
+        return { value, type: item?.type, label: item?.config?.label, ...columnFlags };
+      })
+      .filter(Boolean);
+  }
+
   fillOptions(results: any) {
-    const optionsData: any[] = [];
+    const optionsData: AutoCompleteOption[] = [];
     const displayColumn = this.getDisplayFieldsMetaData(this.columns);
+    const secondaryColumns = this.columns?.filter(col => col.display === 'true' && col.secondary === 'true') || [];
+    const groupByColumn = this.columns?.find(col => col.groupBy === 'true');
+
     results?.forEach(element => {
-      const obj = {
+      const obj: AutoCompleteOption = {
         key: element[displayColumn.key] || element.pyGUID,
         value: element[displayColumn.primary]?.toString()
       };
+
+      if (secondaryColumns.length > 0) {
+        const secondaryComponents = this.buildSecondaryComponents(element, secondaryColumns);
+        if (secondaryComponents.length > 0) {
+          obj.secondaryComponents = secondaryComponents;
+        }
+
+        const secondarySearchText = this.buildSecondarySearchText(element, secondaryColumns);
+        if (secondarySearchText) {
+          obj.secondarySearchText = secondarySearchText;
+        }
+      }
+
+      if (groupByColumn) {
+        obj.group = this.resolveGroupValue(element[groupByColumn.value as string]);
+      }
+
       optionsData.push(obj);
     });
+
+    if (groupByColumn) {
+      this.sortByGroup(optionsData);
+    }
+
     this.setOptions(optionsData);
   }
 
+  // Null/undefined/whitespace-only source values normalize to '' — the shared blank group
+  resolveGroupValue(rawValue: any): string {
+    if (rawValue === null || rawValue === undefined) {
+      return '';
+    }
+    const stringValue = rawValue.toString();
+    return stringValue.trim() ? stringValue : '';
+  }
+
+  // Ascending, case-sensitive, stable sort so same-group options keep their original relative order
+  sortByGroup(options: AutoCompleteOption[]): void {
+    options.sort((a, b) => {
+      const groupA = a.group ?? '';
+      const groupB = b.group ?? '';
+      if (groupA < groupB) {
+        return -1;
+      }
+      if (groupA > groupB) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+
+  // Rendering only — one read-only PConnect component per configured secondary field, in
+  // configured order, regardless of whether its value is empty (FieldValueList's own
+  // empty-value fallback renders the placeholder, e.g. "Label: ---"). Mirrors ScalarListComponent's
+  // createComponent/DISPLAY_ONLY pattern.
+  buildSecondaryComponents(element: any, secondaryColumns): any[] {
+    return secondaryColumns.map(col =>
+      this.pConn$.createComponent(
+        {
+          type: col.type,
+          config: {
+            value: element[col.value as string],
+            displayMode: 'DISPLAY_ONLY',
+            readOnly: true,
+            label: col.label
+          }
+        },
+        '',
+        0,
+        {}
+      )
+    ); // 2nd, 3rd, and 4th args empty string/object/null until typedef marked correctly as optional
+  }
+
+  // Search only — independent of buildSecondaryComponents; never derived from rendered output.
+  buildSecondarySearchText(element: any, secondaryColumns): string {
+    return secondaryColumns
+      .map(col => {
+        const rawValue = element[col.value as string];
+        return rawValue === null || rawValue === undefined ? '' : rawValue.toString().trim().toLowerCase();
+      })
+      .filter(Boolean)
+      .join(' ');
+  }
+
   flattenParameters(params = {}) {
     const flatParams = {};
     Object.keys(params).forEach(key => {
@@ -180,12 +384,12 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
     const displayColumns = columnList.filter(col => col.display === 'true');
     const metaDataObj: any = { key: '', primary: '', secondary: [] };
     const keyCol = columnList.filter(col => col.key === 'true');
-    metaDataObj.key = keyCol.length > 0 ? keyCol[0].value : 'auto';
+    metaDataObj.key = keyCol.length > 0 ? (keyCol[0].value ?? 'auto') : 'auto';
     for (let index = 0; index < displayColumns.length; index += 1) {
       if (displayColumns[index].primary === 'true') {
-        metaDataObj.primary = displayColumns[index].value;
-      } else {
-        metaDataObj.secondary.push(displayColumns[index].value);
+        metaDataObj.primary = displayColumns[index].value ?? '';
+      } else if (displayColumns[index].secondary === 'true') {
+        metaDataObj.secondary.push(displayColumns[index].value ?? '');
       }
     }
     return metaDataObj;
@@ -211,7 +415,7 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
     let key = '';
     if (val) {
       const index = this.options$?.findIndex(element => element.value === val);
-      key = index > -1 ? (key = this.options$[index].key) : val;
+      key = index > -1 ? this.options$[index].key : val;
     }
     const value = key;
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
@@ -220,4 +424,127 @@ export class AutoCompleteComponent extends FieldBase implements OnInit {
       this.onRecordChange.emit(value);
     }
   }
+
+  // Re-fetches the options list
+  refreshOptionsList(): void {
+    if (!this.displayMode$ && this.listType !== 'associated') {
+      const context = this.pConn$.getContextName();
+      this.dataPageService
+        .getDataPageData(this.datasource, this.parameters, context)
+        .then((results: any) => this.fillOptions(results))
+        .catch(e => console.error(e));
+    }
+  }
+
+  // Sets values for all columns that have setProperty defined
+  setValuesToAdditionalFields(record: Record<string, unknown>): void {
+    const setPropertyList = this.columns.filter(col => col.setProperty).map(col => ({ source: col.value, target: col.setProperty, key: col.key }));
+
+    setPropertyList.forEach(prop => {
+      let valueToSet: string;
+      if (prop.key === 'true') {
+        valueToSet = record[prop.source]?.toString() || (record as any).pyGUID || '';
+      } else {
+        valueToSet = record[prop.source]?.toString() || '';
+      }
+
+      if (prop.target === 'Associated property') {
+        handleEvent(this.actionsApi, 'changeNblur', this.propName, valueToSet);
+      } else {
+        const target = typeof prop.target === 'string' ? prop.target : '';
+        const targetProp = target.startsWith('.') ? target : `.${target}`;
+        (this.actionsApi as any).updateFieldValue(targetProp, valueToSet, { associatedProperty: this.propName });
+        (this.actionsApi as any).triggerFieldChange(targetProp, valueToSet);
+      }
+    });
+  }
+
+  createNewButtonHandler(): void {
+    // Close the options panel so it doesn't remain open on top of the create-new modal
+    this.autocompleteTrigger?.closePanel();
+
+    if (this.onCreateNewFn) {
+      this.onCreateNewFn();
+      return;
+    }
+
+    if (!this.contextClass) {
+      return;
+    }
+
+    const context = this.pConn$.getContextName();
+    const normalizedReferenceType = typeof this.referenceType === 'string' ? this.referenceType.toLowerCase() : '';
+    const isDataReference = normalizedReferenceType === 'data';
+    const { CREATE_STAGE_DONE } = PCore.getConstants().PUB_SUB_EVENTS.CASE_EVENTS;
+    const DATA_OBJECT_CREATED = (PCore.getConstants().PUB_SUB_EVENTS as any).DATA_EVENTS?.DATA_OBJECT_CREATED;
+    const eventType = isDataReference && DATA_OBJECT_CREATED ? DATA_OBJECT_CREATED : CREATE_STAGE_DONE;
+    const contextClass = this.contextClass;
+
+    const createNewCallback = isDataReference
+      ? (data: { data?: { responseData?: Record<string, unknown> } }) => {
+          // Clear contexted cache before re-fetching
+          PCore.getDataApi().clearContextedCache(context);
+
+          const responseData = data?.data?.responseData;
+          if (responseData) {
+            this.setValuesToAdditionalFields(responseData);
+            const displayColumn = this.getDisplayFieldsMetaData(this.columns);
+            const newKey = responseData[displayColumn.key]?.toString() || (responseData as any).pyGUID;
+            if (this.onRecordChange && newKey) {
+              this.onRecordChange.emit({ id: newKey });
+            }
+          }
+
+          this.refreshOptionsList();
+          PCore.getPubSubUtils().unsubscribe(eventType, contextClass);
+        }
+      : (data: { caseId?: string; caseType?: string; ID?: string }) => {
+          // Clear contexted cache before re-fetching
+          PCore.getDataApi().clearContextedCache(context);
+
+          const newCaseId = data.caseId?.split(' ').pop();
+          if (data.caseType === contextClass) {
+            const selectKey = data.ID || newCaseId;
+
+            if (selectKey && this.listType !== 'associated' && this.datasource) {
+              this.dataPageService
+                .getDataPageData(this.datasource, this.parameters, context)
+                .then((results: any) => {
+                  this.fillOptions(results);
+
+                  const displayColumn = this.getDisplayFieldsMetaData(this.columns);
+                  const newRecord = results?.find((el: any) => el.ID === data.ID || (el[displayColumn.key] || el.pyGUID) === selectKey);
+                  if (newRecord) {
+                    this.setValuesToAdditionalFields(newRecord);
+                  } else {
+                    handleEvent(this.actionsApi, 'changeNblur', this.propName, selectKey);
+                  }
+                  if (this.onRecordChange) {
+                    this.onRecordChange.emit({ id: selectKey });
+                  }
+                })
+                .catch(e => console.error(e));
+            }
+            PCore.getPubSubUtils().unsubscribe(eventType, contextClass);
+          }
+        };
+
+    // Build the create action if createNewRecord fn is not provided
+    const triggerCreate = this.createNewRecordFn
+      ? this.createNewRecordFn()
+      : isDataReference
+        ? this.pConn$.getActionsApi().showDataObjectCreateView(contextClass)
+        : this.pConn$.getActionsApi().createWork(contextClass, {
+            openCaseViewAfterCreate: false,
+            startingFields: {}
+          });
+
+    Promise.resolve(triggerCreate)
+      .then(() => {
+        PCore.getPubSubUtils().subscribe(eventType, createNewCallback, contextClass);
+        // Re-initialize the list
+        this.refreshOptionsList();
+      })
+      .catch(e => console.error(e));
+  }
 }

package/lib/field/cancel-alert/cancel-alert.component.ts

@@ -14,6 +14,9 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 export class CancelAlertComponent implements OnChanges {
   @Input() pConn$: typeof PConnect;
   @Input() bShowAlert$: boolean;
+  @Input() hideDelete: boolean;
+  @Input() isDataObject: boolean;
+  @Input() skipReleaseLockRequest: any;
   @Output() onAlertState$: EventEmitter<boolean> = new EventEmitter<boolean>();
 
   itemKey: string;
@@ -61,7 +64,6 @@ export class CancelAlertComponent implements OnChanges {
   }
 
   buttonClick({ action }) {
-    const actionsAPI = this.pConn$.getActionsApi();
     this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
 
     switch (action) {
@@ -70,23 +72,44 @@ export class CancelAlertComponent implements OnChanges {
         break;
       case 'discard':
         this.psService.sendMessage(true);
-
-        // eslint-disable-next-line no-case-declarations
-        const deletePromise = actionsAPI.deleteCaseInCreateStage(this.itemKey);
-
-        deletePromise
-          .then(() => {
-            this.psService.sendMessage(false);
-            this.dismissAlert();
-            PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
-          })
-          .catch(() => {
-            this.psService.sendMessage(false);
-            this.sendMessage(this.localizedVal('Delete failed.', this.localeCategory));
-          });
+        this.handleDiscard();
         break;
       default:
         break;
     }
   }
+
+  // Data objects and local/bulk actions don't have a create-stage case to delete, so each needs its own engine API
+  handleDiscard() {
+    const actionsAPI = this.pConn$.getActionsApi();
+    // @ts-ignore - Property 'options' is private and only accessible within class 'C11nEnv'.
+    const isBulkAction = (this.pConn$ as any)?.options?.isBulkAction;
+    const isLocalAction = this.pConn$.getValue(PCore.getConstants().CASE_INFO.IS_LOCAL_ACTION);
+
+    if (!this.isDataObject && !isLocalAction && !isBulkAction) {
+      actionsAPI
+        .deleteCaseInCreateStage(this.itemKey, this.hideDelete)
+        .then(() => {
+          this.psService.sendMessage(false);
+          this.dismissAlert();
+          PCore.getPubSubUtils().publish(PCore.getConstants().PUB_SUB_EVENTS.EVENT_CANCEL);
+        })
+        .catch(() => {
+          this.psService.sendMessage(false);
+          this.sendMessage(this.localizedVal('Delete failed.', this.localeCategory));
+        });
+    } else if (isLocalAction) {
+      this.psService.sendMessage(false);
+      this.dismissAlert();
+      actionsAPI.cancelAssignment(this.itemKey, false);
+    } else if (isBulkAction) {
+      this.psService.sendMessage(false);
+      this.dismissAlert();
+      actionsAPI.cancelBulkAction(this.itemKey);
+    } else {
+      this.psService.sendMessage(false);
+      this.dismissAlert();
+      this.pConn$.getContainerManager().removeContainerItem({ containerItemID: this.itemKey, skipReleaseLockRequest: this.skipReleaseLockRequest });
+    }
+  }
 }

package/lib/field/check-box/check-box.component.html

@@ -12,13 +12,13 @@
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
       <div class="mat-form-field-infix" *ngIf="showLabel$">
         <span>
-          <label class="mat-form-field-label psdk-label-readonly" [ngClass]="{ 'label-required': bRequired$ && selectionMode === 'multi' }">{{
-            label$
-          }}</label>
+          <label class="mat-form-field-label psdk-label-readonly" [ngClass]="{ 'label-required': bRequired$ && selectionMode === 'multi' }">
+            {{ label$ }}</label
+          >
         </span>
       </div>
       <div *ngIf="selectionMode === 'multi'; else single">
-        <mat-option *ngFor="let item of listOfCheckboxes" (click)="handleChangeMultiMode($event, item)">
+        <div class="mat-mdc-option" *ngFor="let item of listOfCheckboxes">
           <mat-checkbox
             [labelPosition]="'after'"
             [checked]="item.selected"
@@ -28,7 +28,7 @@
             (blur)="fieldOnBlur($event)"
             >{{ item.text ?? item.value }}
           </mat-checkbox>
-        </mat-option>
+        </div>
       </div>
       <ng-template #single>
         <mat-checkbox
@@ -42,7 +42,9 @@
           (blur)="fieldOnBlur($event)"
           ><span [ngClass]="{ 'label-required': bRequired$ }">{{ caption$ }}</span></mat-checkbox
         >
-        <p *ngIf="helperText">{{ helperText }}</p>
+        <p *ngIf="helperText && !(fieldControl.invalid && (fieldControl.touched || fieldControl.dirty))" [appFieldWarning]="bFieldMessageVisible$">
+          {{ helperText }}
+        </p>
       </ng-template>
       <mat-error *ngIf="fieldControl.invalid && (fieldControl.touched || fieldControl.dirty)">{{ getErrorMessage() }}</mat-error>
     </div>

package/lib/field/check-box/check-box.component.ts

@@ -3,9 +3,9 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatOptionModule } from '@angular/material/core';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
@@ -33,7 +33,14 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   selector: 'app-check-box',
   templateUrl: './check-box.component.html',
   styleUrls: ['./check-box.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule, MatFormFieldModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatCheckboxModule,
+    MatFormFieldModule,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class CheckBoxComponent extends FieldBase implements OnInit, OnDestroy {
   configProps$: CheckboxProps;

package/lib/field/currency/currency.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$" class="psdk-currency-field">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <div class="psdk-currency-input">
           <input
@@ -30,6 +30,7 @@
             [readonly]="bReadonly$"
           />
         </div>
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/currency/currency.component.ts

@@ -6,6 +6,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { NgxCurrencyDirective, NgxCurrencyInputMode } from 'ngx-currency';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/angular-sdk-components';
@@ -23,7 +24,15 @@ interface CurrrencyProps extends PConnFieldProps {
   selector: 'app-currency',
   templateUrl: './currency.component.html',
   styleUrls: ['./currency.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    NgxCurrencyDirective,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class CurrencyComponent extends FieldBase {
   configProps$: CurrrencyProps;