@pega/dx-component-builder-sdk 0.23.13 → 0.23.15

package/tests/assets/sdk-a/components/create/override-sdk/field/check-box/check-box.component.ts

@@ -13,6 +13,8 @@ interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
   // Everything from PConnFieldProps except value and change type of value to boolean
   value: boolean;
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 @Component({
@@ -45,6 +47,8 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
+  trueLabel$?: string;
+  falseLabel$?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -116,6 +120,8 @@ export class CheckBoxComponent implements OnInit, OnDestroy {
 
     this.caption$ = this.configProps$.caption;
     this.helperText = this.configProps$.helperText;
+    this.trueLabel$ = this.configProps$.trueLabel;
+    this.falseLabel$ = this.configProps$.falseLabel;
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {

package/tests/assets/sdk-a/components/create/override-sdk/field/date/date.component.html

@@ -1,5 +1,9 @@
 <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$: getFormattedValue(), displayMode$ }"
+  ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">

package/tests/assets/sdk-a/components/create/override-sdk/field/date/date.component.ts

@@ -14,6 +14,7 @@ import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface DateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -242,4 +243,10 @@ export class DateComponent implements OnInit, OnDestroy {
     }
     return errMessage;
   }
+
+  getFormattedValue() {
+    return format(this.value$, 'date', {
+      format: this.theDateFormat.dateFormatString
+    });
+  }
 }

package/tests/assets/sdk-a/components/create/override-sdk/field/group/config-ext.json

@@ -0,0 +1,8 @@
+{
+    "componentKey": "Group",
+    "name": "Group",
+    "label": "Field Group",
+    "description": "Field Group",
+    "type": "Group",
+    "properties": []
+}

package/tests/assets/sdk-a/components/create/override-sdk/field/group/group.component.html

@@ -0,0 +1,25 @@
+<ng-container *ngIf="visibility$">
+  <component-mapper
+    name="FieldGroup"
+    [props]="{
+      name: showHeading$ ? heading$ : undefined,
+      collapsible: collapsible$,
+      instructions: instructions$,
+      childrenTemplate: childrenTemplate
+    }"
+  >
+  </component-mapper>
+
+  <ng-template #childrenTemplate>
+    <div *ngFor="let kid of arChildren$">
+      <component-mapper
+        [name]="kid.getPConnect().getComponentName()"
+        [props]="{
+          pConn$: kid.getPConnect(),
+          formGroup$: formGroup$
+        }"
+        errorMsg="Field Group wants component not yet available: {{ kid.getPConnect().getComponentName() }}"
+      ></component-mapper>
+    </div>
+  </ng-template>
+</ng-container>

package/tests/assets/sdk-a/components/create/override-sdk/field/group/group.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GroupComponent } from './group.component';
+
+describe('GroupComponent', () => {
+  let component: GroupComponent;
+  let fixture: ComponentFixture<GroupComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [GroupComponent]
+    });
+    fixture = TestBed.createComponent(GroupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/create/override-sdk/field/group/group.component.ts

@@ -0,0 +1,84 @@
+import { CommonModule } from '@angular/common';
+import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { ReferenceComponent } from '@pega/angular-sdk-components';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { PConnFieldProps } from '@pega/angular-sdk-components';
+
+interface GroupProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on Group here
+  showHeading: boolean;
+  heading: string;
+  instructions: string;
+  collapsible: boolean;
+}
+
+@Component({
+  selector: 'app-group',
+  templateUrl: './group.component.html',
+  styleUrls: ['./group.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class GroupComponent implements OnInit {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  arChildren$: any[];
+  visibility$?: boolean;
+  showHeading$?: boolean;
+  heading$: string;
+  instructions$: string;
+  collapsible$: boolean;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: GroupProps;
+
+  constructor(private angularPConnect: AngularPConnectService) {}
+
+  ngOnInit(): void {
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    this.checkAndUpdate();
+  }
+
+  // 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(): void {
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as GroupProps;
+    this.arChildren$ = ReferenceComponent.normalizePConnArray(this.pConn$.getChildren());
+    this.visibility$ = this.configProps$.visibility;
+    this.showHeading$ = this.configProps$.showHeading;
+    this.heading$ = this.configProps$.heading;
+    this.instructions$ = this.configProps$.instructions;
+    this.collapsible$ = this.configProps$.collapsible;
+
+    if (this.configProps$.displayMode === 'LABELS_LEFT') {
+      if (this.configProps$.visibility === undefined) this.visibility$ = true;
+
+      this.arChildren$.forEach(child => {
+        const pConn = child.getPConnect();
+        pConn.setInheritedProp('displayMode', 'LABELS_LEFT');
+        pConn.setInheritedProp('readOnly', true);
+
+        return child;
+      });
+    }
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/field/rich-text/rich-text.component.html

@@ -0,0 +1,20 @@
+<div *ngIf="displayMode$; else noDisplayMode">
+  <component-mapper *ngIf="bVisible$ !== false" name="FieldValueList" [props]="{ label$, value$, displayMode$ }"></component-mapper>
+</div>
+<ng-template #noDisplayMode>
+  <div *ngIf="!bReadonly$; else noEdit">
+    <div *ngIf="bVisible$">
+      <component-mapper
+        name="RichTextEditor"
+        [props]="{ placeholder, required: bRequired$, disabled: bDisabled$, label: label$, readonly: false, error, info, testId, value: value$ }"
+        [parent]="this"
+        [outputEvents]="{ onBlur: fieldOnBlur, onChange: fieldOnChange }"
+      ></component-mapper>
+    </div>
+  </div>
+</ng-template>
+<ng-template #noEdit>
+  <div *ngIf="bVisible$ !== false">
+    <component-mapper name="RichTextEditor" [props]="{ label: label$, value: value$, readonly: true, testId }" [parent]="this"></component-mapper>
+  </div>
+</ng-template>

package/tests/assets/sdk-a/components/create/override-sdk/field/rich-text/rich-text.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { RichTextComponent } from './rich-text.component';
+
+describe('RichTextComponent', () => {
+  let component: RichTextComponent;
+  let fixture: ComponentFixture<RichTextComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [RichTextComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RichTextComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/tests/assets/sdk-a/components/create/override-sdk/field/rich-text/rich-text.component.ts

@@ -0,0 +1,131 @@
+import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { Utils } 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 RichTextProps extends PConnFieldProps {
+  // If any, enter additional props that only exist on RichText here
+}
+
+@Component({
+  selector: 'app-rich-text',
+  templateUrl: './rich-text.component.html',
+  styleUrls: ['./rich-text.component.scss'],
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class RichTextComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+  configProps$: RichTextProps;
+
+  label$ = '';
+  value$ = '';
+  bRequired$ = false;
+  bReadonly$ = false;
+  bDisabled$ = false;
+  bVisible$ = true;
+  displayMode$?: string = '';
+  controlName$: string;
+  testId: string;
+  helperText: string;
+  placeholder: any;
+  info: any;
+  error: boolean;
+  status: any;
+
+  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);
+
+    // call updateSelf when initializing
+    this.checkAndUpdate();
+  }
+
+  ngOnDestroy(): void {
+    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 {
+    // moved this from ngOnInit() and call this from there instead...
+    this.configProps$ = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps()) as RichTextProps;
+    const stateProps: any = this.pConn$.getStateProps();
+    this.status = stateProps?.status;
+
+    if (this.configProps$.value != undefined) {
+      this.value$ = this.configProps$.value;
+    }
+
+    this.testId = this.configProps$.testId;
+    this.displayMode$ = this.configProps$.displayMode;
+    this.label$ = this.configProps$.label;
+    this.placeholder = this.configProps$.placeholder;
+    this.info = stateProps?.validatemessage || this.configProps$.helperText;
+    this.error = stateProps?.status === 'error';
+
+    if (this.configProps$.required != null) {
+      this.bRequired$ = this.utils.getBooleanValue(this.configProps$.required);
+    }
+
+    if (this.configProps$.visibility != null) {
+      this.bVisible$ = this.utils.getBooleanValue(this.configProps$.visibility);
+    }
+
+    if (this.configProps$.disabled != undefined) {
+      this.bDisabled$ = this.utils.getBooleanValue(this.configProps$.disabled);
+    }
+
+    if (this.configProps$.readOnly != null) {
+      this.bReadonly$ = this.utils.getBooleanValue(this.configProps$.readOnly);
+    }
+  }
+
+  fieldOnChange() {
+    if (this.status === 'error') {
+      const property = (this.pConn$.getStateProps() as any).value;
+      this.pConn$.clearErrorMessages({
+        property,
+        category: '',
+        context: ''
+      });
+    }
+  }
+
+  fieldOnBlur(editorValue: any) {
+    // PConnect wants to use eventHandler for onBlur
+    const actionsApi = this.pConn$?.getActionsApi();
+    const propName = (this.pConn$?.getStateProps() as any).value;
+    handleEvent(actionsApi, 'changeNblur', propName, editorValue);
+  }
+}

package/tests/assets/sdk-a/components/create/override-sdk/template/app-shell/app-shell.component.ts

@@ -143,7 +143,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
           this.sErrorMessages = this.sErrorMessages.concat(errorMessages.actionMessage).concat('\n');
 
           if (this.bOkDisplayError) {
-            const config = { panelClass: ['snackbar-newline'] };
+            const config = { panelClass: ['snackbar-newline'], duration: 5000 };
             this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
           }
         }
@@ -159,7 +159,7 @@ export class AppShellComponent implements OnInit, OnDestroy {
         this.bOkDisplayError = true;
 
         if (this.bOkDisplayError) {
-          const config = { panelClass: ['snackbar-newline'] };
+          const config = { panelClass: ['snackbar-newline'], duration: 5000 };
           this.snackBarRef = this.snackBar.open(this.sErrorMessages, 'Ok', config);
         }
         // this.snackBarRef.afterDismissed().subscribe( info => {

package/tests/assets/sdk-a/components/create/override-sdk/template/case-view/case-view.component.ts

@@ -223,7 +223,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
     const actionsAPI = this.pConn$.getActionsApi();
     const openLocalAction = actionsAPI.openLocalAction.bind(actionsAPI);
 
-    openLocalAction(editAction.ID, { ...editAction });
+    openLocalAction(editAction.ID, { ...editAction, containerName: 'modal', type: 'express' });
   }
 
   _menuActionClick(data) {

package/tests/assets/sdk-a/components/create/override-sdk/template/default-form/default-form.component.scss

@@ -1,27 +1,31 @@
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-two-column {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-three-column {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
 }
 
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
 }
 
 .template-title-container {

package/tests/assets/sdk-a/components/create/override-sdk/template/details/details.component.ts

@@ -76,7 +76,7 @@ export class DetailsComponent implements OnInit, OnDestroy {
       fields?.forEach(field => {
         const thePConn = field.getPConnect();
         const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference') {
+        if (theCompType === 'reference' || theCompType === 'group') {
           const configProps = thePConn.getConfigProps();
           configProps.readOnly = true;
           configProps.displayMode = 'LABELS_LEFT';
@@ -89,6 +89,7 @@ export class DetailsComponent implements OnInit, OnDestroy {
           };
           const viewContConfig = {
             meta: {
+              ...thePConn.getMetadata(),
               type: theCompType,
               config: configProps
             },

package/tests/assets/sdk-a/components/create/override-sdk/widget/file-utility/file-utility.component.ts

@@ -149,24 +149,30 @@ export class FileUtilityComponent implements OnInit, OnDestroy {
       this.lu_bLoading$ = true;
     }
 
-    // const uploadedFiles = [];
-
-    for (const file of files) {
-      attachmentUtils
-        .uploadAttachment(file, this.onUploadProgress, this.errorHandler, this.pConn$.getContextName())
-        .then((fileResponse: any) => {
-          if (fileResponse.type === 'File') {
-            (attachmentUtils.linkAttachmentsToCase(caseID, [fileResponse], 'File', this.pConn$.getContextName()) as Promise<any>)
-              .then(() => {
-                this.refreshAttachments();
-              })
-              .catch(console.error);
+    const arFiles: any = Array.from(files);
+
+    Promise.allSettled(
+      arFiles.map(file => attachmentUtils.uploadAttachment(file, this.onUploadProgress, this.errorHandler, this.pConn$.getContextName()))
+    )
+      .then((fileResponses: any) => {
+        const uploadedFiles: any = [];
+        fileResponses.forEach(fileResponse => {
+          if (fileResponse.status === 'fulfilled') {
+            uploadedFiles.push(fileResponse.value);
           }
-        })
-        .catch(console.error);
-    }
+        });
+        if (uploadedFiles.length > 0) {
+          (attachmentUtils.linkAttachmentsToCase(caseID, uploadedFiles, 'File', this.pConn$.getContextName()) as Promise<any>)
+            .then(() => {
+              this.refreshAttachments();
+            })
+            .catch();
+        }
+      })
+      .catch();
 
     this.arFileList$ = [];
+    this.lu_bLoading$ = false;
   }
 
   refreshAttachments() {

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

@@ -1,5 +1,9 @@
 <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$: caption$, value$: value$ ? trueLabel$ : falseLabel$, displayMode$ }"
+  ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">

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

@@ -13,6 +13,8 @@ interface PegaDxilMyBooleanProps extends Omit<PConnFieldProps, 'value'> {
   // Everything from PConnFieldProps except value and change type of value to boolean
   value: boolean;
   caption?: string;
+  trueLabel?: string;
+  falseLabel?: string;
 }
 
 @Component({
@@ -45,6 +47,8 @@ export class PegaDxilMyBooleanComponent implements OnInit, OnDestroy {
   bHasForm$ = true;
   componentReference = '';
   helperText: string;
+  trueLabel$?: string;
+  falseLabel$?: string;
 
   fieldControl = new FormControl('', null);
 
@@ -116,6 +120,8 @@ export class PegaDxilMyBooleanComponent implements OnInit, OnDestroy {
 
     this.caption$ = this.configProps$.caption;
     this.helperText = this.configProps$.helperText;
+    this.trueLabel$ = this.configProps$.trueLabel;
+    this.falseLabel$ = this.configProps$.falseLabel;
 
     // timeout and detectChanges to avoid ExpressionChangedAfterItHasBeenCheckedError
     setTimeout(() => {

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

@@ -1,5 +1,9 @@
 <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$: getFormattedValue(), displayMode$ }"
+  ></component-mapper>
 </div>
 <ng-template #noDisplayMode>
   <div *ngIf="!bReadonly$ && bHasForm$; else noEdit">

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

@@ -14,6 +14,7 @@ import { Utils } from '@pega/angular-sdk-components';
 import { ComponentMapperComponent } from '@pega/angular-sdk-components';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/angular-sdk-components';
 import { PConnFieldProps } from '@pega/angular-sdk-components';
+import { format } from '@pega/angular-sdk-components';
 
 interface PegaDxilMyDateProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Date here
@@ -242,4 +243,10 @@ export class PegaDxilMyDateComponent implements OnInit, OnDestroy {
     }
     return errMessage;
   }
+
+  getFormattedValue() {
+    return format(this.value$, 'date', {
+      format: this.theDateFormat.dateFormatString
+    });
+  }
 }

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

@@ -75,7 +75,7 @@ export class PegaDxilMyDetailsComponent implements OnInit, OnDestroy {
       fields?.forEach(field => {
         const thePConn = field.getPConnect();
         const theCompType = thePConn.getComponentName().toLowerCase();
-        if (theCompType === 'reference') {
+        if (theCompType === 'reference' || theCompType === 'group') {
           const configProps = thePConn.getConfigProps();
           configProps.readOnly = true;
           configProps.displayMode = 'LABELS_LEFT';
@@ -88,6 +88,7 @@ export class PegaDxilMyDetailsComponent implements OnInit, OnDestroy {
           };
           const viewContConfig = {
             meta: {
+              ...thePConn.getMetadata(),
               type: theCompType,
               config: configProps
             },

package/tests/assets/sdk-a/components/createAll/custom-sdk/template/pega-dxil-my-form/pega-dxil-my-form.component.scss

@@ -1,27 +1,31 @@
 .psdk-default-form-one-column {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-two-column {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
 }
 
 .psdk-default-form-three-column {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: calc(1rem);
+  column-gap: calc(1rem);
+}
+
+.psdk-default-form-three-column .grid-column {
+  grid-column: 1 / span 3;
 }
 
 .psdk-default-form-two-column .grid-column {
   grid-column: 1 / span 2;
 }
 
-.psdk-default-form-three-column .grid-column {
-  grid-column: 1 / span 3;
+.psdk-default-form-one-column .grid-column {
+  grid-column: 1;
 }
 
 .template-title-container {
@@ -29,3 +33,8 @@
   font-weight: 600;
   margin: 10px 0px;
 }
+
+.psdk-default-form-instruction-text {
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
+}