From ba50d704275b076fd40ea3da8c60665c7880c1ba Mon Sep 17 00:00:00 2001
From: Olivia Guyot <olivia.guyot@camptocamp.com>
Date: Sat, 21 Oct 2023 15:24:18 +0200
Subject: [PATCH] feat(wc): copy fontface definitions to document on init

this will make icons and fonts appear in web components
---
 .../src/app/components/base.component.ts      | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/apps/webcomponents/src/app/components/base.component.ts b/apps/webcomponents/src/app/components/base.component.ts
index f31461387a..59394945c8 100644
--- a/apps/webcomponents/src/app/components/base.component.ts
+++ b/apps/webcomponents/src/app/components/base.component.ts
@@ -83,6 +83,7 @@ export class BaseComponent implements OnChanges, OnInit {
       this.titleFont
     )
     this.facade.init(this.searchId)
+    this.copyFontFacesToDocument()
     this.isInitialized = true
   }
 
@@ -90,6 +91,27 @@ export class BaseComponent implements OnChanges, OnInit {
     // to override
   }
 
+  private copyFontFacesToDocument() {
+    // get the list of font face definitions in the Shadow DOM
+    const root = this.injector.get(ElementRef).nativeElement as HTMLElement
+    const styles = root.shadowRoot.styleSheets
+    const fontFaces = Array.from(styles).reduce(
+      (prev, curr) => [
+        ...prev,
+        ...Array.from(curr.cssRules)
+          .filter((rule) => rule.cssText.startsWith('@font-face'))
+          .map((rule) => rule.cssText),
+      ],
+      []
+    )
+
+    // all font faces are then copied to the document
+    const style = document.createElement('style')
+    const cssText = fontFaces.join('\n')
+    style.appendChild(document.createTextNode(cssText))
+    document.head.appendChild(style)
+  }
+
   async getRecordLink(
     uuid: string,
     usages: LinkUsage[]