Allows for the theming widget to style samples

angular.json

@@ -22,7 +22,12 @@
             ],
             "assets": [
               "src/assets",
-              "src/favicon.ico"
+              "src/favicon.ico",
+              {
+                "glob": "igniteui-{angular,angular-dark,fluent-light,fluent-dark,bootstrap-light,bootstrap-dark,indigo-light,indigo-dark}.css",
+                "input": "node_modules/igniteui-angular/styles",
+                "output": "assets/themes"
+              }
             ],
             "styles": [
               "src/styles.scss"

live-editing/configs/InputGroupConfigGenerator.ts

@@ -18,46 +18,34 @@ export class InputGroupConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: 'InputGroupSample1Component',
-            additionalFiles: [
-                "/src/app/data-entries/input-group/base-input.component.ts"
-            ],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/input-group/"
         }));
 
         // input group sample 2
         configs.push(new Config({
             component: 'InputGroupSample2Component',
-            additionalFiles: [
-                "/src/app/data-entries/input-group/base-input.component.ts"
-            ],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/input-group/"
         }));
 
         // input group sample 5
         configs.push(new Config({
             component: 'InputGroupSample5Component',
-            additionalFiles: [
-                "/src/app/data-entries/input-group/base-input.component.ts"
-            ],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/input-group/"
         }));
 
         // reactive forms
         configs.push(new Config({
             component: 'ReactiveFormsSampleComponent',
-            additionalFiles: [
-                "/src/app/data-entries/input-group/base-input.component.ts"
-            ],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/"
         }));
 
         configs.push(new Config({
             component: 'InputGroupStyleComponent',
-            additionalFiles: ["/src/app/data-entries/input-group/base-input.component.ts", "/src/app/data-entries/input-group/input-group-styling/layout.scss"],
+            additionalFiles: ["/src/app/data-entries/input-group/input-group-styling/layout.scss"],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/"
         }));
@@ -71,29 +59,20 @@ export class InputGroupConfigGenerator implements IConfigGenerator {
         // template-driven form validation
         configs.push(new Config({
             component: 'TemplateDrivenFormValidationComponent',
-            additionalFiles: [
-                "/src/app/data-entries/input-group/base-input.component.ts"
-            ],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/"
         }));
 
         // reactive form validation
         configs.push(new Config({
             component: 'ReactiveFormValidationComponent',
-            additionalFiles: [
-                "/src/app/data-entries/input-group/base-input.component.ts"
-            ],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/"
         }));
 
         // reactive form custom validation
         configs.push(new Config({
             component: 'ReactiveFormCustomValidationComponent',
-            additionalFiles: [
-                "/src/app/data-entries/input-group/base-input.component.ts"
-            ],
             appConfig: BaseAppConfig,
             shortenComponentPathBy: "/data-entries/"
         }));

src/app/app.component.ts

@@ -1,6 +1,7 @@
 
 import { Component, HostListener, OnInit, DOCUMENT, inject } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { ThemeService } from './services/theme.service';
 
 @Component({
     selector: 'app-root',
@@ -10,50 +11,22 @@ import { RouterOutlet } from '@angular/router';
 })
 export class AppComponent implements OnInit {
     private document = inject<Document>(DOCUMENT);
+    private themeService = inject(ThemeService);
 
     public title = 'Samples';
-    private theme = 'default-theme';
-    private styleElem: HTMLStyleElement;
-    private typefacesLoaded = ['Titillium Web', 'Roboto'];
-    private typefaceUrl = 'https://fonts.googleapis.com/css?family=';
 
     public ngOnInit() {
-        this.createThemeStyle();
+        this.document.body.classList.add('custom-body');
+        this.themeService.init();
     }
 
-    // eslint-disable-next-line @typescript-eslint/member-ordering
+    /**
+     * Samples are embedded in the documentation as iframes and the theming
+     * widget shown next to each of them posts the visitor's theme selection
+     * down into the sample. Anything that is not such a message is left alone.
+     */
     @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 = window.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;
-        }
-    }
-
-    private createTypefaceLink(typeface: string) {
-        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('+');
-    }
-
-    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');
+        this.themeService.handleMessage(e);
     }
 }

src/app/data-entries/input-group/input-group-sample-1/input-group-sample-1.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { BaseInputGroupSampleComponent } from '../base-input.component';
 import { FormsModule } from '@angular/forms';
 import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group';
 
@@ -9,4 +8,4 @@ import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'ig
     templateUrl: './input-group-sample-1.component.html',
     imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective]
 })
-export class InputGroupSample1Component extends BaseInputGroupSampleComponent { }
+export class InputGroupSample1Component { }

src/app/data-entries/input-group/input-group-sample-2/input-group-sample-2.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { BaseInputGroupSampleComponent } from '../base-input.component';
 import { FormsModule } from '@angular/forms';
 import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'igniteui-angular/input-group';
 
@@ -9,4 +8,4 @@ import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective } from 'ig
     templateUrl: './input-group-sample-2.component.html',
     imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective]
 })
-export class InputGroupSample2Component extends BaseInputGroupSampleComponent { }
+export class InputGroupSample2Component { }

src/app/data-entries/input-group/input-group-sample-3/input-group-sample-3.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { BaseInputGroupSampleComponent } from '../base-input.component';
 import { FormsModule } from '@angular/forms';
 import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -10,4 +9,4 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     templateUrl: './input-group-sample-3.component.html',
     imports: [FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxIconComponent, IgxSuffixDirective]
 })
-export class InputGroupSample3Component extends BaseInputGroupSampleComponent { }
+export class InputGroupSample3Component { }

src/app/data-entries/input-group/input-group-sample-4/input-group-sample-4.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import { BaseInputGroupSampleComponent } from '../base-input.component';
 import { FormsModule } from '@angular/forms';
 import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
 import { IgxIconComponent } from 'igniteui-angular/icon';
@@ -10,4 +9,4 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     templateUrl: './input-group-sample-4.component.html',
     imports: [FormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxLabelDirective, IgxInputDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective]
 })
-export class InputGroupSample4Component extends BaseInputGroupSampleComponent { }
+export class InputGroupSample4Component { }

src/app/data-entries/input-group/input-group-sample-5/input-group-sample-5.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { BaseInputGroupSampleComponent } from '../base-input.component';
 import { IGX_INPUT_GROUP_TYPE, IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { FormsModule } from '@angular/forms';
@@ -12,4 +11,4 @@ import { FormsModule } from '@angular/forms';
     providers: [{ provide: IGX_INPUT_GROUP_TYPE, useValue: 'box' }],
     imports: [FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxSuffixDirective, IgxIconComponent, IgxHintDirective, IgxPrefixDirective]
 })
-export class InputGroupSample5Component extends BaseInputGroupSampleComponent { }
+export class InputGroupSample5Component { }

src/app/data-entries/input-group/input-group-sample-6/input-group-sample-6.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { BaseInputGroupSampleComponent } from '../base-input.component';
 import { FormsModule } from '@angular/forms';
 import { IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxSelectToggleIconDirective } from 'igniteui-angular/select';
 import { IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group';
@@ -16,7 +15,7 @@ import { IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular/directi
     templateUrl: './input-group-sample-6.component.html',
     imports: [FormsModule, IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxPrefixDirective, IgxHintDirective, IgxComboComponent, IgxDatePickerComponent, IgxPickerToggleComponent, IgxTimePickerComponent, IgxButtonDirective, IgxRippleDirective]
 })
-export class InputGroupSample6Component extends BaseInputGroupSampleComponent {
+export class InputGroupSample6Component {
     public user = {
         dateTime: new Date(),
         email: undefined,