@bryntum/chart-angular-thin 7.2.4 → 7.3.0

package/bundles/bryntum-chart-angular-thin.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@bryntum/core-thin'), require('@bryntum/chart-thin')) :
-    typeof define === 'function' && define.amd ? define('@bryntum/chart-angular-thin', ['exports', '@angular/core', '@bryntum/core-thin', '@bryntum/chart-thin'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bryntum = global.bryntum || {}, global.bryntum["chart-angular-thin"] = {}), global.ng.core, global["@bryntum/core-thin"], global["@bryntum/chart-thin"]));
-})(this, (function (exports, i0, coreThin, chartThin) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@bryntum/core-thin'), require('@bryntum/chart-thin')) :
+    typeof define === 'function' && define.amd ? define('@bryntum/chart-angular-thin', ['exports', '@angular/common', '@angular/core', '@bryntum/core-thin', '@bryntum/chart-thin'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.bryntum = global.bryntum || {}, global.bryntum["chart-angular-thin"] = {}), global.ng.common, global.ng.core, global["@bryntum/core-thin"], global["@bryntum/chart-thin"]));
+})(this, (function (exports, common, i0, coreThin, chartThin) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -486,6 +486,88 @@
         return WrapperHelper;
     }());
 
+    // 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.
+    var openShadowRoots = new Set();
+    // 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) {
+        if (root === void 0) { root = document; }
+        if (openShadowRoots.size > 0) {
+            return Array.from(openShadowRoots);
+        }
+        var roots = [];
+        Array.from(root.querySelectorAll('*')).forEach(function (el) {
+            if (el.shadowRoot) {
+                roots.push(el.shadowRoot);
+                roots.push.apply(roots, __spreadArray([], __read(collectOpenShadowRoots(el.shadowRoot))));
+            }
+        });
+        roots.forEach(function (r) { return 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) {
+        var _a;
+        var href = headLink.href;
+        var themeAttr = (_a = headLink.getAttribute('data-bryntum-theme')) !== null && _a !== void 0 ? _a : '';
+        collectOpenShadowRoots().forEach(function (shadowRoot) {
+            Array.from(shadowRoot.querySelectorAll('link[data-bryntum-theme]')).forEach(function (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.
+    function registerShadowRoot(shadowRoot) {
+        openShadowRoots.add(shadowRoot);
+    }
+    // Removes a shadow root from the registry.
+    // Called by BryntumThemeComboComponent.ngOnDestroy to clean up on component teardown.
+    function unregisterShadowRoot(shadowRoot) {
+        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.
+    function initThemeInShadowRoots() {
+        var headThemeLinks = Array.from(document.head.querySelectorAll('link[data-bryntum-theme]'));
+        if (!headThemeLinks.length) {
+            return;
+        }
+        collectOpenShadowRoots().forEach(function (shadowRoot) {
+            if (shadowRoot.querySelector('link[data-bryntum-theme]')) {
+                return;
+            }
+            headThemeLinks.forEach(function (headLink) {
+                if (!headLink.href) {
+                    return;
+                }
+                // Clone the head link to preserve all attributes, then ensure absolute href
+                var clone = headLink.cloneNode();
+                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
+    coreThin.GlobalEvents.ion({
+        theme: function () {
+            var link = document.head.querySelector('link[data-bryntum-theme]');
+            if (link === null || link === void 0 ? void 0 : link.href) {
+                syncThemeToShadowRoots(link);
+            }
+        }
+    });
+
     var BryntumChartComponent = /** @class */ (function () {
         function BryntumChartComponent(element) {
             this.bryntumConfig = {
@@ -525,8 +607,7 @@
             this.onBeforeShow = new i0.EventEmitter();
             /**
              * Fires when any other event is fired from the object.
-             * ...
-             * [View online docs...](https://bryntum.com/products/chart/docs/api/Chart/widget/Chart#event-catchAll)
+             * [More...](https://bryntum.com/products/chart/docs/api/Chart/widget/Chart#event-catchAll)
              * @param {object} event Event object
              * @param {{[key: string]: any, type: string}} event.event The Object that contains event details
              * @param {string} event.event.type The type of the event which is caught by the listener
@@ -584,8 +665,7 @@
             /**
              * Triggered when a widget which had been in a non-visible state for any reason
              * achieves visibility.
-             * ...
-             * [View online docs...](https://bryntum.com/products/chart/docs/api/Chart/widget/Chart#event-paint)
+             * [More...](https://bryntum.com/products/chart/docs/api/Chart/widget/Chart#event-paint)
              * @param {object} event Event object
              * @param {Core.widget.Widget} event.source The widget being painted.
              * @param {boolean} event.firstPaint `true` if this is the first paint.
@@ -665,9 +745,61 @@
             else {
                 WrapperHelper.devWarningContainer(instanceName, containerParam);
             }
+            // In shadow DOM (e.g. Angular ViewEncapsulation.ShadowDom), theme CSS from document.head
+            // does not cascade into the shadow root. Inject a matching <link> so Bryntum's CSS check
+            // finds the theme. The @font-face rules from component styles are also extracted to
+            // document scope so document.fonts detects them (shadow-root @font-face is not reliably
+            // included in document.fonts across all browsers).
+            var shadowRoot = elementRef.nativeElement.getRootNode();
+            if (shadowRoot instanceof ShadowRoot) {
+                initThemeInShadowRoots();
+                BryntumChartComponent.ensureFontsInDocument(shadowRoot);
+            }
             // @ts-ignore
             me.instance = instanceName === 'Widget' ? coreThin.Widget.create(bryntumConfig) : new instanceClass(bryntumConfig);
         };
+        /**
+         * Extracts all @font-face declarations from a shadow root's stylesheets and adds them to
+         * document.head as a single <style> element. This is needed because @font-face rules inside
+         * a shadow root are not reliably included in document.fonts across all browsers, causing
+         * Bryntum's CSS compatibility check to incorrectly report missing fonts.
+         * Safe to call multiple times — the extraction runs only once per page.
+         */
+        BryntumChartComponent.ensureFontsInDocument = function (shadowRoot) {
+            var _a;
+            if (document.querySelector('#b-shadow-root-fonts')) {
+                return;
+            }
+            var fontFaceRules = [];
+            var extractFromSheet = function (sheet) {
+                try {
+                    var rules = sheet.cssRules;
+                    for (var i = 0; i < rules.length; i++) {
+                        if (rules[i].type === CSSRule.FONT_FACE_RULE) {
+                            fontFaceRules.push(rules[i].cssText);
+                        }
+                    }
+                }
+                catch (_e) {
+                    // Cross-origin access may throw; silently skip
+                }
+            };
+            // adoptedStyleSheets (Angular 14+ / modern browsers)
+            var adoptedSheets = (_a = shadowRoot.adoptedStyleSheets) !== null && _a !== void 0 ? _a : [];
+            adoptedSheets.forEach(function (sheet) { return extractFromSheet(sheet); });
+            // <style> elements (older Angular or fallback)
+            shadowRoot.querySelectorAll('style').forEach(function (el) {
+                if (el.sheet) {
+                    extractFromSheet(el.sheet);
+                }
+            });
+            if (fontFaceRules.length > 0) {
+                var style = document.createElement('style');
+                style.id = 'b-shadow-root-fonts';
+                style.textContent = fontFaceRules.join('\n');
+                document.head.appendChild(style);
+            }
+        };
         /**
          * Watch for changes
          * @param changes
@@ -679,8 +811,8 @@
                 return;
             }
             // Iterate over all changes
-            Object.entries(changes).forEach(function (_a) {
-                var _b = __read(_a, 2), prop = _b[0], change = _b[1];
+            Object.entries(changes).forEach(function (_b) {
+                var _c = __read(_b, 2), prop = _c[0], change = _c[1];
                 var newValue = change.currentValue, instance = _this.instance, bryntumConfigsOnly = BryntumChartComponent.bryntumConfigsOnly, bryntumProps = BryntumChartComponent.bryntumProps;
                 if (bryntumProps.includes(prop)) {
                     WrapperHelper.applyPropValue(instance, prop, newValue, false);
@@ -790,6 +922,7 @@
         'label',
         'labelPosition',
         'labels',
+        'labelWidth',
         'layout',
         'layoutStyle',
         'lazyItems',
@@ -918,7 +1051,6 @@
     ];
     BryntumChartComponent.bryntumProps = BryntumChartComponent.bryntumFeatureNames.concat([
         'alignSelf',
-        'anchorSize',
         'animate',
         'animationDuration',
         'appendTo',
@@ -944,9 +1076,7 @@
         'field',
         'fillColorField',
         'flex',
-        'focusVisible',
         'gridColor',
-        'hasChanges',
         'height',
         'hidden',
         'html',
@@ -955,13 +1085,12 @@
         'insertBefore',
         'insertFirst',
         'interactive',
-        'isSettingValues',
-        'isValid',
         'items',
         'keyMap',
         'label',
         'labelPosition',
         'labels',
+        'labelWidth',
         'layout',
         'layoutStyle',
         'legendPosition',
@@ -1012,7 +1141,7 @@
         'y'
     ]);
     BryntumChartComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChartComponent, deps: [{ token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    BryntumChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumChartComponent, selector: "bryntum-chart", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoUpdateRecord: "autoUpdateRecord", border: "border", bubbleEvents: "bubbleEvents", centered: "centered", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", defaultBindProperty: "defaultBindProperty", defaultFocus: "defaultFocus", defaults: "defaults", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", floating: "floating", hideAnimation: "hideAnimation", hideWhenEmpty: "hideWhenEmpty", htmlCls: "htmlCls", ignoreParentReadOnly: "ignoreParentReadOnly", itemCls: "itemCls", lazyItems: "lazyItems", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", namedItems: "namedItems", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", ripple: "ripple", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", tab: "tab", tabBarItems: "tabBarItems", tag: "tag", textAlign: "textAlign", textContent: "textContent", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", animate: "animate", animationDuration: "animationDuration", appendTo: "appendTo", axisColor: "axisColor", axisLabelColor: "axisLabelColor", background: "background", barDirection: "barDirection", barWidth: "barWidth", bubbleScaleFactor: "bubbleScaleFactor", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", chartPadding: "chartPadding", chartTooltip: "chartTooltip", chartType: "chartType", cls: "cls", column: "column", content: "content", data: "data", dataPointShape: "dataPointShape", dataset: "dataset", disabled: "disabled", extraData: "extraData", field: "field", fillColorField: "fillColorField", flex: "flex", gridColor: "gridColor", height: "height", hidden: "hidden", html: "html", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", interactive: "interactive", items: "items", keyMap: "keyMap", label: "label", labelPosition: "labelPosition", labels: "labels", layout: "layout", layoutStyle: "layoutStyle", legendPosition: "legendPosition", legendScale: "legendScale", margin: "margin", max: "max", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxTickLabelRotation: "maxTickLabelRotation", maxWidth: "maxWidth", min: "min", minHeight: "minHeight", minTickLabelRotation: "minTickLabelRotation", minWidth: "minWidth", pointSize: "pointSize", readOnly: "readOnly", record: "record", rendition: "rendition", role: "role", rtl: "rtl", scrollable: "scrollable", series: "series", seriesLineDash: "seriesLineDash", seriesLineOpacity: "seriesLineOpacity", seriesLineThickness: "seriesLineThickness", showControls: "showControls", showLegend: "showLegend", showPoints: "showPoints", showSubtitle: "showSubtitle", showTicks: "showTicks", showTitle: "showTitle", showTooltips: "showTooltips", span: "span", strictRecordMapping: "strictRecordMapping", subtitle: "subtitle", subtitleFont: "subtitleFont", subtitlePadding: "subtitlePadding", tickFont: "tickFont", tickMarkColor: "tickMarkColor", title: "title", titleFont: "titleFont", titlePadding: "titlePadding", tooltip: "tooltip", width: "width", x: "x", y: "y", anchorSize: "anchorSize", focusVisible: "focusVisible", hasChanges: "hasChanges", isSettingValues: "isSettingValues", isValid: "isValid", parent: "parent", values: "values" }, outputs: { onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
+    BryntumChartComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BryntumChartComponent, selector: "bryntum-chart", inputs: { adopt: "adopt", align: "align", anchor: "anchor", ariaDescription: "ariaDescription", ariaLabel: "ariaLabel", autoUpdateRecord: "autoUpdateRecord", border: "border", bubbleEvents: "bubbleEvents", centered: "centered", color: "color", config: "config", constrainTo: "constrainTo", contentElementCls: "contentElementCls", dataField: "dataField", defaultBindProperty: "defaultBindProperty", defaultFocus: "defaultFocus", defaults: "defaults", detectCSSCompatibilityIssues: "detectCSSCompatibilityIssues", dock: "dock", draggable: "draggable", elementAttributes: "elementAttributes", floating: "floating", hideAnimation: "hideAnimation", hideWhenEmpty: "hideWhenEmpty", htmlCls: "htmlCls", ignoreParentReadOnly: "ignoreParentReadOnly", itemCls: "itemCls", lazyItems: "lazyItems", listeners: "listeners", localeClass: "localeClass", localizable: "localizable", localizableProperties: "localizableProperties", maskDefaults: "maskDefaults", masked: "masked", monitorResize: "monitorResize", namedItems: "namedItems", positioned: "positioned", preventTooltipOnTouch: "preventTooltipOnTouch", relayStoreEvents: "relayStoreEvents", ripple: "ripple", rootElement: "rootElement", scrollAction: "scrollAction", showAnimation: "showAnimation", showTooltipWhenDisabled: "showTooltipWhenDisabled", tab: "tab", tabBarItems: "tabBarItems", tag: "tag", textAlign: "textAlign", textContent: "textContent", type: "type", ui: "ui", weight: "weight", alignSelf: "alignSelf", animate: "animate", animationDuration: "animationDuration", appendTo: "appendTo", axisColor: "axisColor", axisLabelColor: "axisLabelColor", background: "background", barDirection: "barDirection", barWidth: "barWidth", bubbleScaleFactor: "bubbleScaleFactor", callOnFunctions: "callOnFunctions", catchEventHandlerExceptions: "catchEventHandlerExceptions", chartPadding: "chartPadding", chartTooltip: "chartTooltip", chartType: "chartType", cls: "cls", column: "column", content: "content", data: "data", dataPointShape: "dataPointShape", dataset: "dataset", disabled: "disabled", extraData: "extraData", field: "field", fillColorField: "fillColorField", flex: "flex", gridColor: "gridColor", height: "height", hidden: "hidden", html: "html", id: "id", inputFieldAlign: "inputFieldAlign", insertBefore: "insertBefore", insertFirst: "insertFirst", interactive: "interactive", items: "items", keyMap: "keyMap", label: "label", labelPosition: "labelPosition", labels: "labels", labelWidth: "labelWidth", layout: "layout", layoutStyle: "layoutStyle", legendPosition: "legendPosition", legendScale: "legendScale", margin: "margin", max: "max", maxHeight: "maxHeight", maximizeOnMobile: "maximizeOnMobile", maxTickLabelRotation: "maxTickLabelRotation", maxWidth: "maxWidth", min: "min", minHeight: "minHeight", minTickLabelRotation: "minTickLabelRotation", minWidth: "minWidth", pointSize: "pointSize", readOnly: "readOnly", record: "record", rendition: "rendition", role: "role", rtl: "rtl", scrollable: "scrollable", series: "series", seriesLineDash: "seriesLineDash", seriesLineOpacity: "seriesLineOpacity", seriesLineThickness: "seriesLineThickness", showControls: "showControls", showLegend: "showLegend", showPoints: "showPoints", showSubtitle: "showSubtitle", showTicks: "showTicks", showTitle: "showTitle", showTooltips: "showTooltips", span: "span", strictRecordMapping: "strictRecordMapping", subtitle: "subtitle", subtitleFont: "subtitleFont", subtitlePadding: "subtitlePadding", tickFont: "tickFont", tickMarkColor: "tickMarkColor", title: "title", titleFont: "titleFont", titlePadding: "titlePadding", tooltip: "tooltip", width: "width", x: "x", y: "y", parent: "parent", values: "values" }, outputs: { onBeforeDestroy: "onBeforeDestroy", onBeforeHide: "onBeforeHide", onBeforeSetRecord: "onBeforeSetRecord", onBeforeShow: "onBeforeShow", onCatchAll: "onCatchAll", onDestroy: "onDestroy", onDirtyStateChange: "onDirtyStateChange", onElementCreated: "onElementCreated", onFocusIn: "onFocusIn", onFocusOut: "onFocusOut", onHide: "onHide", onPaint: "onPaint", onReadOnly: "onReadOnly", onRecompose: "onRecompose", onResize: "onResize", onShow: "onShow" }, usesOnChanges: true, ngImport: i0__namespace, template: '', isInline: true });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChartComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -1203,6 +1332,8 @@
                     type: i0.Input
                 }], labels: [{
                     type: i0.Input
+                }], labelWidth: [{
+                    type: i0.Input
                 }], layout: [{
                     type: i0.Input
                 }], layoutStyle: [{
@@ -1295,16 +1426,6 @@
                     type: i0.Input
                 }], y: [{
                     type: i0.Input
-                }], anchorSize: [{
-                    type: i0.Input
-                }], focusVisible: [{
-                    type: i0.Input
-                }], hasChanges: [{
-                    type: i0.Input
-                }], isSettingValues: [{
-                    type: i0.Input
-                }], isValid: [{
-                    type: i0.Input
                 }], parent: [{
                     type: i0.Input
                 }], values: [{
@@ -1352,15 +1473,15 @@
         return BryntumChartModule;
     }());
     BryntumChartModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChartModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
-    BryntumChartModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChartModule, declarations: [BryntumChartComponent], exports: [BryntumChartComponent] });
-    BryntumChartModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChartModule, imports: [[]] });
+    BryntumChartModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChartModule, declarations: [BryntumChartComponent], imports: [common.CommonModule], exports: [BryntumChartComponent] });
+    BryntumChartModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChartModule, imports: [[common.CommonModule]] });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0__namespace, type: BryntumChartModule, decorators: [{
                 type: i0.NgModule,
                 args: [{
                         declarations: [
                             BryntumChartComponent
                         ],
-                        imports: [],
+                        imports: [common.CommonModule],
                         exports: [
                             BryntumChartComponent
                         ]