@pega/dx-component-builder-sdk 0.24.2 → 0.24.4

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/hybrid-view-container/hybrid-view-container.component.html

@@ -0,0 +1 @@
+<p>hybrid-view-container works!</p>

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/hybrid-view-container/hybrid-view-container.component.spec.ts

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

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/hybrid-view-container/hybrid-view-container.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormGroup } from '@angular/forms';
+
+/**
+ * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+ * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+ * is totally at your own risk.
+ */
+
+// Right this is a skeleton, as Hybrid ViewContainer hasn't been implemented
+
+@Component({
+  selector: 'app-hybrid-view-container',
+  templateUrl: './hybrid-view-container.component.html',
+  styleUrls: ['./hybrid-view-container.component.scss'],
+  standalone: true,
+  imports: [CommonModule]
+})
+export class HybridViewContainerComponent {
+  @Input() pConn$: typeof PConnect;
+  @Input() formGroup$: FormGroup;
+  @Input() displayOnlyFA$: boolean;
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/modal-view-container/modal-view-container.component.html

@@ -0,0 +1,35 @@
+<div id="dialog" *ngIf="bShowModal$ && bShowAsModal$" class="psdk-dialog-background">
+  <div class="psdk-modal-view-container-top" id="{{ buildName$ }}">
+    <h3 *ngIf="title$ != ''">{{ title$ }}</h3>
+    <component-mapper
+      name="Assignment"
+      [props]="{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$, isInModal$: true, banners }"
+    ></component-mapper>
+    <div *ngIf="isMultiRecord">
+      <component-mapper
+        name="ListViewActionButtons"
+        [props]="{ pConn$: createdViewPConn$, context$ }"
+        [outputEvents]="{ closeActionsDialog: closeActionsDialog }"
+      ></component-mapper>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="bShowModal$ && !bShowAsModal$">
+  <div id="{{ buildName$ }}">
+    <h3 *ngIf="title$ != ''">{{ title$ }}</h3>
+    <component-mapper
+      name="Assignment"
+      [props]="{ pConn$: createdViewPConn$, formGroup$, arChildren$, itemKey$, isCreateStage$: true, updateToken$ }"
+    ></component-mapper>
+  </div>
+</div>
+
+<div *ngIf="bShowCancelAlert$">
+  <component-mapper
+    name="CancelAlert"
+    [props]="{ bShowAlert$: bShowCancelAlert$, pConn$: cancelPConn$ }"
+    [parent]="this"
+    [outputEvents]="{ onAlertState$: onAlertState }"
+  ></component-mapper>
+</div>

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/modal-view-container/modal-view-container.component.scss

@@ -0,0 +1 @@
+/* moved the modal-view-container component styles to containerStyles file */

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/modal-view-container/modal-view-container.component.spec.ts

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

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/modal-view-container/modal-view-container.component.ts

@@ -0,0 +1,393 @@
+import { Component, OnInit, Input, Output, EventEmitter, NgZone, forwardRef, OnDestroy } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import isEqual from 'fast-deep-equal';
+import { AngularPConnectData, AngularPConnectService } from '@pega/angular-sdk-components';
+import { ProgressSpinnerService } from '@pega/angular-sdk-components';
+import { ComponentMapperComponent } from '@pega/angular-sdk-components';
+import { getBanners } from '@pega/angular-sdk-components';
+
+/**
+ * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+ * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+ * is totally at your own risk.
+ */
+
+@Component({
+  selector: 'app-modal-view-container',
+  templateUrl: './modal-view-container.component.html',
+  styleUrls: ['./modal-view-container.component.scss'],
+  standalone: true,
+  imports: [CommonModule, forwardRef(() => ComponentMapperComponent)]
+})
+export class ModalViewContainerComponent implements OnInit, OnDestroy {
+  @Input() pConn$: typeof PConnect;
+  @Input() displayOnlyFA$: boolean;
+
+  // for when non modal
+  @Output() modalVisibleChange = new EventEmitter<boolean>();
+
+  // Used with AngularPConnect
+  angularPConnectData: AngularPConnectData = {};
+
+  arChildren$: any[];
+  stateProps$: Object;
+  banners: any;
+  templateName$: string;
+  buildName$: string;
+  context$: string;
+  title$ = '';
+  bShowModal$ = false;
+  bShowAsModal$ = true;
+  itemKey$: string;
+  formGroup$: FormGroup;
+  oCaseInfo: Object = {};
+
+  // for causing a change on assignment
+  updateToken$ = 0;
+
+  routingInfoRef: any = {};
+
+  // created object is now a View with a Template
+  //  Use its PConnect to render the CaseView; DON'T replace this.pConn$
+  createdViewPConn$: any;
+
+  bSubscribed = false;
+  cancelPConn$?: typeof PConnect;
+  bShowCancelAlert$ = false;
+  bAlertState: boolean;
+  localizedVal: Function;
+  localeCategory = 'Data Object';
+  isMultiRecord = false;
+  actionsDialog = false;
+
+  constructor(
+    private angularPConnect: AngularPConnectService,
+    private ngZone: NgZone,
+    private psService: ProgressSpinnerService,
+    private fb: FormBuilder
+  ) {
+    // create the formGroup
+    this.formGroup$ = fb.group({ hideRequired: false });
+  }
+
+  ngOnInit(): void {
+    if (this.displayOnlyFA$) {
+      // for when non modal
+      this.bShowAsModal$ = false;
+    }
+
+    // First thing in initialization is registering and subscribing to the AngularPConnect service
+    this.angularPConnectData = this.angularPConnect.registerAndSubscribeComponent(this, this.onStateChange);
+
+    const baseContext = this.pConn$.getContextName();
+    const acName = this.pConn$.getContainerName();
+
+    // for now, in general this should be overridden by updateSelf(), and not be blank
+    if (this.itemKey$ === '') {
+      this.itemKey$ = baseContext.concat('/').concat(acName);
+    }
+
+    const containerMgr: any = this.pConn$.getContainerManager();
+
+    containerMgr.initializeContainers({
+      type: 'multiple'
+    });
+
+    // const { CONTAINER_TYPE, PUB_SUB_EVENTS } = PCore.getConstants();
+
+    this.angularPConnect.shouldComponentUpdate(this);
+    this.localizedVal = PCore.getLocaleUtils().getLocaleValue;
+  }
+
+  ngOnDestroy(): void {
+    if (this.angularPConnectData.unsubscribeFn) {
+      this.angularPConnectData.unsubscribeFn();
+    }
+
+    const { PUB_SUB_EVENTS } = PCore.getConstants();
+
+    PCore.getPubSubUtils().unsubscribe(
+      PUB_SUB_EVENTS.EVENT_SHOW_CANCEL_ALERT,
+      PUB_SUB_EVENTS.EVENT_SHOW_CANCEL_ALERT /* Should be same unique string passed during subscription */
+    );
+    this.bSubscribed = false;
+  }
+
+  // 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();
+    } else if (this.bShowModal$) {
+      // right now onlu get one updated when initial diaplay.  So, once modal is up
+      // let fall through and do a check with "compareCaseInfoIsDifferent" until fixed
+      // this.updateSelf();
+    }
+  }
+
+  // updateSelf
+  updateSelf(): void {
+    // routingInfo was added as component prop in populateAdditionalProps
+    const routingInfo = this.angularPConnect.getComponentProp(this, 'routingInfo');
+    this.routingInfoRef.current = routingInfo;
+
+    let loadingInfo;
+    try {
+      // @ts-ignore - Property 'getLoadingStatus' is private and only accessible within class 'C11nEnv'
+      loadingInfo = this.pConn$.getLoadingStatus();
+    } catch (ex) {
+      /* empty */
+    }
+    // const configProps = this.pConn$.resolveConfigProps(this.pConn$.getConfigProps());
+    this.stateProps$ = this.pConn$.getStateProps();
+    this.banners = this.getBanners();
+
+    if (!loadingInfo) {
+      // turn off spinner
+      // this.psService.sendMessage(false);
+    }
+
+    if (routingInfo && !loadingInfo /* && this.bUpdate */) {
+      const currentOrder = routingInfo.accessedOrder;
+
+      if (undefined == currentOrder) {
+        return;
+      }
+
+      const currentItems = routingInfo.items;
+
+      const { key, latestItem } = this.getKeyAndLatestItem(routingInfo);
+
+      if (currentOrder.length > 0) {
+        if (currentItems[key] && currentItems[key].view && Object.keys(currentItems[key].view).length > 0) {
+          const currentItem = currentItems[key];
+          const rootView = currentItem.view;
+          const { context } = rootView.config;
+          const config: any = { meta: rootView };
+          config.options = {
+            context: currentItem.context,
+            hasForm: true,
+            pageReference: context || this.pConn$.getPageReference()
+          };
+
+          if (!this.bSubscribed) {
+            this.bSubscribed = true;
+            const { PUB_SUB_EVENTS } = PCore.getConstants();
+            PCore.getPubSubUtils().subscribe(
+              PUB_SUB_EVENTS.EVENT_SHOW_CANCEL_ALERT,
+              payload => {
+                this.showAlert(payload);
+              },
+              PUB_SUB_EVENTS.EVENT_SHOW_CANCEL_ALERT
+            );
+          }
+
+          // let configObject = PCore.createPConnect(config);
+
+          // THIS is where the ViewContainer creates a View
+          // The config has meta.config.type = "view"
+          this.createView(routingInfo, currentItem, latestItem, key);
+        }
+      } else {
+        this.hideModal();
+      }
+    }
+  }
+
+  createView(routingInfo, currentItem, latestItem, key) {
+    const configObject = this.getConfigObject(currentItem, this.pConn$);
+    const newComp = configObject?.getPConnect();
+    // const newCompName = newComp.getComponentName();
+    const caseInfo = newComp && newComp.getDataObject() && newComp.getDataObject().caseInfo ? newComp.getDataObject().caseInfo : null;
+    // The metadata for pyDetails changed such that the "template": "CaseView"
+    //  is no longer a child of the created View but is in the created View's
+    //  config. So, we DON'T want to replace this.pConn$ since the created
+    //  component is a View (and not a ViewContainer). We now look for the
+    //  "template" type directly in the created component (newComp) and NOT
+    //  as a child of the newly created component.
+    // console.log(`---> ModalViewContainer created new ${newCompName}`);
+
+    // Use the newly created component (View) info but DO NOT replace
+    //  this ModalViewContainer's pConn$, etc.
+    //  Note that we're now using the newly created View's PConnect in the
+    //  ViewContainer HTML template to guide what's rendered similar to what
+    //  the Nebula/Constellation return of React.Fragment does
+
+    // right now need to check caseInfo for changes, to trigger redraw, not getting
+    // changes from angularPconnect except for first draw
+    if (newComp && caseInfo && this.compareCaseInfoIsDifferent(caseInfo)) {
+      this.psService.sendMessage(false);
+
+      this.ngZone.run(() => {
+        this.createdViewPConn$ = newComp;
+        const newConfigProps = newComp.getConfigProps();
+        this.templateName$ = 'template' in newConfigProps ? (newConfigProps.template as string) : '';
+
+        const { actionName } = latestItem;
+        const theNewCaseInfo = newComp.getCaseInfo();
+        // const caseName = theNewCaseInfo.getName();
+        const ID = theNewCaseInfo.getBusinessID() || theNewCaseInfo.getID();
+
+        const caseTypeName = theNewCaseInfo.getCaseTypeName();
+        const isDataObject = routingInfo.items[latestItem.context].resourceType === PCore.getConstants().RESOURCE_TYPES.DATA;
+        const dataObjectAction = routingInfo.items[latestItem.context].resourceStatus;
+        this.isMultiRecord = routingInfo.items[latestItem.context].isMultiRecordData;
+        this.context$ = latestItem.context;
+        this.title$ =
+          isDataObject || this.isMultiRecord
+            ? this.getModalHeading(dataObjectAction)
+            : this.determineModalHeaderByAction(
+                actionName,
+                caseTypeName,
+                ID,
+                `${theNewCaseInfo?.getClassName()}!CASE!${theNewCaseInfo.getName()}`.toUpperCase()
+              );
+        // // update children with new view's children
+        this.arChildren$ = newComp.getChildren() as any[];
+        this.bShowModal$ = true;
+
+        // for when non modal
+        this.modalVisibleChange.emit(this.bShowModal$);
+
+        // save off itemKey to be used for finishAssignment, etc.
+        this.itemKey$ = key;
+
+        // cause a change for assignment
+        this.updateToken$ = new Date().getTime();
+      });
+    }
+  }
+
+  hideModal() {
+    if (this.bShowModal$) {
+      // other code in Nebula/Constellation not needed currently, but if so later,
+      // should put here
+    }
+
+    this.ngZone.run(() => {
+      this.bShowModal$ = false;
+
+      // for when non modal
+      this.modalVisibleChange.emit(this.bShowModal$);
+
+      this.oCaseInfo = {};
+    });
+  }
+
+  getConfigObject(item, pConnect) {
+    if (item) {
+      const { context, view } = item;
+      const config = {
+        meta: view,
+        options: {
+          context,
+          pageReference: view.config.context || pConnect.getPageReference(),
+          hasForm: true,
+          containerName: pConnect?.getContainerName() || PCore.getConstants().MODAL
+        }
+      };
+      return PCore.createPConnect(config);
+    }
+    return null;
+  }
+
+  onAlertState(bData: boolean) {
+    this.bAlertState = bData;
+    this.bShowCancelAlert$ = false;
+    if (this.bAlertState) {
+      this.hideModal();
+    }
+  }
+
+  showAlert(payload) {
+    const { latestItem } = this.getKeyAndLatestItem(this.routingInfoRef.current);
+    const { isModalAction } = payload;
+
+    /*
+      If we are in create stage full page mode, created a new case and trying to click on cancel button
+      it will show two alert dialogs which is not expected. Hence isModalAction flag to avoid that.
+    */
+    if (latestItem && isModalAction && !this.actionsDialog) {
+      const configObject = this.getConfigObject(latestItem, this.pConn$);
+      this.ngZone.run(() => {
+        this.cancelPConn$ = configObject?.getPConnect();
+        this.bShowCancelAlert$ = true;
+      });
+    }
+  }
+
+  hasContainerItems(routingInfo) {
+    if (routingInfo) {
+      const { accessedOrder, items } = routingInfo;
+      return accessedOrder && accessedOrder.length > 0 && items;
+    }
+    return false;
+  }
+
+  getKeyAndLatestItem(routinginfo) {
+    if (this.hasContainerItems(routinginfo)) {
+      const { accessedOrder, items } = routinginfo;
+      const key = accessedOrder[accessedOrder.length - 1];
+      const latestItem = items[key];
+      return { key, latestItem };
+    }
+    return {};
+  }
+
+  compareCaseInfoIsDifferent(oCurrentCaseInfo: Object): boolean {
+    let bRet = false;
+
+    // fast-deep-equal version
+    if (isEqual !== undefined) {
+      bRet = !isEqual(this.oCaseInfo, oCurrentCaseInfo);
+    } else {
+      const sCurrnentCaseInfo = JSON.stringify(oCurrentCaseInfo);
+      const sOldCaseInfo = JSON.stringify(this.oCaseInfo);
+      // stringify compare version
+      if (sCurrnentCaseInfo != sOldCaseInfo) {
+        bRet = true;
+      }
+    }
+
+    // if different, save off new case info
+    if (bRet) {
+      this.oCaseInfo = JSON.parse(JSON.stringify(oCurrentCaseInfo));
+    }
+
+    return bRet;
+  }
+
+  getBanners() {
+    return getBanners({ target: this.itemKey$, ...this.stateProps$ });
+  }
+
+  getModalHeading(dataObjectAction) {
+    return dataObjectAction === PCore.getConstants().RESOURCE_STATUS.CREATE
+      ? this.localizedVal('Add Record', this.localeCategory)
+      : this.localizedVal('Edit Record', this.localeCategory);
+  }
+
+  determineModalHeaderByAction(actionName, caseTypeName, ID, caseLocaleRef) {
+    if (actionName) {
+      return this.localizedVal(actionName, this.localeCategory);
+    }
+    return `${this.localizedVal('Create', this.localeCategory)} ${this.localizedVal(caseTypeName, undefined, caseLocaleRef)} (${ID})`;
+  }
+
+  closeActionsDialog = () => {
+    this.actionsDialog = true;
+    // this.ngZone.run(() => {
+    this.bShowModal$ = false;
+
+    // for when non modal
+    this.modalVisibleChange.emit(this.bShowModal$);
+
+    this.oCaseInfo = {};
+    // });
+  };
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/multi-step/multi-step.component.html

@@ -54,7 +54,7 @@
               <span>{{ i + 1 }}</span>
             </div>
           </div>
-          <div class="{{ _getHLabelClass(mainStep.visited_status) }}">
+          <div id="multi-step-label" class="{{ _getHLabelClass(mainStep.visited_status) }}">
             <div class="psdk-horizontal-step-text-label">
               {{ mainStep.name }}
             </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/multi-step/multi-step.component.scss

@@ -163,6 +163,7 @@ mat-horizontal-stepper {
 .psdk-horizontal-stepper-header-container {
   white-space: nowrap;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   text-align: left;
 }

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/navbar/navbar.component.html

@@ -22,7 +22,7 @@
           *ngFor="let caseType of caseTypes$"
           (click)="navPanelCreateCaseType(caseType.pyClassName, caseType.pyFlowType)"
         >
-          <span class="psdk-nav-button-span">{{ caseType.pyLabel }}</span>
+          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(caseType.pyLabel, '', localeReference) }}</span>
         </mat-list-item>
       </mat-list>
     </mat-list>
@@ -32,14 +32,14 @@
       <mat-list-item (click)="navPanelButtonClick(page)">
         <div class="flex-box">
           <img class="psdk-nav-svg-icon" src="{{ page.iconName }}" />
-          <span class="psdk-nav-button-span">{{ localizedVal(page.pyLabel, localeCategory) }}</span>
+          <span class="psdk-nav-button-span">{{ localeUtils.getLocaleValue(page.pyLabel, '', localeReference) }}</span>
         </div>
       </mat-list-item>
     </mat-list>
   </div>
   <div class="psdk-nav-divider"></div>
   <div>
-    <mat-list>
+    <mat-list id="profile">
       <mat-list-item [matMenuTriggerFor]="menu" class="psdk-profile-list-item">
         <div class="flex-box">
           <div class="psdk-nav-oper-avatar">{{ portalOperatorInitials$ }}</div>
@@ -48,7 +48,7 @@
       </mat-list-item>
       <mat-menu #menu="matMenu">
         <button mat-menu-item>Profile</button>
-        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Logoff', localeCategory) }}</button>
+        <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
       </mat-menu>
     </mat-list>
   </div>

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/navbar/navbar.component.ts

@@ -51,7 +51,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
   navIcon$: string;
   localizedVal: any;
   localeCategory = 'AppShell';
-
+  localeUtils = PCore.getLocaleUtils();
+  localeReference: any;
   constructor(
     private angularPConnect: AngularPConnectService,
     private chRef: ChangeDetectorRef,
@@ -119,7 +120,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
       this.navPages$.forEach(page => {
         page.iconName = this.utils.getImageSrc(page.pxPageViewIcon, this.utils.getSDKStaticContentUrl());
       });
-
+      this.localeReference = this.pConn$.getValue('.pyLocaleReference');
       this.actionsAPI = this.pConn$.getActionsApi();
       this.createWork = this.actionsAPI.createWork.bind(this.actionsAPI);
       this.showPage = this.actionsAPI.showPage.bind(this.actionsAPI);
@@ -163,7 +164,9 @@ export class NavbarComponent implements OnInit, OnDestroy {
       containerName: 'primary',
       flowType: sFlowType || 'pyStartCase'
     };
-    this.createWork(sCaseType, actionInfo);
+    this.createWork(sCaseType, actionInfo).then(() => {
+      console.log('createWork completed');
+    });
   }
 
   navPanelLogoutClick() {

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/preview-view-container/preview-view-container.component.html

@@ -0,0 +1 @@
+<div class="psdk-preview"></div>

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/preview-view-container/preview-view-container.component.spec.ts

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

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/preview-view-container/preview-view-container.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+/**
+ * WARNING:  It is not expected that this file should be modified.  It is part of infrastructure code that works with
+ * Redux and creation/update of Redux containers and PConnect.  Modifying this code could have undesireable results and
+ * is totally at your own risk.
+ */
+
+// Right this is a skeleton, as Preview hasn't been implemented
+
+@Component({
+  selector: 'app-preview-view-container',
+  templateUrl: './preview-view-container.component.html',
+  styleUrls: ['./preview-view-container.component.scss'],
+  standalone: true
+})
+export class PreviewViewContainerComponent implements OnInit {
+  @Input() pConn$: typeof PConnect;
+
+  ngOnInit(): void {
+    const containerMgr: any = this.pConn$.getContainerManager();
+
+    containerMgr.initializeContainers({
+      type: 'multiple'
+    });
+  }
+
+  buildName() {
+    const context = this.pConn$.getContextName();
+    let viewContainerName = this.pConn$.getComponentName();
+
+    if (!viewContainerName) viewContainerName = '';
+    return `${context.toUpperCase()}/${viewContainerName.toUpperCase()}`;
+  }
+}

package/tests/assets/sdk-a/components/createAll/override-sdk/infra/reference/reference.component.html

@@ -0,0 +1 @@
+<!-- Reference component is all static methods so .html not used -->