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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-date-time/pega-dxil-my-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 PegaDxilMyDateTimeProps extends PConnFieldProps {
     MatDatepickerModule,
     OwlDateTimeModule,
     OwlNativeDateTimeModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })
@@ -95,6 +97,12 @@ export class PegaDxilMyDateTimeComponent extends FieldBase implements OnInit, On
   }
 
   fieldOnDateChange(event: any) {
+    // owl picker emits null when the typed text can't be parsed; clear the input instead of defaulting to now
+    if (!event.value) {
+      this.fieldControl.setValue('');
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, '');
+      return;
+    }
     // this comes from the date pop up
     if (typeof event.value === 'object') {
       // convert date to pega "date" format
@@ -104,4 +112,25 @@ export class PegaDxilMyDateTimeComponent extends FieldBase implements OnInit, On
     }
     handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
   }
+
+  override getErrorMessage() {
+    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
+    if (this.fieldControl.hasError('message')) {
+      return this.angularPConnectData.validateMessage ?? '';
+    }
+
+    if (this.fieldControl.hasError('required')) {
+      return 'You must enter a value';
+    }
+
+    if (this.fieldControl.hasError('owlDateTimeParse')) {
+      return `${this.fieldControl.errors?.['owlDateTimeParse'].text} is not a valid date time value`;
+    }
+
+    if (this.fieldControl.errors) {
+      return 'Invalid date time value';
+    }
+
+    return '';
+  }
 }

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/demo.stories.tsx

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/pega-dxil-my-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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-decimal/pega-dxil-my-decimal.component.ts

@@ -4,7 +4,9 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 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';
@@ -30,6 +32,7 @@ interface PegaDxilMyDecimalProps extends PConnFieldProps {
     MatFormFieldModule,
     MatInputModule,
     NgxCurrencyDirective,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ]
 })

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-email/demo.stories.tsx

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-email/pega-dxil-my-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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-email/pega-dxil-my-email.component.ts

@@ -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 PegaDxilMyEmailProps extends PConnFieldProps {
   selector: 'app-pega-dxil-my-email',
   templateUrl: './pega-dxil-my-email.component.html',
   styleUrls: ['./pega-dxil-my-email.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class PegaDxilMyEmailComponent extends FieldBase implements OnInit, OnDestroy {
   configProps$: PegaDxilMyEmailProps;

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-icon-button-url/demo.stories.tsx

@@ -17,29 +17,29 @@ const meta: Meta<PegaDxilMyIconButtonUrlComponent> = {
   title: 'PegaDxilMyIconButtonUrl',
   component: PegaDxilMyIconButtonUrlComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
-      props: {
-        ...args,
-        pConn$: {
-          resolveConfigProps: props => props,
-          getConfigProps: () => {
-            return configProps;
-          },
-          getValue: value => {
-            return value;
-          },
-          getContextName: () => {
-            return 'app/primary_1';
-          },
-          getStateProps: () => {
-            return stateProps;
-          },
-          getLocalizedValue: value => {
-            return value;
-          }
-        } as any,
-        formGroup$: new FormBuilder().group({})
-      }
+  render: args => ({
+    props: {
+      ...args,
+      pConn$: {
+        resolveConfigProps: props => props,
+        getConfigProps: () => {
+          return configProps;
+        },
+        getValue: value => {
+          return value;
+        },
+        getContextName: () => {
+          return 'app/primary_1';
+        },
+        getStateProps: () => {
+          return stateProps;
+        },
+        getLocalizedValue: value => {
+          return value;
+        }
+      } as any,
+      formGroup$: new FormBuilder().group({})
+    }
   })
 };
 

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-integer/demo.stories.tsx

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-integer/pega-dxil-my-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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-integer/pega-dxil-my-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 PegaDxilMyIntegerProps extends PConnFieldProps {
   selector: 'app-pega-dxil-my-integer',
   templateUrl: './pega-dxil-my-integer.component.html',
   styleUrls: ['./pega-dxil-my-integer.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class PegaDxilMyIntegerComponent extends FieldBase {
   configProps$: PegaDxilMyIntegerProps;
@@ -57,7 +58,8 @@ export class PegaDxilMyIntegerComponent 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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-paragraph/demo.stories.tsx

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-paragraph/pega-dxil-my-paragraph.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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-paragraph/pega-dxil-my-paragraph.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 PegaDxilMyParagraphProps extends PConnFieldProps {
   selector: 'app-pega-dxil-my-paragraph',
   templateUrl: './pega-dxil-my-paragraph.component.html',
   styleUrls: ['./pega-dxil-my-paragraph.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class PegaDxilMyParagraphComponent extends FieldBase {
   configProps$: PegaDxilMyParagraphProps;

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/demo.stories.tsx

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-percentage/pega-dxil-my-percentage.component.ts

@@ -4,7 +4,9 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 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';
@@ -23,7 +25,15 @@ interface PegaDxilMyPercentageProps extends Omit<PConnFieldProps, 'value'> {
   selector: 'app-pega-dxil-my-percentage',
   templateUrl: './pega-dxil-my-percentage.component.html',
   styleUrls: ['./pega-dxil-my-percentage.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    NgxCurrencyDirective,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class PegaDxilMyPercentageComponent extends FieldBase {
   configProps$: PegaDxilMyPercentageProps;

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/demo.stories.tsx

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/pega-dxil-my-phone.component.html

@@ -2,26 +2,25 @@
   <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
 </div>
 <ng-template #noDisplayMode>
-  <div *ngIf="bHasForm$; else noEdit">
-    <div #f="ngForm" [formGroup]="formGroup$" *ngIf="bVisible$">
-      <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText" floatLabel="always">
-        <mat-tel-input
-          [attr.data-test-id]="testId"
-          [formControl]="fieldControl"
-          [preferredCountries]="preferredCountries"
-          [enablePlaceholder]="true"
-          [enableSearch]="true"
-          [placeholder]="placeholder"
-          [required]="bRequired$"
-          [disabled]="bDisabled$ || bReadonly$"
-          (change)="fieldOnChange()"
-          (blur)="fieldOnBlur()"
-        >
-        </mat-tel-input>
-        <mat-label>{{ label$ }}</mat-label>
-        <mat-error *ngIf="fieldControl.invalid">{{ getErrorMessage() }}</mat-error>
-      </mat-form-field>
-    </div>
+  <div *ngIf="bHasForm$ && bVisible$; else noEdit">
+    <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" floatLabel="always">
+      <mat-tel-input
+        [attr.data-test-id]="testId"
+        [formControl]="fieldControl"
+        [preferredCountries]="preferredCountries"
+        [enablePlaceholder]="true"
+        [enableSearch]="true"
+        [placeholder]="placeholder"
+        [required]="bRequired$"
+        [disabled]="bDisabled$ || bReadonly$"
+        (change)="fieldOnChange()"
+        (blur)="fieldOnBlur()"
+      >
+      </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>
 </ng-template>
 <ng-template #noEdit>

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-phone/pega-dxil-my-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 PegaDxilMyPhoneProps extends PConnFieldProps {
   selector: 'app-pega-dxil-my-phone',
   templateUrl: './pega-dxil-my-phone.component.html',
   styleUrls: ['./pega-dxil-my-phone.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatTelInput, FieldWarningDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class PegaDxilMyPhoneComponent extends FieldBase {
   configProps$: PegaDxilMyPhoneProps;
@@ -54,8 +55,7 @@ export class PegaDxilMyPhoneComponent extends FieldBase {
     const isValueChanged = newVal?.toString() !== oldVal.toString();
 
     if (isValueChanged) {
-      const value = this.formGroup$.controls[this.controlName$].value;
-      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, newVal);
     }
   }
 

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/demo.stories.tsx

@@ -12,14 +12,14 @@ class MockingDatapageService {
 
 const meta: Meta<PegaDxilMyPicklistComponent> = {
   title: 'PegaDxilMyPicklist',
-   decorators: [
+  decorators: [
     moduleMetadata({
       providers: [{ provide: DatapageService, useClass: MockingDatapageService }]
     })
   ],
   component: PegaDxilMyPicklistComponent,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/pega-dxil-my-picklist.component.html

@@ -8,20 +8,23 @@
 <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$"
+          [placeholder]="placeholderText"
           [required]="bRequired$"
           [disabled]="bDisabled$"
           [attr.data-test-id]="testId"
           (selectionChange)="fieldOnChange($event)"
           [formControl]="fieldControl"
         >
+          <mat-option>{{ placeholderText }}</mat-option>
           <mat-option *ngFor="let opt of options$" [value]="opt.key">
             {{ getLocalizedOptionValue(opt) }}
           </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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-picklist/pega-dxil-my-picklist.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';
@@ -49,7 +50,7 @@ interface IOption {
   value: string;
 }
 
-// Can't use DropdownProps with 8.23 until getLocaleRuleNameFromKeys is NOT private
+// Can't use PegaDxilMyPicklistProps with 8.23 until getLocaleRuleNameFromKeys is NOT private
 interface PegaDxilMyPicklistProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Dropdown here
   datasource?: any[];
@@ -66,7 +67,15 @@ interface PegaDxilMyPicklistProps extends PConnFieldProps {
   selector: 'app-pega-dxil-my-picklist',
   templateUrl: './pega-dxil-my-picklist.component.html',
   styleUrls: ['./pega-dxil-my-picklist.component.scss'],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatSelectModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatOptionModule,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class PegaDxilMyPicklistComponent extends FieldBase implements OnInit, OnDestroy {
   @Output() onRecordChange: EventEmitter<any> = new EventEmitter();
@@ -80,13 +89,14 @@ export class PegaDxilMyPicklistComponent extends FieldBase implements OnInit, On
   localeName = '';
   localePath = '';
   localizedValue = '';
+  placeholderText = '';
 
   set options(options: IOption[]) {
     this.options$ = options;
     if (this.displayMode$) {
       this.value$ = this.options$?.find(option => option.key === this.value$)?.value || this.value$;
       this.localizedValue = this.pConn$.getLocalizedValue(
-        this.value$ === 'Select...' ? '' : this.value$,
+        this.value$,
         this.localePath,
         this.pConn$.getLocaleRuleNameFromKeys(this.localeClass, this.localeContext, this.localeName)
       );
@@ -115,20 +125,15 @@ export class PegaDxilMyPicklistComponent extends FieldBase implements OnInit, On
     const { value, fieldMetadata, datasource } = configProps;
 
     this.value$ = value;
+    this.placeholderText = this.pConn$.getLocalizedValue(this.placeholder || 'Select...', '', '');
 
     if (!isEqual(datasource, this.theDatasource)) {
       // inbound datasource is different, so update theDatasource
       this.theDatasource = datasource || null;
     }
 
-    if (this.value$ === '' && !this.bReadonly$) {
-      this.value$ = 'Select';
-    }
-
     if (this.theDatasource) {
-      const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
-      optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
-      this.options = optionsList;
+      this.options = this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject());
     }
 
     this.actionsApi = this.pConn$.getActionsApi();
@@ -215,27 +220,21 @@ export class PegaDxilMyPicklistComponent extends FieldBase implements OnInit, On
             };
             optionsData.push(obj);
           });
-          optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
           this.options = optionsData;
         });
       });
   }
 
-  isSelected(buttonValue: string): boolean {
-    return this.value$ === buttonValue;
-  }
-
   fieldOnChange(event: any) {
-    if (event?.value === 'Select') {
-      event.value = '';
-    }
-    handleEvent(this.actionsApi, 'changeNblur', this.propName, event.value);
+    // The reset option has no value; Pega expects '' for a cleared field
+    const value = event.value ?? '';
+    handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
 
     this.pConn$.clearErrorMessages({
       property: this.propName
     });
     if (this.onRecordChange) {
-      this.onRecordChange.emit(event.value);
+      this.onRecordChange.emit(value);
     }
   }
 

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-radiobuttons/demo.stories.tsx

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-radiobuttons/pega-dxil-my-radiobuttons.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>