feat(web): Implement view container and update elements

ts_web/views/index.ts

@@ -0,0 +1 @@
+export * from './viewcontainer.js';

ts_web/views/viewcontainer.ts

@@ -0,0 +1,77 @@
+import * as plugins from '../plugins.js';
+
+import {
+  customElement,
+  DeesElement,
+  property,
+  html,
+  cssManager,
+  unsafeCSS,
+  css,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('idp-viewcontainer')
+export class IdpViewcontainer extends DeesElement {
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        color: #fff;
+        font-family: 'Geist Sans';
+      }
+      :host([hidden]) {
+        display: none;
+      }
+      .viewContainer {
+        min-width: 100vh;
+        min-height: 100vh;
+      }
+      
+     `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <div class="viewContainer">
+
+      </div>
+    `;
+  }
+
+  public currentElement: plugins.deesElement.DeesElement;
+  public async loadElement(viewElement: typeof plugins.deesElement.DeesElement) {
+    // Wait until the viewContainer itself is rendered
+    await this.updateComplete;
+
+    // Select the viewContainer
+    const viewContainer = this.shadowRoot.querySelector('.viewContainer');
+
+    // Check if viewContainer is present
+    if (!viewContainer) {
+      throw new Error('View container not found in the rendered DOM.');
+    }
+
+    // Remove the current element if it exists
+    if (this.currentElement) {
+      viewContainer.removeChild(this.currentElement);
+    }
+
+    // Create a new instance of the viewElement
+    const newElement = new viewElement();
+    (newElement as any).viewContainer = this;
+    viewContainer.appendChild(newElement);
+
+    // Wait until the new element is fully rendered
+    await newElement.updateComplete;
+
+    // Set the new element as the current element
+    this.currentElement = newElement;
+  }
+}