feat(core/appliaction-header): load optional application logo

siemens · Oct 6, 2022 · 89ecb72 · 89ecb72
1 parent bfdc48c
commit 89ecb72
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/packages/core/src/components/application-header/application-header.tsx b/packages/core/src/components/application-header/application-header.tsx
@@ -7,19 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, h, Host, Prop } from '@stencil/core';
+import { Component, Element, h, Host, Prop } from '@stencil/core';
 
 @Component({
   tag: 'ix-application-header',
   styleUrl: 'application-header.scss',
   shadow: true,
 })
 export class ApplicationHeader {
+  @Element() host!: HTMLIxApplicationHeaderElement;
+
   /**
    * Application name
    */
   @Prop() name: string;
 
+  componentDidLoad() {
+    this.attachSiemensLogoIfLoaded();
+  }
+
+  private async attachSiemensLogoIfLoaded() {
+    await window.customElements.whenDefined('ix-siemens-logo');
+    const logoElement = document.createElement('ix-siemens-logo');
+
+    if (!this.host.querySelector('[slot="logo"]')) {
+      this.host.shadowRoot.querySelector('.logo').appendChild(logoElement);
+    }
+  }
+
   render() {
     return (
       <Host>

diff --git a/packages/core/src/index.html b/packages/core/src/index.html
@@ -18,14 +18,6 @@
     <script nomodule src="/build/siemens-ix.js"></script>
 
     <link rel="stylesheet" href="/build/siemens-ix.css" />
-    <!-- Temp. Workaround for brand theme to live inside core package  -->
-    <link rel="stylesheet" href="/build/ix-brand-theme/ix-brand-theme.css" />
-    <script
-      type="module"
-      src="/build/ix-brand-theme/ix-brand-theme.esm.js"
-    ></script>
-    <script nomodule src="/build/ix-brand-theme/ix-brand-theme.js"></script>
-
     <link rel="stylesheet" href="/build/ix-icons/css/ix-icons.css" />
   </head>
   <body style="margin: 0px; height: 100vh">