highcharts 10.2.0 → 10.2.1

package/es-modules/Stock/StockToolsGui.js

@@ -9,1185 +9,108 @@
  *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  *
  * */
-import Chart from '../Core/Chart/Chart.js';
-import H from '../Core/Globals.js';
-import NavigationBindings from '../Extensions/Annotations/NavigationBindings.js';
-import D from '../Core/DefaultOptions.js';
-var setOptions = D.setOptions;
+'use strict';
+import O from '../Core/DefaultOptions.js';
+var setOptions = O.setOptions;
+import StockToolsDefaults from './StockToolsDefaults.js';
+import Toolbar from './StockToolbar.js';
 import U from '../Core/Utilities.js';
-var addEvent = U.addEvent, createElement = U.createElement, css = U.css, extend = U.extend, fireEvent = U.fireEvent, getStyle = U.getStyle, isArray = U.isArray, merge = U.merge, pick = U.pick;
-var DIV = 'div', SPAN = 'span', UL = 'ul', LI = 'li', PREFIX = 'highcharts-', activeClass = PREFIX + 'active';
-setOptions({
-    /**
-     * @optionparent lang
-     */
-    lang: {
-        /**
-         * Configure the stockTools GUI titles(hints) in the chart. Requires
-         * the `stock-tools.js` module to be loaded.
-         *
-         * @product highstock
-         * @since   7.0.0
-         */
-        stockTools: {
-            gui: {
-                // Main buttons:
-                simpleShapes: 'Simple shapes',
-                lines: 'Lines',
-                crookedLines: 'Crooked lines',
-                measure: 'Measure',
-                advanced: 'Advanced',
-                toggleAnnotations: 'Toggle annotations',
-                verticalLabels: 'Vertical labels',
-                flags: 'Flags',
-                zoomChange: 'Zoom change',
-                typeChange: 'Type change',
-                saveChart: 'Save chart',
-                indicators: 'Indicators',
-                currentPriceIndicator: 'Current Price Indicators',
-                // Other features:
-                zoomX: 'Zoom X',
-                zoomY: 'Zoom Y',
-                zoomXY: 'Zooom XY',
-                fullScreen: 'Fullscreen',
-                typeOHLC: 'OHLC',
-                typeLine: 'Line',
-                typeCandlestick: 'Candlestick',
-                typeHLC: 'HLC',
-                typeHollowCandlestick: 'Hollow Candlestick',
-                typeHeikinAshi: 'Heikin Ashi',
-                // Basic shapes:
-                circle: 'Circle',
-                ellipse: 'Ellipse',
-                label: 'Label',
-                rectangle: 'Rectangle',
-                // Flags:
-                flagCirclepin: 'Flag circle',
-                flagDiamondpin: 'Flag diamond',
-                flagSquarepin: 'Flag square',
-                flagSimplepin: 'Flag simple',
-                // Measures:
-                measureXY: 'Measure XY',
-                measureX: 'Measure X',
-                measureY: 'Measure Y',
-                // Segment, ray and line:
-                segment: 'Segment',
-                arrowSegment: 'Arrow segment',
-                ray: 'Ray',
-                arrowRay: 'Arrow ray',
-                line: 'Line',
-                arrowInfinityLine: 'Arrow line',
-                horizontalLine: 'Horizontal line',
-                verticalLine: 'Vertical line',
-                infinityLine: 'Infinity line',
-                // Crooked lines:
-                crooked3: 'Crooked 3 line',
-                crooked5: 'Crooked 5 line',
-                elliott3: 'Elliott 3 line',
-                elliott5: 'Elliott 5 line',
-                // Counters:
-                verticalCounter: 'Vertical counter',
-                verticalLabel: 'Vertical label',
-                verticalArrow: 'Vertical arrow',
-                // Advanced:
-                fibonacci: 'Fibonacci',
-                fibonacciTimeZones: 'Fibonacci Time Zones',
-                pitchfork: 'Pitchfork',
-                parallelChannel: 'Parallel channel',
-                timeCycles: 'Time Cycles'
-            }
-        },
-        navigation: {
-            popup: {
-                // Annotations:
-                circle: 'Circle',
-                ellipse: 'Ellipse',
-                rectangle: 'Rectangle',
-                label: 'Label',
-                segment: 'Segment',
-                arrowSegment: 'Arrow segment',
-                ray: 'Ray',
-                arrowRay: 'Arrow ray',
-                line: 'Line',
-                arrowInfinityLine: 'Arrow line',
-                horizontalLine: 'Horizontal line',
-                verticalLine: 'Vertical line',
-                crooked3: 'Crooked 3 line',
-                crooked5: 'Crooked 5 line',
-                elliott3: 'Elliott 3 line',
-                elliott5: 'Elliott 5 line',
-                verticalCounter: 'Vertical counter',
-                verticalLabel: 'Vertical label',
-                verticalArrow: 'Vertical arrow',
-                fibonacci: 'Fibonacci',
-                fibonacciTimeZones: 'Fibonacci Time Zones',
-                pitchfork: 'Pitchfork',
-                parallelChannel: 'Parallel channel',
-                infinityLine: 'Infinity line',
-                measure: 'Measure',
-                measureXY: 'Measure XY',
-                measureX: 'Measure X',
-                measureY: 'Measure Y',
-                timeCycles: 'Time Cycles',
-                // Flags:
-                flags: 'Flags',
-                // GUI elements:
-                addButton: 'add',
-                saveButton: 'save',
-                editButton: 'edit',
-                removeButton: 'remove',
-                series: 'Series',
-                volume: 'Volume',
-                connector: 'Connector',
-                // Field names:
-                innerBackground: 'Inner background',
-                outerBackground: 'Outer background',
-                crosshairX: 'Crosshair X',
-                crosshairY: 'Crosshair Y',
-                tunnel: 'Tunnel',
-                background: 'Background',
-                // Indicators' searchbox (#16019):
-                noFilterMatch: 'No match',
-                // Indicators' params (#15170):
-                searchIndicators: 'Search Indicators',
-                clearFilter: '\u2715 clear filter',
-                index: 'Index',
-                period: 'Period',
-                periods: 'Periods',
-                standardDeviation: 'Standard deviation',
-                periodTenkan: 'Tenkan period',
-                periodSenkouSpanB: 'Senkou Span B period',
-                periodATR: 'ATR period',
-                multiplierATR: 'ATR multiplier',
-                shortPeriod: 'Short period',
-                longPeriod: 'Long period',
-                signalPeriod: 'Signal period',
-                decimals: 'Decimals',
-                algorithm: 'Algorithm',
-                topBand: 'Top band',
-                bottomBand: 'Bottom band',
-                initialAccelerationFactor: 'Initial acceleration factor',
-                maxAccelerationFactor: 'Max acceleration factor',
-                increment: 'Increment',
-                multiplier: 'Multiplier',
-                ranges: 'Ranges',
-                highIndex: 'High index',
-                lowIndex: 'Low index',
-                deviation: 'Deviation',
-                xAxisUnit: 'x-axis unit',
-                factor: 'Factor',
-                fastAvgPeriod: 'Fast average period',
-                slowAvgPeriod: 'Slow average period',
-                average: 'Average',
-                /**
-                 * Configure the aliases for indicator names.
-                 *
-                 * @product highstock
-                 * @since 9.3.0
-                 */
-                indicatorAliases: {
-                    // Overlays
-                    /**
-                     * Acceleration Bands alias.
-                     *
-                     * @default ['Acceleration Bands']
-                     * @type    {Array<string>}
-                     */
-                    abands: ['Acceleration Bands'],
-                    /**
-                     * Bollinger Bands alias.
-                     *
-                     * @default ['Bollinger Bands']
-                     * @type    {Array<string>}
-                     */
-                    bb: ['Bollinger Bands'],
-                    /**
-                     * Double Exponential Moving Average alias.
-                     *
-                     * @default ['Double Exponential Moving Average']
-                     * @type    {Array<string>}
-                     */
-                    dema: ['Double Exponential Moving Average'],
-                    /**
-                     *  Exponential Moving Average alias.
-                     *
-                     * @default ['Exponential Moving Average']
-                     * @type    {Array<string>}
-                     */
-                    ema: ['Exponential Moving Average'],
-                    /**
-                     *  Ichimoku Kinko Hyo alias.
-                     *
-                     * @default ['Ichimoku Kinko Hyo']
-                     * @type    {Array<string>}
-                     */
-                    ikh: ['Ichimoku Kinko Hyo'],
-                    /**
-                     *  Keltner Channels alias.
-                     *
-                     * @default ['Keltner Channels']
-                     * @type    {Array<string>}
-                     */
-                    keltnerchannels: ['Keltner Channels'],
-                    /**
-                     *  Linear Regression alias.
-                     *
-                     * @default ['Linear Regression']
-                     * @type    {Array<string>}
-                     */
-                    linearRegression: ['Linear Regression'],
-                    /**
-                     *  Pivot Points alias.
-                     *
-                     * @default ['Pivot Points']
-                     * @type    {Array<string>}
-                     */
-                    pivotpoints: ['Pivot Points'],
-                    /**
-                     *  Price Channel alias.
-                     *
-                     * @default ['Price Channel']
-                     * @type    {Array<string>}
-                     */
-                    pc: ['Price Channel'],
-                    /**
-                     *  Price Envelopes alias.
-                     *
-                     * @default ['Price Envelopes']
-                     * @type    {Array<string>}
-                     */
-                    priceenvelopes: ['Price Envelopes'],
-                    /**
-                     *  Parabolic SAR alias.
-                     *
-                     * @default ['Parabolic SAR']
-                     * @type    {Array<string>}
-                     */
-                    psar: ['Parabolic SAR'],
-                    /**
-                     *  Simple Moving Average alias.
-                     *
-                     * @default ['Simple Moving Average']
-                     * @type    {Array<string>}
-                     */
-                    sma: ['Simple Moving Average'],
-                    /**
-                     *  Super Trend alias.
-                     *
-                     * @default ['Super Trend']
-                     * @type    {Array<string>}
-                     */
-                    supertrend: ['Super Trend'],
-                    /**
-                     *  Triple Exponential Moving Average alias.
-                     *
-                     * @default ['Triple Exponential Moving Average']
-                     * @type    {Array<string>}
-                     */
-                    tema: ['Triple Exponential Moving Average'],
-                    /**
-                     *  Volume by Price alias.
-                     *
-                     * @default ['Volume by Price']
-                     * @type    {Array<string>}
-                     */
-                    vbp: ['Volume by Price'],
-                    /**
-                     *  Volume Weighted Moving Average alias.
-                     *
-                     * @default ['Volume Weighted Moving Average']
-                     * @type    {Array<string>}
-                     */
-                    vwap: ['Volume Weighted Moving Average'],
-                    /**
-                     *  Weighted Moving Average alias.
-                     *
-                     * @default ['Weighted Moving Average']
-                     * @type    {Array<string>}
-                     */
-                    wma: ['Weighted Moving Average'],
-                    /**
-                     *  Zig Zagalias.
-                     *
-                     * @default ['Zig Zag']
-                     * @type    {Array<string>}
-                     */
-                    zigzag: ['Zig Zag'],
-                    // Oscilators
-                    /**
-                     *  Absolute price indicator alias.
-                     *
-                     * @default ['Absolute price indicator']
-                     * @type    {Array<string>}
-                     */
-                    apo: ['Absolute price indicator'],
-                    /**
-                     * Accumulation/Distribution alias.
-                     *
-                     * @default ['Accumulation/Distribution’]
-                     * @type    {Array<string>}
-                     */
-                    ad: ['Accumulation/Distribution'],
-                    /**
-                     *  Aroon alias.
-                     *
-                     * @default ['Aroon']
-                     * @type    {Array<string>}
-                     */
-                    aroon: ['Aroon'],
-                    /**
-                     *  Aroon oscillator alias.
-                     *
-                     * @default ['Aroon oscillator']
-                     * @type    {Array<string>}
-                     */
-                    aroonoscillator: ['Aroon oscillator'],
-                    /**
-                     *  Average True Range alias.
-                     *
-                     * @default ['Average True Range’]
-                     * @type    {Array<string>}
-                     */
-                    atr: ['Average True Range'],
-                    /**
-                     *  Awesome oscillator alias.
-                     *
-                     * @default ['Awesome oscillator’]
-                     * @type    {Array<string>}
-                     */
-                    ao: ['Awesome oscillator'],
-                    /**
-                     *  Commodity Channel Index alias.
-                     *
-                     * @default ['Commodity Channel Index’]
-                     * @type    {Array<string>}
-                     */
-                    cci: ['Commodity Channel Index'],
-                    /**
-                     *  Chaikin alias.
-                     *
-                     * @default ['Chaikin’]
-                     * @type    {Array<string>}
-                     */
-                    chaikin: ['Chaikin'],
-                    /**
-                     *  Chaikin Money Flow alias.
-                     *
-                     * @default ['Chaikin Money Flow’]
-                     * @type    {Array<string>}
-                     */
-                    cmf: ['Chaikin Money Flow'],
-                    /**
-                     *  Chande Momentum Oscillator alias.
-                     *
-                     * @default ['Chande Momentum Oscillator’]
-                     * @type    {Array<string>}
-                     */
-                    cmo: ['Chande Momentum Oscillator'],
-                    /**
-                     *  Disparity Index alias.
-                     *
-                     * @default ['Disparity Index’]
-                     * @type    {Array<string>}
-                     */
-                    disparityindex: ['Disparity Index'],
-                    /**
-                     *  Directional Movement Index alias.
-                     *
-                     * @default ['Directional Movement Index’]
-                     * @type    {Array<string>}
-                     */
-                    dmi: ['Directional Movement Index'],
-                    /**
-                     *  Detrended price oscillator alias.
-                     *
-                     * @default ['Detrended price oscillator’]
-                     * @type    {Array<string>}
-                     */
-                    dpo: ['Detrended price oscillator'],
-                    /**
-                     *  Klinger Oscillator alias.
-                     *
-                     * @default [‘Klinger Oscillator’]
-                     * @type    {Array<string>}
-                     */
-                    klinger: ['Klinger Oscillator'],
-                    /**
-                     *  Linear Regression Angle alias.
-                     *
-                     * @default [‘Linear Regression Angle’]
-                     * @type    {Array<string>}
-                     */
-                    linearRegressionAngle: ['Linear Regression Angle'],
-                    /**
-                     *  Linear Regression Intercept alias.
-                     *
-                     * @default [‘Linear Regression Intercept’]
-                     * @type    {Array<string>}
-                     */
-                    linearRegressionIntercept: ['Linear Regression Intercept'],
-                    /**
-                     *  Linear Regression Slope alias.
-                     *
-                     * @default [‘Linear Regression Slope’]
-                     * @type    {Array<string>}
-                     */
-                    linearRegressionSlope: ['Linear Regression Slope'],
-                    /**
-                     *  Moving Average Convergence Divergence alias.
-                     *
-                     * @default ['Moving Average Convergence Divergence’]
-                     * @type    {Array<string>}
-                     */
-                    macd: ['Moving Average Convergence Divergence'],
-                    /**
-                     *  Money Flow Index alias.
-                     *
-                     * @default ['Money Flow Index’]
-                     * @type    {Array<string>}
-                     */
-                    mfi: ['Money Flow Index'],
-                    /**
-                     *  Momentum alias.
-                     *
-                     * @default [‘Momentum’]
-                     * @type    {Array<string>}
-                     */
-                    momentum: ['Momentum'],
-                    /**
-                     *  Normalized Average True Range alias.
-                     *
-                     * @default ['Normalized Average True Range’]
-                     * @type    {Array<string>}
-                     */
-                    natr: ['Normalized Average True Range'],
-                    /**
-                     *  On-Balance Volume alias.
-                     *
-                     * @default ['On-Balance Volume’]
-                     * @type    {Array<string>}
-                     */
-                    obv: ['On-Balance Volume'],
-                    /**
-                     * Percentage Price oscillator alias.
-                     *
-                     * @default ['Percentage Price oscillator’]
-                     * @type    {Array<string>}
-                     */
-                    ppo: ['Percentage Price oscillator'],
-                    /**
-                     *  Rate of Change alias.
-                     *
-                     * @default ['Rate of Change’]
-                     * @type    {Array<string>}
-                     */
-                    roc: ['Rate of Change'],
-                    /**
-                     *  Relative Strength Index alias.
-                     *
-                     * @default ['Relative Strength Index’]
-                     * @type    {Array<string>}
-                     */
-                    rsi: ['Relative Strength Index'],
-                    /**
-                     *  Slow Stochastic alias.
-                     *
-                     * @default [‘Slow Stochastic’]
-                     * @type    {Array<string>}
-                     */
-                    slowstochastic: ['Slow Stochastic'],
-                    /**
-                     *  Stochastic alias.
-                     *
-                     * @default [‘Stochastic’]
-                     * @type    {Array<string>}
-                     */
-                    stochastic: ['Stochastic'],
-                    /**
-                     *  TRIX alias.
-                     *
-                     * @default [‘TRIX’]
-                     * @type    {Array<string>}
-                     */
-                    trix: ['TRIX'],
-                    /**
-                     *  Williams %R alias.
-                     *
-                     * @default [‘Williams %R’]
-                     * @type    {Array<string>}
-                     */
-                    williamsr: ['Williams %R']
-                }
-            }
-        }
-    },
-    /**
-     * Configure the stockTools gui strings in the chart. Requires the
-     * [stockTools module]() to be loaded. For a description of the module
-     * and information on its features, see [Highcharts StockTools]().
-     *
-     * @product highstock
-     *
-     * @sample stock/demo/stock-tools-gui Stock Tools GUI
-     *
-     * @sample stock/demo/stock-tools-custom-gui Stock Tools customized GUI
-     *
-     * @since        7.0.0
-     * @optionparent stockTools
-     */
-    stockTools: {
-        /**
-         * Definitions of buttons in Stock Tools GUI.
-         */
-        gui: {
-            /**
-             * Path where Highcharts will look for icons. Change this to use
-             * icons from a different server.
-             *
-             * Since 7.1.3 use [iconsURL](#navigation.iconsURL) for popup and
-             * stock tools.
-             *
-             * @deprecated
-             * @apioption stockTools.gui.iconsURL
-             *
-             */
-            /**
-             * Enable or disable the stockTools gui.
-             */
-            enabled: true,
-            /**
-             * A CSS class name to apply to the stocktools' div,
-             * allowing unique CSS styling for each chart.
-             */
-            className: 'highcharts-bindings-wrapper',
-            /**
-             * A CSS class name to apply to the container of buttons,
-             * allowing unique CSS styling for each chart.
-             */
-            toolbarClassName: 'stocktools-toolbar',
-            /**
-             * A collection of strings pointing to config options for the
-             * toolbar items. Each name refers to a unique key from the
-             * definitions object.
-             *
-             * @type    {Array<string>}
-             * @default [
-             *   'indicators',
-             *   'separator',
-             *   'simpleShapes',
-             *   'lines',
-             *   'crookedLines',
-             *   'measure',
-             *   'advanced',
-             *   'toggleAnnotations',
-             *   'separator',
-             *   'verticalLabels',
-             *   'flags',
-             *   'separator',
-             *   'zoomChange',
-             *   'fullScreen',
-             *   'typeChange',
-             *   'separator',
-             *   'currentPriceIndicator',
-             *   'saveChart'
-             * ]
-             */
-            buttons: [
-                'indicators',
-                'separator',
-                'simpleShapes',
-                'lines',
-                'crookedLines',
-                'measure',
-                'advanced',
-                'toggleAnnotations',
-                'separator',
-                'verticalLabels',
-                'flags',
-                'separator',
-                'zoomChange',
-                'fullScreen',
-                'typeChange',
-                'separator',
-                'currentPriceIndicator',
-                'saveChart'
-            ],
-            /**
-             * An options object of the buttons definitions. Each name refers to
-             * unique key from buttons array.
-             */
-            definitions: {
-                separator: {
-                    /**
-                     * A predefined background symbol for the button.
-                     */
-                    symbol: 'separator.svg'
-                },
-                simpleShapes: {
-                    /**
-                     * A collection of strings pointing to config options for
-                     * the items.
-                     *
-                     * @type {Array}
-                     * @default [
-                     *   'label',
-                     *   'circle',
-                     *   'ellipse',
-                     *   'rectangle'
-                     * ]
-                     *
-                     */
-                    items: [
-                        'label',
-                        'circle',
-                        'ellipse',
-                        'rectangle'
-                    ],
-                    circle: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         *
-                         */
-                        symbol: 'circle.svg'
-                    },
-                    ellipse: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         *
-                         */
-                        symbol: 'ellipse.svg'
-                    },
-                    rectangle: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         *
-                         */
-                        symbol: 'rectangle.svg'
-                    },
-                    label: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         *
-                         */
-                        symbol: 'label.svg'
-                    }
-                },
-                flags: {
-                    /**
-                     * A collection of strings pointing to config options for
-                     * the items.
-                     *
-                     * @type {Array}
-                     * @default [
-                     *   'flagCirclepin',
-                     *   'flagDiamondpin',
-                     *   'flagSquarepin',
-                     *   'flagSimplepin'
-                     * ]
-                     *
-                     */
-                    items: [
-                        'flagCirclepin',
-                        'flagDiamondpin',
-                        'flagSquarepin',
-                        'flagSimplepin'
-                    ],
-                    flagSimplepin: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         *
-                         */
-                        symbol: 'flag-basic.svg'
-                    },
-                    flagDiamondpin: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         *
-                         */
-                        symbol: 'flag-diamond.svg'
-                    },
-                    flagSquarepin: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'flag-trapeze.svg'
-                    },
-                    flagCirclepin: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'flag-elipse.svg'
-                    }
-                },
-                lines: {
-                    /**
-                     * A collection of strings pointing to config options for
-                     * the items.
-                     *
-                     * @type {Array}
-                     * @default [
-                     *   'segment',
-                     *   'arrowSegment',
-                     *   'ray',
-                     *   'arrowRay',
-                     *   'line',
-                     *   'arrowInfinityLine',
-                     *   'horizontalLine',
-                     *   'verticalLine'
-                     * ]
-                     */
-                    items: [
-                        'segment',
-                        'arrowSegment',
-                        'ray',
-                        'arrowRay',
-                        'line',
-                        'arrowInfinityLine',
-                        'horizontalLine',
-                        'verticalLine'
-                    ],
-                    segment: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'segment.svg'
-                    },
-                    arrowSegment: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'arrow-segment.svg'
-                    },
-                    ray: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'ray.svg'
-                    },
-                    arrowRay: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'arrow-ray.svg'
-                    },
-                    line: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'line.svg'
-                    },
-                    arrowInfinityLine: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'arrow-line.svg'
-                    },
-                    verticalLine: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'vertical-line.svg'
-                    },
-                    horizontalLine: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'horizontal-line.svg'
-                    }
-                },
-                crookedLines: {
-                    /**
-                     * A collection of strings pointing to config options for
-                     * the items.
-                     *
-                     * @type {Array}
-                     * @default [
-                     *   'elliott3',
-                     *   'elliott5',
-                     *   'crooked3',
-                     *   'crooked5'
-                     * ]
-                     *
-                     */
-                    items: [
-                        'elliott3',
-                        'elliott5',
-                        'crooked3',
-                        'crooked5'
-                    ],
-                    crooked3: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'crooked-3.svg'
-                    },
-                    crooked5: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'crooked-5.svg'
-                    },
-                    elliott3: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'elliott-3.svg'
-                    },
-                    elliott5: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'elliott-5.svg'
-                    }
-                },
-                verticalLabels: {
-                    /**
-                     * A collection of strings pointing to config options for
-                     * the items.
-                     *
-                     * @type {Array}
-                     * @default [
-                     *   'verticalCounter',
-                     *   'verticalLabel',
-                     *   'verticalArrow'
-                     * ]
-                     */
-                    items: [
-                        'verticalCounter',
-                        'verticalLabel',
-                        'verticalArrow'
-                    ],
-                    verticalCounter: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'vertical-counter.svg'
-                    },
-                    verticalLabel: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'vertical-label.svg'
-                    },
-                    verticalArrow: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'vertical-arrow.svg'
-                    }
-                },
-                advanced: {
-                    /**
-                     * A collection of strings pointing to config options for
-                     * the items.
-                     *
-                     * @type {Array}
-                     * @default [
-                     *   'fibonacci',
-                     *   'fibonacciTimeZones',
-                     *   'pitchfork',
-                     *   'parallelChannel',
-                     *   'timeCycles'
-                     * ]
-                     */
-                    items: [
-                        'fibonacci',
-                        'fibonacciTimeZones',
-                        'pitchfork',
-                        'parallelChannel',
-                        'timeCycles'
-                    ],
-                    pitchfork: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'pitchfork.svg'
-                    },
-                    fibonacci: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'fibonacci.svg'
-                    },
-                    fibonacciTimeZones: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'fibonacci-timezone.svg'
-                    },
-                    parallelChannel: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'parallel-channel.svg'
-                    },
-                    timeCycles: {
-                        /**
-                         * A predefined backgroud symbol for the button.
-                         *
-                         * @type {string}
-                         */
-                        symbol: 'time-cycles.svg'
-                    }
-                },
-                measure: {
-                    /**
-                     * A collection of strings pointing to config options for
-                     * the items.
-                     *
-                     * @type {Array}
-                     * @default [
-                     *   'measureXY',
-                     *   'measureX',
-                     *   'measureY'
-                     * ]
-                     */
-                    items: [
-                        'measureXY',
-                        'measureX',
-                        'measureY'
-                    ],
-                    measureX: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'measure-x.svg'
-                    },
-                    measureY: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'measure-y.svg'
-                    },
-                    measureXY: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'measure-xy.svg'
-                    }
-                },
-                toggleAnnotations: {
-                    /**
-                     * A predefined background symbol for the button.
-                     *
-                     * @type   {string}
-                     */
-                    symbol: 'annotations-visible.svg'
-                },
-                currentPriceIndicator: {
-                    /**
-                     * A predefined background symbol for the button.
-                     *
-                     * @type   {string}
-                     */
-                    symbol: 'current-price-show.svg'
-                },
-                indicators: {
-                    /**
-                     * A predefined background symbol for the button.
-                     *
-                     * @type   {string}
-                     */
-                    symbol: 'indicators.svg'
-                },
-                zoomChange: {
-                    /**
-                     * A collection of strings pointing to config options for
-                     * the items.
-                     *
-                     * @type {Array}
-                     * @default [
-                     *   'zoomX',
-                     *   'zoomY',
-                     *   'zoomXY'
-                     * ]
-                     */
-                    items: [
-                        'zoomX',
-                        'zoomY',
-                        'zoomXY'
-                    ],
-                    zoomX: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'zoom-x.svg'
-                    },
-                    zoomY: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'zoom-y.svg'
-                    },
-                    zoomXY: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'zoom-xy.svg'
-                    }
-                },
-                typeChange: {
-                    /**
-                     * A collection of strings pointing to config options for
-                     * the items.
-                     *
-                     * @type {Array}
-                     * @default [
-                     *   'typeOHLC',
-                     *   'typeLine',
-                     *   'typeCandlestick'
-                     *   'typeHollowCandlestick'
-                     * ]
-                     */
-                    items: [
-                        'typeOHLC',
-                        'typeLine',
-                        'typeCandlestick',
-                        'typeHollowCandlestick',
-                        'typeHLC',
-                        'typeHeikinAshi'
-                    ],
-                    typeOHLC: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'series-ohlc.svg'
-                    },
-                    typeLine: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'series-line.svg'
-                    },
-                    typeCandlestick: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'series-candlestick.svg'
-                    },
-                    typeHLC: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'series-hlc.svg'
-                    },
-                    typeHeikinAshi: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'series-heikin-ashi.svg'
-                    },
-                    typeHollowCandlestick: {
-                        /**
-                         * A predefined background symbol for the button.
-                         *
-                         * @type   {string}
-                         */
-                        symbol: 'series-hollow-candlestick.svg'
-                    }
-                },
-                fullScreen: {
-                    /**
-                     * A predefined background symbol for the button.
-                     *
-                     * @type   {string}
-                     */
-                    symbol: 'fullscreen.svg'
-                },
-                saveChart: {
-                    /**
-                     * A predefined background symbol for the button.
-                     *
-                     * @type   {string}
-                     */
-                    symbol: 'save-chart.svg'
-                }
+var addEvent = U.addEvent, extend = U.extend, getStyle = U.getStyle, merge = U.merge, pick = U.pick;
+/* *
+ *
+ *  Constants
+ *
+ * */
+var composedClasses = [];
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * Verify if Toolbar should be added.
+ * @private
+ */
+function chartSetStockTools(options) {
+    var chartOptions = this.options, lang = chartOptions.lang, guiOptions = merge(chartOptions.stockTools && chartOptions.stockTools.gui, options && options.gui), langOptions = lang && lang.stockTools && lang.stockTools.gui;
+    this.stockTools = new Toolbar(guiOptions, langOptions, this);
+    if (this.stockTools.guiEnabled) {
+        this.isDirtyBox = true;
+    }
+}
+/**
+ * @private
+ */
+function compose(ChartClass, NavigationBindingsClass) {
+    if (composedClasses.indexOf(ChartClass) === -1) {
+        composedClasses.push(ChartClass);
+        addEvent(ChartClass, 'afterGetContainer', onChartAfterGetContainer);
+        addEvent(ChartClass, 'beforeRedraw', onChartBeforeRedraw);
+        addEvent(ChartClass, 'beforeRender', onChartBeforeRedraw);
+        addEvent(ChartClass, 'destroy', onChartDestroy);
+        addEvent(ChartClass, 'getMargins', onChartGetMargins, { order: 0 });
+        addEvent(ChartClass, 'redraw', onChartRedraw);
+        addEvent(ChartClass, 'render', onChartRender);
+        ChartClass.prototype.setStockTools = chartSetStockTools;
+    }
+    if (composedClasses.indexOf(NavigationBindingsClass) === -1) {
+        composedClasses.push(NavigationBindingsClass);
+        addEvent(NavigationBindingsClass, 'deselectButton', onNavigationBindingsDeselectButton);
+        addEvent(NavigationBindingsClass, 'selectButton', onNavigationBindingsSelectButton);
+    }
+    if (composedClasses.indexOf(setOptions) === -1) {
+        composedClasses.push(setOptions);
+        setOptions(StockToolsDefaults);
+    }
+}
+/**
+ * Run HTML generator
+ * @private
+ */
+function onChartAfterGetContainer() {
+    this.setStockTools();
+}
+/**
+ * Handle beforeRedraw and beforeRender
+ * @private
+ */
+function onChartBeforeRedraw() {
+    if (this.stockTools) {
+        var optionsChart = this.options.chart;
+        var listWrapper = this.stockTools.listWrapper, offsetWidth = listWrapper && ((listWrapper.startWidth +
+            getStyle(listWrapper, 'padding-left') +
+            getStyle(listWrapper, 'padding-right')) || listWrapper.offsetWidth);
+        var dirty = false;
+        if (offsetWidth && offsetWidth < this.plotWidth) {
+            var nextX = pick(optionsChart.spacingLeft, optionsChart.spacing && optionsChart.spacing[3], 0) + offsetWidth;
+            var diff = nextX - this.spacingBox.x;
+            this.spacingBox.x = nextX;
+            this.spacingBox.width -= diff;
+            dirty = true;
+        }
+        else if (offsetWidth === 0) {
+            dirty = true;
+        }
+        if (offsetWidth !== this.stockTools.prevOffsetWidth) {
+            this.stockTools.prevOffsetWidth = offsetWidth;
+            if (dirty) {
+                this.isDirtyLegend = true;
             }
         }
     }
-});
-/* eslint-disable no-invalid-this, valid-jsdoc */
-// Run HTML generator
-addEvent(Chart, 'afterGetContainer', function () {
-    this.setStockTools();
-});
-addEvent(Chart, 'getMargins', function () {
+}
+/**
+ * @private
+ */
+function onChartDestroy() {
+    if (this.stockTools) {
+        this.stockTools.destroy();
+    }
+}
+/**
+ * @private
+ */
+function onChartGetMargins() {
     var listWrapper = this.stockTools && this.stockTools.listWrapper, offsetWidth = listWrapper && ((listWrapper.startWidth +
         getStyle(listWrapper, 'padding-left') +
         getStyle(listWrapper, 'padding-right')) || listWrapper.offsetWidth);
@@ -1195,622 +118,78 @@ addEvent(Chart, 'getMargins', function () {
         this.plotLeft += offsetWidth;
         this.spacing[3] += offsetWidth;
     }
-}, {
-    order: 0
-});
-['beforeRender', 'beforeRedraw'].forEach(function (event) {
-    addEvent(Chart, event, function () {
-        if (this.stockTools) {
-            var optionsChart = this.options.chart;
-            var listWrapper = this.stockTools.listWrapper, offsetWidth = listWrapper && ((listWrapper.startWidth +
-                getStyle(listWrapper, 'padding-left') +
-                getStyle(listWrapper, 'padding-right')) || listWrapper.offsetWidth);
-            var dirty = false;
-            if (offsetWidth && offsetWidth < this.plotWidth) {
-                var nextX = pick(optionsChart.spacingLeft, optionsChart.spacing && optionsChart.spacing[3], 0) + offsetWidth;
-                var diff = nextX - this.spacingBox.x;
-                this.spacingBox.x = nextX;
-                this.spacingBox.width -= diff;
-                dirty = true;
-            }
-            else if (offsetWidth === 0) {
-                dirty = true;
-            }
-            if (offsetWidth !== this.stockTools.prevOffsetWidth) {
-                this.stockTools.prevOffsetWidth = offsetWidth;
-                if (dirty) {
-                    this.isDirtyLegend = true;
-                }
-            }
-        }
-    });
-});
-addEvent(Chart, 'destroy', function () {
-    if (this.stockTools) {
-        this.stockTools.destroy();
-    }
-});
-addEvent(Chart, 'redraw', function () {
+}
+/**
+ * @private
+ */
+function onChartRedraw() {
     if (this.stockTools && this.stockTools.guiEnabled) {
         this.stockTools.redraw();
     }
-});
+}
 /**
- * Toolbar Class
+ * Check if the correct price indicator button is displayed, #15029.
  * @private
- * @class
- * @param {Object}
- * Options of toolbar
- * @param {Highcharts.Chart}
- * Reference to chart
  */
-var Toolbar = /** @class */ (function () {
-    function Toolbar(options, langOptions, chart) {
-        this.arrowDown = void 0;
-        this.arrowUp = void 0;
-        this.arrowWrapper = void 0;
-        this.listWrapper = void 0;
-        this.showhideBtn = void 0;
-        this.submenu = void 0;
-        this.toolbar = void 0;
-        this.wrapper = void 0;
-        this.chart = chart;
-        this.options = options;
-        this.lang = langOptions;
-        // set url for icons.
-        this.iconsURL = this.getIconsURL();
-        this.guiEnabled = options.enabled;
-        this.visible = pick(options.visible, true);
-        this.placed = pick(options.placed, false);
-        // General events collection which should be removed upon
-        // destroy/update:
-        this.eventsToUnbind = [];
-        if (this.guiEnabled) {
-            this.createHTML();
-            this.init();
-            this.showHideNavigatorion();
-        }
-        fireEvent(this, 'afterInit');
-    }
-    /**
-     * Initialize the toolbar. Create buttons and submenu for each option
-     * defined in `stockTools.gui`.
-     * @private
-     */
-    Toolbar.prototype.init = function () {
-        var _self = this, lang = this.lang, guiOptions = this.options, toolbar = this.toolbar, addSubmenu = _self.addSubmenu, buttons = guiOptions.buttons, defs = guiOptions.definitions, allButtons = toolbar.childNodes, button;
-        // create buttons
-        buttons.forEach(function (btnName) {
-            button = _self.addButton(toolbar, defs, btnName, lang);
-            _self.eventsToUnbind.push(addEvent(button.buttonWrapper, 'click', function () {
-                _self.eraseActiveButtons(allButtons, button.buttonWrapper);
-            }));
-            if (isArray(defs[btnName].items)) {
-                // create submenu buttons
-                addSubmenu.call(_self, button, defs[btnName]);
-            }
-        });
-    };
-    /**
-     * Create submenu (list of buttons) for the option. In example main button
-     * is Line, in submenu will be buttons with types of lines.
-     *
-     * @private
-     *
-     * @param {Highcharts.Dictionary<Highcharts.HTMLDOMElement>} parentBtn
-     * Button which has submenu
-     *
-     * @param {Highcharts.StockToolsGuiDefinitionsButtonsOptions} button
-     * List of all buttons
-     */
-    Toolbar.prototype.addSubmenu = function (parentBtn, button) {
-        var _self = this, submenuArrow = parentBtn.submenuArrow, buttonWrapper = parentBtn.buttonWrapper, buttonWidth = getStyle(buttonWrapper, 'width'), wrapper = this.wrapper, menuWrapper = this.listWrapper, allButtons = this.toolbar.childNodes, topMargin = 0, submenuWrapper;
-        // create submenu container
-        this.submenu = submenuWrapper = createElement(UL, {
-            className: PREFIX + 'submenu-wrapper'
-        }, void 0, buttonWrapper);
-        // create submenu buttons and select the first one
-        this.addSubmenuItems(buttonWrapper, button);
-        // show / hide submenu
-        _self.eventsToUnbind.push(addEvent(submenuArrow, 'click', function (e) {
-            e.stopPropagation();
-            // Erase active class on all other buttons
-            _self.eraseActiveButtons(allButtons, buttonWrapper);
-            // hide menu
-            if (buttonWrapper.className.indexOf(PREFIX + 'current') >= 0) {
-                menuWrapper.style.width =
-                    menuWrapper.startWidth + 'px';
-                buttonWrapper.classList.remove(PREFIX + 'current');
-                submenuWrapper.style.display = 'none';
-            }
-            else {
-                // show menu
-                // to calculate height of element
-                submenuWrapper.style.display = 'block';
-                topMargin = submenuWrapper.offsetHeight -
-                    buttonWrapper.offsetHeight - 3;
-                // calculate position of submenu in the box
-                // if submenu is inside, reset top margin
-                if (
-                // cut on the bottom
-                !(submenuWrapper.offsetHeight +
-                    buttonWrapper.offsetTop >
-                    wrapper.offsetHeight &&
-                    // cut on the top
-                    buttonWrapper.offsetTop > topMargin)) {
-                    topMargin = 0;
-                }
-                // apply calculated styles
-                css(submenuWrapper, {
-                    top: -topMargin + 'px',
-                    left: buttonWidth + 3 + 'px'
-                });
-                buttonWrapper.className += ' ' + PREFIX + 'current';
-                menuWrapper.startWidth = wrapper.offsetWidth;
-                menuWrapper.style.width = menuWrapper.startWidth +
-                    getStyle(menuWrapper, 'padding-left') +
-                    submenuWrapper.offsetWidth + 3 + 'px';
-            }
-        }));
-    };
-    /**
-     * Create buttons in submenu
-     *
-     * @private
-     *
-     * @param {Highcharts.HTMLDOMElement} buttonWrapper
-     * Button where submenu is placed
-     *
-     * @param {Highcharts.StockToolsGuiDefinitionsButtonsOptions} button
-     * List of all buttons options
-     */
-    Toolbar.prototype.addSubmenuItems = function (buttonWrapper, button) {
-        var _self = this, submenuWrapper = this.submenu, lang = this.lang, menuWrapper = this.listWrapper, items = button.items, firstSubmenuItem, submenuBtn;
-        // add items to submenu
-        items.forEach(function (btnName) {
-            // add buttons to submenu
-            submenuBtn = _self.addButton(submenuWrapper, button, btnName, lang);
-            _self.eventsToUnbind.push(addEvent(submenuBtn.mainButton, 'click', function () {
-                _self.switchSymbol(this, buttonWrapper, true);
-                menuWrapper.style.width =
-                    menuWrapper.startWidth + 'px';
-                submenuWrapper.style.display = 'none';
-            }));
-        });
-        // select first submenu item
-        firstSubmenuItem = submenuWrapper
-            .querySelectorAll('li > .' + PREFIX + 'menu-item-btn')[0];
-        // replace current symbol, in main button, with submenu's button style
-        _self.switchSymbol(firstSubmenuItem, false);
-    };
-    /*
-     * Erase active class on all other buttons.
-     *
-     * @param {Array} - Array of HTML buttons
-     * @param {HTMLDOMElement} - Current HTML button
-     *
-     */
-    Toolbar.prototype.eraseActiveButtons = function (buttons, currentButton, submenuItems) {
-        [].forEach.call(buttons, function (btn) {
-            if (btn !== currentButton) {
-                btn.classList.remove(PREFIX + 'current');
-                btn.classList.remove(PREFIX + 'active');
-                submenuItems =
-                    btn.querySelectorAll('.' + PREFIX + 'submenu-wrapper');
-                // hide submenu
-                if (submenuItems.length > 0) {
-                    submenuItems[0].style.display = 'none';
-                }
-            }
-        });
-    };
-    /**
-     * Create single button. Consist of HTML elements `li`, `span`, and (if
-     * exists) submenu container.
-     * @private
-     * @param {Highcharts.HTMLDOMElement} target
-     * HTML reference, where button should be added
-     * @param {Highcharts.StockToolsGuiDefinitionsButtonsOptions|Highcharts.StockToolsGuiDefinitionsOptions} options
-     * All options, by btnName refer to particular button
-     * @param {string} btnName
-     * of functionality mapped for specific class
-     * @param {Highcharts.Dictionary<string>} lang
-     * All titles, by btnName refer to particular button
-     * @return {Object} - references to all created HTML elements
-     */
-    Toolbar.prototype.addButton = function (target, options, btnName, lang) {
-        if (lang === void 0) { lang = {}; }
-        var btnOptions = options[btnName], items = btnOptions.items, classMapping = Toolbar.prototype.classMapping, userClassName = btnOptions.className || '', mainButton, submenuArrow, buttonWrapper;
-        // main button wrapper
-        buttonWrapper = createElement(LI, {
-            className: pick(classMapping[btnName], '') + ' ' + userClassName,
-            title: lang[btnName] || btnName
-        }, void 0, target);
-        // single button
-        mainButton = createElement(SPAN, {
-            className: PREFIX + 'menu-item-btn'
-        }, void 0, buttonWrapper);
-        // submenu
-        if (items && items.length) {
-            // arrow is a hook to show / hide submenu
-            submenuArrow = createElement(SPAN, {
-                className: PREFIX + 'submenu-item-arrow ' +
-                    PREFIX + 'arrow-right'
-            }, void 0, buttonWrapper);
-            submenuArrow.style.backgroundImage = 'url(' +
-                this.iconsURL + 'arrow-bottom.svg)';
-        }
-        else {
-            mainButton.style.backgroundImage = 'url(' +
-                this.iconsURL + btnOptions.symbol + ')';
-        }
-        return {
-            buttonWrapper: buttonWrapper,
-            mainButton: mainButton,
-            submenuArrow: submenuArrow
-        };
-    };
-    /*
-     * Create navigation's HTML elements: container and arrows.
-     *
-     */
-    Toolbar.prototype.addNavigation = function () {
-        var stockToolbar = this, wrapper = stockToolbar.wrapper;
-        // arrow wrapper
-        stockToolbar.arrowWrapper = createElement(DIV, {
-            className: PREFIX + 'arrow-wrapper'
-        });
-        stockToolbar.arrowUp = createElement(DIV, {
-            className: PREFIX + 'arrow-up'
-        }, void 0, stockToolbar.arrowWrapper);
-        stockToolbar.arrowUp.style.backgroundImage =
-            'url(' + this.iconsURL + 'arrow-right.svg)';
-        stockToolbar.arrowDown = createElement(DIV, {
-            className: PREFIX + 'arrow-down'
-        }, void 0, stockToolbar.arrowWrapper);
-        stockToolbar.arrowDown.style.backgroundImage =
-            'url(' + this.iconsURL + 'arrow-right.svg)';
-        wrapper.insertBefore(stockToolbar.arrowWrapper, wrapper.childNodes[0]);
-        // attach scroll events
-        stockToolbar.scrollButtons();
-    };
-    /*
-     * Add events to navigation (two arrows) which allows user to scroll
-     * top/down GUI buttons, if container's height is not enough.
-     *
-     */
-    Toolbar.prototype.scrollButtons = function () {
-        var targetY = 0, _self = this, wrapper = _self.wrapper, toolbar = _self.toolbar, step = 0.1 * wrapper.offsetHeight; // 0.1 = 10%
-        _self.eventsToUnbind.push(addEvent(_self.arrowUp, 'click', function () {
-            if (targetY > 0) {
-                targetY -= step;
-                toolbar.style.marginTop = -targetY + 'px';
-            }
-        }));
-        _self.eventsToUnbind.push(addEvent(_self.arrowDown, 'click', function () {
-            if (wrapper.offsetHeight + targetY <=
-                toolbar.offsetHeight + step) {
-                targetY += step;
-                toolbar.style.marginTop = -targetY + 'px';
-            }
-        }));
-    };
-    /*
-     * Create stockTools HTML main elements.
-     *
-     */
-    Toolbar.prototype.createHTML = function () {
-        var stockToolbar = this, chart = stockToolbar.chart, guiOptions = stockToolbar.options, container = chart.container, navigation = chart.options.navigation, bindingsClassName = navigation && navigation.bindingsClassName, listWrapper, toolbar;
-        // create main container
-        var wrapper = stockToolbar.wrapper = createElement(DIV, {
-            className: PREFIX + 'stocktools-wrapper ' +
-                guiOptions.className + ' ' + bindingsClassName
-        });
-        container.appendChild(wrapper);
-        // Mimic event behaviour of being outside chart.container
-        [
-            'mousedown',
-            'mousemove',
-            'click',
-            'touchstart'
-        ].forEach(function (eventType) {
-            addEvent(wrapper, eventType, function (e) {
-                return e.stopPropagation();
-            });
-        });
-        addEvent(wrapper, 'mouseover', function (e) {
-            return chart.pointer.onContainerMouseLeave(e);
-        });
-        // toolbar
-        stockToolbar.toolbar = toolbar = createElement(UL, {
-            className: PREFIX + 'stocktools-toolbar ' +
-                guiOptions.toolbarClassName
-        });
-        // add container for list of buttons
-        stockToolbar.listWrapper = listWrapper = createElement(DIV, {
-            className: PREFIX + 'menu-wrapper'
-        });
-        wrapper.insertBefore(listWrapper, wrapper.childNodes[0]);
-        listWrapper.insertBefore(toolbar, listWrapper.childNodes[0]);
-        stockToolbar.showHideToolbar();
-        // add navigation which allows user to scroll down / top GUI buttons
-        stockToolbar.addNavigation();
-    };
-    /**
-     * Function called in redraw verifies if the navigation should be visible.
-     * @private
-     */
-    Toolbar.prototype.showHideNavigatorion = function () {
-        // arrows
-        // 50px space for arrows
-        if (this.visible &&
-            this.toolbar.offsetHeight > (this.wrapper.offsetHeight - 50)) {
-            this.arrowWrapper.style.display = 'block';
-        }
-        else {
-            // reset margin if whole toolbar is visible
-            this.toolbar.style.marginTop = '0px';
-            // hide arrows
-            this.arrowWrapper.style.display = 'none';
-        }
-    };
-    /**
-     * Create button which shows or hides GUI toolbar.
-     * @private
-     */
-    Toolbar.prototype.showHideToolbar = function () {
-        var stockToolbar = this, chart = this.chart, wrapper = stockToolbar.wrapper, toolbar = this.listWrapper, submenu = this.submenu, visible = this.visible, showhideBtn;
-        // Show hide toolbar
-        this.showhideBtn = showhideBtn = createElement(DIV, {
-            className: PREFIX + 'toggle-toolbar ' + PREFIX + 'arrow-left'
-        }, void 0, wrapper);
-        showhideBtn.style.backgroundImage =
-            'url(' + this.iconsURL + 'arrow-right.svg)';
-        if (!visible) {
-            // hide
-            if (submenu) {
-                submenu.style.display = 'none';
-            }
-            showhideBtn.style.left = '0px';
-            stockToolbar.visible = visible = false;
-            toolbar.classList.add(PREFIX + 'hide');
-            showhideBtn.classList.toggle(PREFIX + 'arrow-right');
-            wrapper.style.height = showhideBtn.offsetHeight + 'px';
-        }
-        else {
-            wrapper.style.height = '100%';
-            showhideBtn.style.top = getStyle(toolbar, 'padding-top') + 'px';
-            showhideBtn.style.left = (wrapper.offsetWidth +
-                getStyle(toolbar, 'padding-left')) + 'px';
-        }
-        // Toggle menu
-        stockToolbar.eventsToUnbind.push(addEvent(showhideBtn, 'click', function () {
-            chart.update({
-                stockTools: {
-                    gui: {
-                        visible: !visible,
-                        placed: true
-                    }
-                }
-            });
-        }));
-    };
-    /*
-     * In main GUI button, replace icon and class with submenu button's
-     * class / symbol.
-     *
-     * @param {HTMLDOMElement} - submenu button
-     * @param {Boolean} - true or false
-     *
-     */
-    Toolbar.prototype.switchSymbol = function (button, redraw) {
-        var buttonWrapper = button.parentNode, buttonWrapperClass = buttonWrapper.className, 
-        // main button in first level og GUI
-        mainNavButton = buttonWrapper.parentNode.parentNode;
-        // if the button is disabled, don't do anything
-        if (buttonWrapperClass.indexOf('highcharts-disabled-btn') > -1) {
-            return;
-        }
-        // set class
-        mainNavButton.className = '';
-        if (buttonWrapperClass) {
-            mainNavButton.classList.add(buttonWrapperClass.trim());
-        }
-        // set icon
-        mainNavButton
-            .querySelectorAll('.' + PREFIX + 'menu-item-btn')[0]
-            .style.backgroundImage =
-            button.style.backgroundImage;
-        // set active class
-        if (redraw) {
-            this.toggleButtonAciveClass(mainNavButton);
-        }
-    };
-    /*
-     * Set select state (active class) on button.
-     *
-     * @param {HTMLDOMElement} - button
-     *
-     */
-    Toolbar.prototype.toggleButtonAciveClass = function (button) {
-        if (button.className.indexOf(activeClass) >= 0) {
-            button.classList.remove(activeClass);
+function onChartRender() {
+    var stockTools = this.stockTools, button = stockTools &&
+        stockTools.toolbar &&
+        stockTools.toolbar.querySelector('.highcharts-current-price-indicator');
+    // Change the initial button background.
+    if (stockTools &&
+        this.navigationBindings &&
+        this.options.series &&
+        button) {
+        if (this.navigationBindings.constructor.prototype.utils
+            .isPriceIndicatorEnabled(this.series)) {
+            button.firstChild.style['background-image'] =
+                'url("' + stockTools.getIconsURL() + 'current-price-hide.svg")';
         }
         else {
-            button.classList.add(activeClass);
-        }
-    };
-    /*
-     * Remove active class from all buttons except defined.
-     *
-     * @param {HTMLDOMElement} - button which should not be deactivated
-     *
-     */
-    Toolbar.prototype.unselectAllButtons = function (button) {
-        var activeButtons = button.parentNode
-            .querySelectorAll('.' + activeClass);
-        [].forEach.call(activeButtons, function (activeBtn) {
-            if (activeBtn !== button) {
-                activeBtn.classList.remove(activeClass);
-            }
-        });
-    };
-    /*
-     * Update GUI with given options.
-     *
-     * @param {Object} - general options for Stock Tools
-     */
-    Toolbar.prototype.update = function (options, redraw) {
-        merge(true, this.chart.options.stockTools, options);
-        this.destroy();
-        this.chart.setStockTools(options);
-        // If Stock Tools are updated, then bindings should be updated too:
-        if (this.chart.navigationBindings) {
-            this.chart.navigationBindings.update();
-        }
-        this.chart.isDirtyBox = true;
-        if (pick(redraw, true)) {
-            this.chart.redraw();
-        }
-    };
-    /**
-     * Destroy all HTML GUI elements.
-     * @private
-     */
-    Toolbar.prototype.destroy = function () {
-        var stockToolsDiv = this.wrapper, parent = stockToolsDiv && stockToolsDiv.parentNode;
-        this.eventsToUnbind.forEach(function (unbinder) {
-            unbinder();
-        });
-        // Remove the empty element
-        if (parent) {
-            parent.removeChild(stockToolsDiv);
+            button.firstChild.style['background-image'] =
+                'url("' + stockTools.getIconsURL() + 'current-price-show.svg")';
         }
-    };
-    /**
-     * Redraw, GUI requires to verify if the navigation should be visible.
-     * @private
-     */
-    Toolbar.prototype.redraw = function () {
-        this.showHideNavigatorion();
-    };
-    Toolbar.prototype.getIconsURL = function () {
-        return this.chart.options.navigation.iconsURL ||
-            this.options.iconsURL ||
-            'https://code.highcharts.com/10.2.0/gfx/stock-icons/';
-    };
-    return Toolbar;
-}());
+    }
+}
 /**
- * Mapping JSON fields to CSS classes.
  * @private
  */
-Toolbar.prototype.classMapping = {
-    circle: PREFIX + 'circle-annotation',
-    ellipse: PREFIX + 'ellipse-annotation',
-    rectangle: PREFIX + 'rectangle-annotation',
-    label: PREFIX + 'label-annotation',
-    segment: PREFIX + 'segment',
-    arrowSegment: PREFIX + 'arrow-segment',
-    ray: PREFIX + 'ray',
-    arrowRay: PREFIX + 'arrow-ray',
-    line: PREFIX + 'infinity-line',
-    arrowInfinityLine: PREFIX + 'arrow-infinity-line',
-    verticalLine: PREFIX + 'vertical-line',
-    horizontalLine: PREFIX + 'horizontal-line',
-    crooked3: PREFIX + 'crooked3',
-    crooked5: PREFIX + 'crooked5',
-    elliott3: PREFIX + 'elliott3',
-    elliott5: PREFIX + 'elliott5',
-    pitchfork: PREFIX + 'pitchfork',
-    fibonacci: PREFIX + 'fibonacci',
-    fibonacciTimeZones: PREFIX + 'fibonacci-time-zones',
-    parallelChannel: PREFIX + 'parallel-channel',
-    measureX: PREFIX + 'measure-x',
-    measureY: PREFIX + 'measure-y',
-    measureXY: PREFIX + 'measure-xy',
-    timeCycles: PREFIX + 'time-cycles',
-    verticalCounter: PREFIX + 'vertical-counter',
-    verticalLabel: PREFIX + 'vertical-label',
-    verticalArrow: PREFIX + 'vertical-arrow',
-    currentPriceIndicator: PREFIX + 'current-price-indicator',
-    indicators: PREFIX + 'indicators',
-    flagCirclepin: PREFIX + 'flag-circlepin',
-    flagDiamondpin: PREFIX + 'flag-diamondpin',
-    flagSquarepin: PREFIX + 'flag-squarepin',
-    flagSimplepin: PREFIX + 'flag-simplepin',
-    zoomX: PREFIX + 'zoom-x',
-    zoomY: PREFIX + 'zoom-y',
-    zoomXY: PREFIX + 'zoom-xy',
-    typeLine: PREFIX + 'series-type-line',
-    typeOHLC: PREFIX + 'series-type-ohlc',
-    typeHLC: PREFIX + 'series-type-hlc',
-    typeCandlestick: PREFIX + 'series-type-candlestick',
-    typeHollowCandlestick: PREFIX + 'series-type-hollowcandlestick',
-    typeHeikinAshi: PREFIX + 'series-type-heikinashi',
-    fullScreen: PREFIX + 'full-screen',
-    toggleAnnotations: PREFIX + 'toggle-annotations',
-    saveChart: PREFIX + 'save-chart',
-    separator: PREFIX + 'separator'
-};
-extend(Chart.prototype, {
-    /**
-     * Verify if Toolbar should be added.
-     * @private
-     * @param {Highcharts.StockToolsOptions} - chart options
-     */
-    setStockTools: function (options) {
-        var chartOptions = this.options, lang = chartOptions.lang, guiOptions = merge(chartOptions.stockTools && chartOptions.stockTools.gui, options && options.gui), langOptions = lang && lang.stockTools && lang.stockTools.gui;
-        this.stockTools = new Toolbar(guiOptions, langOptions, this);
-        if (this.stockTools.guiEnabled) {
-            this.isDirtyBox = true;
-        }
-    }
-});
-// Comunication with bindings:
-addEvent(NavigationBindings, 'selectButton', function (event) {
-    var button = event.button, className = PREFIX + 'submenu-wrapper', gui = this.chart.stockTools;
+function onNavigationBindingsDeselectButton(event) {
+    var className = 'highcharts-submenu-wrapper', gui = this.chart.stockTools;
     if (gui && gui.guiEnabled) {
-        // Unslect other active buttons
-        gui.unselectAllButtons(event.button);
-        // If clicked on a submenu, select state for it's parent
+        var button = event.button;
+        // If deselecting a button from a submenu, select state for it's parent
         if (button.parentNode.className.indexOf(className) >= 0) {
             button = button.parentNode.parentNode;
         }
         // Set active class on the current button
-        gui.toggleButtonAciveClass(button);
+        gui.toggleButtonActiveClass(button);
     }
-});
-addEvent(NavigationBindings, 'deselectButton', function (event) {
-    var button = event.button, className = PREFIX + 'submenu-wrapper', gui = this.chart.stockTools;
+}
+/**
+ * Communication with bindings
+ * @private
+ */
+function onNavigationBindingsSelectButton(event) {
+    var className = 'highcharts-submenu-wrapper', gui = this.chart.stockTools;
     if (gui && gui.guiEnabled) {
-        // If deselecting a button from a submenu, select state for it's parent
+        var button = event.button;
+        // Unslect other active buttons
+        gui.unselectAllButtons(event.button);
+        // If clicked on a submenu, select state for it's parent
         if (button.parentNode.className.indexOf(className) >= 0) {
             button = button.parentNode.parentNode;
         }
-        gui.toggleButtonAciveClass(button);
-    }
-});
-// Check if the correct price indicator button is displayed, #15029.
-addEvent(Chart, 'render', function () {
-    var chart = this, stockTools = chart.stockTools, button = stockTools &&
-        stockTools.toolbar &&
-        stockTools.toolbar.querySelector('.highcharts-current-price-indicator');
-    // Change the initial button background.
-    if (stockTools &&
-        chart.navigationBindings &&
-        chart.options.series &&
-        button) {
-        if (chart.navigationBindings.constructor.prototype.utils
-            .isPriceIndicatorEnabled(chart.series)) {
-            button.firstChild.style['background-image'] =
-                'url("' + stockTools.getIconsURL() + 'current-price-hide.svg")';
-        }
-        else {
-            button.firstChild.style['background-image'] =
-                'url("' + stockTools.getIconsURL() + 'current-price-show.svg")';
-        }
+        // Set active class on the current button
+        gui.toggleButtonActiveClass(button);
     }
-});
-H.Toolbar = Toolbar;
-export default H.Toolbar;
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+var StockToolsGui = {
+    compose: compose
+};
+export default StockToolsGui;