@pega/dx-component-builder-sdk 0.25.7 → 0.25.8

package/src/tasks/create/templates/SDK-Angular/field/Decimal-Percentage/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/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

@@ -1,5 +1,5 @@
 <div *ngIf="displayMode$; else noDisplayMode">
-  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$: formattedValue, displayMode$ }"></component-mapper>
 </div>
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
@@ -10,10 +10,19 @@
         <mat-label>{{ label$ }}</mat-label>
         <input
           matInput
+          type="text"
+          currencyMask
+          [options]="{
+            prefix: '',
+            suffix: '',
+            thousands: thousandSeparator,
+            decimal: decimalSeparator,
+            align: 'left',
+            nullable: true,
+            precision: 0,
+            inputMode: inputMode
+          }"
           [placeholder]="placeholder"
-          type="number"
-          step="1"
-          [value]="value$"
           [required]="bRequired$"
           [formControl]="fieldControl"
           [attr.data-test-id]="testId"

package/src/tasks/create/templates/SDK-Angular/field/Integer/integer.component.ts.mustache

@@ -3,26 +3,48 @@ import { CommonModule } from '@angular/common';
 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 { ComponentMapperComponent } from '@pega/angular-sdk-components';
-import { handleEvent } from '@pega/angular-sdk-components';
+import {
+  formatNumberFieldForDisplay,
+  getNumberInputFormat,
+  NumberInputFormat,
+  parseFormattedNumber,
+  saveNumberOnBlur
+} from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
 
-interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
+interface {{COMPONENT_CLASS_NAME}}Props extends Omit<PConnFieldProps, 'value'> {
   // If any, enter additional props that only exist on Integer here
+  value?: number | string;
+  showGroupSeparators?: boolean | string;
+  formatter?: string;
+  decimalPrecision?: number | string;
+  currencyISOCode?: string;
+  currencyDisplay?: 'symbol' | 'code' | 'name';
+  negative?: 'minus-sign' | 'parentheses';
+  notation?: 'standard' | 'compact';
+  currencyDecimalPrecision?: string;
 }
 
 @Component({
   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, NgxCurrencyDirective, forwardRef(() => ComponentMapperComponent)]
 })
 export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   configProps$: {{COMPONENT_CLASS_NAME}}Props;
   override fieldControl = new FormControl<number | null>(null, null);
 
+  decimalSeparator: string;
+  thousandSeparator: string;
+  formattedValue: string;
+  inputMode: any = NgxCurrencyInputMode.Natural;
+  private inputFormat: NumberInputFormat;
+
   /**
    * Updates the component when there are changes in the state.
    */
@@ -35,8 +57,25 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
 
     // Extract and normalize the value property
     const { value } = this.configProps$;
-    if (value) {
-      this.value$ = typeof value === 'string' ? parseInt(value, 10) : value;
+    this.value$ = value === undefined || value === null || value === '' ? '' : Number(value);
+    this.fieldControl.setValue(this.value$ === '' ? null : this.value$);
+
+    this.updateIntegerProperties(this.configProps$);
+  }
+
+  /**
+   * Updates the input mask and read-only value, matching the Constellation DX Integer component.
+   */
+  protected updateIntegerProperties(configProps: {{COMPONENT_CLASS_NAME}}Props): void {
+    const { showGroupSeparators = true } = configProps;
+    const groupSeparators = this.utils.getBooleanValue(showGroupSeparators);
+
+    this.inputFormat = getNumberInputFormat();
+    this.decimalSeparator = this.inputFormat.decimalSeparator;
+    this.thousandSeparator = groupSeparators ? this.inputFormat.thousandSeparator : '';
+
+    if (['DISPLAY_ONLY', 'STACKED_LARGE_VAL'].includes(this.displayMode$)) {
+      this.formattedValue = formatNumberFieldForDisplay('Integer', this.value$, configProps);
     }
   }
 
@@ -52,12 +91,7 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase {
   }
 
   fieldOnBlur(event: any) {
-    const oldVal = this.value$ ?? '';
-    const isValueChanged = event.target.value.toString() !== oldVal.toString();
-
-    if (isValueChanged) {
-      const value = event?.target?.value;
-      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
-    }
+    const parsed = parseFormattedNumber(event?.target?.value, this.inputFormat);
+    saveNumberOnBlur(this.pConn$, parsed !== '' ? Number(parsed) : '', this.configProps$?.value);
   }
 }

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

@@ -13,12 +13,14 @@
       <mat-form-field class="psdk-full-width" subscriptSizing="dynamic" [hintLabel]="helperText">
         <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>

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

@@ -80,16 +80,19 @@ 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)
       );
+
+      this.cdRef.markForCheck();
     }
   }
 
@@ -115,20 +118,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 +213,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.ts.mustache

@@ -94,12 +94,6 @@ export class {{COMPONENT_CLASS_NAME}}Component extends FieldBase implements OnIn
     // 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$);
-    }
-
     this.listType = listType;
     this.parameters = parameters;
 
@@ -119,6 +113,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() {

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/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-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.ts.mustache

@@ -3,6 +3,7 @@ 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 { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';

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$: {

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

@@ -3,6 +3,7 @@ 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 { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { handleEvent } from '@pega/angular-sdk-components';

package/src/tasks/create/templates/SDK-Angular/field/Text-Paragraph/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-Phone/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-Phone/text-phone.component.html.mustache

@@ -4,26 +4,24 @@
 {{! pick new delimiters for mustache }}
 {{=<% %>=}}
 <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" [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>
 </ng-template>
 <%={{ }}=%>     {{! revert delimiters for mustache }}

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

@@ -54,8 +54,7 @@ export class {{COMPONENT_CLASS_NAME}}Component 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/src/tasks/create/templates/SDK-Angular/field/Text-URL/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/TimeOfDay/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/template/DETAILS/demo.stories.tsx.mustache

@@ -8,11 +8,15 @@ 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$: {
-        resolveConfigProps: props => props,
+        resolveConfigProps: () => ({
+          label: 'Details',
+          showLabel: true,
+          showHighlightedData: false
+        }),
         getRawMetadata: () => {
           return pyReviewRaw.config;
         },
@@ -32,7 +36,9 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
         populateAdditionalProps: () => {
           /* nothing */
         },
-        getConfigProps: () => {
+        getConfigProps: () => pyReviewRaw.config,
+        getInheritedProps: () => ({}),
+        setInheritedProp: () => {
           /* nothing */
         },
         getContextName: () => ''

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.html.mustache

@@ -1,3 +1,23 @@
-<div>
-  <component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
-</div>
+<component-mapper
+  name="FieldGroup"
+  [props]="{ name: propsToUse.showLabel ? propsToUse.label : '', childrenTemplate: detailsContent }"
+></component-mapper>
+
+<ng-template #detailsContent>
+  <ng-container *ngIf="showHighlightedData && highlightedDataArr.length > 0">
+    <div class="psdk-grid-highlighted">
+      <component-mapper
+        *ngFor="let field of highlightedDataArr"
+        [name]="field.getComponentName()"
+        [props]="{ pConn$: field, formGroup$ }"
+      ></component-mapper>
+    </div>
+  </ng-container>
+  <div class="psdk-grid-filter-1">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/src/tasks/create/templates/SDK-Angular/template/DETAILS/details.component.scss.mustache

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(1, minmax(0, 1fr));
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
 }
+
+.psdk-grid-highlighted {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: calc(0.5rem) calc(5rem);
+}