From 3197a57986ffcbb03f404a16971762f4f9646dc6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 9 Apr 2026 15:53:56 +0000 Subject: [PATCH 1/3] Initial plan From 9fa512348dac9f3f3aeb1fc01047d67d090909b2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 9 Apr 2026 15:56:00 +0000 Subject: [PATCH 2/3] fix: use appendChild instead of insertBefore for theme styles to ensure correct CSS cascade order Agent-Logs-Url: https://github.com/IgniteUI/igniteui-angular-samples/sessions/b7433c38-919d-4392-a94a-cb4ae0dbede8 Co-authored-by: viktorkombov <75325639+viktorkombov@users.noreply.github.com> --- projects/app-lob/src/app/app.component.ts | 4 ++-- projects/app-lob/src/app/index/docs-layout.component.ts | 4 ++-- src/app/app.component.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/app-lob/src/app/app.component.ts b/projects/app-lob/src/app/app.component.ts index cad9fbe55..fa2d8bab6 100644 --- a/projects/app-lob/src/app/app.component.ts +++ b/projects/app-lob/src/app/app.component.ts @@ -62,13 +62,13 @@ export class AppComponent implements OnInit { typefaceElem.rel = 'stylesheet'; typefaceElem.id = 'ignteui-theme-typeface'; typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+'); - this.document.head.insertBefore(typefaceElem, this.document.head.lastElementChild); + this.document.head.appendChild(typefaceElem); } private createThemeStyle() { this.styleElem = this.document.createElement('style'); this.styleElem.id = 'igniteui-theme'; - this.document.head.insertBefore(this.styleElem, this.document.head.lastElementChild); + this.document.head.appendChild(this.styleElem); this.document.body.classList.add('custom-body'); } } diff --git a/projects/app-lob/src/app/index/docs-layout.component.ts b/projects/app-lob/src/app/index/docs-layout.component.ts index b4fe2df43..2f36f8b13 100644 --- a/projects/app-lob/src/app/index/docs-layout.component.ts +++ b/projects/app-lob/src/app/index/docs-layout.component.ts @@ -42,7 +42,7 @@ export class DocsLayoutComponent implements OnInit { private createThemeStyle() { this.styleElem = this.document.createElement('style'); this.styleElem.id = 'igniteui-theme'; - this.document.head.insertBefore(this.styleElem, this.document.head.lastElementChild); + this.document.head.appendChild(this.styleElem); this.document.body.classList.add('custom-body'); } @@ -51,6 +51,6 @@ export class DocsLayoutComponent implements OnInit { typefaceElem.rel = 'stylesheet'; typefaceElem.id = 'ignteui-theme-typeface'; typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+'); - this.document.head.insertBefore(typefaceElem, this.document.head.lastElementChild); + this.document.head.appendChild(typefaceElem); } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 5480185df..65360adec 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -44,13 +44,13 @@ export class AppComponent implements OnInit { typefaceElem.rel = 'stylesheet'; typefaceElem.id = 'ignteui-theme-typeface'; typefaceElem.href = this.typefaceUrl + typeface.split(' ').join('+'); - this.document.head.insertBefore(typefaceElem, this.document.head.lastElementChild); + this.document.head.appendChild(typefaceElem); } private createThemeStyle() { this.styleElem = this.document.createElement('style'); this.styleElem.id = 'igniteui-theme'; - this.document.head.insertBefore(this.styleElem, this.document.head.lastElementChild); + this.document.head.appendChild(this.styleElem); this.document.body.classList.add('custom-body'); } } From 03e2aa98a45a576fb6b0344810955fa68b9edc64 Mon Sep 17 00:00:00 2001 From: Viktor Kombov Date: Tue, 14 Apr 2026 13:57:52 +0300 Subject: [PATCH 3/3] fix: remove duplicate theming injection from app-lob DocsLayoutComponent and fix typeface link reuse --- projects/app-lob/src/app/app.component.ts | 11 +++-- .../src/app/index/docs-layout.component.ts | 47 +------------------ src/app/app.component.ts | 11 +++-- 3 files changed, 16 insertions(+), 53 deletions(-) diff --git a/projects/app-lob/src/app/app.component.ts b/projects/app-lob/src/app/app.component.ts index fa2d8bab6..d38aa4061 100644 --- a/projects/app-lob/src/app/app.component.ts +++ b/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() { diff --git a/projects/app-lob/src/app/index/docs-layout.component.ts b/projects/app-lob/src/app/index/docs-layout.component.ts index 2f36f8b13..686d197eb 100644 --- a/projects/app-lob/src/app/index/docs-layout.component.ts +++ b/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); - - 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 { } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 65360adec..104654744 100644 --- a/src/app/app.component.ts +++ b/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() {