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

package/tests/assets/sdk-a/components/create/override-sdk/field/date/date.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
@@ -21,6 +21,7 @@
         />
         <mat-datepicker-toggle matSuffix [for]="pegadate" [disabled]="bDisabled$"></mat-datepicker-toggle>
         <mat-datepicker #pegadate [startAt]="value$" xPosition="end"></mat-datepicker>
+        <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/create/override-sdk/field/date/date.component.ts

@@ -9,6 +9,7 @@ import { MAT_DATE_FORMATS } from '@angular/material/core';
 import { MomentDateModule } from '@angular/material-moment-adapter';
 
 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 { format } from '@pega/angular-sdk-components';
@@ -50,6 +51,7 @@ class MyFormat {
     MatDatepickerModule,
     MatNativeDateModule,
     MomentDateModule,
+    FieldWarningDirective,
     forwardRef(() => ComponentMapperComponent)
   ],
   providers: [{ provide: MAT_DATE_FORMATS, useClass: MyFormat }]

package/tests/assets/sdk-a/components/create/override-sdk/field/date-time/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "DateTime",
-    "name": "DateTime",
-    "label": "Date & time",
-    "description": "Date & time",
-    "type": "Field",
-    "subtype": "DateTime",
-    "properties": []
-}
+  "componentKey": "DateTime",
+  "name": "DateTime",
+  "label": "Date & time",
+  "description": "Date & time",
+  "type": "Field",
+  "subtype": "DateTime",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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)
   ]
 })
@@ -95,6 +97,12 @@ export class DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
   }
 
   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 DateTimeComponent extends FieldBase implements OnInit, OnDestroy {
     }
     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/create/override-sdk/field/decimal/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "Decimal",
-    "name": "Decimal",
-    "label": "Decimal",
-    "description": "Decimal",
-    "type": "Field",
-    "subtype": "Decimal",
-    "properties": []
-}
+  "componentKey": "Decimal",
+  "name": "Decimal",
+  "label": "Decimal",
+  "description": "Decimal",
+  "type": "Field",
+  "subtype": "Decimal",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/field/dropdown/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "Dropdown",
-    "name": "Dropdown",
-    "label": "Dropdown",
-    "description": "Picklist",
-    "type": "Field",
-    "subtype": "Picklist",
-    "properties": []
-}
+  "componentKey": "Dropdown",
+  "name": "Dropdown",
+  "label": "Dropdown",
+  "description": "Picklist",
+  "type": "Field",
+  "subtype": "Picklist",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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();
@@ -84,9 +93,9 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
   set options(options: IOption[]) {
     this.options$ = options;
     if (this.displayMode$) {
-      this.value$ = this.options$?.find(option => option.key === this.value$)?.value || this.value$;
+      this.value$ = this.value$ === 'Select' ? '' : 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)
       );
@@ -127,7 +136,7 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
 
     if (this.theDatasource) {
       const optionsList = [...this.utils.getOptionList(this.configProps$, this.pConn$.getDataObject())];
-      optionsList?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+      optionsList?.unshift(this.getPlaceholderOption());
       this.options = optionsList;
     }
 
@@ -215,12 +224,17 @@ export class DropdownComponent extends FieldBase implements OnInit, OnDestroy {
             };
             optionsData.push(obj);
           });
-          optionsData?.unshift({ key: 'Select', value: this.pConn$.getLocalizedValue('Select...', '', '') });
+          optionsData?.unshift(this.getPlaceholderOption());
           this.options = optionsData;
         });
       });
   }
 
+  // Uses the authored placeholder, falling back to 'Select...' when none is authored
+  private getPlaceholderOption(): IOption {
+    return { key: 'Select', value: this.pConn$.getLocalizedValue(this.placeholder || 'Select...', '', '') };
+  }
+
   isSelected(buttonValue: string): boolean {
     return this.value$ === buttonValue;
   }

package/tests/assets/sdk-a/components/create/override-sdk/field/email/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "Email",
-    "name": "Email",
-    "label": "Email",
-    "description": "Email",
-    "type": "Field",
-    "subtype": "Text-Email",
-    "properties": []
-}
+  "componentKey": "Email",
+  "name": "Email",
+  "label": "Email",
+  "description": "Email",
+  "type": "Field",
+  "subtype": "Text-Email",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/field/group/config-ext.json

@@ -1,8 +1,8 @@
 {
-    "componentKey": "Group",
-    "name": "Group",
-    "label": "Field Group",
-    "description": "Field Group",
-    "type": "Group",
-    "properties": []
-}
+  "componentKey": "Group",
+  "name": "Group",
+  "label": "Field Group",
+  "description": "Field Group",
+  "type": "Group",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/field/group/group.component.ts

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { ReferenceComponent } from '@pega/angular-sdk-components';
 import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
@@ -11,7 +10,7 @@ interface GroupProps extends PConnFieldProps {
   showHeading: boolean;
   heading: string;
   instructions: string;
-  collapsible: boolean;
+  collapseOnLoad?: 'none' | 'expanded' | 'collapsed';
 }
 
 @Component({
@@ -20,7 +19,7 @@ interface GroupProps extends PConnFieldProps {
   styleUrls: ['./group.component.scss'],
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class GroupComponent implements OnInit {
+export class GroupComponent implements OnInit, OnDestroy {
   @Input() pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
@@ -33,7 +32,6 @@ export class GroupComponent implements OnInit {
   showHeading$?: boolean;
   heading$: string;
   instructions$: string;
-  collapsible$: boolean;
 
   constructor(private angularPConnect: AngularPConnectService) {}
 
@@ -43,6 +41,12 @@ export class GroupComponent implements OnInit {
     this.checkAndUpdate();
   }
 
+  additionalProps() {
+    return {
+      visibility: this.pConn$.getComputedVisibility()
+    };
+  }
+
   // Callback passed when subscribing to store change
   onStateChange() {
     this.checkAndUpdate();
@@ -64,12 +68,11 @@ export class GroupComponent implements OnInit {
    */
   updateSelf(): void {
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as GroupProps;
-    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.arChildren$ = this.pConn$.getChildren();
     this.visibility$ = this.configProps$.visibility;
     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();
@@ -87,4 +90,10 @@ export class GroupComponent implements OnInit {
       });
     }
   }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
 }

package/tests/assets/sdk-a/components/create/override-sdk/field/integer/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "Integer",
-    "name": "Integer",
-    "label": "Integer",
-    "description": "Integer",
-    "type": "Field",
-    "subtype": "Integer",
-    "properties": []
-}
+  "componentKey": "Integer",
+  "name": "Integer",
+  "label": "Integer",
+  "description": "Integer",
+  "type": "Field",
+  "subtype": "Integer",
+  "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/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/tests/assets/sdk-a/components/create/override-sdk/field/location/config-ext.json

@@ -1,9 +1,9 @@
 {
-    "componentKey": "Location",
-    "name": "Location",
-    "label": "Location",
-    "description": "Location",
-    "type": "Field",
-    "subtype": "Location",
-    "properties": []
-}
+  "componentKey": "Location",
+  "name": "Location",
+  "label": "Location",
+  "description": "Location",
+  "type": "Field",
+  "subtype": "Location",
+  "properties": []
+}