@everymatrix/casino-header-controller 0.0.400 → 0.0.401

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@everymatrix/casino-header-controller",
-  "version": "0.0.400",
+  "version": "0.0.401",
   "main": "dist/casino-header-controller.js",
   "svelte": "src/index.ts",
   "scripts": {
@@ -38,5 +38,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2b9ea7d441ad474249a446a0bc5da5c02293b70b"
+  "gitHead": "b3bbda8a314a8c6a5f05d45b471a2995556e9fad"
 }

package/src/CasinoHeaderController.svelte

@@ -28,9 +28,12 @@
 
   export let userroles:string = '';
   export let showsubgroups:string = 'false';
+  export let clientstyling:string = '';
+  export let clientstylingurl:string = '';
 
   let activeIndex:string;
   let identity:string = "HeaderMenu";
+  let customStylingContainer:HTMLElement;
 
   setupI18n({ withLocale: 'en', translations: {}});
 
@@ -235,6 +238,27 @@
     });
   }
 
+  const setClientStyling = ():void => {
+    let sheet = document.createElement('style');
+    sheet.innerHTML = clientstyling;
+    customStylingContainer.appendChild(sheet);
+  }
+
+  const setClientStylingURL = ():void => {
+    let url:URL = new URL(clientstylingurl);
+    let cssFile:HTMLElement = document.createElement('style');
+
+    fetch(url.href)
+      .then((res:any) => res.text())
+      .then((data:any) => {
+        cssFile.innerHTML = data
+
+        if (customStylingContainer) {
+          setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
+        }
+      });
+  }
+
   onMount(async () => {
     window.addEventListener('message', messageHandler, false);
 
@@ -251,11 +275,13 @@
   $: session && setSession();
   $: lang && setActiveLanguage();
   $: cmsendpoint && lang && languageslist && userroles && initialLoad();
+  $: clientstyling && setClientStyling();
+  $: clientstylingurl && setClientStylingURL();
 </script>
 
 {#if isLoggedIn}
   {#if mobileView}
-    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper">
+    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
       <div class="HeaderContainer" part="HeaderContainer">
         <div class="HeaderMobileMainNav" part="HeaderMobileMainNav">
           {#if !hamburgerMenuActive}
@@ -307,7 +333,7 @@
       </div>
     </header>
   {:else}
-    <header class="HeaderWrapper" part="HeaderWrapper">
+    <header class="HeaderWrapper" part="HeaderWrapper" bind:this={customStylingContainer}>
       <div class="HeaderContainer" part="HeaderContainer">
         <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
           {#if logoFromCms}
@@ -371,7 +397,7 @@
   {/if}
 {:else}
   {#if mobileView}
-    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper">
+    <header class="HeaderWrapper HeaderMobileWrapper" part="HeaderWrapper HeaderMobileWrapper" bind:this={customStylingContainer}>
       <div class="HeaderContainer" part="HeaderContainer">
         <div class="HeaderMobileMainNav" part="HeaderMobileMainNav">
           <svg on:click={()=>toggleMenu()} xmlns="http://www.w3.org/2000/svg" width="22" height="16"
@@ -406,7 +432,7 @@
       </div>
     </header>
   {:else}
-    <header class="HeaderWrapper" part="HeaderWrapper">
+    <header class="HeaderWrapper" part="HeaderWrapper" bind:this={customStylingContainer}>
       <div class="HeaderContainer" part="HeaderContainer">
         <div class="HeaderBranding" part="HeaderBranding" on:click={()=>menuAction('lobby')}>
           {#if logoFromCms}