@pega/angular-sdk-overrides 25.1.12 → 26.1.10

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;

package/lib/field/rich-text/rich-text.component.scss

@@ -2,171 +2,6 @@
 
 :host {
   display: block;
-  background-color: var(--mat-sys-surface, #fff);
+  background-color: transparent;
   color: var(--mat-sys-on-surface, #000);
 }
-
-::ng-deep {
-  .tox-tinymce {
-    border: 1px solid var(--mat-sys-outline, #ccc) !important;
-    border-radius: 4px !important;
-  }
-
-  .tox-edit-area__iframe {
-    background-color: transparent !important;
-  }
-
-  .tox .tox-toolbar,
-  .tox .tox-toolbar__primary,
-  .tox .tox-editor-header {
-    background-color: var(--mat-sys-surface-container-high, #f0f0f0) !important;
-    border-bottom: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-  }
-
-  .tox .tox-tbtn {
-    color: var(--mat-sys-on-surface-variant, #555) !important;
-    background: transparent !important;
-  }
-
-  .tox .tox-tbtn svg {
-    fill: var(--mat-sys-on-surface-variant, #555) !important;
-  }
-
-  .tox .tox-tbtn:hover {
-    background: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05)) !important;
-  }
-
-  .tox .tox-tbtn--enabled,
-  .tox .tox-tbtn--enabled:hover {
-    background: var(--mat-sys-secondary-container, #e8def8) !important;
-    color: var(--mat-sys-on-secondary-container, #1d192b) !important;
-  }
-
-  .tox .tox-tbtn--enabled svg {
-    fill: var(--mat-sys-on-secondary-container, #1d192b) !important;
-  }
-
-  .tox .tox-tbtn--select {
-    background-color: transparent !important;
-    margin: 2px 0;
-  }
-
-  .tox .tox-tbtn__select-label {
-    color: var(--mat-sys-on-surface, #000) !important;
-  }
-
-  .tox .tox-tbtn__select-chevron svg {
-    fill: var(--mat-sys-on-surface-variant, #555) !important;
-  }
-
-  .tox .tox-tbtn--select:hover {
-    background-color: var(--mat-sys-hover-state-layer-opacity, rgba(0, 0, 0, 0.05)) !important;
-  }
-
-  .tox .tox-statusbar {
-    background-color: var(--mat-sys-surface-container-high, #f0f0f0) !important;
-    border-top: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-    color: var(--mat-sys-on-surface-variant, #555) !important;
-  }
-
-  .tox .tox-dialog {
-    background-color: var(--mat-sys-surface-container, #fff) !important;
-    color: var(--mat-sys-on-surface, #000) !important;
-    border: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-    box-shadow: 0 4px 12px var(--mat-sys-shadow, rgba(0, 0, 0, 0.2)) !important;
-  }
-
-  .tox .tox-dialog__header {
-    background-color: var(--mat-sys-surface-container, #fff) !important;
-    color: var(--mat-sys-on-surface, #000) !important;
-    border-bottom: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-  }
-
-  .tox .tox-dialog__footer {
-    background-color: var(--mat-sys-surface-container, #fff) !important;
-    border-top: 1px solid var(--mat-sys-outline-variant, #ccc) !important;
-  }
-
-  .tox .tox-dialog-wrap__backdrop {
-    background-color: var(--mat-sys-scrim, rgba(0, 0, 0, 0.5)) !important;
-    opacity: 0.6;
-  }
-
-  .tox .tox-dialog__body input,
-  .tox .tox-dialog__body textarea,
-  .tox .tox-dialog__body select {
-    background-color: transparent !important;
-    color: var(--mat-sys-on-surface, #000) !important;
-    border: 1px solid var(--mat-sys-outline, #ccc) !important;
-    border-radius: 4px !important;
-  }
-
-  .tox .tox-label {
-    color: var(--mat-sys-on-surface-variant, #555) !important;
-  }
-
-  .tox .tox-button--icon--hover:hover {
-    background-color: var(--mat-sys-hover-state-layer-opacity) !important;
-    color: var(--mat-sys-on-surface) !important;
-  }
-
-  .tox .tox-dialog__footer .tox-button {
-    background-color: var(--mat-sys-primary, #6200ee) !important;
-    color: var(--mat-sys-on-primary, #fff) !important;
-    border: none !important;
-  }
-
-  .tox .tox-dialog__footer .tox-button--secondary {
-    background-color: transparent !important;
-    color: var(--mat-sys-primary, #6200ee) !important;
-    border: 1px solid var(--mat-sys-outline, #ccc) !important;
-  }
-}
-
-::ng-deep {
-  .tox .tox-menu {
-    background-color: var(--mat-sys-surface-container, #2e334f) !important;
-    border: 1px solid var(--mat-sys-outline-variant, #404562) !important;
-    box-shadow: 0 4px 10px var(--mat-sys-shadow, rgba(0, 0, 0, 0.3)) !important;
-  }
-
-  .tox .tox-collection__item {
-    color: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-
-  .tox .tox-collection__item--active {
-    background-color: var(--mat-sys-secondary-container, #810081) !important;
-    color: var(--mat-sys-on-secondary-container, #ffd7f5) !important;
-  }
-
-  .tox .tox-collection__item-icon svg {
-    fill: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-
-  .tox .tox-collection__item-accessory {
-    color: var(--mat-sys-on-surface-variant, #c0c5e7) !important;
-  }
-
-  .tox .tox-swatches__picker-btn {
-    border-color: var(--mat-sys-outline-variant) !important;
-  }
-
-  .tox .tox-listbox {
-    background-color: transparent !important;
-    border: 1px solid var(--mat-sys-outline, #8a8faf) !important;
-    color: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-
-  .tox .tox-listbox__select-chevron svg {
-    fill: var(--mat-sys-on-surface-variant, #c0c5e7) !important;
-  }
-
-  .tox .tox-listbox__select-label {
-    color: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-
-  .tox .tox-listboxfield .tox-listbox--select {
-    background-color: transparent !important;
-    color: var(--mat-sys-on-surface, #dde1ff) !important;
-  }
-}

package/lib/field/rich-text/rich-text.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { RichTextComponent } from './rich-text.component';
 
-describe('RichTextComponent', () => {
+describe('RichTextFieldComponent', () => {
   let component: RichTextComponent;
   let fixture: ComponentFixture<RichTextComponent>;
 

package/lib/field/rich-text/rich-text.component.ts

@@ -46,7 +46,7 @@ export class RichTextComponent extends FieldBase {
 
   fieldOnChange(editorValue: any) {
     const oldVal = this.value$ ?? '';
-    const newVal = editorValue?.editor?.getBody()?.innerHTML ?? '';
+    const newVal = typeof editorValue === 'string' ? editorValue : (editorValue ?? '');
 
     const isValueChanged = newVal.toString() !== oldVal.toString();
 

package/lib/field/selectable-card/selectable-card.component.html

@@ -17,6 +17,7 @@
           [checked]="cardContent.commonCardProps.selected"
           [disabled]="disabled || readOnly"
           [attr.data-test-id]="testId + ':' + cardContent.commonCardProps.label"
+          (click)="$event.stopPropagation()"
           (change)="handleChangeMultiMode($event, cardContent.commonCardProps)"
           (blur)="fieldOnBlur()"
           >{{ cardContent.commonCardProps.label }}</mat-checkbox

package/lib/field/selectable-card/selectable-card.component.ts

@@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { deleteInstruction, insertInstruction } from '@pega/angular-sdk-components';
+import { deleteInstruction, insertInstruction, updateNewInstructions } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 import { FieldBase } from '@pega/angular-sdk-components';
@@ -93,21 +93,9 @@ export class SelectableCardComponent extends FieldBase implements OnInit {
     const imagePosition = this.configProps$.imagePosition;
 
     // dynamic styling based on image position and readOnly option
-    let imageWidth = '100%';
-    this.cardStyle = { display: 'flex', flexDirection: 'column', height: '100%' };
-    if (imagePosition && imagePosition !== 'block-start') {
-      imageWidth = '30%';
-      if (imagePosition === 'inline-start') {
-        this.cardStyle = { display: 'flex', flexDirection: 'row', alignItems: this.readOnly ? 'center' : '' };
-      } else if (imagePosition === 'inline-end') {
-        this.cardStyle = {
-          display: 'flex',
-          flexDirection: 'row-reverse',
-          justifyContent: this.readOnly ? 'space-between' : '',
-          alignItems: this.readOnly ? 'center' : ''
-        };
-      }
-    }
+    const { imageWidth, cardStyle } = this.resolveImageLayout(imagePosition);
+    this.cardStyle = cardStyle;
+
     if (this.type === 'radio') {
       const stateProps = this.pConn$.getStateProps();
       image = {
@@ -145,6 +133,12 @@ export class SelectableCardComponent extends FieldBase implements OnInit {
       this.selectedvalues = this.configProps$.readonlyContextList;
       this.showNoValue = this.readOnly && this.selectedvalues?.length === 0; // not used
       this.primaryField = this.configProps$.primaryField;
+
+      // Set reference list so getListActions() uses the correct path on every re-render
+      if (this.selectionList && !this.readOnly) {
+        this.pConn$.setReferenceList(this.selectionList);
+        updateNewInstructions(this.pConn$, this.selectionList);
+      }
     }
 
     this.commonProps = { hideFieldLabels, datasource, additionalProps, image, recordKey, cardLabel, radioBtnValue: this.radioBtnValue ?? '' };
@@ -182,6 +176,27 @@ export class SelectableCardComponent extends FieldBase implements OnInit {
     });
   }
 
+  private resolveImageLayout(imagePosition: string | undefined): { imageWidth: string; cardStyle: object } {
+    if (!imagePosition || imagePosition === 'block-start') {
+      return { imageWidth: '100%', cardStyle: { display: 'flex', flexDirection: 'column', height: '100%' } };
+    }
+    if (imagePosition === 'inline-start') {
+      return { imageWidth: '30%', cardStyle: { display: 'flex', flexDirection: 'row', alignItems: this.readOnly ? 'center' : '' } };
+    }
+    if (imagePosition === 'inline-end') {
+      return {
+        imageWidth: '30%',
+        cardStyle: {
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          justifyContent: this.readOnly ? 'space-between' : '',
+          alignItems: this.readOnly ? 'center' : ''
+        }
+      };
+    }
+    return { imageWidth: '30%', cardStyle: { display: 'flex', flexDirection: 'column', height: '100%' } };
+  }
+
   fieldOnChange(value: any) {
     handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
   }

package/lib/field/semantic-link/semantic-link.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="bVisible$ !== false">
-  <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
+  <a *ngIf="!isLinkTextEmpty; else noLink" class="psdk-value psdk-semantic-link" href="#" (click)="openLinkClick($event)">{{ value$ || '---' }}</a>
 </div>
 <ng-template #noLink>
   <div class="psdk-value">{{ value$ || '---' }}</div>

package/lib/field/semantic-link/semantic-link.component.scss

@@ -1,3 +1,7 @@
 .psdk-value {
   margin: 8px 0px;
 }
+
+.psdk-semantic-link {
+  color: var(--mat-sys-primary);
+}

package/lib/field/semantic-link/semantic-link.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
@@ -46,7 +46,8 @@ export class SemanticLinkComponent implements OnInit, OnDestroy {
 
   constructor(
     private angularPConnect: AngularPConnectService,
-    private utils: Utils
+    private utils: Utils,
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -81,6 +82,7 @@ export class SemanticLinkComponent implements OnInit, OnDestroy {
     const isData = this.buildDataPayload();
     this.linkURL = this.buildLinkURL(isData);
     this.isLinkTextEmpty = isLinkTextEmpty(this.value$);
+    this.cdr.detectChanges();
   }
 
   showDataAction() {
@@ -98,11 +100,14 @@ export class SemanticLinkComponent implements OnInit, OnDestroy {
           };
         }, {});
       }
-      this.pConn$.getActionsApi().showData('pyDetails', lookUpDataPage, {
-        ...this.payload
-      });
+      if (lookUpDataPage) {
+        this.pConn$.getActionsApi().showData('pyDetails', lookUpDataPage, {
+          ...this.payload
+        });
+      }
+      return;
     }
-    if ((this.referenceType && this.referenceType.toUpperCase() === 'DATA') || this.shouldTreatAsDataReference) {
+    if (this.dataViewName && ((this.referenceType && this.referenceType.toUpperCase() === 'DATA') || this.shouldTreatAsDataReference)) {
       this.pConn$.getActionsApi().showData('pyDetails', this.dataViewName, {
         ...this.payload
       });
@@ -153,7 +158,8 @@ export class SemanticLinkComponent implements OnInit, OnDestroy {
   }
 
   private buildDataPayload() {
-    const { dataRelationshipContext = null, contextPage } = this.configProps$;
+    const { dataRelationshipContext: configuredDataRelationshipContext, contextPage } = this.configProps$;
+    const dataRelationshipContext = configuredDataRelationshipContext ?? null;
     const {
       RESOURCE_TYPES: { DATA }
     } = PCore.getConstants();

package/lib/field/text-area/text-area.component.html

@@ -5,7 +5,7 @@
   <div *ngIf="bHasForm$; else noEdit">
     <div [formGroup]="formGroup$">
       <div *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>
           <textarea
             matInput
@@ -21,6 +21,7 @@
             (change)="fieldOnChange($event)"
             (blur)="fieldOnBlur($event)"
           ></textarea>
+          <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
           <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
         </mat-form-field>
       </div>

package/lib/field/text-area/text-area.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';
@@ -18,7 +19,7 @@ interface TextAreaProps extends PConnFieldProps {
   selector: 'app-text-area',
   templateUrl: './text-area.component.html',
   styleUrls: ['./text-area.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class TextAreaComponent extends FieldBase {
   configProps$: TextAreaProps;

package/lib/field/text-input/text-input.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/text-input/text-input.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';
@@ -18,7 +19,7 @@ interface TextInputProps extends PConnFieldProps {
   selector: 'app-text-input',
   templateUrl: './text-input.component.html',
   styleUrls: ['./text-input.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class TextInputComponent extends FieldBase {
   configProps$: TextInputProps;

package/lib/field/time/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
@@ -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/time/time.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 { format } from '@pega/angular-sdk-components';
@@ -18,7 +19,7 @@ interface TimeProps extends PConnFieldProps {
   selector: 'app-time',
   templateUrl: './time.component.html',
   styleUrls: ['./time.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class TimeComponent extends FieldBase {
   configProps$: TimeProps;

package/lib/field/url/url.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/url/url.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 URLProps extends PConnFieldProps {
   selector: 'app-url',
   templateUrl: './url.component.html',
   styleUrls: ['./url.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class UrlComponent extends FieldBase {
   configProps$: URLProps;

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

@@ -8,7 +8,7 @@
         <component-mapper name="Operator" [props]="{ pConn$, name$: userName$ }"></component-mapper>
       </div>
       <div [formGroup]="formGroup$" *ngIf="type === 'dropdown'">
-        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+        <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
           <mat-select [required]="bRequired$" [formControl]="fieldControl" [attr.data-test-id]="testId" (selectionChange)="fieldOnChange($event)">
             <mat-option *ngFor="let opt of options$" [value]="opt.key">
               {{ opt.value }}
@@ -18,10 +18,11 @@
           <mat-error *ngIf="fieldControl.invalid">
             {{ getErrorMessage() }}
           </mat-error>
+          <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         </mat-form-field>
       </div>
       <div [formGroup]="formGroup$" *ngIf="type === 'searchbox'">
-        <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
@@ -40,6 +41,7 @@
           <mat-error *ngIf="fieldControl.invalid">
             {{ getErrorMessage() }}
           </mat-error>
+          <mat-hint *ngIf="helperText" [appFieldWarning]="bFieldMessageVisible$">{{ helperText }}</mat-hint>
         </mat-form-field>
       </div>
     </div>