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

package/src/tasks/create/templates/SDK-Angular/field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -17,29 +17,29 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   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/src/tasks/create/templates/SDK-Angular/field/Integer/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/Integer/integer.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
@@ -20,6 +20,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/Integer/integer.component.ts.mustache

@@ -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 {{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;
@@ -57,7 +58,8 @@ export class {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/Picklist/demo.stories.tsx.mustache

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

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

@@ -10,20 +10,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/src/tasks/create/templates/SDK-Angular/field/Picklist/picklist.component.ts.mustache

@@ -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 {{COMPONENT_CLASS_NAME}}Props with 8.23 until getLocaleRuleNameFromKeys is NOT private
 interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   // If any, enter additional props that only exist on Dropdown here
   datasource?: any[];
@@ -66,7 +67,15 @@ 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, MatSelectModule, MatOptionModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatOptionModule,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnInit, OnDestroy {
   @Output() onRecordChange: EventEmitter<any> = new EventEmitter();
@@ -80,13 +89,14 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
   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 {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
     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 {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
             };
             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/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/demo.stories.tsx.mustache

@@ -15,7 +15,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   decorators: [
     moduleMetadata({
-     providers: [{ provide: DatapageService, useClass: MockingDatapageService }]
+      providers: [{ provide: DatapageService, useClass: MockingDatapageService }]
     }),
 
     applicationConfig({
@@ -24,7 +24,7 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   ],
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => ({
+  render: args => ({
     props: {
       ...args,
       pConn$: {

package/src/tasks/create/templates/SDK-Angular/field/Picklist-Autocomplete/picklist-autocomplete.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
@@ -17,11 +17,52 @@
           [matAutocomplete]="auto"
           (input)="fieldOnChange($event)"
         />
-        <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption (optionSelected)="optionChanged($event)">
-          <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
-            <span>{{ opt.value }}</span>
-          </mat-option>
+        <mat-autocomplete #auto="matAutocomplete" [class]="'psdk-autocomplete-panel'" autoActiveFirstOption (optionSelected)="optionChanged($event)">
+          <ng-container *ngIf="hasGroupBy; else flatOptionsList">
+            <mat-optgroup *ngFor="let group of groupedFilteredOptions$ | async" [label]="group.label">
+              <mat-option *ngFor="let opt of group.options" [value]="opt.value">
+                <span class="psdk-autocomplete-option-primary">{{ opt.value }}</span>
+                <div class="psdk-autocomplete-option-secondary" *ngIf="opt.secondaryComponents?.length">
+                  <ng-container *ngFor="let secondary of opt.secondaryComponents; let last = last">
+                    <component-mapper
+                      [name]="secondary.getPConnect().getComponentName()"
+                      [props]="{ pConn$: secondary.getPConnect(), formGroup$ }"
+                    ></component-mapper>
+                    <span *ngIf="!last" class="psdk-autocomplete-option-separator" aria-hidden="true"> · </span>
+                  </ng-container>
+                </div>
+              </mat-option>
+            </mat-optgroup>
+          </ng-container>
+          <ng-template #flatOptionsList>
+            <mat-option *ngFor="let opt of filteredOptions | async" [value]="opt.value">
+              <span class="psdk-autocomplete-option-primary">{{ opt.value }}</span>
+              <div class="psdk-autocomplete-option-secondary" *ngIf="opt.secondaryComponents?.length">
+                <ng-container *ngFor="let secondary of opt.secondaryComponents; let last = last">
+                  <component-mapper
+                    [name]="secondary.getPConnect().getComponentName()"
+                    [props]="{ pConn$: secondary.getPConnect(), formGroup$ }"
+                  ></component-mapper>
+                  <span *ngIf="!last" class="psdk-autocomplete-option-separator" aria-hidden="true"> · </span>
+                </ng-container>
+              </div>
+            </mat-option>
+          </ng-template>
+          <div *ngIf="showCreateButton" class="psdk-autocomplete-create-new-wrapper">
+            <mat-divider></mat-divider>
+            <button
+              mat-button
+              type="button"
+              class="psdk-autocomplete-create-new"
+              (mousedown)="$event.preventDefault()"
+              (click)="createNewButtonHandler()"
+            >
+              <mat-icon>add</mat-icon>
+              {{ createNewLabel }}
+            </button>
+          </div>
         </mat-autocomplete>
+        <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-Autocomplete/picklist-autocomplete.component.scss.mustache

@@ -18,3 +18,95 @@
 ::ng-deep .mat-mdc-form-field-infix {
   width: auto;
 }
+
+// Scoped to this component's own panel via mat-autocomplete's [class] input — does not affect
+// other mat-option/mat-autocomplete instances in the app (research.md §3).
+::ng-deep .psdk-autocomplete-panel {
+  overflow-x: hidden;
+
+  .mat-mdc-option {
+    .mdc-list-item__primary-text {
+      width: 100%;
+      white-space: normal;
+      overflow: visible;
+      text-overflow: unset;
+    }
+
+    // Only grow/top-align options that actually render secondary content — leaves options
+    // without secondary text at Material's default single-line height/vertical centering.
+    &:has(.psdk-autocomplete-option-secondary) {
+      height: auto;
+      min-height: 48px;
+      align-items: flex-start;
+      padding-top: 8px;
+      padding-bottom: 8px;
+    }
+  }
+}
+
+.psdk-autocomplete-option-secondary {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 0.25rem;
+  width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  color: var(--mat-sys-on-surface-variant);
+
+  // Each secondary field renders through FieldValueList's own DISPLAY_ONLY template, which
+  // defaults to a two-column grid block (.psdk-container-labels-left) or an unset-display
+  // block (.psdk-container-nolabels). Override both to render inline here so multiple fields
+  // join on one line via the `·` separators, instead of stacking as separate block rows
+  // (FR-002/FR-004). FieldValueListComponent itself is not modified (research.md §6).
+  ::ng-deep .psdk-container-labels-left {
+    display: inline-flex;
+    column-gap: 0.25rem;
+    row-gap: 0;
+    padding-block: 0;
+  }
+
+  ::ng-deep .psdk-container-nolabels {
+    display: inline;
+    padding-block: 0;
+  }
+
+  ::ng-deep .psdk-grid-label::after {
+    content: ':';
+  }
+
+  ::ng-deep .psdk-val-labels-left {
+    white-space: normal;
+  }
+}
+
+::ng-deep .psdk-autocomplete-create-new-wrapper {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  background-color: var(--mat-sys-surface-container, var(--mat-sys-surface, #fff));
+
+  .mat-divider {
+    margin: 0;
+  }
+
+  .psdk-autocomplete-create-new {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    height: 48px;
+    padding: 0 16px;
+    text-align: left;
+    text-transform: none;
+    color: var(--mat-sys-primary);
+
+    .mat-mdc-button-touch-target {
+      width: 100%;
+    }
+
+    .mat-icon {
+      margin-right: 8px;
+    }
+  }
+}