@pega/sdk 0.0.14 → 0.0.15

package/templates/angular-sdk-reference/src/components/fields/phone/phone.component.ts

@@ -9,7 +9,7 @@ import { Component, Input } from '@angular/core';
 import type { OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { handleEvent } from '../../../helpers/event-utils';
+import { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-phone',
@@ -17,8 +17,14 @@ import { handleEvent } from '../../../helpers/event-utils';
   imports: [CommonModule, FormsModule],
   template: `
     <div *ngIf="!readOnly" style="margin-bottom: 1rem;">
-      <label *ngIf="label" style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;">
-        {{ label }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;">*</span>
+      <label
+        *ngIf="label"
+        style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;"
+      >
+        {{ label
+        }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;"
+          >*</span
+        >
       </label>
       <input
         type="tel"
@@ -29,9 +35,14 @@ import { handleEvent } from '../../../helpers/event-utils';
         [required]="required"
         (blur)="onBlur($event)"
         style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;"
-        [style.border]="validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
       />
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -79,7 +90,9 @@ export class PhoneComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onBlur(event: Event): void {

package/templates/angular-sdk-reference/src/components/fields/radio-buttons/radio-buttons.component.ts

@@ -8,7 +8,7 @@
 import { Component, Input } from '@angular/core';
 import type { OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { handleEvent } from '../../../helpers/event-utils';
+import { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-radio-buttons',
@@ -17,8 +17,14 @@ import { handleEvent } from '../../../helpers/event-utils';
   template: `
     <div *ngIf="!readOnly" style="margin-bottom: 1rem;">
       <fieldset style="border: none; padding: 0; margin: 0;">
-        <legend *ngIf="label" style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;">
-          {{ label }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;">*</span>
+        <legend
+          *ngIf="label"
+          style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;"
+        >
+          {{ label
+          }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;"
+            >*</span
+          >
         </legend>
         <div style="display: flex; flex-direction: column; gap: 0.5rem;">
           <label
@@ -38,7 +44,10 @@ import { handleEvent } from '../../../helpers/event-utils';
           </label>
         </div>
       </fieldset>
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -90,7 +99,9 @@ export class RadioButtonsComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onRadioChange(event: Event): void {

package/templates/angular-sdk-reference/src/components/fields/text-area/text-area.component.ts

@@ -9,7 +9,7 @@ import { Component, Input } from '@angular/core';
 import type { OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { handleEvent } from '../../../helpers/event-utils';
+import { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-text-area',
@@ -17,8 +17,14 @@ import { handleEvent } from '../../../helpers/event-utils';
   imports: [CommonModule, FormsModule],
   template: `
     <div *ngIf="!readOnly" style="margin-bottom: 1rem;">
-      <label *ngIf="label" style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;">
-        {{ label }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;">*</span>
+      <label
+        *ngIf="label"
+        style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;"
+      >
+        {{ label
+        }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;"
+          >*</span
+        >
       </label>
       <textarea
         [attr.data-testid]="testId"
@@ -30,10 +36,15 @@ import { handleEvent } from '../../../helpers/event-utils';
         (blur)="onBlur($event)"
         rows="3"
         style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem; resize: vertical;"
-        [style.border]="validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
       >
       </textarea>
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -81,7 +92,9 @@ export class TextAreaComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onChange(event: Event): void {

package/templates/angular-sdk-reference/src/components/fields/text-input/text-input.component.ts

@@ -9,7 +9,7 @@ import { Component, Input } from '@angular/core';
 import type { OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { handleEvent } from '../../../helpers/event-utils';
+import { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-text-input',
@@ -17,8 +17,14 @@ import { handleEvent } from '../../../helpers/event-utils';
   imports: [CommonModule, FormsModule],
   template: `
     <div *ngIf="!readOnly" style="margin-bottom: 1rem;">
-      <label *ngIf="label" style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;">
-        {{ label }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;">*</span>
+      <label
+        *ngIf="label"
+        style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;"
+      >
+        {{ label
+        }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;"
+          >*</span
+        >
       </label>
       <input
         type="text"
@@ -30,9 +36,14 @@ import { handleEvent } from '../../../helpers/event-utils';
         (change)="onChange($event)"
         (blur)="onBlur($event)"
         style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;"
-        [style.border]="validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
       />
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
@@ -80,7 +91,9 @@ export class TextInputComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onChange(event: Event): void {

package/templates/angular-sdk-reference/src/components/fields/url-input/url-input.component.ts

@@ -9,7 +9,7 @@ import { Component, Input } from '@angular/core';
 import type { OnInit, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { handleEvent } from '../../../helpers/event-utils';
+import { handleEvent } from '../../helpers/sdk-helpers';
 
 @Component({
   selector: 'pega-url-input',
@@ -17,8 +17,14 @@ import { handleEvent } from '../../../helpers/event-utils';
   imports: [CommonModule, FormsModule],
   template: `
     <div *ngIf="!readOnly" style="margin-bottom: 1rem;">
-      <label *ngIf="label" style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;">
-        {{ label }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;">*</span>
+      <label
+        *ngIf="label"
+        style="display: block; margin-bottom: 0.25rem; font-weight: 500; font-size: 0.875rem;"
+      >
+        {{ label
+        }}<span *ngIf="required" style="color: #dc2626; margin-left: 0.25rem;"
+          >*</span
+        >
       </label>
       <input
         type="url"
@@ -29,16 +35,27 @@ import { handleEvent } from '../../../helpers/event-utils';
         [required]="required"
         (blur)="onBlur($event)"
         style="width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;"
-        [style.border]="validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'"
+        [style.border]="
+          validatemessage ? '1px solid #dc2626' : '1px solid #d1d5db'
+        "
       />
-      <div *ngIf="validatemessage" style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;">
+      <div
+        *ngIf="validatemessage"
+        style="color: #dc2626; font-size: 0.75rem; margin-top: 0.25rem;"
+      >
         {{ validatemessage }}
       </div>
     </div>
     <div *ngIf="readOnly" style="margin-bottom: 1rem;">
       <span style="font-size: 0.75rem; color: #6b7280;">{{ label }}</span>
       <div style="font-size: 0.875rem;">
-        <a *ngIf="value" [href]="value" target="_blank" rel="noopener noreferrer">{{ value }}</a>
+        <a
+          *ngIf="value"
+          [href]="value"
+          target="_blank"
+          rel="noopener noreferrer"
+          >{{ value }}</a
+        >
         <span *ngIf="!value">—</span>
       </div>
     </div>
@@ -82,7 +99,9 @@ export class URLInputComponent implements OnInit, OnChanges {
 
     const pConn = p.getPConnect?.();
     this.actions = pConn?.getActionsApi?.();
-    this.propName = ((pConn?.getStateProps?.() as Record<string, unknown>)?.value as string) ?? '';
+    this.propName =
+      ((pConn?.getStateProps?.() as Record<string, unknown>)
+        ?.value as string) ?? '';
   }
 
   onBlur(event: Event): void {

package/templates/angular-sdk-reference/src/components/helpers/sdk-helpers.ts

@@ -0,0 +1,93 @@
+export function handleEvent(
+  actions: any,
+  eventType: string,
+  propName: string,
+  value: unknown,
+): void {
+  switch (eventType) {
+    case 'change':
+      actions.updateFieldValue(propName, value);
+      break;
+    case 'blur':
+      actions.triggerFieldChange(propName, value);
+      break;
+    case 'changeNblur':
+      actions.updateFieldValue(propName, value);
+      actions.triggerFieldChange(propName, value);
+      break;
+  }
+}
+
+export function getOptionList(
+  configProps: Record<string, any>,
+  dataObject: Record<string, any>,
+): any[] {
+  const listType = configProps['listType']?.toLowerCase();
+
+  if (listType === 'associated') {
+    const datasource = configProps['datasource'];
+    return Array.isArray(datasource) ? datasource : [];
+  }
+
+  if (listType === 'datapage') {
+    const datasource = configProps['datasource'];
+    if (typeof datasource === 'string' && dataObject[datasource]) {
+      return [];
+    }
+
+    const listOutput = configProps['listOutput'];
+    const items =
+      typeof datasource === 'object' && !Array.isArray(listOutput)
+        ? datasource?.source
+        : listOutput;
+    return Array.isArray(items)
+      ? items.map((item: any) => ({
+          ...item,
+          value: item.text ?? item.value,
+        }))
+      : [];
+  }
+
+  return [];
+}
+
+function isAssignmentView(pConnect: any): boolean {
+  const caseInfo = PCore.getConstants().CASE_INFO;
+  const assignmentViewId = `${pConnect.getValue(caseInfo.ASSIGNMENTACTION_ID)}!${pConnect.getValue(caseInfo.CASE_INFO_CLASSID)}`;
+  const currentViewId = `${pConnect.getCurrentView()}!${pConnect.getCurrentClassID()}`;
+  return assignmentViewId === currentViewId;
+}
+
+export function getInstructions(
+  pConnect: any,
+  instructions = 'casestep',
+): string | undefined {
+  const caseInfo = PCore.getConstants().CASE_INFO;
+  const caseStepInstructions = caseInfo.INSTRUCTIONS
+    ? pConnect.getValue(caseInfo.INSTRUCTIONS)
+    : undefined;
+
+  if (
+    instructions === 'casestep' &&
+    isAssignmentView(pConnect) &&
+    caseStepInstructions?.length
+  ) {
+    return caseStepInstructions;
+  }
+
+  if (
+    instructions === 'none' ||
+    instructions?.startsWith('@PARAGRAPH') ||
+    instructions === 'casestep'
+  ) {
+    return undefined;
+  }
+
+  return instructions;
+}
+
+export function compareSdkPCoreVersions(): void {
+  console.warn(
+    `Using Constellation version ${PCore.getPCoreVersion()}. Ensure this is the same version as your Infinity server.`,
+  );
+}

package/templates/angular-sdk-reference/src/components/infra/case-summary/case-summary.component.ts

@@ -8,6 +8,7 @@
 import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
 import type { OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { PegaBridgeService } from '@pega/sdk-angular';
 import type { Unsubscribe } from '@pega/sdk-angular';
 
 @Component({
@@ -20,7 +21,7 @@ import type { Unsubscribe } from '@pega/sdk-angular';
                 padding: 0.75rem 1rem; background: #f9fafb; border-radius: 0.375rem; margin-bottom: 1rem;"
     >
       <span style="font-weight: 600; font-size: 0.875rem;">
-        {{ header || 'Case' }}
+        {{ header }}
       </span>
       <span
         *ngIf="status"
@@ -38,7 +39,7 @@ export class CaseSummaryComponent implements OnInit, OnDestroy {
   status = '';
 
   private pConn: any;
-  private observable: any;
+  private bridge = new PegaBridgeService();
   private storeUnsub: Unsubscribe | undefined;
 
   constructor(
@@ -47,25 +48,23 @@ export class CaseSummaryComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit(): void {
-    // @ts-ignore
-    const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
-
     this.pConn = this.props.getPConnect();
-    this.observable = new PConnectObservable(this.pConn);
     this.updateSelf();
 
-    this.storeUnsub = this.observable.subscribe(() => {
+    const subscription = this.bridge.observe(this.pConn).subscribe(() => {
       this.updateSelf();
     });
+    this.storeUnsub = () => subscription.unsubscribe();
   }
 
   ngOnDestroy(): void {
     this.storeUnsub?.();
-    this.observable?.destroy();
   }
 
   private updateSelf(): void {
-    const configProps = this.pConn.resolveConfigProps(this.pConn.getConfigProps());
+    const configProps = this.pConn.resolveConfigProps(
+      this.pConn.getConfigProps(),
+    );
     this.header = configProps.header ?? '';
     this.status = configProps.status ?? '';
 

package/templates/angular-sdk-reference/src/components/infra/case-view/case-view.component.ts

@@ -10,6 +10,7 @@
 import { Component, Input, ChangeDetectorRef, NgZone } from '@angular/core';
 import type { OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { PegaBridgeService } from '@pega/sdk-angular';
 import type { Unsubscribe } from '@pega/sdk-angular';
 import { PConnectBridgeComponent } from '@pega/sdk-angular';
 
@@ -19,16 +20,24 @@ import { PConnectBridgeComponent } from '@pega/sdk-angular';
   imports: [CommonModule, PConnectBridgeComponent],
   template: `
     <div>
-      <div *ngIf="heading" style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">
+      <div
+        *ngIf="heading"
+        style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;"
+      >
         {{ heading }}
       </div>
-      <div *ngIf="id" style="font-size: 0.75rem; color: #6b7280; margin-bottom: 1rem;">
+      <div
+        *ngIf="id"
+        style="font-size: 0.75rem; color: #6b7280; margin-bottom: 1rem;"
+      >
         {{ id }}
       </div>
 
       <!-- Case summary -->
       <div *ngIf="caseSummaryGetPConnect">
-        <pconnect-bridge [getPConnect]="caseSummaryGetPConnect"></pconnect-bridge>
+        <pconnect-bridge
+          [getPConnect]="caseSummaryGetPConnect"
+        ></pconnect-bridge>
       </div>
 
       <!-- Children (tabs, stages, etc.) -->
@@ -48,7 +57,7 @@ export class CaseViewComponent implements OnInit, OnDestroy {
   childGetters: Array<() => typeof PConnect> = [];
 
   private pConn: any;
-  private observable: any;
+  private bridge = new PegaBridgeService();
   private storeUnsub: Unsubscribe | undefined;
 
   constructor(
@@ -59,23 +68,22 @@ export class CaseViewComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.pConn = this.props.getPConnect();
 
-    // @ts-ignore
-    const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
-    this.observable = new PConnectObservable(this.pConn);
     this.updateSelf();
 
-    this.storeUnsub = this.observable.subscribe(() => {
+    const subscription = this.bridge.observe(this.pConn).subscribe(() => {
       this.updateSelf();
     });
+    this.storeUnsub = () => subscription.unsubscribe();
   }
 
   ngOnDestroy(): void {
     this.storeUnsub?.();
-    this.observable?.destroy();
   }
 
   private updateSelf(): void {
-    const configProps = this.pConn.resolveConfigProps(this.pConn.getConfigProps());
+    const configProps = this.pConn.resolveConfigProps(
+      this.pConn.getConfigProps(),
+    );
 
     this.heading = configProps.header ?? '';
     this.id = configProps.subheader ?? '';
@@ -88,8 +96,12 @@ export class CaseViewComponent implements OnInit, OnDestroy {
       const firstPConn = firstChild.getPConnect?.() ?? firstChild;
       const firstCompName = firstPConn.getComponentName?.() ?? '';
 
-      if (firstCompName === 'CaseSummary' || firstCompName === 'CaseSummaryFields') {
-        this.caseSummaryGetPConnect = firstChild.getPConnect ?? (() => firstChild);
+      if (
+        firstCompName === 'CaseSummary' ||
+        firstCompName === 'CaseSummaryFields'
+      ) {
+        this.caseSummaryGetPConnect =
+          firstChild.getPConnect ?? (() => firstChild);
         this.childGetters = children.slice(1).map((child: any) => {
           return child.getPConnect ?? (() => child);
         });

package/templates/angular-sdk-reference/src/components/infra/root-container/root-container.component.ts

@@ -14,6 +14,7 @@
 import { Component, Input, NgZone, ChangeDetectorRef } from '@angular/core';
 import type { OnInit, OnDestroy } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { PegaBridgeService } from '@pega/sdk-angular';
 import type { Unsubscribe } from '@pega/sdk-angular';
 import { PConnectBridgeComponent } from '@pega/sdk-angular';
 
@@ -26,18 +27,21 @@ const options = { context: 'app' };
   template: `
     <div *ngIf="bShowRoot">
       <!-- ViewContainer mode (mashup / noPortal) -->
-      <div *ngIf="viewContainerPConn">
-        <pconnect-bridge [getPConnect]="viewContainerGetter!"></pconnect-bridge>
+      <div *ngIf="viewContainerPConn && viewContainerGetter">
+        <pconnect-bridge [getPConnect]="viewContainerGetter"></pconnect-bridge>
       </div>
 
       <!-- Portal/View mode — render resolved pConn -->
-      <div *ngIf="!viewContainerPConn && resolvedPConn">
-        <pconnect-bridge [getPConnect]="resolvedPConnGetter!"></pconnect-bridge>
+      <div *ngIf="!viewContainerPConn && resolvedPConn && resolvedPConnGetter">
+        <pconnect-bridge [getPConnect]="resolvedPConnGetter"></pconnect-bridge>
       </div>
 
       <!-- Fallback: render children -->
       <div *ngIf="!viewContainerPConn && !resolvedPConn && children.length > 0">
-        <pconnect-bridge *ngFor="let child of children" [getPConnect]="child.getPConnect"></pconnect-bridge>
+        <pconnect-bridge
+          *ngFor="let child of children"
+          [getPConnect]="child.getPConnect"
+        ></pconnect-bridge>
       </div>
     </div>
   `,
@@ -54,7 +58,7 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   children: Array<{ getPConnect: () => typeof PConnect }> = [];
 
   private pConn: any;
-  private observable: any;
+  private bridge = new PegaBridgeService();
   private storeUnsub: Unsubscribe | undefined;
 
   constructor(
@@ -67,34 +71,36 @@ export class RootContainerComponent implements OnInit, OnDestroy {
 
     // Add root container items to Redux
     const { containers } = PCore.getStore().getState();
-    const items = Object.keys(containers).filter((item) => item.includes('root'));
-    (PCore.getContainerUtils() as any).getContainerAPI().addContainerItems(items);
+    const items = Object.keys(containers).filter((item) =>
+      item.includes('root'),
+    );
+    (PCore.getContainerUtils() as any)
+      .getContainerAPI()
+      .addContainerItems(items);
 
     // Clear out hasViewContainer so ViewContainer can initialize
     sessionStorage.setItem('hasViewContainer', 'false');
 
     // Create observable for store-driven updates
-    // @ts-ignore
-    const { PConnectObservable } = PCore.getInitialiser().getSdkCore() as any;
-    this.observable = new PConnectObservable(this.pConn);
-
     // Initial update
     this.updateSelf();
 
     // Subscribe to store changes
-    this.storeUnsub = this.observable.subscribe(() => {
+    const subscription = this.bridge.observe(this.pConn).subscribe(() => {
       this.updateSelf();
     });
+    this.storeUnsub = () => subscription.unsubscribe();
   }
 
   ngOnDestroy(): void {
     this.storeUnsub?.();
-    this.observable?.destroy();
   }
 
   private updateSelf(): void {
     // Get fresh props from Redux (not the initial props)
-    const myProps = this.pConn.resolveConfigProps(this.pConn.getConfigProps()) as any;
+    const myProps = this.pConn.resolveConfigProps(
+      this.pConn.getConfigProps(),
+    ) as any;
 
     // Also get populated additional props (routingInfo comes from here)
     const additionalProps = this.pConn.getComponentProps?.() ?? {};