@pega/angular-sdk-overrides 0.26.2 → 0.26.3

package/lib/template/data-reference/data-reference.component.ts

@@ -58,6 +58,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
   dataRelationshipContext: any;
   imagePosition: any;
   showImageDescription: any;
+  private isUpdatingFromDataCallback = false;
 
   constructor(
     private angularPConnect: AngularPConnectService,
@@ -69,7 +70,30 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
     this.children = this.pConn$.getChildren();
     this.updateSelf();
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+  }
+
+  // Callback passed when subscribing to store change
+  onStateChange() {
+    // Should always check the bridge to see if the component should
+    // update itself (re-render)
+    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
+
+    // ONLY call updateSelf when the component should update
+    if (bUpdateSelf) {
+      this.updateSelf();
+    }
+  }
 
+  getData() {
+    if (this.isUpdatingFromDataCallback) {
+      return;
+    }
     if (
       this.rawViewMetadata.config?.parameters &&
       !this.isDDSourceDeferred &&
@@ -94,7 +118,9 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
                     }))
                     .filter(item => item.key); // Filtering out undefined entries
               this.dropDownDataSource = ddDataSource;
+              this.isUpdatingFromDataCallback = true;
               this.updateSelf();
+              this.isUpdatingFromDataCallback = false;
             } else {
               const ddDataSource: any = [];
               this.dropDownDataSource = ddDataSource;
@@ -110,24 +136,6 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
     }
   }
 
-  ngOnDestroy(): void {
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  // Callback passed when subscribing to store change
-  onStateChange() {
-    // Should always check the bridge to see if the component should
-    // update itself (re-render)
-    const bUpdateSelf = this.angularPConnect.shouldComponentUpdate(this);
-
-    // ONLY call updateSelf when the component should update
-    if (bUpdateSelf) {
-      this.updateSelf();
-    }
-  }
-
   updateSelf() {
     // Update properties based on configProps
     const theConfigProps = this.pConn$.getConfigProps();
@@ -186,6 +194,7 @@ export class DataReferenceComponent implements OnInit, OnDestroy {
 
     this.generateChildrenToRender();
     this.displayChild = !(this.displaySingleRef || this.displayMultiRef);
+    this.getData();
   }
 
   updatePropertiesFromProps(theConfigProps) {

package/lib/template/data-reference/search-form/search-form.component.html

@@ -1,5 +1,5 @@
 <div class="search-form" style="display: flex; flex-direction: column">
-  <h5>{{ propsToUse.label }}</h5>
+  <h3>{{ label$ }}</h3>
   <div *ngIf="searchCategoriesComp === 'dropdown'">
     <mat-form-field class="psdk-full-width">
       <mat-select [value]="currentTabId" (selectionChange)="handleTabClick($event.value)">

package/lib/template/data-reference/search-form/search-form.component.ts

@@ -48,6 +48,7 @@ export class SearchFormComponent implements OnInit, OnChanges {
   tabItems: any[] = [];
   searchCategoriesComp: any;
   propsToUse: any;
+  label$: string;
   tabData: any = [];
   tabCountSources: any;
   deferLoadedTabs: any;
@@ -59,6 +60,7 @@ export class SearchFormComponent implements OnInit, OnChanges {
     this.isInitialized = true;
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
     this.propsToUse = { ...this.pConn$.getInheritedProps() };
+    this.label$ = this.configProps$?.label || this.propsToUse.label;
     // When called from ObjectReference, pConn$ itself acts as deferLoadedTabs (no children[2])
     if (this.type === 'ObjectReference') {
       this.deferLoadedTabs = { getPConnect: () => this.pConn$ };

package/lib/template/details/details.component.html

@@ -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/lib/template/details/details.component.scss

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

package/lib/template/details/details.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,36 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details',
   templateUrl: './details.component.html',
   styleUrls: ['./details.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-  arFields$: any[] = [];
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      this.arFields$ = this.processDetailFields(kid);
-    }
-  }
-}
+export class DetailsComponent extends DetailsTemplateBase {}

package/lib/template/details-narrow-wide/details-narrow-wide.component.html

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'narrow-wide' }"
+  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-narrow-wide">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/lib/template/details-narrow-wide/details-narrow-wide.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-narrow-wide {
   display: grid;
   grid-template-columns: 3fr 7fr;
   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);
+}

package/lib/template/details-narrow-wide/details-narrow-wide.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,41 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-narrow-wide',
   templateUrl: './details-narrow-wide.component.html',
   styleUrls: ['./details-narrow-wide.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsNarrowWideComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  highlightedDataArr: any[] = [];
-  showHighlightedData: boolean;
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = this.processDetailFields(kid);
-      } else {
-        this.arFields2$ = this.processDetailFields(kid);
-      }
-    }
-  }
-}
+export class DetailsNarrowWideComponent extends DetailsTemplateBase {}

package/lib/template/details-one-column/details-one-column.component.html

@@ -1 +1,23 @@
-<component-mapper name="MaterialDetails" [props]="{ arFields$, arHighlightedFields: highlightedDataArr, layout: 'one-column' }"></component-mapper>
+<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/lib/template/details-one-column/details-one-column.component.scss

@@ -0,0 +1,14 @@
+.psdk-grid-filter-1 {
+  display: grid;
+  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);
+}

package/lib/template/details-one-column/details-one-column.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,42 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-one-column',
   templateUrl: './details-one-column.component.html',
   styleUrls: ['./details-one-column.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsOneColumnComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = this.processDetailFields(kid);
-      }
-    }
-  }
-}
+export class DetailsOneColumnComponent extends DetailsTemplateBase {}

package/lib/template/details-three-column/details-three-column.component.html

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arFields3$, arHighlightedFields: highlightedDataArr, layout: 'three-column' }"
+  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-3">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/lib/template/details-three-column/details-three-column.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-3 {
   display: grid;
   grid-template-columns: repeat(3, 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);
+}

package/lib/template/details-three-column/details-three-column.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,50 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-three-column',
   templateUrl: './details-three-column.component.html',
   styleUrls: ['./details-three-column.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsThreeColumnComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  arFields3$: any[] = [];
-
-  propsToUse: any = {};
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = this.processDetailFields(kid);
-      } else if (kids.indexOf(kid) == 1) {
-        this.arFields2$ = this.processDetailFields(kid);
-      } else {
-        this.arFields3$ = this.processDetailFields(kid);
-      }
-    }
-  }
-}
+export class DetailsThreeColumnComponent extends DetailsTemplateBase {}

package/lib/template/details-two-column/details-two-column.component.html

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'two-column' }"
+  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-2">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/lib/template/details-two-column/details-two-column.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-2 {
   display: grid;
   grid-template-columns: repeat(2, 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);
+}

package/lib/template/details-two-column/details-two-column.component.ts

@@ -1,4 +1,5 @@
 import { Component, forwardRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { DetailsTemplateBase } from '@pega/angular-sdk-components';
 
@@ -6,48 +7,6 @@ import { DetailsTemplateBase } from '@pega/angular-sdk-components';
   selector: 'app-details-two-column',
   templateUrl: './details-two-column.component.html',
   styleUrls: ['./details-two-column.component.scss'],
-  imports: [forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DetailsTwoColumnComponent extends DetailsTemplateBase {
-  override pConn$: typeof PConnect;
-
-  showHighlightedData: boolean;
-  highlightedDataArr: any;
-
-  arFields$: any[] = [];
-  arFields2$: any[] = [];
-  arFields3$: any[] = [];
-
-  propsToUse: any = {};
-
-  override updateSelf() {
-    const rawMetaData: any = this.pConn$.resolveConfigProps(this.pConn$.getRawMetadata()?.config);
-    this.showHighlightedData = rawMetaData?.showHighlightedData;
-
-    if (this.showHighlightedData) {
-      const highlightedData = rawMetaData?.highlightedData;
-      this.highlightedDataArr = highlightedData?.map(field => {
-        field.config.displayMode = 'STACKED_LARGE_VAL';
-
-        if (field.config.value === '@P .pyStatusWork') {
-          field.type = 'TextInput';
-          field.config.displayAsStatus = true;
-        }
-
-        return field;
-      });
-    }
-
-    this.pConn$.setInheritedProp('displayMode', 'DISPLAY_ONLY');
-    this.pConn$.setInheritedProp('readOnly', true);
-
-    const kids = this.pConn$.getChildren() as any[];
-    for (const kid of kids) {
-      if (kids.indexOf(kid) == 0) {
-        this.arFields$ = this.processDetailFields(kid);
-      } else {
-        this.arFields2$ = this.processDetailFields(kid);
-      }
-    }
-  }
-}
+export class DetailsTwoColumnComponent extends DetailsTemplateBase {}

package/lib/template/details-wide-narrow/details-wide-narrow.component.html

@@ -1,4 +1,23 @@
 <component-mapper
-  name="MaterialDetails"
-  [props]="{ arFields$, arFields2$, arHighlightedFields: highlightedDataArr, layout: 'wide-narrow' }"
+  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-wide-narrow">
+    <component-mapper
+      *ngFor="let child of children"
+      [name]="child.getPConnect().getComponentName()"
+      [props]="{ pConn$: child.getPConnect(), formGroup$ }"
+    ></component-mapper>
+  </div>
+</ng-template>

package/lib/template/details-wide-narrow/details-wide-narrow.component.scss

@@ -1,7 +1,14 @@
-.psdk-grid-filter {
+.psdk-grid-filter-wide-narrow {
   display: grid;
   grid-template-columns: 7fr 3fr;
   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);
+}