@pega/angular-sdk-overrides 0.26.1 → 0.26.3

package/lib/field/date-time/date-time.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <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>
         <input
           matInput
@@ -18,6 +18,7 @@
         />
         <mat-datepicker-toggle matSuffix [owlDateTimeTrigger]="dtPicker"></mat-datepicker-toggle>
         <owl-date-time #dtPicker [disabled]="bDisabled$" [scrollStrategy]="scrollStrategy"></owl-date-time>
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/date-time/date-time.component.scss

@@ -20,61 +20,67 @@
     width: auto;
   }
 
-  .mat-datepicker-content,
-  .time-container {
-    box-shadow:
-      0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-      0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-      0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-    display: block;
-    border-radius: 4px;
-    background-color: var(--mat-datepicker-calendar-container-background-color);
-    color: var(--mat-datepicker-calendar-container-text-color);
+  .owl-dt-container {
+    background-color: var(--mat-sys-surface-container);
+    color: var(--mat-sys-on-surface);
   }
 
-  .mat-calendar-body-cell-content {
-    color: var(--mat-datepicker-calendar-date-text-color);
-    border-color: var(--mat-datepicker-calendar-date-outline-color);
+  .owl-dt-container-row,
+  .owl-dt-container-info .owl-dt-container-range:last-child {
+    border-color: var(--mat-sys-outline-variant);
   }
 
-  .mat-calendar-body-selected {
-    background-color: var(--mat-datepicker-calendar-date-selected-state-background-color);
-    color: var(--mat-datepicker-calendar-date-selected-state-text-color);
+  .owl-dt-calendar-control,
+  .owl-dt-calendar-table .owl-dt-calendar-cell {
+    color: var(--mat-sys-on-surface);
   }
 
-  .mat-calendar-body-cell-content {
-    border: none !important;
+  .owl-dt-calendar-table .owl-dt-calendar-header,
+  .owl-dt-calendar-table .owl-dt-calendar-cell-disabled > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) {
+    color: var(--mat-sys-on-surface-variant);
   }
 
-  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover
-    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
-    background-color: var(--mat-datepicker-calendar-date-hover-state-background-color);
+  .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-calendar-table-divider::after {
+    background-color: var(--mat-sys-outline-variant);
   }
 
-  .mat-calendar-arrow {
-    fill: var(--mat-datepicker-calendar-period-button-icon-color);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) {
+    border-color: var(--mat-sys-outline);
   }
 
-  .mat-calendar-table-header th {
-    text-align: center;
-    padding: 0 0 8px 0;
-    color: var(--mat-datepicker-calendar-header-text-color);
-    font-size: var(--mat-datepicker-calendar-header-text-size);
-    font-weight: var(--mat-datepicker-calendar-header-text-weight);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-selected {
+    background-color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
   }
 
-  .mat-datepicker-content .mat-calendar-previous-button,
-  .mat-datepicker-content .mat-calendar-next-button {
-    color: var(--mat-datepicker-calendar-navigation-button-icon-color);
+  .owl-dt-calendar-table .owl-dt-calendar-cell-active:focus > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
+  .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected),
+  .owl-dt-calendar-control .owl-dt-calendar-control-content .owl-dt-calendar-control-button:hover,
+  .owl-dt-control-period-button:hover > .owl-dt-control-button-content,
+  .owl-dt-container-control-button:hover .owl-dt-control-button-content,
+  .owl-dt-control:focus > .owl-dt-control-content {
+    background-color: var(--mat-sys-surface-container-high);
   }
 
-  .mat-calendar-table-header-divider::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: -8px;
-    right: -8px;
-    height: 1px;
-    background: var(--mat-datepicker-calendar-header-divider-color);
+  .owl-dt-timer-content .owl-dt-timer-input {
+    border-color: var(--mat-sys-outline);
+    background-color: var(--mat-sys-surface-container-highest);
+    color: var(--mat-sys-on-surface);
+  }
+
+  .owl-dt-container-buttons,
+  .owl-dt-container-info .owl-dt-container-info-active,
+  .owl-dt-timer-hour12 {
+    color: var(--mat-sys-primary);
+  }
+
+  .owl-dt-control-arrow-button[disabled] {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  .owl-dt-timer-hour12 .owl-dt-timer-hour12-box:focus .owl-dt-control-button-content,
+  .owl-dt-timer-hour12 .owl-dt-timer-hour12-box:hover .owl-dt-control-button-content {
+    background-color: var(--mat-sys-primary);
+    color: var(--mat-sys-on-primary);
   }
 }

package/lib/field/date-time/date-time.component.ts

@@ -9,6 +9,7 @@ import { OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angul
 import dayjs from 'dayjs';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { getDateFormatInfo } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -31,6 +32,7 @@ interface DateTimeProps extends PConnFieldProps {
     MatDatepickerModule,
     OwlDateTimeModule,
     OwlNativeDateTimeModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })

package/lib/field/decimal/decimal.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <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>
         <input
           type="text"
@@ -29,6 +29,7 @@
           (blur)="fieldOnBlur($event)"
           [readonly]="bReadonly$"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/decimal/decimal.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';
@@ -31,6 +32,7 @@ interface DecimalProps extends PConnFieldProps {
     MatFormFieldModule,
     MatInputModule,
     NgxCurrencyDirective,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })

package/lib/field/dropdown/dropdown.component.html

@@ -8,7 +8,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-select
           [value]="value$"
           [required]="bRequired$"
@@ -22,6 +22,7 @@
           </mat-option>
         </mat-select>
         <mat-label>{{ label$ }}</mat-label>
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/dropdown/dropdown.component.ts

@@ -7,6 +7,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import isEqual from 'fast-deep-equal';
 
 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 { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -66,7 +67,15 @@ interface DropdownProps extends PConnFieldProps {
   selector: 'app-dropdown',
   templateUrl: './dropdown.component.html',
   styleUrls: ['./dropdown.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatOptionModule,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
   @Output() onRecordChange: EventEmitter<any> = new EventEmitter();

package/lib/field/email/email.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <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>
         <input
           matInput
@@ -17,6 +17,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/email/email.component.ts

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 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 { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -17,7 +18,7 @@ interface EmailProps extends PConnFieldProps {
   selector: 'app-email',
   templateUrl: './email.component.html',
   styleUrls: ['./email.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class EmailComponent extends FieldBase implements OnInit, OnDestroy {
   configProps$: EmailProps;
@@ -28,7 +29,6 @@ export class EmailComponent extends FieldBase implements OnInit, OnDestroy {
   override updateSelf(): void {
     // Resolve configuration properties
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as EmailProps;
-
     // Update component common properties
     this.updateComponentCommonProperties(this.configProps$);
 

package/lib/field/field.base.ts

@@ -3,6 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
+import type { PConnFieldProps } from '../../_types/PConnProps.interface';
 
 @Directive()
 export class FieldBase implements OnInit, OnDestroy {
@@ -31,6 +32,10 @@ export class FieldBase implements OnInit, OnDestroy {
   bDisabled$ = false;
   bVisible$ = true;
   displayMode$ = '';
+  bFieldMessageVisible$ = false;
+  fieldMessage = '';
+
+  private defaultHelperText = '';
 
   /**
    * Initializes the component, registers with AngularPConnect, and sets up form control.
@@ -101,7 +106,7 @@ export class FieldBase implements OnInit, OnDestroy {
     this.label$ = label;
     this.hideLabel = hideLabel;
     this.displayMode$ = displayMode;
-    this.helperText = helperText;
+    this.defaultHelperText = helperText ?? '';
     this.placeholder = placeholder || '';
 
     // Convert boolean properties
@@ -113,10 +118,27 @@ export class FieldBase implements OnInit, OnDestroy {
     // Enable or disable field control
     this.fieldControl[this.bDisabled$ ? 'disable' : 'enable']();
 
+    this.updateFieldMessage(configProps);
+
     // Display error message if validation message exists
     this.displayValidationMessage();
   }
 
+  /**
+   * Updates the contextual field message state for fields that support it.
+   *
+   * @param configProps The resolved field configuration.
+   */
+  protected updateFieldMessage(configProps: Pick<PConnFieldProps, 'messageConfig' | 'showFieldMessage'>): void {
+    const { messageConfig = {}, showFieldMessage } = configProps;
+    const isVisible = this.utils.getBooleanValue(messageConfig.visibility);
+    const shouldShowFieldMessage = this.utils.getBooleanValue(showFieldMessage) && isVisible && !this.bReadonly$;
+
+    this.bFieldMessageVisible$ = shouldShowFieldMessage;
+    this.fieldMessage = shouldShowFieldMessage ? (messageConfig.content ?? '') : '';
+    this.updateHelperText();
+  }
+
   /**
    * Displays the validation message if it exists.
    */
@@ -129,6 +151,10 @@ export class FieldBase implements OnInit, OnDestroy {
     }
   }
 
+  private updateHelperText(): void {
+    this.helperText = this.bFieldMessageVisible$ ? this.fieldMessage : this.defaultHelperText;
+  }
+
   /**
    * Retrieves the error message for the current field control.
    *

package/lib/field/group/group.component.html

@@ -3,7 +3,7 @@
     name="FieldGroup"
     [props]="{
       name: showHeading$ ? heading$ : undefined,
-      collapsible: collapsible$,
+      collapseOnLoad: configProps$.collapseOnLoad,
       instructions: instructions$,
       childrenTemplate: childrenTemplate
     }"

package/lib/field/group/group.component.ts

@@ -10,7 +10,7 @@ interface GroupProps extends PConnFieldProps {
   showHeading: boolean;
   heading: string;
   instructions: string;
-  collapsible: boolean;
+  collapseOnLoad?: 'none' | 'expanded' | 'collapsed';
 }
 
 @Component({
@@ -32,7 +32,6 @@ export class GroupComponent implements OnInit, OnDestroy {
   showHeading$?: boolean;
   heading$: string;
   instructions$: string;
-  collapsible$: boolean;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -74,7 +73,6 @@ export class GroupComponent implements OnInit, OnDestroy {
     this.showHeading$ = this.configProps$.showHeading;
     this.heading$ = this.configProps$.heading;
     this.instructions$ = this.configProps$.instructions;
-    this.collapsible$ = this.configProps$.collapsible;
 
     if (this.configProps$.visibility === undefined) {
       this.visibility$ = this.pConn$.getComputedVisibility();

package/lib/field/integer/integer.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <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>
         <input
           matInput
@@ -18,6 +18,7 @@
           (change)="fieldOnChange($event)"
           (blur)="fieldOnBlur($event)"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/integer/integer.component.ts

@@ -5,6 +5,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 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 { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -17,7 +18,7 @@ interface IntegerProps extends PConnFieldProps {
   selector: 'app-integer',
   templateUrl: './integer.component.html',
   styleUrls: ['./integer.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class IntegerComponent extends FieldBase {
   configProps$: IntegerProps;
@@ -57,7 +58,8 @@ export class IntegerComponent extends FieldBase {
 
     if (isValueChanged) {
       const value = event?.target?.value;
-      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+      const normalizedValue = value === '' ? '' : Number(value);
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, normalizedValue);
     }
   }
 }

package/lib/field/location/location.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="mapReady && bVisible$">
   <!-- Google suggestions -->
-  <mat-form-field class="psdk-full-width" [hintLabel]="helperText">
+  <mat-form-field class="psdk-full-width">
     <mat-label>{{ label$ }}</mat-label>
     <input
       matInput
@@ -14,6 +14,7 @@
       (blur)="fieldOnBlur()"
     />
     <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
+    <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
     <button
       mat-icon-button
       matSuffix

package/lib/field/location/location.component.ts

@@ -11,6 +11,7 @@ import { GoogleMapsModule } from '@angular/google-maps';
 import { debounceTime, from, of, switchMap } from 'rxjs';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { GoogleMapsLoaderService } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 
@@ -34,7 +35,8 @@ interface LocationProps extends PConnFieldProps {
     MatIconModule,
     MatInputModule,
     MatProgressSpinnerModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    FieldWarningDirective
   ],
   templateUrl: './location.component.html',
   styleUrl: './location.component.scss'

package/lib/field/object-reference/object-reference.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="bVisible$" [ngSwitch]="renderMode">
   <!-- SingleReferenceReadOnly mode -->
   <div *ngSwitchCase="'singleReferenceReadonly'">
-    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$ }"></component-mapper>
+    <component-mapper name="SingleReferenceReadOnly" [props]="{ pConn$, isDetails$, dataRelationshipContext }"></component-mapper>
   </div>
 
   <!-- MultiReferenceReadonly mode -->

package/lib/field/object-reference/object-reference.component.ts

@@ -46,6 +46,7 @@ type RenderMode = 'singleReferenceReadonly' | 'multiReferenceReadonly' | 'semant
 export class ObjectReferenceComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
+  @Input() isDetails$ = false;
 
   angularPConnectData: AngularPConnectData = {};
   configProps: ObjectReferenceProps;
@@ -56,6 +57,7 @@ export class ObjectReferenceComponent implements OnInit, OnDestroy {
   newComponentName: string;
   newPconn: typeof PConnect;
   rawViewMetadata: ComponentMetadataConfig | undefined;
+  dataRelationshipContext: string | null = null;
 
   // Rendering mode
   renderMode: RenderMode = 'dynamicComponent';
@@ -143,6 +145,7 @@ export class ObjectReferenceComponent implements OnInit, OnDestroy {
 
     this.isDisplayModeEnabled = displayMode === 'DISPLAY_ONLY';
     this.type = rawConfig?.componentType;
+    this.dataRelationshipContext = rawConfig?.displayField ? getDataRelationshipContextFromKey(rawConfig.displayField) : null;
     this.canBeChangedInReviewMode = editableInReview && ['AutoComplete', 'Dropdown'].includes(this.type);
 
     if (this.handleReadOnlyMode(rawConfig, mode)) {

package/lib/field/percentage/percentage.component.html

@@ -4,7 +4,7 @@
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$" *ngIf="bVisible$">
-      <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>
         <input
           type="text"
@@ -30,6 +30,7 @@
           (blur)="fieldOnBlur($event)"
           [readonly]="bReadonly$"
         />
+        <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
       </mat-form-field>
     </div>

package/lib/field/percentage/percentage.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 } from '@pega/angular-sdk-components';
@@ -24,7 +25,15 @@ interface PercentageProps extends Omit<PConnFieldProps, 'value'> {
   selector: 'app-percentage',
   templateUrl: './percentage.component.html',
   styleUrls: ['./percentage.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    NgxCurrencyDirective,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class PercentageComponent extends FieldBase {
   configProps$: PercentageProps;

package/lib/field/phone/phone.component.html

@@ -3,7 +3,7 @@
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="bHasForm$ && bVisible$; else noEdit">
-    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
+    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" floatLabel="always">
       <mat-tel-input
         [attr.data-test-id]="testId"
         [formControl]="fieldControl"
@@ -18,6 +18,7 @@
       >
       </mat-tel-input>
       <mat-label>{{ label$ }}</mat-label>
+      <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
       <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     </mat-form-field>
   </div>

package/lib/field/phone/phone.component.ts

@@ -6,6 +6,7 @@ import { MatTelInput } from 'mat-tel-input';
 import { parsePhoneNumberFromString } from 'libphonenumber-js';
 
 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 { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -18,7 +19,7 @@ interface PhoneProps extends PConnFieldProps {
   selector: 'app-phone',
   templateUrl: './phone.component.html',
   styleUrls: ['./phone.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class PhoneComponent extends FieldBase {
   configProps$: PhoneProps;

package/lib/field/radio-buttons/radio-buttons.component.html

@@ -9,7 +9,7 @@
 </div>
 <ng-template #noDisplayMode>
   <div [formGroup]="formGroup$" *ngIf="bVisible$">
-    <mat-form-field class="psdk-radio-form" subscriptSizing="dynamic" [hintLabel]="helperText">
+    <mat-form-field class="psdk-radio-form" subscriptSizing="dynamic">
       <mat-label>{{ label$ }}</mat-label>
       <input matInput [placeholder]="placeholder" style="display: none" [required]="bRequired$" />
       <mat-radio-group
@@ -30,6 +30,7 @@
           {{ getLocalizedOptionValue(opt) }}
         </mat-radio-button>
       </mat-radio-group>
+      <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
       <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
     </mat-form-field>
   </div>

package/lib/field/radio-buttons/radio-buttons.component.ts

@@ -6,6 +6,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -28,7 +29,15 @@ interface RadioButtonsProps extends PConnFieldProps {
   templateUrl: './radio-buttons.component.html',
   styleUrls: ['./radio-buttons.component.scss'],
   providers: [Utils],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatRadioModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class RadioButtonsComponent extends FieldBase {
   configProps$: RadioButtonsProps;