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

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

@@ -6,6 +6,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
 
 import { FieldBase } from '@pega/angular-sdk-components';
+import { FieldWarningDirective } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { Utils } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';
@@ -28,7 +29,15 @@ interface PegaDxilMyRadiobuttonsProps extends PConnFieldProps {
   templateUrl: './pega-dxil-my-radiobuttons.component.html',
   styleUrls: ['./pega-dxil-my-radiobuttons.component.scss'],
   providers: [Utils],
-  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatRadioModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatRadioModule,
+    FieldWarningDirective,
+    forwardRef(() => ComponentMapperComponent)
+  ]
 })
 export class PegaDxilMyRadiobuttonsComponent extends FieldBase {
   configProps$: PegaDxilMyRadiobuttonsProps;

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

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

package/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-searchbox/pega-dxil-my-searchbox.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
@@ -15,11 +15,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/tests/assets/sdk-a/components/createAll/custom-sdk/field/pega-dxil-my-searchbox/pega-dxil-my-searchbox.component.scss

@@ -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;
+    }
+  }
+}