@bryntum/chart-angular-thin 7.2.3 → 7.3.0

package/src/lib/bryntum-theme-combo.component.ts

@@ -0,0 +1,128 @@
+/**
+ * Angular wrapper for Bryntum Theme combo
+ */
+import { Component, ElementRef, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { BrowserHelper, Combo, DomHelper, Store, StoreConfig } from '@bryntum/core-thin';
+import { initThemeInShadowRoots, registerShadowRoot, unregisterShadowRoot } from './shadowdom.helper';
+
+const defaultThemes: Record<string, string> = {
+    'material3-light'     : 'Material3 Light',
+    'material3-dark'      : 'Material3 Dark',
+    'stockholm-light'     : 'Stockholm Light',
+    'stockholm-dark'      : 'Stockholm Dark',
+    'svalbard-light'      : 'Svalbard Light',
+    'svalbard-dark'       : 'Svalbard Dark',
+    'visby-light'         : 'Visby Light',
+    'visby-dark'          : 'Visby Dark',
+    'fluent2-light'       : 'Fluent2 Light',
+    'fluent2-dark'        : 'Fluent2 Dark',
+    'high-contrast-light' : 'High Contrast Light',
+    'high-contrast-dark'  : 'High Contrast Dark'
+};
+
+const syncedProps = ['store', 'label', 'width'] as const;
+
+export type BryntumThemeComboProps = {
+    store?: Store | StoreConfig | object;
+    label?: string;
+    width?: string | number;
+};
+
+@Component({
+    selector : 'bryntum-theme-combo',
+    template : ''
+})
+export class BryntumThemeComboComponent implements OnInit, OnChanges, OnDestroy {
+
+    private elementRef: ElementRef;
+    private combo!: Combo;
+
+    @Input() store?: Store | StoreConfig | object;
+    @Input() label?: string;
+    @Input() width?: string | number;
+
+    constructor(element: ElementRef) {
+        this.elementRef = element;
+    }
+
+    /**
+     * Initializes the component and creates the Bryntum Combo widget
+     */
+    ngOnInit(): void {
+        const shadowRoot = this.elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            registerShadowRoot(shadowRoot);
+        }
+
+        this.combo = new Combo({
+            appendTo      : this.elementRef.nativeElement,
+            ...(this.store ? { store : this.store } : { items : defaultThemes }),
+            label         : this.label ?? 'Theme',
+            width         : this.width ?? '16em',
+            value         : 'material3-light',
+            editable      : false,
+            labelPosition : 'before',
+            ref           : 'themeCombo',
+            listeners     : {
+                change({ value }) {
+                    DomHelper.setTheme(value).then(context => {
+                        if (context) {
+                            // Remove all b-theme-* classes — don't rely on context.prev which may
+                            // be stale (CSS vars unreadable in Angular ViewEncapsulation.ShadowDom)
+                            Array.from(document.body.classList)
+                                .filter(cls => cls.startsWith('b-theme-'))
+                                .forEach(cls => document.body.classList.remove(cls));
+                            document.body.classList.add(`b-theme-${context.theme}`);
+                        }
+                    });
+                }
+            }
+        });
+
+        // Apply theme from URL search param (?theme=xxx), detect from loaded CSS, or read from link href
+        const
+            themeLink     = document.querySelector<HTMLLinkElement>('link[data-bryntum-theme]'),
+            themeFromHref = themeLink ? new URL(themeLink.href).pathname.split('/').pop()?.replace('.css', '') : '',
+            theme         = BrowserHelper.searchParam('theme') || DomHelper.getThemeInfo()?.filename || themeFromHref;
+
+        if (theme) {
+            this.combo.value = theme;
+        }
+
+        console.log(`Set: .b-theme-${this.combo.value as string}`);
+        // Always set the initial body class — even when theme detection falls back to the
+        // combo's default value (CSS vars may be unreadable in shadow DOM contexts)
+        document.body.classList.add(`b-theme-${this.combo.value as string}`);
+
+        initThemeInShadowRoots();
+    }
+
+    /**
+     * Responds to Input property changes and updates the Combo widget accordingly
+     */
+    ngOnChanges(changes: SimpleChanges): void {
+        const { combo } = this;
+        if (!combo) {
+            return;
+        }
+        for (const prop of syncedProps) {
+            if (prop in changes) {
+                (combo as any)[prop] = changes[prop].currentValue;
+            }
+        }
+    }
+
+    /**
+     * Destroys the component and the underlying Combo widget
+     */
+    ngOnDestroy(): void {
+        const shadowRoot = this.elementRef.nativeElement.getRootNode();
+        if (shadowRoot instanceof ShadowRoot) {
+            unregisterShadowRoot(shadowRoot);
+        }
+
+        if (this.combo) {
+            this.combo.destroy();
+        }
+    }
+}

package/src/lib/chart.module.ts

@@ -1,6 +1,7 @@
 /**
 * Angular Bryntum Chart Shared module
 */
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
 import { BryntumChartComponent } from './bryntum-chart.component';
@@ -10,7 +11,7 @@ import { BryntumChartComponent } from './bryntum-chart.component';
 
         BryntumChartComponent
     ],
-    imports : [],
+    imports : [CommonModule],
     exports : [
 
         BryntumChartComponent

package/src/lib/shadowdom.helper.ts

@@ -0,0 +1,91 @@
+import { GlobalEvents } from '@bryntum/core-thin';
+
+// Module-level registry of all open shadow roots that host Bryntum widgets.
+// Populated lazily by collectOpenShadowRoots() the first time it is called, and
+// kept up to date via registerShadowRoot / unregisterShadowRoot.
+const openShadowRoots = new Set<ShadowRoot>();
+
+// Walks the DOM tree starting from `root` and collects every open shadow root found.
+// Results are cached in openShadowRoots after the first traversal so subsequent calls
+// are O(1). Recursive so nested shadow roots are also discovered.
+function collectOpenShadowRoots(root : Document | ShadowRoot = document) : ShadowRoot[] {
+    if (openShadowRoots.size > 0) {
+        return Array.from(openShadowRoots);
+    }
+    const roots : ShadowRoot[] = [];
+    Array.from(root.querySelectorAll('*')).forEach(el => {
+        if ((el as Element & { shadowRoot? : ShadowRoot }).shadowRoot) {
+            roots.push((el as any).shadowRoot);
+            roots.push(...collectOpenShadowRoots((el as any).shadowRoot));
+        }
+    });
+    roots.forEach(r => openShadowRoots.add(r));
+    return roots;
+}
+
+// Updates the href and data-bryntum-theme attribute of every theme <link> inside all
+// registered shadow roots to mirror the new head link after a theme change.
+function syncThemeToShadowRoots(headLink : HTMLLinkElement) : void {
+    const href       = headLink.href;
+    const themeAttr  = headLink.getAttribute('data-bryntum-theme') ?? '';
+
+    collectOpenShadowRoots().forEach(shadowRoot => {
+        Array.from(shadowRoot.querySelectorAll<HTMLLinkElement>('link[data-bryntum-theme]')).forEach(link => {
+            link.setAttribute('data-bryntum-theme', themeAttr);
+            link.href = href;
+        });
+    });
+}
+
+// Adds a shadow root to the registry so it is included in theme sync operations.
+// Called by BryntumThemeComboComponent.ngOnInit when it detects it is inside a shadow root.
+export function registerShadowRoot(shadowRoot : ShadowRoot) : void {
+    openShadowRoots.add(shadowRoot);
+}
+
+// Removes a shadow root from the registry.
+// Called by BryntumThemeComboComponent.ngOnDestroy to clean up on component teardown.
+export function unregisterShadowRoot(shadowRoot : ShadowRoot) : void {
+    openShadowRoots.delete(shadowRoot);
+}
+
+// Injects a clone of each document.head theme <link> into every registered shadow root
+// that does not already have one. This is required because CSS from document.head does
+// not cascade into shadow DOM, so Bryntum theme styles would be absent without this.
+// Safe to call multiple times — the presence check prevents duplicate injection.
+export function initThemeInShadowRoots() : void {
+    const headThemeLinks = Array.from(document.head.querySelectorAll<HTMLLinkElement>('link[data-bryntum-theme]'));
+
+    if (!headThemeLinks.length) {
+        return;
+    }
+
+    collectOpenShadowRoots().forEach(shadowRoot => {
+        if (shadowRoot.querySelector('link[data-bryntum-theme]')) {
+            return;
+        }
+
+        headThemeLinks.forEach(headLink => {
+            if (!headLink.href) {
+                return;
+            }
+            // Clone the head link to preserve all attributes, then ensure absolute href
+            const clone = headLink.cloneNode() as HTMLLinkElement;
+            clone.href = headLink.href;
+            shadowRoot.appendChild(clone);
+        });
+    });
+}
+
+// Listens for Bryntum's internal theme-change event and keeps every shadow root's
+// theme link in sync with the new document.head link. Fires after the old <link>s
+// are removed and the new one is fully loaded in document.head.
+// @ts-ignore - ion() is public but not present on GlobalEventsSingleton typings
+GlobalEvents.ion({
+    theme() : void {
+        const link = document.head.querySelector<HTMLLinkElement>('link[data-bryntum-theme]');
+        if (link?.href) {
+            syncThemeToShadowRoots(link);
+        }
+    }
+});