fix: remove duplicate theming injection from app-lob DocsLayoutComponent and fix typeface link reuse

Author: viktorkombov

projects/app-lob/src/app/app.component.ts

@@ -58,11 +58,14 @@ export class AppComponent implements OnInit {
     }
 
     private createTypefaceLink(typeface: string) {
-        const typefaceElem = this.document.createElement('link');
-        typefaceElem.rel = 'stylesheet';
-        typefaceElem.id = 'ignteui-theme-typeface';
+        let typefaceElem = this.document.getElementById('igniteui-theme-typeface') as HTMLLinkElement;
+        if (!typefaceElem) {
+            typefaceElem = this.document.createElement('link');
+            typefaceElem.rel = 'stylesheet';
+            typefaceElem.id = 'igniteui-theme-typeface';
+            this.document.head.appendChild(typefaceElem);
+        }
         typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+');
-        this.document.head.appendChild(typefaceElem);
     }
 
     private createThemeStyle() {

projects/app-lob/src/app/index/docs-layout.component.ts

@@ -1,5 +1,5 @@
 
-import { Component, HostListener, OnInit, DOCUMENT, inject } from '@angular/core';
+import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
@@ -9,48 +9,5 @@ import { RouterOutlet } from '@angular/router';
     imports: [RouterOutlet]
 })
 
-export class DocsLayoutComponent implements OnInit {
-    private document = inject<Document>(DOCUMENT);
-
-    private theme = 'default-theme';
-    private styleElem: HTMLStyleElement;
-    private typefacesLoaded = ['Titillium Web', 'Roboto'];
-    private typefaceUrl = 'https://fonts.googleapis.com/css?family=';
-
-    @HostListener('window:message', ['$event'])
-    protected onMessage(e: MessageEvent) {
-        if (e.origin === e.data.origin && typeof e.data.themeStyle === 'string') {
-            this.styleElem.textContent = e.data.themeStyle;
-
-            const typeface = this.document.defaultView.getComputedStyle(this.document.body).fontFamily.replace(/\'/g, '');
-            if (!(typeface.match(/,/g) || []).length &&
-                !this.typefacesLoaded.includes(typeface)) {
-                this.typefacesLoaded.push(typeface);
-                this.createTypefaceLink(typeface);
-            }
-        } else if (e.origin === e.data.origin && typeof e.data.theme === 'string') {
-            this.document.body.classList.remove(this.theme);
-            this.document.body.classList.add(e.data.theme);
-            this.theme = e.data.theme;
-        }
-    }
-
-    public ngOnInit() {
-        this.createThemeStyle();
-    }
-
-    private createThemeStyle() {
-        this.styleElem = this.document.createElement('style');
-        this.styleElem.id = 'igniteui-theme';
-        this.document.head.appendChild(this.styleElem);
-        this.document.body.classList.add('custom-body');
-    }
-
-    private createTypefaceLink(typeface: string) {
-        const typefaceElem = this.document.createElement('link');
-        typefaceElem.rel = 'stylesheet';
-        typefaceElem.id = 'ignteui-theme-typeface';
-        typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+');
-        this.document.head.appendChild(typefaceElem);
-    }
+export class DocsLayoutComponent {
 }

src/app/app.component.ts

@@ -40,11 +40,14 @@ export class AppComponent implements OnInit {
     }
 
     private createTypefaceLink(typeface: string) {
-        const typefaceElem = this.document.createElement('link');
-        typefaceElem.rel = 'stylesheet';
-        typefaceElem.id = 'ignteui-theme-typeface';
+        let typefaceElem = this.document.getElementById('igniteui-theme-typeface') as HTMLLinkElement;
+        if (!typefaceElem) {
+            typefaceElem = this.document.createElement('link');
+            typefaceElem.rel = 'stylesheet';
+            typefaceElem.id = 'igniteui-theme-typeface';
+            this.document.head.appendChild(typefaceElem);
+        }
         typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+');
-        this.document.head.appendChild(typefaceElem);
     }
 
     private createThemeStyle() {