Fixed improper payload and updated few playwright tests

packages/angular-sdk-components/src/lib/_components/template/default-form/default-form.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit, Input, forwardRef, OnDestroy } from '@angular/core';
+import { Component, OnInit, Input, forwardRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ReferenceComponent } from '../../infra/reference/reference.component';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
 import { TemplateUtils } from '../../../_helpers/template-utils';
+import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component';
 
 interface DefaultFormProps {
   // If any, enter additional props that only exist on this component
@@ -19,8 +20,8 @@ interface DefaultFormProps {
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class DefaultFormComponent implements OnInit, OnDestroy {
-  @Input() pConn$: typeof PConnect;
+export class DefaultFormComponent extends FormTemplateBaseComponent implements OnInit {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];
@@ -41,7 +42,9 @@ export class DefaultFormComponent implements OnInit, OnDestroy {
     'Confirmation'
   ];
 
-  constructor(private templateUtils: TemplateUtils) {}
+  constructor(private templateUtils: TemplateUtils) {
+    super();
+  }
 
   ngOnInit(): void {
     const configProps = this.pConn$.getConfigProps() as DefaultFormProps;
@@ -73,9 +76,4 @@ export class DefaultFormComponent implements OnInit, OnDestroy {
     //  normalize them
     this.arChildren$ = ReferenceComponent.normalizePConnArray(kids[0].getPConnect().getChildren());
   }
-
-  ngOnDestroy(): void {
-    // Clean up
-    PCore.getContextTreeManager().removeContextTreeNode(this.pConn$.getContextName());
-  }
 }

packages/angular-sdk-components/src/lib/_components/template/form-template-base/form-template-base.component.ts

@@ -0,0 +1,10 @@
+import { Directive, OnDestroy } from '@angular/core';
+
+@Directive()
+export class FormTemplateBaseComponent implements OnDestroy {
+  pConn$: any;
+
+  ngOnDestroy(): void {
+    PCore.getContextTreeManager().removeContextTreeNode(this.pConn$.getContextName());
+  }
+}

packages/angular-sdk-components/src/lib/_components/template/one-column/one-column.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component';
 
 @Component({
   selector: 'app-one-column',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class OneColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class OneColumnComponent extends FormTemplateBaseComponent implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];

packages/angular-sdk-components/src/lib/_components/template/three-column/three-column.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component';
 
 @Component({
   selector: 'app-three-column',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class ThreeColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class ThreeColumnComponent extends FormTemplateBaseComponent implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];

packages/angular-sdk-components/src/lib/_components/template/two-column/two-column.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, SimpleChanges, OnChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component';
 
 @Component({
   selector: 'app-two-column',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class TwoColumnComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class TwoColumnComponent extends FormTemplateBaseComponent implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];

packages/angular-sdk-components/src/lib/_components/template/wide-narrow-form/wide-narrow-form.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit, Input, forwardRef, OnChanges, SimpleChanges } from '
 import { CommonModule } from '@angular/common';
 import { FormGroup } from '@angular/forms';
 import { ComponentMapperComponent } from '../../../_bridge/component-mapper/component-mapper.component';
+import { FormTemplateBaseComponent } from '../form-template-base/form-template-base.component';
 
 @Component({
   selector: 'app-wide-narrow-form',
@@ -10,8 +11,8 @@ import { ComponentMapperComponent } from '../../../_bridge/component-mapper/comp
   standalone: true,
   imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
 })
-export class WideNarrowFormComponent implements OnInit, OnChanges {
-  @Input() pConn$: typeof PConnect;
+export class WideNarrowFormComponent extends FormTemplateBaseComponent implements OnInit, OnChanges {
+  @Input() override pConn$: typeof PConnect;
   @Input() formGroup$: FormGroup;
 
   arChildren$: any[];

packages/angular-sdk-components/src/public-api.ts

@@ -68,6 +68,7 @@ export * from './lib/_components/template/details-wide-narrow/details-wide-narro
 export * from './lib/_components/template/field-group-list/field-group-list.component';
 export * from './lib/_components/template/field-group-template/field-group-template.component';
 export * from './lib/_components/template/field-value-list/field-value-list.component';
+export * from './lib/_components/template/form-template-base/form-template-base.component';
 export * from './lib/_components/template/inline-dashboard/inline-dashboard.component';
 export * from './lib/_components/template/inline-dashboard-page/inline-dashboard-page.component';
 export * from './lib/_components/template/list-page/list-page.component';

projects/angular-test-app/tests/e2e/DigV2/ComplexFields/DataReference.spec.js

@@ -229,20 +229,20 @@ test.describe('E2E test', () => {
     await selectProducts.click();
     await page.getByRole('option', { name: 'Mobile' }).click();
     await selectProducts.click();
-    await page.getByRole('option', { name: 'Telivision' }).click();
+    await page.getByRole('option', { name: 'Television' }).click();
     await expect(selectProducts).toBeVisible();
 
     await page.locator('button:has-text("Next")').click();
 
     assignment = page.locator('app-default-form');
 
     await expect(assignment.locator('td >> text="Mobile"')).toBeVisible();
-    await expect(assignment.locator('td >> text="Telivision"')).toBeVisible();
+    await expect(assignment.locator('td >> text="Television"')).toBeVisible();
 
     await page.locator('button:has-text("Previous")').click();
 
     await expect(page.locator('mat-chip-row:has-text("Mobile")')).toBeVisible();
-    await expect(page.locator('mat-chip-row:has-text("Telivision")')).toBeVisible();
+    await expect(page.locator('mat-chip-row:has-text("Television")')).toBeVisible();
 
     let deleteProduct = await page.locator('mat-chip-row:has-text("Mobile")');
     await deleteProduct.locator('button:has-text("cancel")').click();
@@ -253,7 +253,7 @@ test.describe('E2E test', () => {
 
     await page.locator('button:has-text("Previous")').click();
 
-    deleteProduct = await page.locator('mat-chip-row:has-text("Telivision")');
+    deleteProduct = await page.locator('mat-chip-row:has-text("Television")');
     await deleteProduct.locator('button:has-text("cancel")').click();
 
     /** Checkbox group mode type test */

projects/angular-test-app/tests/e2e/MediaCo/portal.spec.js

@@ -116,6 +116,7 @@ test.describe('E2E test', () => {
     const todo = page.locator('div[id="worklist"]');
     await expect(todo.getByText('To do')).toBeVisible();
 
+    await page.waitForTimeout(5000);
     const attachmentCount = await page.locator('div[id="attachments-count"]').textContent();
     await expect(Number(attachmentCount)).toBeGreaterThan(0);
   }, 10000);