Support wc in split view

core/src/App.html

@@ -1,4 +1,4 @@
-<svelte:window on:resize="{onResize}" />
+<svelte:window on:resize="{onResize}"/>
 <div id="app" class="{hideNav? 'no-nav' : ''} {hideSideNav? 'no-side-nav':''}">
   {#if confirmationModal.displayed}
   <ConfirmationModal
@@ -34,6 +34,7 @@
       nodepath="{mfSplitView.nodepath}"
       on:iframeCreated="{splitViewIframeCreated}"
       on:statusChanged="{splitViewStatusChanged}"
+      on:wcCreated="{splitViewWCCreated}"
     ></SplitView>
     {/if}
   </Backdrop>
@@ -152,6 +153,8 @@
   let modal;
   let splitViewIframe;
   let splitViewIframeData;
+  let splitViewWC;
+  let splitViewWCData;
   let splitView;
   let context;
   let nodeParams;
@@ -297,7 +300,7 @@
             }
             resolve();
           },
-          () => { }
+          () => {}
         );
       } else {
         resolve();
@@ -327,6 +330,7 @@
           mfSplitView,
           splitViewValues,
           splitViewIframe,
+          splitViewWC,
           showLoadingIndicator,
           tabNav,
           isNavigateBack,
@@ -369,6 +373,8 @@
               splitViewValues = obj.splitViewValues;
             } else if (prop === 'splitViewIframe') {
               splitViewIframe = obj.splitViewIframe;
+            } else if (prop == 'splitViewWC') {
+              splitViewWC = obj.splitViewWC;
             } else if (prop === 'showLoadingIndicator') {
               showLoadingIndicator = obj.showLoadingIndicator;
             } else if (prop === 'tabNav') {
@@ -677,6 +683,12 @@
     }
   };
 
+  const splitViewWCCreated = event => {
+    splitViewWC = event.detail.splitViewWC;
+    splitViewWCData = event.detail.splitViewWCData;
+    $: mfSplitView.collapsed = event.detail.collapsed;
+  };
+
   /// RESIZING
 
   let hideNav;
@@ -1280,7 +1292,7 @@
         thirdPartyCookieCheckIframe.src =
           thirdPartyCookiesCheck.thirdPartyCookieScriptLocation;
         document.body.appendChild(thirdPartyCookieCheckIframe);
-        thirdPartyCookieCheckIframe.onload = function () {
+        thirdPartyCookieCheckIframe.onload = function() {
           setTimeout(() => {
             if (thirdPartyCookiesStatus() === 'disabled') {
               tpcErrorHandling(thirdPartyCookiesCheck);
@@ -1292,7 +1304,7 @@
     }
   });
 
-  afterUpdate(() => { });
+  afterUpdate(() => {});
 </script>
 
 <style type="text/scss">
@@ -1670,4 +1682,4 @@
       display: none;
     }
   }
-</style>
+</style>

core/src/SplitView.html

@@ -63,6 +63,8 @@ <h1 class="fd-splitView__title">{splitViewSettings.title}</h1>
   let messageHandler;
   let splitViewIframe;
   let splitViewIframeData;
+  let splitViewWC;
+  let splitViewWCData;
   export let nodepath;
   export let collapsed;
   export let splitViewSettings = {};
@@ -85,7 +87,9 @@ <h1 class="fd-splitView__title">{splitViewSettings.title}</h1>
           nodeParams,
           currentNode,
           splitViewIframe,
-          splitViewIframeData
+          splitViewIframeData,
+          splitViewWC,
+          splitViewWCData
         };
       },
       set: obj => {
@@ -109,6 +113,10 @@ <h1 class="fd-splitView__title">{splitViewSettings.title}</h1>
               splitViewIframe = obj.splitViewIframe;
             } else if (prop === 'splitViewIframeData') {
               splitViewIframeData = obj.splitViewIframeData;
+            } else if (prop === 'splitViewWC') {
+              splitViewWC = obj.splitViewWC;
+            } else if (prop === 'splitViewWCData') {
+              splitViewWCData = obj.splitViewWCData;
             }
           });
         }

core/src/services/split-view.js

@@ -5,6 +5,7 @@ import {
   IframeHelpers,
   RoutingHelpers
 } from '../utilities/helpers';
+import { WebComponentService } from './web-components';
 
 class SplitViewSvcClass {
   constructor() {
@@ -88,25 +89,42 @@ class SplitViewSvcClass {
   createAndSetView(component) {
     const { nodeParams, lastNode, pathData } = component.get();
 
-    const iframe = this.setIframe(
-      lastNode.viewUrl,
-      {
-        context: pathData.context,
-        pathParams: pathData.pathParams,
-        nodeParams
-      },
-      component
-    );
+    if (lastNode.webcomponent) {
+      WebComponentService.renderWebComponent(
+        lastNode.viewUrl,
+        document.querySelector('.iframeSplitViewCnt'),
+        pathData.context
+      );
+      const wcInfo = {
+        splitViewWC: document.querySelector('.iframeSplitViewCnt'),
+        splitViewWCData: { ...pathData, nodeParams }
+      };
+      component.set(wcInfo);
+      component.dispatch('wcCreated', {
+        ...wcInfo,
+        ...{ collapsed: false }
+      });
+    } else {
+      const iframe = this.setIframe(
+        lastNode.viewUrl,
+        {
+          context: pathData.context,
+          pathParams: pathData.pathParams,
+          nodeParams
+        },
+        component
+      );
 
-    const iframeInfo = {
-      splitViewIframe: iframe,
-      splitViewIframeData: { ...pathData, nodeParams }
-    };
-    component.set(iframeInfo);
-    component.dispatch('iframeCreated', {
-      ...iframeInfo,
-      ...{ collapsed: false }
-    });
+      const iframeInfo = {
+        splitViewIframe: iframe,
+        splitViewIframeData: { ...pathData, nodeParams }
+      };
+      component.set(iframeInfo);
+      component.dispatch('iframeCreated', {
+        ...iframeInfo,
+        ...{ collapsed: false }
+      });
+    }
 
     this.fixIOSscroll();
   }
@@ -208,9 +226,13 @@ class SplitViewSvcClass {
   }
 
   close(comp) {
-    if (comp.get().splitViewIframe) {
+    if (comp.get().splitViewIframe || comp.get().splitViewWC) {
       comp
-        .getUnsavedChangesModalPromise(comp.get().splitViewIframe.contentWindow)
+        .getUnsavedChangesModalPromise(
+          comp.get().splitViewWC
+            ? comp.get().splitViewWC
+            : comp.get().splitViewIframe.contentWindow
+        )
         .then(() => {
           if (comp.get().mfSplitView) {
             comp.get().mfSplitView.displayed = false;
@@ -247,9 +269,13 @@ class SplitViewSvcClass {
   }
 
   collapse(comp) {
-    if (comp.get().splitViewIframe) {
+    if (comp.get().splitViewIframe || comp.get().splitViewWC) {
       comp
-        .getUnsavedChangesModalPromise(comp.get().splitViewIframe.contentWindow)
+        .getUnsavedChangesModalPromise(
+          comp.get().splitViewWC
+            ? comp.get().splitViewWC
+            : comp.get().splitViewIframe.contentWindow
+        )
         .then(() => {
           this.sendMessageToClients('internal', {
             exists: true,

test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js

@@ -76,6 +76,20 @@ describe('Luigi client linkManager', () => {
         .click();
       cy.expectPathToBe('/projects/pr2');
 
+      //open webcomponent in splitview
+      cy.wrap($iframeBody)
+        .contains('Open webcomponent in splitView')
+        .click();
+      cy.get('.iframeSplitViewCnt>div>').then(container => {
+        const wcContent = container
+          .children()
+          .prevObject[0].shadowRoot.querySelector('p').innerText;
+        expect(wcContent).to.equal('Hello WebComponent!');
+      });
+
+      cy.goToOverviewPage();
+      cy.goToLinkManagerMethods($iframeBody);
+
       //navigate with preserve view functionality
       cy.wrap($iframeBody)
         .contains('with preserved view: project to global settings and back')

test/e2e-test-application/src/app/project/project.component.html

@@ -483,6 +483,26 @@ <h3 class="fd-layout-panel__title">Navigate</h3>
             >
             </app-code-snippet>
           </li>
+          <li class="fd-list__item">
+            <a
+              href="javascript:void(0)"
+              class="fd-link"
+              (click)="
+                linkManager().openAsSplitView('/projects/pr2/webcomponent', {
+                  title: 'Webcomponent in a split view',
+                  size: '25'
+                })
+              "
+              >Open webcomponent in splitView</a
+            >
+            <app-code-snippet
+              data="linkManager().openAsSplitView('/projects/pr2/webcomponent', {
+                title: 'Webcomponent in a split view',
+                size: '25'
+              })"
+            >
+            </app-code-snippet>
+          </li>
           <li class="fd-list__item">
             <a
               href="javascript:void(0)"