@pega/dx-component-builder-sdk 25.1.16 → 26.1.11

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/picklist-autocomplete.component.ts.mustache

@@ -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 {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on AutoComplete here
   deferDatasource?: boolean;
@@ -28,6 +44,12 @@ interface {{COMPONENT_CLASS_NAME}}Props 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 {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
     MatInputModule,
     MatAutocompleteModule,
     MatOptionModule,
+    MatButtonModule,
+    MatIconModule,
+    MatDividerModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ],
   providers: [DatapageService]
@@ -50,15 +76,29 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
 
   @Output() onRecordChange: EventEmitter<any> = new EventEmitter();
 
+  @ViewChild(MatAutocompleteTrigger) private autocompleteTrigger?: MatAutocompleteTrigger;
+
   configProps$: {{COMPONENT_CLASS_NAME}}Props;
 
-  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 {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
       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 {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
     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 {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
       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 {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
       ];
     }
 
+    // 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 {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
     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 {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
     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 {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
       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/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/demo.stories.tsx.mustache

@@ -8,7 +8,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.html.mustache

@@ -11,7 +11,7 @@
 {{=<% %>=}}
 <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
@@ -32,6 +32,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/src/tasks/create/templates/SDK-Angular/field/Picklist-RadioButtons/picklist-radio-buttons.component.ts.mustache

@@ -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 {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
   providers: [Utils],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatRadioModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;

package/src/tasks/create/templates/SDK-Angular/field/Text/demo.stories.tsx.mustache

@@ -9,7 +9,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/src/tasks/create/templates/SDK-Angular/field/Text/text.component.html.mustache

@@ -1,12 +1,12 @@
-{{! pick new delimiters for mustache }}
-{{=<% %>=}}
 <div *ngIf="displayMode$; else noDisplayMode">
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
+{{! pick new delimiters for mustache }}
+{{=<% %>=}}
 <ng-template #noDisplayMode>
-  <div *ngIf="bVisible$ && bHasForm$">
-    <div [formGroup]="formGroup$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
+  <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">
+    <div [formGroup]="formGroup$" *ngIf="bVisible$">
+      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic">
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
@@ -14,15 +14,18 @@
           type="text"
           [value]="value$"
           [required]="bRequired$"
-          [readonly]="bReadonly$"
           [attr.data-test-id]="testId"
           [formControl]="fieldControl"
           (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>
   </div>
 </ng-template>
 <%={{ }}=%>     {{! revert delimiters for mustache }}
+<ng-template #noEdit>
+  <component-mapper *ngIf="bVisible$ !== false" name="Text" [props]="{ pConn$, formatAs$: 'text' }"></component-mapper>
+</ng-template>

package/src/tasks/create/templates/SDK-Angular/field/Text/text.component.ts.mustache

@@ -4,6 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 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 {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;

package/src/tasks/create/templates/SDK-Angular/field/Text-Email/demo.stories.tsx.mustache

@@ -9,7 +9,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/src/tasks/create/templates/SDK-Angular/field/Text-Email/text-email.component.html.mustache

@@ -6,7 +6,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
@@ -19,6 +19,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/src/tasks/create/templates/SDK-Angular/field/Text-Email/text-email.component.ts.mustache

@@ -3,7 +3,9 @@ import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 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';
@@ -16,7 +18,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   selector: 'app-{{COMPONENT_CLASS_NAME_KEBAB}}',
   templateUrl: './{{COMPONENT_CLASS_NAME_KEBAB}}.component.html',
   styleUrls: ['./{{COMPONENT_CLASS_NAME_KEBAB}}.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnInit, OnDestroy {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;

package/src/tasks/create/templates/SDK-Angular/field/Text-Input/demo.stories.tsx.mustache

@@ -9,7 +9,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {