highcharts 9.3.1 → 10.0.0

package/es-modules/Core/Renderer/HTML/AST.js

@@ -9,18 +9,28 @@
  * */
 'use strict';
 import H from '../../Globals.js';
-var SVG_NS = H.SVG_NS;
+var SVG_NS = H.SVG_NS, win = H.win;
 import U from '../../Utilities.js';
-var attr = U.attr, createElement = U.createElement, discardElement = U.discardElement, error = U.error, isString = U.isString, objectEach = U.objectEach, splat = U.splat;
+var attr = U.attr, createElement = U.createElement, css = U.css, error = U.error, isFunction = U.isFunction, isString = U.isString, objectEach = U.objectEach, splat = U.splat;
+var trustedTypes = win.trustedTypes;
 /* *
  *
  *  Constants
  *
  * */
+// Create the trusted type policy. This should not be exposed.
+var trustedTypesPolicy = (trustedTypes &&
+    isFunction(trustedTypes.createPolicy) &&
+    trustedTypes.createPolicy('highcharts', {
+        createHTML: function (s) { return s; }
+    }));
+var emptyHTML = trustedTypesPolicy ?
+    trustedTypesPolicy.createHTML('') :
+    '';
 // In IE8, DOMParser is undefined. IE9 and PhantomJS are only able to parse XML.
 var hasValidDOMParser = (function () {
     try {
-        return Boolean(new DOMParser().parseFromString('', 'text/html'));
+        return Boolean(new DOMParser().parseFromString(emptyHTML, 'text/html'));
     }
     catch (e) {
         return false;
@@ -87,6 +97,17 @@ var AST = /** @class */ (function () {
         });
         return attributes;
     };
+    AST.parseStyle = function (style) {
+        return style
+            .split(';')
+            .reduce(function (styles, line) {
+            var pair = line.split(':').map(function (s) { return s.trim(); }), key = pair[0].replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+            if (pair[1]) {
+                styles[key] = pair[1];
+            }
+            return styles;
+        }, {});
+    };
     /**
      * Utility function to set html content for an element by passing in a
      * markup string. The markup is safely parsed by the AST class to avoid
@@ -103,7 +124,7 @@ var AST = /** @class */ (function () {
      * Markup string
      */
     AST.setElementHTML = function (el, html) {
-        el.innerHTML = ''; // Clear previous
+        el.innerHTML = AST.emptyHTML; // Clear previous
         if (html) {
             var ast = new AST(html);
             ast.addToDOM(el);
@@ -128,9 +149,12 @@ var AST = /** @class */ (function () {
     AST.prototype.addToDOM = function (parent) {
         /**
          * @private
-         * @param {Highcharts.ASTNode} subtree - HTML/SVG definition
-         * @param {Element} [subParent] - parent node
-         * @return {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement} The inserted node.
+         * @param {Highcharts.ASTNode} subtree
+         * HTML/SVG definition
+         * @param {Element} [subParent]
+         * parent node
+         * @return {Highcharts.SVGDOMElement|Highcharts.HTMLDOMElement}
+         * The inserted node.
          */
         function recurse(subtree, subParent) {
             var ret;
@@ -139,12 +163,15 @@ var AST = /** @class */ (function () {
                 var textNode = item.textContent ?
                     H.doc.createTextNode(item.textContent) :
                     void 0;
+                // Whether to ignore the AST filtering totally, #15345
+                var bypassHTMLFiltering = AST.bypassHTMLFiltering;
                 var node;
                 if (tagName) {
                     if (tagName === '#text') {
                         node = textNode;
                     }
-                    else if (AST.allowedTags.indexOf(tagName) !== -1) {
+                    else if (AST.allowedTags.indexOf(tagName) !== -1 ||
+                        bypassHTMLFiltering) {
                         var NS = tagName === 'svg' ?
                             SVG_NS :
                             (subParent.namespaceURI || SVG_NS);
@@ -156,11 +183,17 @@ var AST = /** @class */ (function () {
                             if (key !== 'tagName' &&
                                 key !== 'attributes' &&
                                 key !== 'children' &&
+                                key !== 'style' &&
                                 key !== 'textContent') {
                                 attributes_1[key] = val;
                             }
                         });
-                        attr(element, AST.filterUserAttributes(attributes_1));
+                        attr(element, bypassHTMLFiltering ?
+                            attributes_1 :
+                            AST.filterUserAttributes(attributes_1));
+                        if (item.style) {
+                            css(element, item.style);
+                        }
                         // Add text content
                         if (textNode) {
                             element.appendChild(textNode);
@@ -170,7 +203,8 @@ var AST = /** @class */ (function () {
                         node = element;
                     }
                     else {
-                        error("Highcharts warning: Invalid tagName '" + tagName + "' in config");
+                        error('Highcharts warning: Invalid tagName ' +
+                            tagName + ' in config');
                     }
                 }
                 // Add to the tree
@@ -198,14 +232,19 @@ var AST = /** @class */ (function () {
      */
     AST.prototype.parseMarkup = function (markup) {
         var nodes = [];
-        markup = markup.trim();
+        markup = markup
+            .trim()
+            // The style attribute throws a warning when parsing when CSP is
+            // enabled (#6884), so use an alias and pick it up below
+            .replace(/ style="/g, ' data-style="');
         var doc;
-        var body;
         if (hasValidDOMParser) {
-            doc = new DOMParser().parseFromString(markup, 'text/html');
+            doc = new DOMParser().parseFromString(trustedTypesPolicy ?
+                trustedTypesPolicy.createHTML(markup) :
+                markup, 'text/html');
         }
         else {
-            body = createElement('div');
+            var body = createElement('div');
             body.innerHTML = markup;
             doc = { body: body };
         }
@@ -223,7 +262,12 @@ var AST = /** @class */ (function () {
             if (parsedAttributes) {
                 var attributes_2 = {};
                 [].forEach.call(parsedAttributes, function (attrib) {
-                    attributes_2[attrib.name] = attrib.value;
+                    if (attrib.name === 'data-style') {
+                        astNode.style = AST.parseStyle(attrib.value);
+                    }
+                    else {
+                        attributes_2[attrib.name] = attrib.value;
+                    }
                 });
                 astNode.attributes = attributes_2;
             }
@@ -240,9 +284,6 @@ var AST = /** @class */ (function () {
             addTo.push(astNode);
         };
         [].forEach.call(doc.body.childNodes, function (childNode) { return appendChildNodes(childNode, nodes); });
-        if (body) {
-            discardElement(body);
-        }
         return nodes;
     };
     /* *
@@ -429,6 +470,35 @@ var AST = /** @class */ (function () {
         'ul',
         '#text'
     ];
+    AST.emptyHTML = emptyHTML;
+    /**
+     * Allow all custom SVG and HTML attributes, references and tags (together
+     * with potentially harmful ones) to be added to the DOM from the chart
+     * configuration. In other words, disable the the allow-listing which is the
+     * primary functionality of the AST.
+     *
+     * WARNING: Setting this property to `true` while allowing untrusted user
+     * data in the chart configuration will expose your application to XSS
+     * security risks!
+     *
+     * Note that in case you want to allow a known set of tags or attributes,
+     * you should allow-list them instead of disabling the filtering totally.
+     * See [allowedAttributes](Highcharts.AST#.allowedAttributes),
+     * [allowedReferences](Highcharts.AST#.allowedReferences) and
+     * [allowedTags](Highcharts.AST#.allowedTags). The `bypassHTMLFiltering`
+     * setting is intended only for those cases where allow-listing is not
+     * practical, and the chart configuration already comes from a secure
+     * source.
+     *
+     * @example
+     * // Allow all custom attributes, references and tags (disable DOM XSS
+     * // filtering)
+     * Highcharts.AST.bypassHTMLFiltering = true;
+     *
+     * @name Highcharts.AST.bypassHTMLFiltering
+     * @static
+     */
+    AST.bypassHTMLFiltering = false;
     return AST;
 }());
 /* *

package/es-modules/Core/Renderer/HTML/HTMLElement.js

@@ -50,10 +50,12 @@ var HTMLElement = /** @class */ (function (_super) {
         if (HTMLElement.composedClasses.indexOf(SVGElementClass) === -1) {
             HTMLElement.composedClasses.push(SVGElementClass);
             var htmlElementProto = HTMLElement.prototype, svgElementProto = SVGElementClass.prototype;
-            svgElementProto.getSpanCorrection = htmlElementProto.getSpanCorrection;
+            svgElementProto.getSpanCorrection = htmlElementProto
+                .getSpanCorrection;
             svgElementProto.htmlCss = htmlElementProto.htmlCss;
             svgElementProto.htmlGetBBox = htmlElementProto.htmlGetBBox;
-            svgElementProto.htmlUpdateTransform = htmlElementProto.htmlUpdateTransform;
+            svgElementProto.htmlUpdateTransform = htmlElementProto
+                .htmlUpdateTransform;
             svgElementProto.setSpanRotation = htmlElementProto.setSpanRotation;
         }
         return SVGElementClass;

package/es-modules/Core/Renderer/HTML/HTMLRenderer.js

@@ -65,15 +65,16 @@ var HTMLRenderer = /** @class */ (function (_super) {
      * @function Highcharts.SVGRenderer#html
      *
      * @param {string} str
-     *        The text of (subset) HTML to draw.
+     * The text of (subset) HTML to draw.
      *
      * @param {number} x
-     *        The x position of the text's lower left corner.
+     * The x position of the text's lower left corner.
      *
      * @param {number} y
-     *        The y position of the text's lower left corner.
+     * The y position of the text's lower left corner.
      *
      * @return {Highcharts.HTMLDOMElement}
+     * HTML element.
      */
     HTMLRenderer.prototype.html = function (str, x, y) {
         var wrapper = this.createElement('span'), element = wrapper.element, renderer = wrapper.renderer, isSVG = renderer.isSVG, addSetters = function (gWrapper, style) {
@@ -181,8 +182,7 @@ var HTMLRenderer = /** @class */ (function (_super) {
                              * @private
                              * @param {*} value
                              * @param {string} key
-                             * @return {void}
-                             */
+                                                     */
                             function translateSetter(value, key) {
                                 parentGroup[key] = value;
                                 if (key === 'translateX') {
@@ -205,7 +205,9 @@ var HTMLRenderer = /** @class */ (function (_super) {
                                         display: parentGroup.display,
                                         opacity: parentGroup.opacity,
                                         cursor: parentGroupStyles.cursor,
-                                        pointerEvents: parentGroupStyles.pointerEvents,
+                                        pointerEvents: (
+                                        // #5595
+                                        parentGroupStyles.pointerEvents),
                                         visibility: parentGroup.visibility
                                         // the top group is appended to container
                                     }, htmlGroup || container);

package/es-modules/Core/Renderer/RendererUtilities.js

@@ -42,8 +42,8 @@ var RendererUtilities;
      * @private
      */
     function distribute(boxes, len, maxDistance) {
-        var origBoxes = boxes, // Original array will be altered with added .pos
-        reducedLen = origBoxes.reducedLen || len, sortByRank = function (a, b) {
+        // Original array will be altered with added .pos
+        var origBoxes = boxes, reducedLen = origBoxes.reducedLen || len, sortByRank = function (a, b) {
             return (b.rank || 0) - (a.rank || 0);
         }, sortByTarget = function (a, b) {
             return a.target - b.target;

package/es-modules/Core/Renderer/SVG/SVGElement.js

@@ -110,7 +110,6 @@ var SVGElement = /** @class */ (function () {
      *
      * @param {Highcharts.SVGDOMElement} element
      *
-     * @return {void}
      */
     SVGElement.prototype._defaultSetter = function (value, key, element) {
         element.setAttribute(key, value);
@@ -256,7 +255,8 @@ var SVGElement = /** @class */ (function () {
             alignByTranslate = this.alignByTranslate;
             alignTo = this.alignTo;
         }
-        box = pick(box, renderer[alignTo], alignTo === 'scrollablePlotBox' ? renderer.plotBox : void 0, renderer);
+        box = pick(box, renderer[alignTo], alignTo === 'scrollablePlotBox' ?
+            renderer.plotBox : void 0, renderer);
         // Assign variables
         var align = alignOptions.align, vAlign = alignOptions.verticalAlign;
         // default: left align
@@ -351,7 +351,7 @@ var SVGElement = /** @class */ (function () {
             }, deferTime);
         }
         else {
-            this.attr(params, void 0, complete);
+            this.attr(params, void 0, complete || animOptions.complete);
             // Call the end step synchronously
             objectEach(params, function (val, prop) {
                 if (animOptions.step) {
@@ -541,7 +541,8 @@ var SVGElement = /** @class */ (function () {
                     // Let the shadow follow the main element
                     if (!this.styledMode &&
                         this.shadows &&
-                        /^(width|height|visibility|x|y|d|transform|cx|cy|r)$/.test(key)) {
+                        /^(width|height|visibility|x|y|d|transform|cx|cy|r)$/
+                            .test(key)) {
                         this.updateShadows(key, val, setter);
                     }
                 }
@@ -730,22 +731,17 @@ var SVGElement = /** @class */ (function () {
      *         Return the SVG element for chaining.
      */
     SVGElement.prototype.css = function (styles) {
-        var oldStyles = this.styles, newStyles = {}, elem = this.element, 
-        // These CSS properties are interpreted internally by the SVG
-        // renderer, but are not supported by SVG and should not be added to
-        // the DOM. In styled mode, no CSS should find its way to the DOM
-        // whatsoever (#6173, #6474).
-        svgPseudoProps = ['textOutline', 'textOverflow', 'width'];
-        var textWidth, serializedCss = '', hyphenate, hasNew = !oldStyles;
+        var oldStyles = this.styles, newStyles = {}, elem = this.element;
+        var textWidth, hasNew = !oldStyles;
         // convert legacy
-        if (styles && styles.color) {
+        if (styles.color) {
             styles.fill = styles.color;
         }
         // Filter out existing styles to increase performance (#2640)
         if (oldStyles) {
-            objectEach(styles, function (style, n) {
-                if (oldStyles && oldStyles[n] !== style) {
-                    newStyles[n] = style;
+            objectEach(styles, function (value, n) {
+                if (oldStyles && oldStyles[n] !== value) {
+                    newStyles[n] = value;
                     hasNew = true;
                 }
             });
@@ -756,41 +752,30 @@ var SVGElement = /** @class */ (function () {
                 styles = extend(oldStyles, newStyles);
             }
             // Get the text width from style
-            if (styles) {
-                // Previously set, unset it (#8234)
-                if (styles.width === null || styles.width === 'auto') {
-                    delete this.textWidth;
-                    // Apply new
-                }
-                else if (elem.nodeName.toLowerCase() === 'text' &&
-                    styles.width) {
-                    textWidth = this.textWidth = pInt(styles.width);
-                }
+            // Previously set, unset it (#8234)
+            if (styles.width === null || styles.width === 'auto') {
+                delete this.textWidth;
+                // Apply new
+            }
+            else if (elem.nodeName.toLowerCase() === 'text' &&
+                styles.width) {
+                textWidth = this.textWidth = pInt(styles.width);
             }
             // store object
             this.styles = styles;
             if (textWidth && (!svg && this.renderer.forExport)) {
                 delete styles.width;
             }
-            // Serialize and set style attribute
-            if (elem.namespaceURI === this.SVG_NS) { // #7633
-                hyphenate = function (a, b) {
-                    return '-' + b.toLowerCase();
-                };
-                objectEach(styles, function (style, n) {
-                    if (svgPseudoProps.indexOf(n) === -1) {
-                        serializedCss +=
-                            n.replace(/([A-Z])/g, hyphenate) + ':' +
-                                style + ';';
-                    }
-                });
-                if (serializedCss) {
-                    attr(elem, 'style', serializedCss); // #1881
-                }
-            }
-            else {
-                css(elem, styles);
+            var stylesToApply_1 = merge(styles);
+            if (elem.namespaceURI === this.SVG_NS) {
+                // These CSS properties are interpreted internally by the SVG
+                // renderer, but are not supported by SVG and should not be
+                // added to the DOM. In styled mode, no CSS should find its way
+                // to the DOM whatsoever (#6173, #6474).
+                ['textOutline', 'textOverflow', 'width'].forEach(function (key) { return (stylesToApply_1 &&
+                    delete stylesToApply_1[key]); });
             }
+            css(elem, stylesToApply_1);
             if (this.added) {
                 // Rebuild text after added. Cache mechanisms in the buildText
                 // will prevent building if there are no significant changes.
@@ -798,7 +783,7 @@ var SVGElement = /** @class */ (function () {
                     this.renderer.buildText(this);
                 }
                 // Apply text outline after added
-                if (styles && styles.textOutline) {
+                if (styles.textOutline) {
                     this.applyTextOutline(styles.textOutline);
                 }
             }
@@ -910,7 +895,6 @@ var SVGElement = /** @class */ (function () {
      * @private
      * @function Highcharts.SVGElement#destroyShadows
      *
-     * @return {void}
      */
     SVGElement.prototype.destroyShadows = function () {
         (this.shadows || []).forEach(function (shadow) {
@@ -1137,8 +1121,7 @@ var SVGElement = /** @class */ (function () {
                     bBox.height = height = ({
                         '11px,17': 14,
                         '13px,20': 16
-                    }[styles &&
-                        styles.fontSize + ',' + Math.round(height)] ||
+                    }[(fontSize || '') + "," + Math.round(height)] ||
                         height);
                 }
                 // Adjust for rotated text
@@ -1802,12 +1785,13 @@ var SVGElement = /** @class */ (function () {
      * @function Highcharts.SVGElement#translate
      *
      * @param {number} x
-     *        The x value.
+     * The x value.
      *
      * @param {number} y
-     *        The y value.
+     * The y value.
      *
      * @return {Highcharts.SVGElement}
+     * Translated element.
      */
     SVGElement.prototype.translate = function (x, y) {
         return this.attr({
@@ -1894,7 +1878,6 @@ var SVGElement = /** @class */ (function () {
      *
      * @param {Highcharts.SVGDOMElement} element
      *
-     * @return {void}
      */
     SVGElement.prototype.visibilitySetter = function (value, key, element) {
         // IE9-11 doesn't handle visibilty:inherit well, so we remove the
@@ -1910,10 +1893,6 @@ var SVGElement = /** @class */ (function () {
     /**
      * @private
      * @function Highcharts.SVGElement#xGetter
-     *
-     * @param {string} key
-     *
-     * @return {number|string|null}
      */
     SVGElement.prototype.xGetter = function (key) {
         if (this.element.nodeName === 'circle') {
@@ -1929,9 +1908,6 @@ var SVGElement = /** @class */ (function () {
     /**
      * @private
      * @function Highcharts.SVGElement#zIndexSetter
-     * @param {number} [value]
-     * @param {string} [key]
-     * @return {boolean}
      */
     SVGElement.prototype.zIndexSetter = function (value, key) {
         var renderer = this.renderer, parentGroup = this.parentGroup, parentWrapper = parentGroup || renderer, parentNode = parentWrapper.element || renderer.box, element = this.element, svgParent = parentNode === renderer.box;

package/es-modules/Core/Renderer/SVG/SVGElement3D.js

@@ -31,10 +31,21 @@ SVGElement3D.base = {
         var elem3d = this, renderer = elem3d.renderer, paths = renderer[elem3d.pathType + 'Path'](args), zIndexes = paths.zIndexes;
         // build parts
         elem3d.parts.forEach(function (part) {
-            elem3d[part] = renderer.path(paths[part]).attr({
+            var attribs = {
                 'class': 'highcharts-3d-' + part,
                 zIndex: zIndexes[part] || 0
-            }).add(elem3d);
+            };
+            if (renderer.styledMode) {
+                if (part === 'top') {
+                    attribs.filter = 'url(#highcharts-brighter)';
+                }
+                else if (part === 'side') {
+                    attribs.filter = 'url(#highcharts-darker)';
+                }
+            }
+            elem3d[part] = renderer.path(paths[part])
+                .attr(attribs)
+                .add(elem3d);
         });
         elem3d.attr({
             'stroke-linejoin': 'round',
@@ -126,11 +137,12 @@ SVGElement3D.cuboid = merge(SVGElement3D.base, {
             this.attr({
                 zIndex: paths.zIndexes.group
             });
-            // If sides that are forced to render changed, recalculate
-            // colors.
+            // If sides that are forced to render changed, recalculate colors.
             if (forcedSides !== this.forcedSides) {
                 this.forcedSides = forcedSides;
-                SVGElement3D.cuboid.fillSetter.call(this, this.fill);
+                if (!this.renderer.styledMode) {
+                    SVGElement3D.cuboid.fillSetter.call(this, this.fill);
+                }
             }
         }
         else {

package/es-modules/Core/Renderer/SVG/SVGLabel.js

@@ -134,7 +134,8 @@ var SVGLabel = /** @class */ (function (_super) {
                 }
             });
             this.text.css(textStyles_1);
-            var isWidth = 'width' in textStyles_1, isFontStyle = ('fontSize' in textStyles_1 || 'fontWeight' in textStyles_1);
+            var isWidth = 'width' in textStyles_1, isFontStyle = ('fontSize' in textStyles_1 ||
+                'fontWeight' in textStyles_1);
             // Update existing text, box (#9400, #12163)
             if (isFontStyle) {
                 this.updateTextPadding();
@@ -300,13 +301,15 @@ var SVGLabel = /** @class */ (function (_super) {
                     this.renderer.symbol(this.symbolKey) :
                     this.renderer.rect();
                 box.addClass(// Don't use label className for buttons
-                (this.className === 'button' ? '' : 'highcharts-label-box') +
-                    (this.className ? ' highcharts-' + this.className + '-box' : ''));
+                (this.className === 'button' ?
+                    '' : 'highcharts-label-box') +
+                    (this.className ?
+                        ' highcharts-' + this.className + '-box' : ''));
                 box.add(this);
             }
             crispAdjust = this.getCrispAdjust();
             attribs.x = crispAdjust;
-            attribs.y = (this.baseline ? -this.baselineOffset : 0) + crispAdjust;
+            attribs.y = ((this.baseline ? -this.baselineOffset : 0) + crispAdjust);
             // Apply the box attributes
             attribs.width = Math.round(this.width);
             attribs.height = Math.round(this.height);
@@ -328,8 +331,7 @@ var SVGLabel = /** @class */ (function (_super) {
         if (defined(this.widthSetting) &&
             this.bBox &&
             (this.textAlign === 'center' || this.textAlign === 'right')) {
-            textX += { center: 0.5, right: 1 }[this.textAlign] *
-                (this.widthSetting - this.bBox.width);
+            textX += { center: 0.5, right: 1 }[this.textAlign] * (this.widthSetting - this.bBox.width);
         }
         // update if anything changed
         if (textX !== text.x || textY !== text.y) {
@@ -355,7 +357,9 @@ var SVGLabel = /** @class */ (function (_super) {
         var padding = this.padding;
         var paddingLeft = pick(this.paddingLeft, padding);
         var paddingRight = pick(this.paddingRight, padding);
-        return (this.widthSetting || this.bBox.width || 0) + paddingLeft + paddingRight;
+        return ((this.widthSetting || this.bBox.width || 0) +
+            paddingLeft +
+            paddingRight);
     };
     SVGLabel.prototype.xSetter = function (value) {
         this.x = value; // for animation getter
@@ -376,7 +380,12 @@ var SVGLabel = /** @class */ (function (_super) {
      *  Static Properties
      *
      * */
-    SVGLabel.emptyBBox = { width: 0, height: 0, x: 0, y: 0 };
+    SVGLabel.emptyBBox = {
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0
+    };
     /**
      * For labels, these CSS properties are applied to the `text` node directly.
      *