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

package/src/tasks/create/templates/SDK-Angular/template/PAGE/demo.stories.tsx.mustache

@@ -7,7 +7,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/PAGE/page.component.html.mustache

@@ -7,6 +7,7 @@
   <div *ngFor="let kid of arChildren$">
     <div [ngSwitch]="kid.getPConnect().getComponentName()">
       <component-mapper *ngSwitchCase="'View'" name="View" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
+      <component-mapper *ngSwitchCase="'reference'" name="reference" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <component-mapper *ngSwitchCase="'Region'" name="Region" [props]="{ pConn$: kid.getPConnect() }"></component-mapper>
       <div *ngSwitchDefault><%COMPONENT_CLASS_NAME%> Missing: {{ kid.getPConnect().getComponentName() }}</div>
     </div>

package/src/tasks/create/templates/SDK-Angular/widget/CASE/case.component.ts.mustache

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { Utils } from '@pega/angular-sdk-components';
@@ -23,7 +23,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
   displayedColumns$ = Array<any>();
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -54,6 +57,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
       this.repeatList$ = new MatTableDataSource(tableDataResults);
 
       this.waitingForData = false;
+      this.cdRef.markForCheck();
     });
   }
 

package/src/tasks/create/templates/SDK-Angular/widget/CASE/demo.stories.tsx.mustache

@@ -8,11 +8,23 @@ const meta: Meta<{{COMPONENT_CLASS_NAME}}Component> = {
   title: '{{COMPONENT_CLASS_NAME}}',
   component: {{COMPONENT_CLASS_NAME}}Component,
   excludeStories: /.*Data$/,
-  render: (args) => {
+  render: args => {
+    window.PCore.getConstants = (): any => {
+      return {
+        CASE_INFO: {
+          CASE_INFO_ID: 'caseInfo.ID',
+          INSTRUCTIONS: ''
+        }
+      };
+    };
     window.PCore.getDataApiUtils = (): any => {
       return {
         getData: () => {
-          return Promise.resolve(historyData);
+          return {
+            then: (callback: any) => {
+              callback(historyData);
+            }
+          };
         }
       };
     };

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/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 => {
     window.PCore.getDataApiUtils = (): any => {
       return {
         getData: () => {

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.html.mustache

@@ -5,13 +5,12 @@
   <div>
     <p>{{ configProps$.description }}</p>
     <div>
-      <h3>{{ configProps$.label }}</h3>
       <ul>
         <li *ngFor="let detail of details$">{{ detail }}</li>
       </ul>
     </div>
   </div>
-  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button color="primary" [href]="configProps$.whatsnewlink">See what's new</a>
+  <a *ngIf="configProps$.whatsnewlink != ''" mat-raised-button [href]="configProps$.whatsnewlink">See what's new</a>
 </article>
 <br />
 <table mat-table [dataSource]="workList">

package/src/tasks/create/templates/SDK-Angular/widget/PAGE/page.component.ts.mustache

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
@@ -30,7 +30,10 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
   workList: MatTableDataSource<any>;
   waitingForData = false;
 
-  constructor(private utils: Utils) {}
+  constructor(
+    private utils: Utils,
+    private cdRef: ChangeDetectorRef
+  ) {}
 
   ngOnInit(): void {
     this.configProps$ = this.pConn$.getConfigProps();
@@ -83,6 +86,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit {
           this.workList = new MatTableDataSource();
           this.waitingForData = false;
         }
+        this.cdRef.markForCheck();
       })
       .catch((error: any) => {
         this.workList = new MatTableDataSource();

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/demo.stories.tsx.mustache

@@ -18,7 +18,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/widget/PAGE-CASE/page-case.component.html.mustache

@@ -4,10 +4,12 @@
   <div class="psdk-label">
     {{ label$ }}
   </div>
-  <div class="psdk-double">
-    <button mat-button color="primary" style="text-decoration: underline" (click)="showOperator()">{{ name$ }}</button>
+  <div class="psdk-operator-details">
+    <div class="psdk-double">
+      <button mat-button color="primary" style="text-decoration: underline" (click)="showOperator()">{{ name$ }}</button>
+    </div>
+    <div>{{ date$ }}</div>
   </div>
-  <div>{{ date$ }}</div>
 </div>
 
 <div>

package/src/tasks/create/templates/SDK-Angular/widget/PAGE-CASE/page-case.component.ts.mustache

@@ -112,7 +112,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges, OnD
         ];
 
         this.bShowPopover$ = true;
-        this.cdRef.detectChanges();
+        this.cdRef.markForCheck();
       } else {
         console.log(
           `Operator: PCore.getUserApi().getOperatorDetails(${this.id$}); returned empty res.data.pyOperatorInfo.pyUserName - adding default`
@@ -144,6 +144,7 @@ export class {{COMPONENT_CLASS_NAME}}Component implements OnInit, OnChanges, OnD
             value: fillerString
           }
         ];
+        this.cdRef.markForCheck();
       }
     });
   }

package/src/tasks/create/templates/SDK-React/field/Icon-Button-URL/index.tsx.mustache

@@ -99,7 +99,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
           console.log(error);
         });
     }
-  }, [PConnect, countryCode, showTable]);
+  }, [countryCode, showTable]);
 
   // when DISPLAY_ONLY, in this example we will just show the URL.
   if (displayMode === 'DISPLAY_ONLY') {
@@ -118,7 +118,7 @@ export default function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}
       {{=<% %>=}}
       <div style={{ display: 'flex', alignItems: 'center' }} data-testid={testId}>
         <ArrowForwardIcon />
-        <TextContent displayAs='body' content={localLabel} />
+        <TextContent displayAs='Paragraph' content={localLabel} />
         <Tooltip title={PConnect.getLocalizedValue('Click to show/hide state list', '', '')}>
           <IconButton onClick={showHideTable} style={{ padding: '0 0.25rem' }}>
             <FormatListNumberedIcon />

package/src/tasks/create-all/index.js

@@ -38,6 +38,7 @@ import {
   updateComponentDefaultLibrary
 } from '../../util.js';
 import { COMPONENT_SCHEMA } from '../../constants.js';
+import { getPrettierFormattedString } from '../map/map.js';
 
 const copy = promisify(ncp);
 
@@ -131,7 +132,7 @@ export const compileMustacheTemplates = async (
   const framework = await getFramework();
 
   // allowedApplications = allowedApplications.filter(el => !!el.trim()).map(el => el.trim());
-  files.forEach(file => {
+  await Promise.all(files.map(async (file) => {
     const filePath = path.join(componentDirectory, file);
 
     const output = compileMustacheTemplate(filePath, {
@@ -151,24 +152,31 @@ export const compileMustacheTemplates = async (
       IS_BOOLEAN: isBool,
       IS_PHONE: isPhone
     });
-    fs.writeFileSync(filePath, output);
+
+    const formattedOutput = await getPrettierFormattedString(output, filePath.replace(/\.mustache$/, ''));
+
+    fs.writeFileSync(filePath, formattedOutput);
 
     switch (framework) {
       case "SDK-React":
         fs.renameSync(filePath, filePath.replace('.mustache', ''));
         break;
       case "SDK-Angular":
+        {
         let newFilePath = filePath.replace('.mustache', '');
         const typeAng = convertIntoKebabCase(convertIntoPascalCase(fileSubType)).concat(".component");
         newFilePath = newFilePath.replace(typeAng, componentKeyKebab.concat(".component"));
 
         fs.renameSync(filePath, newFilePath);
+        }
         break;
       case "SDK-WebComponents":
         fs.renameSync(filePath, filePath.replace('.mustache', ''));
         break;
+      default:
+          break;
     }
-  });
+  }));
 };
 
 
@@ -422,6 +430,13 @@ export const validateCompile = async (
 export default async options => {
   showVersion();
 
+  console.log(
+    chalk.red(
+      'Custom-constellation are aligned with Pega constellation which is still on react 18.\n' +
+      'Please make sure any changes to custom-constellation should be aligned with React 18 development.'
+    )
+  );
+
   await checkPathAccess(pegaConfigJsonPath);
 
   let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });

package/src/tasks/map/map.js

@@ -38,17 +38,23 @@ const pegaLocalReactComponentMapPath = path.join(path.resolve(), SDK_LOCAL_REACT
 const pegaLocalAngularComponentMapPath = path.join(path.resolve(),  SDK_LOCAL_ANGULAR_COMPONENT_MAP_FILENAME);
 const prettierConfigJsonPath = path.join(path.resolve(), PRETTIER_CONFIG_FILENAME);
 
-export const getPrettierFormattedString = async (content) => {
+export const getPrettierFormattedString = async (content, filepath) => {
   const options = await prettier.resolveConfig(prettierConfigJsonPath);
 
   // format the contents
   if (options) {
-    options.parser = 'babel';
-    return  prettier.format(content, options);
-  }
-  else {
-    return content;
+    let parser = 'babel';
+    if (filepath) {
+      const { inferredParser } = await prettier.getFileInfo(filepath);
+      if (!inferredParser) return content;
+      parser = inferredParser;
+    }
+
+    const formatOptions = { ...options, parser };
+    return prettier.format(content, formatOptions);
   }
+  
+  return content;
 }
 
 //

package/src/tasks/override/index.js

@@ -6,7 +6,7 @@ import { join } from 'path';
 import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
-import { updateComponentMap  } from '../map/map.js';
+import { getPrettierFormattedString, updateComponentMap  } from '../map/map.js';
 
 import {
   checkPathAccess,
@@ -65,8 +65,10 @@ const checkAndCreateConfigComponentKey = async (targetDirectory) => {
       // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
       const configContent = JSON.stringify(configObj, null, 4);
 
+      const configContentFormatted = await getPrettierFormattedString(configContent);
+
       // update file
-      fs.writeFileSync(configFile, configContent, { encoding: 'utf8' });
+      fs.writeFileSync(configFile, configContentFormatted, { encoding: 'utf8' });
     }
 
   }

package/src/tasks/override-all/index.js

@@ -6,7 +6,7 @@ import { join } from 'path';
 import inquirer from 'inquirer';
 import ncp from 'ncp';
 import chalk from 'chalk';
-import { updateComponentMap  } from '../map/map.js';
+import { getPrettierFormattedString, updateComponentMap  } from '../map/map.js';
 
 import {
   checkPathAccess, 
@@ -66,8 +66,10 @@ const checkAndCreateConfigComponentKey = async (targetDirectory) => {
       // stringify "4", makes the json string look like JSON in the file, formated instead of a single line
       const configContent = JSON.stringify(configObj, null, 4);
 
+      const configContentFormatted = await getPrettierFormattedString(configContent);
+
       // update file
-      fs.writeFileSync(configFile, configContent, { encoding: 'utf8' });
+      fs.writeFileSync(configFile, configContentFormatted, { encoding: 'utf8' });
     }
 
   }

package/src/util.js

@@ -44,6 +44,7 @@ import {
   JEST_TESTS_FUNCTIONAL_PATH,
   MAX_RFT_CHARS
 } from './constants.js';
+import { getPrettierFormattedString } from './tasks/map/map.js';
 
 export const DXCB_CONFIG_INTERNAL_JSON_FILENAME = 'src/dxcb.config.json';
 
@@ -97,11 +98,12 @@ export const updateComponentDefaultLibrary = async (library) => {
   let data = fs.readFileSync(pegaConfigJsonPath, { encoding: 'utf8' });
   data = JSON.parse(data);
 
-  let componentsDefault = data.dxcbConfig.componentDefaults;
+  const componentsDefault = data.dxcbConfig.componentDefaults;
   componentsDefault.library = library;
 
+  const configJSON = await getPrettierFormattedString(JSON.stringify(data, null, 4))
 
-  fs.writeFileSync(pegaConfigJsonPath, JSON.stringify(data, null, 4),  { encoding: 'utf8',flag:'w' });
+  fs.writeFileSync(pegaConfigJsonPath, configJSON,  { encoding: 'utf8',flag:'w' });
 
 }
 

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/config.json

@@ -5,7 +5,6 @@
   "organization": "Pega",
   "version": "0.0.1",
   "library": "DXIL",
-  "allowedApplications": [],
   "componentKey": "Pega_DXIL_MyTestText",
   "type": "Field",
   "subtype": "Text",

package/tests/assets/sdk-a/components/create/custom-sdk/field/pega-dxil-my-test-text/pega-dxil-my-test-text.component.ts

@@ -1,176 +1,60 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { interval } from 'rxjs';
-import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
-import { Utils } from '@pega/angular-sdk-components';
+import { FieldBase } 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';
 
 interface PegaDxilMyTestTextProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Text here
+  fieldMetadata?: any;
 }
 
 @Component({
   selector: 'app-pega-dxil-my-test-text',
   templateUrl: './pega-dxil-my-test-text.component.html',
   styleUrls: ['./pega-dxil-my-test-text.component.scss'],
-  standalone: true,
-  imports: [CommonModule, MatInputModule, MatFormFieldModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)]
+  imports: [CommonModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class PegaDxilMyTestTextComponent implements OnInit, OnDestroy {
-  @Input() pConn$: typeof PConnect;
-  @Input() formGroup$: FormGroup;
-
-  // For interaction with AngularPConnect
-  angularPConnectData: AngularPConnectData = {};
+export class PegaDxilMyTestTextComponent extends FieldBase {
   configProps$: PegaDxilMyTestTextProps;
 
-  value$ = '';
-  placeholder: string;
-  bVisible$ = true;
-  bDisabled$ = false;
-  bReadonly$ = false;
-  bRequired$ = false;
-  label$ = '';
-  bHideLabel$ = false;
-  testId = '';
-  helperText: string;
-  displayMode$?: string = '';
-
-  controlName$: string;
-  bHasForm$ = true;
-  componentReference = '';
-
-  fieldControl = new FormControl('', null);
-
-  constructor(
-    private angularPConnect: AngularPConnectService,
-    private utils: Utils
-  ) {}
-
-  ngOnInit(): void {
-    // First thing in initialization is registering and subscribing to the AngularPConnect service
-    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
-    this.controlName$ = this.angularPConnect.getComponentID(this);
-
-    // Then, continue on with other initialization
-
-    // call updateSelf when initializing
-    // this.updateSelf();
-    this.checkAndUpdate();
-
-    if (this.formGroup$) {
-      // add control to formGroup
-      this.formGroup$.addControl(this.controlName$, this.fieldControl);
-      this.fieldControl.setValue(this.value$);
-      this.bHasForm$ = true;
-    } else {
-      this.bReadonly$ = true;
-      this.bHasForm$ = false;
-    }
-  }
-
-  ngOnDestroy(): void {
-    if (this.formGroup$) {
-      this.formGroup$.removeControl(this.controlName$);
-    }
-
-    if (this.angularPConnectData.unsubscribeFn) {
-      this.angularPConnectData.unsubscribeFn();
-    }
-  }
-
-  // Callback passed when subscribing to store change
-  onStateChange() {
-    this.checkAndUpdate();
-  }
-
-  checkAndUpdate() {
-    // 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
-  updateSelf(): void {
-    this.componentReference = this.pConn$.getStateProps().value;
-    // moved this from ngOnInit() and call this from there instead...
+  /**
+   * Updates the component when there are changes in the state.
+   */
+  override updateSelf(): void {
+    // Resolve configuration properties
     this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as PegaDxilMyTestTextProps;
 
-    if (this.configProps$.value != undefined) {
-      this.value$ = this.configProps$.value;
-    }
-    this.testId = this.configProps$.testId;
-    this.label$ = this.configProps$.label;
-    this.helperText = this.configProps$.helperText;
-    this.placeholder = this.configProps$.placeholder || '';
-    this.displayMode$ = this.configProps$.displayMode;
-
-    if (this.configProps$.visibility != null) {
-      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
-    }
-
-    if (this.configProps$.required != null) {
-      this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
-    }
-
-    // disabled
-    if (this.configProps$.disabled != null) {
-      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
-    }
-
-    if (this.bDisabled$) {
-      this.fieldControl.disable();
-    } else {
-      this.fieldControl.enable();
-    }
+    // Update component common properties
+    this.updateComponentCommonProperties(this.configProps$);
 
-    if (this.configProps$.readOnly != null) {
-      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
-    }
+    // Get and set component specific properties
+    const { value } = this.configProps$;
+    this.value$ = value;
+  }
 
-    // trigger display of error message with field control
-    if (this.angularPConnectData.validateMessage != null && this.angularPConnectData.validateMessage != '') {
-      const timer = interval(100).subscribe(() => {
-        this.fieldControl.setErrors({ message: true });
-        this.fieldControl.markAsTouched();
+  fieldOnChange(event: any) {
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
 
-        timer.unsubscribe();
+    if (isValueChanged) {
+      this.pConn$.clearErrorMessages({
+        property: this.propName
       });
     }
   }
 
-  fieldOnChange(event: any) {
-    this.angularPConnectData.actions?.onChange(this, event);
-  }
-
   fieldOnBlur(event: any) {
-    // PConnect wants to use eventHandler for onBlur
-    this.angularPConnectData.actions?.onBlur(this, event);
-  }
-
-  getErrorMessage() {
-    let errMessage = '';
+    const oldVal = this.value$ ?? '';
+    const isValueChanged = event.target.value.toString() !== oldVal.toString();
 
-    // look for validation messages for json, pre-defined or just an error pushed from workitem (400)
-    if (this.fieldControl.hasError('message')) {
-      errMessage = this.angularPConnectData.validateMessage ?? '';
-      return errMessage;
+    if (isValueChanged) {
+      const value = event?.target?.value;
+      handleEvent(this.actionsApi, 'changeNblur', this.propName, value);
     }
-    if (this.fieldControl.hasError('required')) {
-      errMessage = 'You must enter a value';
-    } else if (this.fieldControl.errors) {
-      errMessage = this.fieldControl.errors.toString();
-    }
-
-    return errMessage;
   }
 }

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/alert/alert.component.scss

@@ -14,10 +14,10 @@
 }
 
 .psdk-alert-error {
-  color: var(--app-alert-error-color);
-  border: 1px solid var(--app-alert-error-border-color);
+  color: var(--mat-sys-error);
+  border: 1px solid var(--mat-sys-error);
   .mat-icon {
-    color: var(--app-alert-error-border-color);
+    color: var(--mat-sys-error);
   }
 }
 

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/alert/alert.component.ts

@@ -6,7 +6,6 @@ import { MatIconModule } from '@angular/material/icon';
   selector: 'app-alert',
   templateUrl: './alert.component.html',
   styleUrls: ['./alert.component.scss'],
-  standalone: true,
   imports: [CommonModule, MatIconModule]
 })
 export class AlertComponent {

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/alert-banner/alert-banner.component.ts

@@ -6,7 +6,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-alert-banner',
   templateUrl: './alert-banner.component.html',
   styleUrls: ['./alert-banner.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class AlertBannerComponent {

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/banner/banner.component.html

@@ -9,7 +9,7 @@
   </div>
   <div
     [ngClass]="{
-      'psdk-grid-filter-1': this.layout$ === 'two-column',
+      'psdk-grid-filter-2': this.layout$ === 'two-column',
       'psdk-grid-filter-wide-narrow': this.layout$ === 'wide-narrow',
       'psdk-grid-filter-narrow-wide': this.layout$ === 'narrow-wide'
     }"

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/banner/banner.component.scss

@@ -1,6 +1,14 @@
 .psdk-grid-filter-1 {
   display: grid;
-  grid-template-columns: repeat(3, 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-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;
@@ -12,7 +20,10 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
-  padding: 1rem;
+
+  & > *:nth-child(1) {
+    min-width: 0;
+  }
 }
 
 .psdk-grid-filter-narrow-wide {
@@ -21,6 +32,10 @@
   column-gap: calc(2 * 0.5rem);
   row-gap: calc(2 * 0.5rem);
   align-items: start;
+
+  & > *:nth-child(2) {
+    min-width: 0;
+  }
 }
 
 .background-image-style {
@@ -33,7 +48,6 @@
 
 .background-style {
   background-color: transparent;
-  color: var(--app-inverse-form-color);
   width: 100%;
   height: 100%;
   text-align: center;

package/tests/assets/sdk-a/components/create/override-sdk/designSystemExtension/banner/banner.component.ts

@@ -7,7 +7,6 @@ import { ComponentMapperComponent } from '@pega/angular-sdk-components';
   selector: 'app-banner',
   templateUrl: './banner.component.html',
   styleUrls: ['./banner.component.scss'],
-  standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
 export class BannerComponent {