ps-toolkit-ui 0.0.209 → 0.0.210

package/src/assets/plugins/highcharts/code/es-modules/Extensions/RangeSelector.js

@@ -0,0 +1,2175 @@
+/* *
+ *
+ *  (c) 2010-2021 Torstein Honsi
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import Axis from '../Core/Axis/Axis.js';
+import Chart from '../Core/Chart/Chart.js';
+import H from '../Core/Globals.js';
+import D from '../Core/DefaultOptions.js';
+var defaultOptions = D.defaultOptions;
+import SVGElement from '../Core/Renderer/SVG/SVGElement.js';
+import U from '../Core/Utilities.js';
+var addEvent = U.addEvent, createElement = U.createElement, css = U.css, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, discardElement = U.discardElement, extend = U.extend, find = U.find, fireEvent = U.fireEvent, isNumber = U.isNumber, merge = U.merge, objectEach = U.objectEach, pad = U.pad, pick = U.pick, pInt = U.pInt, splat = U.splat;
+/**
+ * Define the time span for the button
+ *
+ * @typedef {"all"|"day"|"hour"|"millisecond"|"minute"|"month"|"second"|"week"|"year"|"ytd"} Highcharts.RangeSelectorButtonTypeValue
+ */
+/**
+ * Callback function to react on button clicks.
+ *
+ * @callback Highcharts.RangeSelectorClickCallbackFunction
+ *
+ * @param {global.Event} e
+ *        Event arguments.
+ *
+ * @param {boolean|undefined}
+ *        Return false to cancel the default button event.
+ */
+/**
+ * Callback function to parse values entered in the input boxes and return a
+ * valid JavaScript time as milliseconds since 1970.
+ *
+ * @callback Highcharts.RangeSelectorParseCallbackFunction
+ *
+ * @param {string} value
+ *        Input value to parse.
+ *
+ * @return {number}
+ *         Parsed JavaScript time value.
+ */
+/* ************************************************************************** *
+ * Start Range Selector code                                                  *
+ * ************************************************************************** */
+extend(defaultOptions, {
+    /**
+     * The range selector is a tool for selecting ranges to display within
+     * the chart. It provides buttons to select preconfigured ranges in
+     * the chart, like 1 day, 1 week, 1 month etc. It also provides input
+     * boxes where min and max dates can be manually input.
+     *
+     * @product      highstock gantt
+     * @optionparent rangeSelector
+     */
+    rangeSelector: {
+        /**
+         * Whether to enable all buttons from the start. By default buttons are
+         * only enabled if the corresponding time range exists on the X axis,
+         * but enabling all buttons allows for dynamically loading different
+         * time ranges.
+         *
+         * @sample {highstock} stock/rangeselector/allbuttonsenabled-true/
+         *         All buttons enabled
+         *
+         * @since     2.0.3
+         */
+        allButtonsEnabled: false,
+        /**
+         * An array of configuration objects for the buttons.
+         *
+         * Defaults to:
+         * ```js
+         * buttons: [{
+         *     type: 'month',
+         *     count: 1,
+         *     text: '1m',
+         *     title: 'View 1 month'
+         * }, {
+         *     type: 'month',
+         *     count: 3,
+         *     text: '3m',
+         *     title: 'View 3 months'
+         * }, {
+         *     type: 'month',
+         *     count: 6,
+         *     text: '6m',
+         *     title: 'View 6 months'
+         * }, {
+         *     type: 'ytd',
+         *     text: 'YTD',
+         *     title: 'View year to date'
+         * }, {
+         *     type: 'year',
+         *     count: 1,
+         *     text: '1y',
+         *     title: 'View 1 year'
+         * }, {
+         *     type: 'all',
+         *     text: 'All',
+         *     title: 'View all'
+         * }]
+         * ```
+         *
+         * @sample {highstock} stock/rangeselector/datagrouping/
+         *         Data grouping by buttons
+         *
+         * @type      {Array<*>}
+         */
+        buttons: void 0,
+        /**
+         * How many units of the defined type the button should span. If `type`
+         * is "month" and `count` is 3, the button spans three months.
+         *
+         * @type      {number}
+         * @default   1
+         * @apioption rangeSelector.buttons.count
+         */
+        /**
+         * Fires when clicking on the rangeSelector button. One parameter,
+         * event, is passed to the function, containing common event
+         * information.
+         *
+         * ```js
+         * click: function(e) {
+         *   console.log(this);
+         * }
+         * ```
+         *
+         * Return false to stop default button's click action.
+         *
+         * @sample {highstock} stock/rangeselector/button-click/
+         *         Click event on the button
+         *
+         * @type      {Highcharts.RangeSelectorClickCallbackFunction}
+         * @apioption rangeSelector.buttons.events.click
+         */
+        /**
+         * Additional range (in milliseconds) added to the end of the calculated
+         * time span.
+         *
+         * @sample {highstock} stock/rangeselector/min-max-offsets/
+         *         Button offsets
+         *
+         * @type      {number}
+         * @default   0
+         * @since     6.0.0
+         * @apioption rangeSelector.buttons.offsetMax
+         */
+        /**
+         * Additional range (in milliseconds) added to the start of the
+         * calculated time span.
+         *
+         * @sample {highstock} stock/rangeselector/min-max-offsets/
+         *         Button offsets
+         *
+         * @type      {number}
+         * @default   0
+         * @since     6.0.0
+         * @apioption rangeSelector.buttons.offsetMin
+         */
+        /**
+         * When buttons apply dataGrouping on a series, by default zooming
+         * in/out will deselect buttons and unset dataGrouping. Enable this
+         * option to keep buttons selected when extremes change.
+         *
+         * @sample {highstock} stock/rangeselector/preserve-datagrouping/
+         *         Different preserveDataGrouping settings
+         *
+         * @type      {boolean}
+         * @default   false
+         * @since     6.1.2
+         * @apioption rangeSelector.buttons.preserveDataGrouping
+         */
+        /**
+         * A custom data grouping object for each button.
+         *
+         * @see [series.dataGrouping](#plotOptions.series.dataGrouping)
+         *
+         * @sample {highstock} stock/rangeselector/datagrouping/
+         *         Data grouping by range selector buttons
+         *
+         * @type      {*}
+         * @extends   plotOptions.series.dataGrouping
+         * @apioption rangeSelector.buttons.dataGrouping
+         */
+        /**
+         * The text for the button itself.
+         *
+         * @type      {string}
+         * @apioption rangeSelector.buttons.text
+         */
+        /**
+         * Explanation for the button, shown as a tooltip on hover, and used by
+         * assistive technology.
+         *
+         * @type      {string}
+         * @apioption rangeSelector.buttons.title
+         */
+        /**
+         * Defined the time span for the button. Can be one of `millisecond`,
+         * `second`, `minute`, `hour`, `day`, `week`, `month`, `year`, `ytd`,
+         * and `all`.
+         *
+         * @type       {Highcharts.RangeSelectorButtonTypeValue}
+         * @apioption  rangeSelector.buttons.type
+         */
+        /**
+         * The space in pixels between the buttons in the range selector.
+         */
+        buttonSpacing: 5,
+        /**
+         * Whether to collapse the range selector buttons into a dropdown when
+         * there is not enough room to show everything in a single row, instead
+         * of dividing the range selector into multiple rows.
+         * Can be one of the following:
+         *  - `always`: Always collapse
+         *  - `responsive`: Only collapse when there is not enough room
+         *  - `never`: Never collapse
+         *
+         * @sample {highstock} stock/rangeselector/dropdown/
+         *         Dropdown option
+         *
+         * @validvalue ["always", "responsive", "never"]
+         * @since 9.0.0
+         */
+        dropdown: 'responsive',
+        /**
+         * Enable or disable the range selector. Default to `true` for stock
+         * charts, using the `stockChart` factory.
+         *
+         * @sample {highstock} stock/rangeselector/enabled/
+         *         Disable the range selector
+         *
+         * @type {boolean|undefined}
+         * @default {highstock} true
+         */
+        enabled: void 0,
+        /**
+         * The vertical alignment of the rangeselector box. Allowed properties
+         * are `top`, `middle`, `bottom`.
+         *
+         * @sample {highstock} stock/rangeselector/vertical-align-middle/
+         *         Middle
+         * @sample {highstock} stock/rangeselector/vertical-align-bottom/
+         *         Bottom
+         *
+         * @type  {Highcharts.VerticalAlignValue}
+         * @since 6.0.0
+         */
+        verticalAlign: 'top',
+        /**
+         * A collection of attributes for the buttons. The object takes SVG
+         * attributes like `fill`, `stroke`, `stroke-width`, as well as `style`,
+         * a collection of CSS properties for the text.
+         *
+         * The object can also be extended with states, so you can set
+         * presentational options for `hover`, `select` or `disabled` button
+         * states.
+         *
+         * CSS styles for the text label.
+         *
+         * In styled mode, the buttons are styled by the
+         * `.highcharts-range-selector-buttons .highcharts-button` rule with its
+         * different states.
+         *
+         * @sample {highstock} stock/rangeselector/styling/
+         *         Styling the buttons and inputs
+         *
+         * @type {Highcharts.SVGAttributes}
+         */
+        buttonTheme: {
+            /** @ignore */
+            width: 28,
+            /** @ignore */
+            height: 18,
+            /** @ignore */
+            padding: 2,
+            /** @ignore */
+            zIndex: 7 // #484, #852
+        },
+        /**
+         * When the rangeselector is floating, the plot area does not reserve
+         * space for it. This opens for positioning anywhere on the chart.
+         *
+         * @sample {highstock} stock/rangeselector/floating/
+         *         Placing the range selector between the plot area and the
+         *         navigator
+         *
+         * @since 6.0.0
+         */
+        floating: false,
+        /**
+         * The x offset of the range selector relative to its horizontal
+         * alignment within `chart.spacingLeft` and `chart.spacingRight`.
+         *
+         * @since 6.0.0
+         */
+        x: 0,
+        /**
+         * The y offset of the range selector relative to its horizontal
+         * alignment within `chart.spacingLeft` and `chart.spacingRight`.
+         *
+         * @since 6.0.0
+         */
+        y: 0,
+        /**
+         * Deprecated. The height of the range selector. Currently it is
+         * calculated dynamically.
+         *
+         * @deprecated
+         * @type  {number|undefined}
+         * @since 2.1.9
+         */
+        height: void 0,
+        /**
+         * The border color of the date input boxes.
+         *
+         * @sample {highstock} stock/rangeselector/styling/
+         *         Styling the buttons and inputs
+         *
+         * @type      {Highcharts.ColorString}
+         * @since     1.3.7
+         */
+        inputBoxBorderColor: 'none',
+        /**
+         * The pixel height of the date input boxes.
+         *
+         * @sample {highstock} stock/rangeselector/styling/
+         *         Styling the buttons and inputs
+         *
+         * @since     1.3.7
+         */
+        inputBoxHeight: 17,
+        /**
+         * The pixel width of the date input boxes. When `undefined`, the width
+         * is fitted to the rendered content.
+         *
+         * @sample {highstock} stock/rangeselector/styling/
+         *         Styling the buttons and inputs
+         *
+         * @type   {number|undefined}
+         * @since  1.3.7
+         */
+        inputBoxWidth: void 0,
+        /**
+         * The date format in the input boxes when not selected for editing.
+         * Defaults to `%b %e, %Y`.
+         *
+         * This is used to determine which type of input to show,
+         * `datetime-local`, `date` or `time` and falling back to `text` when
+         * the browser does not support the input type or the format contains
+         * milliseconds.
+         *
+         * @sample {highstock} stock/rangeselector/input-type/
+         *         Input types
+         * @sample {highstock} stock/rangeselector/input-format/
+         *         Milliseconds in the range selector
+         *
+         */
+        inputDateFormat: '%b %e, %Y',
+        /**
+         * A custom callback function to parse values entered in the input boxes
+         * and return a valid JavaScript time as milliseconds since 1970.
+         * The first argument passed is a value to parse,
+         * second is a boolean indicating use of the UTC time.
+         *
+         * This will only get called for inputs of type `text`. Since v8.2.3,
+         * the input type is dynamically determined based on the granularity
+         * of the `inputDateFormat` and the browser support.
+         *
+         * @sample {highstock} stock/rangeselector/input-format/
+         *         Milliseconds in the range selector
+         *
+         * @type      {Highcharts.RangeSelectorParseCallbackFunction}
+         * @since     1.3.3
+         */
+        inputDateParser: void 0,
+        /**
+         * The date format in the input boxes when they are selected for
+         * editing. This must be a format that is recognized by JavaScript
+         * Date.parse.
+         *
+         * This will only be used for inputs of type `text`. Since v8.2.3,
+         * the input type is dynamically determined based on the granularity
+         * of the `inputDateFormat` and the browser support.
+         *
+         * @sample {highstock} stock/rangeselector/input-format/
+         *         Milliseconds in the range selector
+         *
+         */
+        inputEditDateFormat: '%Y-%m-%d',
+        /**
+         * Enable or disable the date input boxes.
+         */
+        inputEnabled: true,
+        /**
+         * Positioning for the input boxes. Allowed properties are `align`,
+         *  `x` and `y`.
+         *
+         * @since 1.2.4
+         */
+        inputPosition: {
+            /**
+             * The alignment of the input box. Allowed properties are `left`,
+             * `center`, `right`.
+             *
+             * @sample {highstock} stock/rangeselector/input-button-position/
+             *         Alignment
+             *
+             * @type  {Highcharts.AlignValue}
+             * @since 6.0.0
+             */
+            align: 'right',
+            /**
+             * X offset of the input row.
+             */
+            x: 0,
+            /**
+             * Y offset of the input row.
+             */
+            y: 0
+        },
+        /**
+         * The space in pixels between the labels and the date input boxes in
+         * the range selector.
+         *
+         * @since 9.0.0
+         */
+        inputSpacing: 5,
+        /**
+         * The index of the button to appear pre-selected.
+         *
+         * @type      {number}
+         */
+        selected: void 0,
+        /**
+         * Positioning for the button row.
+         *
+         * @since 1.2.4
+         */
+        buttonPosition: {
+            /**
+             * The alignment of the input box. Allowed properties are `left`,
+             * `center`, `right`.
+             *
+             * @sample {highstock} stock/rangeselector/input-button-position/
+             *         Alignment
+             *
+             * @type  {Highcharts.AlignValue}
+             * @since 6.0.0
+             */
+            align: 'left',
+            /**
+             * X offset of the button row.
+             */
+            x: 0,
+            /**
+             * Y offset of the button row.
+             */
+            y: 0
+        },
+        /**
+         * CSS for the HTML inputs in the range selector.
+         *
+         * In styled mode, the inputs are styled by the
+         * `.highcharts-range-input text` rule in SVG mode, and
+         * `input.highcharts-range-selector` when active.
+         *
+         * @sample {highstock} stock/rangeselector/styling/
+         *         Styling the buttons and inputs
+         *
+         * @type      {Highcharts.CSSObject}
+         * @apioption rangeSelector.inputStyle
+         */
+        inputStyle: {
+            /** @ignore */
+            color: "#335cad" /* highlightColor80 */,
+            /** @ignore */
+            cursor: 'pointer'
+        },
+        /**
+         * CSS styles for the labels - the Zoom, From and To texts.
+         *
+         * In styled mode, the labels are styled by the
+         * `.highcharts-range-label` class.
+         *
+         * @sample {highstock} stock/rangeselector/styling/
+         *         Styling the buttons and inputs
+         *
+         * @type {Highcharts.CSSObject}
+         */
+        labelStyle: {
+            /** @ignore */
+            color: "#666666" /* neutralColor60 */
+        }
+    }
+});
+extend(defaultOptions.lang, 
+/**
+ * Language object. The language object is global and it can't be set
+ * on each chart initialization. Instead, use `Highcharts.setOptions` to
+ * set it before any chart is initialized.
+ *
+ * ```js
+ * Highcharts.setOptions({
+ *     lang: {
+ *         months: [
+ *             'Janvier', 'Février', 'Mars', 'Avril',
+ *             'Mai', 'Juin', 'Juillet', 'Août',
+ *             'Septembre', 'Octobre', 'Novembre', 'Décembre'
+ *         ],
+ *         weekdays: [
+ *             'Dimanche', 'Lundi', 'Mardi', 'Mercredi',
+ *             'Jeudi', 'Vendredi', 'Samedi'
+ *         ]
+ *     }
+ * });
+ * ```
+ *
+ * @optionparent lang
+ */
+{
+    /**
+     * The text for the label for the range selector buttons.
+     *
+     * @product highstock gantt
+     */
+    rangeSelectorZoom: 'Zoom',
+    /**
+     * The text for the label for the "from" input box in the range
+     * selector. Since v9.0, this string is empty as the label is not
+     * rendered by default.
+     *
+     * @product highstock gantt
+     */
+    rangeSelectorFrom: '',
+    /**
+     * The text for the label for the "to" input box in the range selector.
+     *
+     * @product highstock gantt
+     */
+    rangeSelectorTo: '→'
+});
+/* eslint-disable no-invalid-this, valid-jsdoc */
+/**
+ * The range selector.
+ *
+ * @private
+ * @class
+ * @name Highcharts.RangeSelector
+ * @param {Highcharts.Chart} chart
+ */
+var RangeSelector = /** @class */ (function () {
+    function RangeSelector(chart) {
+        /* *
+         *
+         * Properties
+         *
+         * */
+        this.buttons = void 0;
+        this.buttonOptions = RangeSelector.prototype.defaultButtons;
+        this.initialButtonGroupWidth = 0;
+        this.options = void 0;
+        this.chart = chart;
+        // Run RangeSelector
+        this.init(chart);
+    }
+    /**
+     * The method to run when one of the buttons in the range selectors is
+     * clicked
+     *
+     * @private
+     * @function Highcharts.RangeSelector#clickButton
+     * @param {number} i
+     *        The index of the button
+     * @param {boolean} [redraw]
+     */
+    RangeSelector.prototype.clickButton = function (i, redraw) {
+        var rangeSelector = this, chart = rangeSelector.chart, rangeOptions = rangeSelector.buttonOptions[i], baseAxis = chart.xAxis[0], unionExtremes = (chart.scroller && chart.scroller.getUnionExtremes()) || baseAxis || {}, dataMin = unionExtremes.dataMin, dataMax = unionExtremes.dataMax, newMin, newMax = baseAxis && Math.round(Math.min(baseAxis.max, pick(dataMax, baseAxis.max))), // #1568
+        type = rangeOptions.type, baseXAxisOptions, range = rangeOptions._range, rangeMin, minSetting, rangeSetting, ctx, ytdExtremes, dataGrouping = rangeOptions.dataGrouping;
+        // chart has no data, base series is removed
+        if (dataMin === null || dataMax === null) {
+            return;
+        }
+        // Set the fixed range before range is altered
+        chart.fixedRange = range;
+        rangeSelector.setSelected(i);
+        // Apply dataGrouping associated to button
+        if (dataGrouping) {
+            this.forcedDataGrouping = true;
+            Axis.prototype.setDataGrouping.call(baseAxis || { chart: this.chart }, dataGrouping, false);
+            this.frozenStates = rangeOptions.preserveDataGrouping;
+        }
+        // Apply range
+        if (type === 'month' || type === 'year') {
+            if (!baseAxis) {
+                // This is set to the user options and picked up later when the
+                // axis is instantiated so that we know the min and max.
+                range = rangeOptions;
+            }
+            else {
+                ctx = {
+                    range: rangeOptions,
+                    max: newMax,
+                    chart: chart,
+                    dataMin: dataMin,
+                    dataMax: dataMax
+                };
+                newMin = baseAxis.minFromRange.call(ctx);
+                if (isNumber(ctx.newMax)) {
+                    newMax = ctx.newMax;
+                }
+            }
+            // Fixed times like minutes, hours, days
+        }
+        else if (range) {
+            newMin = Math.max(newMax - range, dataMin);
+            newMax = Math.min(newMin + range, dataMax);
+        }
+        else if (type === 'ytd') {
+            // On user clicks on the buttons, or a delayed action running from
+            // the beforeRender event (below), the baseAxis is defined.
+            if (baseAxis) {
+                // When "ytd" is the pre-selected button for the initial view,
+                // its calculation is delayed and rerun in the beforeRender
+                // event (below). When the series are initialized, but before
+                // the chart is rendered, we have access to the xData array
+                // (#942).
+                if (typeof dataMax === 'undefined') {
+                    dataMin = Number.MAX_VALUE;
+                    dataMax = Number.MIN_VALUE;
+                    chart.series.forEach(function (series) {
+                        // reassign it to the last item
+                        var xData = series.xData;
+                        dataMin = Math.min(xData[0], dataMin);
+                        dataMax = Math.max(xData[xData.length - 1], dataMax);
+                    });
+                    redraw = false;
+                }
+                ytdExtremes = rangeSelector.getYTDExtremes(dataMax, dataMin, chart.time.useUTC);
+                newMin = rangeMin = ytdExtremes.min;
+                newMax = ytdExtremes.max;
+                // "ytd" is pre-selected. We don't yet have access to processed
+                // point and extremes data (things like pointStart and pointInterval
+                // are missing), so we delay the process (#942)
+            }
+            else {
+                rangeSelector.deferredYTDClick = i;
+                return;
+            }
+        }
+        else if (type === 'all' && baseAxis) {
+            // If the navigator exist and the axis range is declared reset that
+            // range and from now on only use the range set by a user, #14742.
+            if (chart.navigator && chart.navigator.baseSeries[0]) {
+                chart.navigator.baseSeries[0].xAxis.options
+                    .range = void 0;
+            }
+            newMin = dataMin;
+            newMax = dataMax;
+        }
+        if (defined(newMin)) {
+            newMin += rangeOptions._offsetMin;
+        }
+        if (defined(newMax)) {
+            newMax += rangeOptions._offsetMax;
+        }
+        if (this.dropdown) {
+            this.dropdown.selectedIndex = i + 1;
+        }
+        // Update the chart
+        if (!baseAxis) {
+            // Axis not yet instanciated. Temporarily set min and range
+            // options and remove them on chart load (#4317).
+            baseXAxisOptions = splat(chart.options.xAxis)[0];
+            rangeSetting = baseXAxisOptions.range;
+            baseXAxisOptions.range = range;
+            minSetting = baseXAxisOptions.min;
+            baseXAxisOptions.min = rangeMin;
+            addEvent(chart, 'load', function resetMinAndRange() {
+                baseXAxisOptions.range = rangeSetting;
+                baseXAxisOptions.min = minSetting;
+            });
+        }
+        else {
+            // Existing axis object. Set extremes after render time.
+            baseAxis.setExtremes(newMin, newMax, pick(redraw, true), void 0, // auto animation
+            {
+                trigger: 'rangeSelectorButton',
+                rangeSelectorButton: rangeOptions
+            });
+        }
+        fireEvent(this, 'afterBtnClick');
+    };
+    /**
+     * Set the selected option. This method only sets the internal flag, it
+     * doesn't update the buttons or the actual zoomed range.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#setSelected
+     * @param {number} [selected]
+     */
+    RangeSelector.prototype.setSelected = function (selected) {
+        this.selected = this.options.selected = selected;
+    };
+    /**
+     * Initialize the range selector
+     *
+     * @private
+     * @function Highcharts.RangeSelector#init
+     * @param {Highcharts.Chart} chart
+     */
+    RangeSelector.prototype.init = function (chart) {
+        var rangeSelector = this, options = chart.options.rangeSelector, buttonOptions = (options.buttons || rangeSelector.defaultButtons.slice()), selectedOption = options.selected, blurInputs = function () {
+            var minInput = rangeSelector.minInput, maxInput = rangeSelector.maxInput;
+            // #3274 in some case blur is not defined
+            if (minInput && minInput.blur) {
+                fireEvent(minInput, 'blur');
+            }
+            if (maxInput && maxInput.blur) {
+                fireEvent(maxInput, 'blur');
+            }
+        };
+        rangeSelector.chart = chart;
+        rangeSelector.options = options;
+        rangeSelector.buttons = [];
+        rangeSelector.buttonOptions = buttonOptions;
+        this.eventsToUnbind = [];
+        this.eventsToUnbind.push(addEvent(chart.container, 'mousedown', blurInputs));
+        this.eventsToUnbind.push(addEvent(chart, 'resize', blurInputs));
+        // Extend the buttonOptions with actual range
+        buttonOptions.forEach(rangeSelector.computeButtonRange);
+        // zoomed range based on a pre-selected button index
+        if (typeof selectedOption !== 'undefined' &&
+            buttonOptions[selectedOption]) {
+            this.clickButton(selectedOption, false);
+        }
+        this.eventsToUnbind.push(addEvent(chart, 'load', function () {
+            // If a data grouping is applied to the current button, release it
+            // when extremes change
+            if (chart.xAxis && chart.xAxis[0]) {
+                addEvent(chart.xAxis[0], 'setExtremes', function (e) {
+                    if (this.max - this.min !==
+                        chart.fixedRange &&
+                        e.trigger !== 'rangeSelectorButton' &&
+                        e.trigger !== 'updatedData' &&
+                        rangeSelector.forcedDataGrouping &&
+                        !rangeSelector.frozenStates) {
+                        this.setDataGrouping(false, false);
+                    }
+                });
+            }
+        }));
+    };
+    /**
+     * Dynamically update the range selector buttons after a new range has been
+     * set
+     *
+     * @private
+     * @function Highcharts.RangeSelector#updateButtonStates
+     */
+    RangeSelector.prototype.updateButtonStates = function () {
+        var rangeSelector = this, chart = this.chart, dropdown = this.dropdown, baseAxis = chart.xAxis[0], actualRange = Math.round(baseAxis.max - baseAxis.min), hasNoData = !baseAxis.hasVisibleSeries, day = 24 * 36e5, // A single day in milliseconds
+        unionExtremes = (chart.scroller &&
+            chart.scroller.getUnionExtremes()) || baseAxis, dataMin = unionExtremes.dataMin, dataMax = unionExtremes.dataMax, ytdExtremes = rangeSelector.getYTDExtremes(dataMax, dataMin, chart.time.useUTC), ytdMin = ytdExtremes.min, ytdMax = ytdExtremes.max, selected = rangeSelector.selected, selectedExists = isNumber(selected), allButtonsEnabled = rangeSelector.options.allButtonsEnabled, buttons = rangeSelector.buttons;
+        rangeSelector.buttonOptions.forEach(function (rangeOptions, i) {
+            var range = rangeOptions._range, type = rangeOptions.type, count = rangeOptions.count || 1, button = buttons[i], state = 0, disable, select, offsetRange = rangeOptions._offsetMax -
+                rangeOptions._offsetMin, isSelected = i === selected, 
+            // Disable buttons where the range exceeds what is allowed in
+            // the current view
+            isTooGreatRange = range >
+                dataMax - dataMin, 
+            // Disable buttons where the range is smaller than the minimum
+            // range
+            isTooSmallRange = range < baseAxis.minRange, 
+            // Do not select the YTD button if not explicitly told so
+            isYTDButNotSelected = false, 
+            // Disable the All button if we're already showing all
+            isAllButAlreadyShowingAll = false, isSameRange = range === actualRange;
+            // Months and years have a variable range so we check the extremes
+            if ((type === 'month' || type === 'year') &&
+                (actualRange + 36e5 >=
+                    { month: 28, year: 365 }[type] * day * count - offsetRange) &&
+                (actualRange - 36e5 <=
+                    { month: 31, year: 366 }[type] * day * count + offsetRange)) {
+                isSameRange = true;
+            }
+            else if (type === 'ytd') {
+                isSameRange = (ytdMax - ytdMin + offsetRange) === actualRange;
+                isYTDButNotSelected = !isSelected;
+            }
+            else if (type === 'all') {
+                isSameRange = (baseAxis.max - baseAxis.min >=
+                    dataMax - dataMin);
+                isAllButAlreadyShowingAll = (!isSelected &&
+                    selectedExists &&
+                    isSameRange);
+            }
+            // The new zoom area happens to match the range for a button - mark
+            // it selected. This happens when scrolling across an ordinal gap.
+            // It can be seen in the intraday demos when selecting 1h and scroll
+            // across the night gap.
+            disable = (!allButtonsEnabled &&
+                (isTooGreatRange ||
+                    isTooSmallRange ||
+                    isAllButAlreadyShowingAll ||
+                    hasNoData));
+            select = ((isSelected && isSameRange) ||
+                (isSameRange && !selectedExists && !isYTDButNotSelected) ||
+                (isSelected && rangeSelector.frozenStates));
+            if (disable) {
+                state = 3;
+            }
+            else if (select) {
+                selectedExists = true; // Only one button can be selected
+                state = 2;
+            }
+            // If state has changed, update the button
+            if (button.state !== state) {
+                button.setState(state);
+                if (dropdown) {
+                    dropdown.options[i + 1].disabled = disable;
+                    if (state === 2) {
+                        dropdown.selectedIndex = i + 1;
+                    }
+                }
+                // Reset (#9209)
+                if (state === 0 && selected === i) {
+                    rangeSelector.setSelected();
+                }
+            }
+        });
+    };
+    /**
+     * Compute and cache the range for an individual button
+     *
+     * @private
+     * @function Highcharts.RangeSelector#computeButtonRange
+     * @param {Highcharts.RangeSelectorButtonsOptions} rangeOptions
+     */
+    RangeSelector.prototype.computeButtonRange = function (rangeOptions) {
+        var type = rangeOptions.type, count = rangeOptions.count || 1, 
+        // these time intervals have a fixed number of milliseconds, as
+        // opposed to month, ytd and year
+        fixedTimes = {
+            millisecond: 1,
+            second: 1000,
+            minute: 60 * 1000,
+            hour: 3600 * 1000,
+            day: 24 * 3600 * 1000,
+            week: 7 * 24 * 3600 * 1000
+        };
+        // Store the range on the button object
+        if (fixedTimes[type]) {
+            rangeOptions._range = fixedTimes[type] * count;
+        }
+        else if (type === 'month' || type === 'year') {
+            rangeOptions._range = {
+                month: 30,
+                year: 365
+            }[type] * 24 * 36e5 * count;
+        }
+        rangeOptions._offsetMin = pick(rangeOptions.offsetMin, 0);
+        rangeOptions._offsetMax = pick(rangeOptions.offsetMax, 0);
+        rangeOptions._range +=
+            rangeOptions._offsetMax - rangeOptions._offsetMin;
+    };
+    /**
+     * Get the unix timestamp of a HTML input for the dates
+     *
+     * @private
+     * @function Highcharts.RangeSelector#getInputValue
+     */
+    RangeSelector.prototype.getInputValue = function (name) {
+        var input = name === 'min' ? this.minInput : this.maxInput;
+        var options = this.chart.options
+            .rangeSelector;
+        var time = this.chart.time;
+        if (input) {
+            return ((input.type === 'text' && options.inputDateParser) ||
+                this.defaultInputDateParser)(input.value, time.useUTC, time);
+        }
+        return 0;
+    };
+    /**
+     * Set the internal and displayed value of a HTML input for the dates
+     *
+     * @private
+     * @function Highcharts.RangeSelector#setInputValue
+     */
+    RangeSelector.prototype.setInputValue = function (name, inputTime) {
+        var options = this.options, time = this.chart.time, input = name === 'min' ? this.minInput : this.maxInput, dateBox = name === 'min' ? this.minDateBox : this.maxDateBox;
+        if (input) {
+            var hcTimeAttr = input.getAttribute('data-hc-time');
+            var updatedTime = defined(hcTimeAttr) ? Number(hcTimeAttr) : void 0;
+            if (defined(inputTime)) {
+                var previousTime = updatedTime;
+                if (defined(previousTime)) {
+                    input.setAttribute('data-hc-time-previous', previousTime);
+                }
+                input.setAttribute('data-hc-time', inputTime);
+                updatedTime = inputTime;
+            }
+            input.value = time.dateFormat((this.inputTypeFormats[input.type] ||
+                options.inputEditDateFormat), updatedTime);
+            if (dateBox) {
+                dateBox.attr({
+                    text: time.dateFormat(options.inputDateFormat, updatedTime)
+                });
+            }
+        }
+    };
+    /**
+     * Set the min and max value of a HTML input for the dates
+     *
+     * @private
+     * @function Highcharts.RangeSelector#setInputExtremes
+     */
+    RangeSelector.prototype.setInputExtremes = function (name, min, max) {
+        var input = name === 'min' ? this.minInput : this.maxInput;
+        if (input) {
+            var format = this.inputTypeFormats[input.type];
+            var time = this.chart.time;
+            if (format) {
+                var newMin = time.dateFormat(format, min);
+                if (input.min !== newMin) {
+                    input.min = newMin;
+                }
+                var newMax = time.dateFormat(format, max);
+                if (input.max !== newMax) {
+                    input.max = newMax;
+                }
+            }
+        }
+    };
+    /**
+     * @private
+     * @function Highcharts.RangeSelector#showInput
+     * @param {string} name
+     */
+    RangeSelector.prototype.showInput = function (name) {
+        var dateBox = name === 'min' ? this.minDateBox : this.maxDateBox;
+        var input = name === 'min' ? this.minInput : this.maxInput;
+        if (input && dateBox && this.inputGroup) {
+            var isTextInput = input.type === 'text';
+            var _a = this.inputGroup, translateX = _a.translateX, translateY = _a.translateY;
+            var inputBoxWidth = this.options.inputBoxWidth;
+            css(input, {
+                width: isTextInput ?
+                    ((dateBox.width + (inputBoxWidth ? -2 : 20)) + 'px') :
+                    'auto',
+                height: isTextInput ? ((dateBox.height - 2) + 'px') : 'auto',
+                border: '2px solid silver'
+            });
+            if (isTextInput && inputBoxWidth) {
+                css(input, {
+                    left: (translateX + dateBox.x) + 'px',
+                    top: translateY + 'px'
+                });
+                // Inputs of types date, time or datetime-local should be centered
+                // on top of the dateBox
+            }
+            else {
+                css(input, {
+                    left: Math.min(Math.round(dateBox.x +
+                        translateX -
+                        (input.offsetWidth - dateBox.width) / 2), this.chart.chartWidth - input.offsetWidth) + 'px',
+                    top: (translateY - (input.offsetHeight - dateBox.height) / 2) + 'px'
+                });
+            }
+        }
+    };
+    /**
+     * @private
+     * @function Highcharts.RangeSelector#hideInput
+     * @param {string} name
+     */
+    RangeSelector.prototype.hideInput = function (name) {
+        var input = name === 'min' ? this.minInput : this.maxInput;
+        if (input) {
+            css(input, {
+                top: '-9999em',
+                border: 0,
+                width: '1px',
+                height: '1px'
+            });
+        }
+    };
+    /**
+     * @private
+     * @function Highcharts.RangeSelector#defaultInputDateParser
+     */
+    RangeSelector.prototype.defaultInputDateParser = function (inputDate, useUTC, time) {
+        var hasTimezone = function (str) {
+            return str.length > 6 &&
+                (str.lastIndexOf('-') === str.length - 6 ||
+                    str.lastIndexOf('+') === str.length - 6);
+        };
+        var input = inputDate.split('/').join('-').split(' ').join('T');
+        if (input.indexOf('T') === -1) {
+            input += 'T00:00';
+        }
+        if (useUTC) {
+            input += 'Z';
+        }
+        else if (H.isSafari && !hasTimezone(input)) {
+            var offset = new Date(input).getTimezoneOffset() / 60;
+            input += offset <= 0 ? "+" + pad(-offset) + ":00" : "-" + pad(offset) + ":00";
+        }
+        var date = Date.parse(input);
+        // If the value isn't parsed directly to a value by the
+        // browser's Date.parse method, like YYYY-MM-DD in IE8, try
+        // parsing it a different way
+        if (!isNumber(date)) {
+            var parts = inputDate.split('-');
+            date = Date.UTC(pInt(parts[0]), pInt(parts[1]) - 1, pInt(parts[2]));
+        }
+        if (time && useUTC && isNumber(date)) {
+            date += time.getTimezoneOffset(date);
+        }
+        return date;
+    };
+    /**
+     * Draw either the 'from' or the 'to' HTML input box of the range selector
+     *
+     * @private
+     * @function Highcharts.RangeSelector#drawInput
+     */
+    RangeSelector.prototype.drawInput = function (name) {
+        var _a = this, chart = _a.chart, div = _a.div, inputGroup = _a.inputGroup;
+        var rangeSelector = this, chartStyle = chart.renderer.style || {}, renderer = chart.renderer, options = chart.options.rangeSelector, lang = defaultOptions.lang, isMin = name === 'min';
+        /**
+         * @private
+         */
+        function updateExtremes() {
+            var value = rangeSelector.getInputValue(name), chartAxis = chart.xAxis[0], dataAxis = chart.scroller && chart.scroller.xAxis ?
+                chart.scroller.xAxis :
+                chartAxis, dataMin = dataAxis.dataMin, dataMax = dataAxis.dataMax;
+            var maxInput = rangeSelector.maxInput, minInput = rangeSelector.minInput;
+            if (value !== Number(input.getAttribute('data-hc-time-previous')) &&
+                isNumber(value)) {
+                input.setAttribute('data-hc-time-previous', value);
+                // Validate the extremes. If it goes beyound the data min or
+                // max, use the actual data extreme (#2438).
+                if (isMin && maxInput && isNumber(dataMin)) {
+                    if (value > Number(maxInput.getAttribute('data-hc-time'))) {
+                        value = void 0;
+                    }
+                    else if (value < dataMin) {
+                        value = dataMin;
+                    }
+                }
+                else if (minInput && isNumber(dataMax)) {
+                    if (value < Number(minInput.getAttribute('data-hc-time'))) {
+                        value = void 0;
+                    }
+                    else if (value > dataMax) {
+                        value = dataMax;
+                    }
+                }
+                // Set the extremes
+                if (typeof value !== 'undefined') { // @todo typof undefined
+                    chartAxis.setExtremes(isMin ? value : chartAxis.min, isMin ? chartAxis.max : value, void 0, void 0, { trigger: 'rangeSelectorInput' });
+                }
+            }
+        }
+        // Create the text label
+        var text = lang[isMin ? 'rangeSelectorFrom' : 'rangeSelectorTo'] || '';
+        var label = renderer
+            .label(text, 0)
+            .addClass('highcharts-range-label')
+            .attr({
+            padding: text ? 2 : 0,
+            height: text ? options.inputBoxHeight : 0
+        })
+            .add(inputGroup);
+        // Create an SVG label that shows updated date ranges and and records
+        // click events that bring in the HTML input.
+        var dateBox = renderer
+            .label('', 0)
+            .addClass('highcharts-range-input')
+            .attr({
+            padding: 2,
+            width: options.inputBoxWidth,
+            height: options.inputBoxHeight,
+            'text-align': 'center'
+        })
+            .on('click', function () {
+            // If it is already focused, the onfocus event doesn't fire
+            // (#3713)
+            rangeSelector.showInput(name);
+            rangeSelector[name + 'Input'].focus();
+        });
+        if (!chart.styledMode) {
+            dateBox.attr({
+                stroke: options.inputBoxBorderColor,
+                'stroke-width': 1
+            });
+        }
+        dateBox.add(inputGroup);
+        // Create the HTML input element. This is rendered as 1x1 pixel then set
+        // to the right size when focused.
+        var input = createElement('input', {
+            name: name,
+            className: 'highcharts-range-selector'
+        }, void 0, div);
+        // #14788: Setting input.type to an unsupported type throws in IE, so
+        // we need to use setAttribute instead
+        input.setAttribute('type', preferredInputType(options.inputDateFormat || '%b %e, %Y'));
+        if (!chart.styledMode) {
+            // Styles
+            label.css(merge(chartStyle, options.labelStyle));
+            dateBox.css(merge({
+                color: "#333333" /* neutralColor80 */
+            }, chartStyle, options.inputStyle));
+            css(input, extend({
+                position: 'absolute',
+                border: 0,
+                boxShadow: '0 0 15px rgba(0,0,0,0.3)',
+                width: '1px',
+                height: '1px',
+                padding: 0,
+                textAlign: 'center',
+                fontSize: chartStyle.fontSize,
+                fontFamily: chartStyle.fontFamily,
+                top: '-9999em' // #4798
+            }, options.inputStyle));
+        }
+        // Blow up the input box
+        input.onfocus = function () {
+            rangeSelector.showInput(name);
+        };
+        // Hide away the input box
+        input.onblur = function () {
+            // update extermes only when inputs are active
+            if (input === H.doc.activeElement) { // Only when focused
+                // Update also when no `change` event is triggered, like when
+                // clicking inside the SVG (#4710)
+                updateExtremes();
+            }
+            // #10404 - move hide and blur outside focus
+            rangeSelector.hideInput(name);
+            rangeSelector.setInputValue(name);
+            input.blur(); // #4606
+        };
+        var keyDown = false;
+        // handle changes in the input boxes
+        input.onchange = function () {
+            // Update extremes and blur input when clicking date input calendar
+            if (!keyDown) {
+                updateExtremes();
+                rangeSelector.hideInput(name);
+                input.blur();
+            }
+        };
+        input.onkeypress = function (event) {
+            // IE does not fire onchange on enter
+            if (event.keyCode === 13) {
+                updateExtremes();
+            }
+        };
+        input.onkeydown = function (event) {
+            keyDown = true;
+            // Arrow keys
+            if (event.keyCode === 38 || event.keyCode === 40) {
+                updateExtremes();
+            }
+        };
+        input.onkeyup = function () {
+            keyDown = false;
+        };
+        return { dateBox: dateBox, input: input, label: label };
+    };
+    /**
+     * Get the position of the range selector buttons and inputs. This can be
+     * overridden from outside for custom positioning.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#getPosition
+     */
+    RangeSelector.prototype.getPosition = function () {
+        var chart = this.chart, options = chart.options.rangeSelector, top = options.verticalAlign === 'top' ?
+            chart.plotTop - chart.axisOffset[0] :
+            0; // set offset only for varticalAlign top
+        return {
+            buttonTop: top + options.buttonPosition.y,
+            inputTop: top + options.inputPosition.y - 10
+        };
+    };
+    /**
+     * Get the extremes of YTD. Will choose dataMax if its value is lower than
+     * the current timestamp. Will choose dataMin if its value is higher than
+     * the timestamp for the start of current year.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#getYTDExtremes
+     * @return {*}
+     * Returns min and max for the YTD
+     */
+    RangeSelector.prototype.getYTDExtremes = function (dataMax, dataMin, useUTC) {
+        var time = this.chart.time, min, now = new time.Date(dataMax), year = time.get('FullYear', now), startOfYear = useUTC ?
+            time.Date.UTC(year, 0, 1) : // eslint-disable-line new-cap
+            +new time.Date(year, 0, 1);
+        min = Math.max(dataMin, startOfYear);
+        var ts = now.getTime();
+        return {
+            max: Math.min(dataMax || ts, ts),
+            min: min
+        };
+    };
+    /**
+     * Render the range selector including the buttons and the inputs. The first
+     * time render is called, the elements are created and positioned. On
+     * subsequent calls, they are moved and updated.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#render
+     * @param {number} [min]
+     *        X axis minimum
+     * @param {number} [max]
+     *        X axis maximum
+     */
+    RangeSelector.prototype.render = function (min, max) {
+        var chart = this.chart, renderer = chart.renderer, container = chart.container, chartOptions = chart.options, options = chartOptions.rangeSelector, 
+        // Place inputs above the container
+        inputsZIndex = pick(chartOptions.chart.style &&
+            chartOptions.chart.style.zIndex, 0) + 1, inputEnabled = options.inputEnabled, rendered = this.rendered;
+        if (options.enabled === false) {
+            return;
+        }
+        // create the elements
+        if (!rendered) {
+            this.group = renderer.g('range-selector-group')
+                .attr({
+                zIndex: 7
+            })
+                .add();
+            this.div = createElement('div', void 0, {
+                position: 'relative',
+                height: 0,
+                zIndex: inputsZIndex
+            });
+            if (this.buttonOptions.length) {
+                this.renderButtons();
+            }
+            // First create a wrapper outside the container in order to make
+            // the inputs work and make export correct
+            if (container.parentNode) {
+                container.parentNode.insertBefore(this.div, container);
+            }
+            if (inputEnabled) {
+                // Create the group to keep the inputs
+                this.inputGroup = renderer.g('input-group').add(this.group);
+                var minElems = this.drawInput('min');
+                this.minDateBox = minElems.dateBox;
+                this.minLabel = minElems.label;
+                this.minInput = minElems.input;
+                var maxElems = this.drawInput('max');
+                this.maxDateBox = maxElems.dateBox;
+                this.maxLabel = maxElems.label;
+                this.maxInput = maxElems.input;
+            }
+        }
+        if (inputEnabled) {
+            // Set or reset the input values
+            this.setInputValue('min', min);
+            this.setInputValue('max', max);
+            var unionExtremes = (chart.scroller && chart.scroller.getUnionExtremes()) || chart.xAxis[0] || {};
+            if (defined(unionExtremes.dataMin) &&
+                defined(unionExtremes.dataMax)) {
+                var minRange = chart.xAxis[0].minRange || 0;
+                this.setInputExtremes('min', unionExtremes.dataMin, Math.min(unionExtremes.dataMax, this.getInputValue('max')) - minRange);
+                this.setInputExtremes('max', Math.max(unionExtremes.dataMin, this.getInputValue('min')) + minRange, unionExtremes.dataMax);
+            }
+            // Reflow
+            if (this.inputGroup) {
+                var x_1 = 0;
+                [
+                    this.minLabel,
+                    this.minDateBox,
+                    this.maxLabel,
+                    this.maxDateBox
+                ].forEach(function (label) {
+                    if (label) {
+                        var width = label.getBBox().width;
+                        if (width) {
+                            label.attr({ x: x_1 });
+                            x_1 += width + options.inputSpacing;
+                        }
+                    }
+                });
+            }
+        }
+        this.alignElements();
+        this.rendered = true;
+    };
+    /**
+     * Render the range buttons. This only runs the first time, later the
+     * positioning is laid out in alignElements.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#renderButtons
+     */
+    RangeSelector.prototype.renderButtons = function () {
+        var _this = this;
+        var _a = this, buttons = _a.buttons, chart = _a.chart, options = _a.options;
+        var lang = defaultOptions.lang;
+        var renderer = chart.renderer;
+        var buttonTheme = merge(options.buttonTheme);
+        var states = buttonTheme && buttonTheme.states;
+        // Prevent the button from resetting the width when the button state
+        // changes since we need more control over the width when collapsing
+        // the buttons
+        var width = buttonTheme.width || 28;
+        delete buttonTheme.width;
+        delete buttonTheme.states;
+        this.buttonGroup = renderer.g('range-selector-buttons').add(this.group);
+        var dropdown = this.dropdown = createElement('select', void 0, {
+            position: 'absolute',
+            width: '1px',
+            height: '1px',
+            padding: 0,
+            border: 0,
+            top: '-9999em',
+            cursor: 'pointer',
+            opacity: 0.0001
+        }, this.div);
+        // Prevent page zoom on iPhone
+        addEvent(dropdown, 'touchstart', function () {
+            dropdown.style.fontSize = '16px';
+        });
+        // Forward events from select to button
+        [
+            [H.isMS ? 'mouseover' : 'mouseenter'],
+            [H.isMS ? 'mouseout' : 'mouseleave'],
+            ['change', 'click']
+        ].forEach(function (_a) {
+            var from = _a[0], to = _a[1];
+            addEvent(dropdown, from, function () {
+                var button = buttons[_this.currentButtonIndex()];
+                if (button) {
+                    fireEvent(button.element, to || from);
+                }
+            });
+        });
+        this.zoomText = renderer
+            .label((lang && lang.rangeSelectorZoom) || '', 0)
+            .attr({
+            padding: options.buttonTheme.padding,
+            height: options.buttonTheme.height,
+            paddingLeft: 0,
+            paddingRight: 0
+        })
+            .add(this.buttonGroup);
+        if (!this.chart.styledMode) {
+            this.zoomText.css(options.labelStyle);
+            buttonTheme['stroke-width'] = pick(buttonTheme['stroke-width'], 0);
+        }
+        createElement('option', {
+            textContent: this.zoomText.textStr,
+            disabled: true
+        }, void 0, dropdown);
+        this.buttonOptions.forEach(function (rangeOptions, i) {
+            createElement('option', {
+                textContent: rangeOptions.title || rangeOptions.text
+            }, void 0, dropdown);
+            buttons[i] = renderer
+                .button(rangeOptions.text, 0, 0, function (e) {
+                // extract events from button object and call
+                var buttonEvents = (rangeOptions.events &&
+                    rangeOptions.events.click), callDefaultEvent;
+                if (buttonEvents) {
+                    callDefaultEvent =
+                        buttonEvents.call(rangeOptions, e);
+                }
+                if (callDefaultEvent !== false) {
+                    _this.clickButton(i);
+                }
+                _this.isActive = true;
+            }, buttonTheme, states && states.hover, states && states.select, states && states.disabled)
+                .attr({
+                'text-align': 'center',
+                width: width
+            })
+                .add(_this.buttonGroup);
+            if (rangeOptions.title) {
+                buttons[i].attr('title', rangeOptions.title);
+            }
+        });
+    };
+    /**
+     * Align the elements horizontally and vertically.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#alignElements
+     */
+    RangeSelector.prototype.alignElements = function () {
+        var _this = this;
+        var _a = this, buttonGroup = _a.buttonGroup, buttons = _a.buttons, chart = _a.chart, group = _a.group, inputGroup = _a.inputGroup, options = _a.options, zoomText = _a.zoomText;
+        var chartOptions = chart.options;
+        var navButtonOptions = (chartOptions.exporting &&
+            chartOptions.exporting.enabled !== false &&
+            chartOptions.navigation &&
+            chartOptions.navigation.buttonOptions);
+        var buttonPosition = options.buttonPosition, inputPosition = options.inputPosition, verticalAlign = options.verticalAlign;
+        // Get the X offset required to avoid overlapping with the exporting
+        // button. This is is used both by the buttonGroup and the inputGroup.
+        var getXOffsetForExportButton = function (group, position) {
+            if (navButtonOptions &&
+                _this.titleCollision(chart) &&
+                verticalAlign === 'top' &&
+                position.align === 'right' && ((position.y -
+                group.getBBox().height - 12) <
+                ((navButtonOptions.y || 0) +
+                    (navButtonOptions.height || 0) +
+                    chart.spacing[0]))) {
+                return -40;
+            }
+            return 0;
+        };
+        var plotLeft = chart.plotLeft;
+        if (group && buttonPosition && inputPosition) {
+            var translateX = buttonPosition.x - chart.spacing[3];
+            if (buttonGroup) {
+                this.positionButtons();
+                if (!this.initialButtonGroupWidth) {
+                    var width_1 = 0;
+                    if (zoomText) {
+                        width_1 += zoomText.getBBox().width + 5;
+                    }
+                    buttons.forEach(function (button, i) {
+                        width_1 += button.width;
+                        if (i !== buttons.length - 1) {
+                            width_1 += options.buttonSpacing;
+                        }
+                    });
+                    this.initialButtonGroupWidth = width_1;
+                }
+                plotLeft -= chart.spacing[3];
+                this.updateButtonStates();
+                // Detect collision between button group and exporting
+                var xOffsetForExportButton_1 = getXOffsetForExportButton(buttonGroup, buttonPosition);
+                this.alignButtonGroup(xOffsetForExportButton_1);
+                // Skip animation
+                group.placed = buttonGroup.placed = chart.hasLoaded;
+            }
+            var xOffsetForExportButton = 0;
+            if (inputGroup) {
+                // Detect collision between the input group and exporting button
+                xOffsetForExportButton = getXOffsetForExportButton(inputGroup, inputPosition);
+                if (inputPosition.align === 'left') {
+                    translateX = plotLeft;
+                }
+                else if (inputPosition.align === 'right') {
+                    translateX = -Math.max(chart.axisOffset[1], -xOffsetForExportButton);
+                }
+                // Update the alignment to the updated spacing box
+                inputGroup.align({
+                    y: inputPosition.y,
+                    width: inputGroup.getBBox().width,
+                    align: inputPosition.align,
+                    // fix wrong getBBox() value on right align
+                    x: inputPosition.x + translateX - 2
+                }, true, chart.spacingBox);
+                // Skip animation
+                inputGroup.placed = chart.hasLoaded;
+            }
+            this.handleCollision(xOffsetForExportButton);
+            // Vertical align
+            group.align({
+                verticalAlign: verticalAlign
+            }, true, chart.spacingBox);
+            var alignTranslateY = group.alignAttr.translateY;
+            // Set position
+            var groupHeight = group.getBBox().height + 20; // # 20 padding
+            var translateY = 0;
+            // Calculate bottom position
+            if (verticalAlign === 'bottom') {
+                var legendOptions = chart.legend && chart.legend.options;
+                var legendHeight = (legendOptions &&
+                    legendOptions.verticalAlign === 'bottom' &&
+                    legendOptions.enabled &&
+                    !legendOptions.floating ?
+                    (chart.legend.legendHeight +
+                        pick(legendOptions.margin, 10)) :
+                    0);
+                groupHeight = groupHeight + legendHeight - 20;
+                translateY = (alignTranslateY -
+                    groupHeight -
+                    (options.floating ? 0 : options.y) -
+                    (chart.titleOffset ? chart.titleOffset[2] : 0) -
+                    10 // 10 spacing
+                );
+            }
+            if (verticalAlign === 'top') {
+                if (options.floating) {
+                    translateY = 0;
+                }
+                if (chart.titleOffset && chart.titleOffset[0]) {
+                    translateY = chart.titleOffset[0];
+                }
+                translateY += ((chart.margin[0] - chart.spacing[0]) || 0);
+            }
+            else if (verticalAlign === 'middle') {
+                if (inputPosition.y === buttonPosition.y) {
+                    translateY = alignTranslateY;
+                }
+                else if (inputPosition.y || buttonPosition.y) {
+                    if (inputPosition.y < 0 ||
+                        buttonPosition.y < 0) {
+                        translateY -= Math.min(inputPosition.y, buttonPosition.y);
+                    }
+                    else {
+                        translateY = alignTranslateY - groupHeight;
+                    }
+                }
+            }
+            group.translate(options.x, options.y + Math.floor(translateY));
+            // Translate HTML inputs
+            var _b = this, minInput = _b.minInput, maxInput = _b.maxInput, dropdown = _b.dropdown;
+            if (options.inputEnabled && minInput && maxInput) {
+                minInput.style.marginTop = group.translateY + 'px';
+                maxInput.style.marginTop = group.translateY + 'px';
+            }
+            if (dropdown) {
+                dropdown.style.marginTop = group.translateY + 'px';
+            }
+        }
+    };
+    /**
+     * Align the button group horizontally and vertically.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#alignButtonGroup
+     * @param {number} xOffsetForExportButton
+     * @param {number} [width]
+     */
+    RangeSelector.prototype.alignButtonGroup = function (xOffsetForExportButton, width) {
+        var _a = this, chart = _a.chart, options = _a.options, buttonGroup = _a.buttonGroup, buttons = _a.buttons;
+        var buttonPosition = options.buttonPosition;
+        var plotLeft = chart.plotLeft - chart.spacing[3];
+        var translateX = buttonPosition.x - chart.spacing[3];
+        if (buttonPosition.align === 'right') {
+            translateX += xOffsetForExportButton - plotLeft; // #13014
+        }
+        else if (buttonPosition.align === 'center') {
+            translateX -= plotLeft / 2;
+        }
+        if (buttonGroup) {
+            // Align button group
+            buttonGroup.align({
+                y: buttonPosition.y,
+                width: pick(width, this.initialButtonGroupWidth),
+                align: buttonPosition.align,
+                x: translateX
+            }, true, chart.spacingBox);
+        }
+    };
+    /**
+     * @private
+     * @function Highcharts.RangeSelector#positionButtons
+     */
+    RangeSelector.prototype.positionButtons = function () {
+        var _a = this, buttons = _a.buttons, chart = _a.chart, options = _a.options, zoomText = _a.zoomText;
+        var verb = chart.hasLoaded ? 'animate' : 'attr';
+        var buttonPosition = options.buttonPosition;
+        var plotLeft = chart.plotLeft;
+        var buttonLeft = plotLeft;
+        if (zoomText && zoomText.visibility !== 'hidden') {
+            // #8769, allow dynamically updating margins
+            zoomText[verb]({
+                x: pick(plotLeft + buttonPosition.x, plotLeft)
+            });
+            // Button start position
+            buttonLeft += buttonPosition.x +
+                zoomText.getBBox().width + 5;
+        }
+        this.buttonOptions.forEach(function (rangeOptions, i) {
+            if (buttons[i].visibility !== 'hidden') {
+                buttons[i][verb]({ x: buttonLeft });
+                // increase button position for the next button
+                buttonLeft += buttons[i].width + options.buttonSpacing;
+            }
+            else {
+                buttons[i][verb]({ x: plotLeft });
+            }
+        });
+    };
+    /**
+     * Handle collision between the button group and the input group
+     *
+     * @private
+     * @function Highcharts.RangeSelector#handleCollision
+     *
+     * @param  {number} xOffsetForExportButton
+     *                  The X offset of the group required to make room for the
+     *                  exporting button
+     */
+    RangeSelector.prototype.handleCollision = function (xOffsetForExportButton) {
+        var _this = this;
+        var _a = this, chart = _a.chart, buttonGroup = _a.buttonGroup, inputGroup = _a.inputGroup;
+        var _b = this.options, buttonPosition = _b.buttonPosition, dropdown = _b.dropdown, inputPosition = _b.inputPosition;
+        var maxButtonWidth = function () {
+            var buttonWidth = 0;
+            _this.buttons.forEach(function (button) {
+                var bBox = button.getBBox();
+                if (bBox.width > buttonWidth) {
+                    buttonWidth = bBox.width;
+                }
+            });
+            return buttonWidth;
+        };
+        var groupsOverlap = function (buttonGroupWidth) {
+            if (inputGroup && buttonGroup) {
+                var inputGroupX = (inputGroup.alignAttr.translateX +
+                    inputGroup.alignOptions.x -
+                    xOffsetForExportButton +
+                    // getBBox for detecing left margin
+                    inputGroup.getBBox().x +
+                    // 2px padding to not overlap input and label
+                    2);
+                var inputGroupWidth = inputGroup.alignOptions.width;
+                var buttonGroupX = buttonGroup.alignAttr.translateX +
+                    buttonGroup.getBBox().x;
+                return (buttonGroupX + buttonGroupWidth > inputGroupX) &&
+                    (inputGroupX + inputGroupWidth > buttonGroupX) &&
+                    (buttonPosition.y <
+                        (inputPosition.y +
+                            inputGroup.getBBox().height));
+            }
+            return false;
+        };
+        var moveInputsDown = function () {
+            if (inputGroup && buttonGroup) {
+                inputGroup.attr({
+                    translateX: inputGroup.alignAttr.translateX + (chart.axisOffset[1] >= -xOffsetForExportButton ?
+                        0 :
+                        -xOffsetForExportButton),
+                    translateY: inputGroup.alignAttr.translateY +
+                        buttonGroup.getBBox().height + 10
+                });
+            }
+        };
+        if (buttonGroup) {
+            if (dropdown === 'always') {
+                this.collapseButtons(xOffsetForExportButton);
+                if (groupsOverlap(maxButtonWidth())) {
+                    // Move the inputs down if there is still a collision
+                    // after collapsing the buttons
+                    moveInputsDown();
+                }
+                return;
+            }
+            if (dropdown === 'never') {
+                this.expandButtons();
+            }
+        }
+        // Detect collision
+        if (inputGroup && buttonGroup) {
+            if ((inputPosition.align === buttonPosition.align) ||
+                // 20 is minimal spacing between elements
+                groupsOverlap(this.initialButtonGroupWidth + 20)) {
+                if (dropdown === 'responsive') {
+                    this.collapseButtons(xOffsetForExportButton);
+                    if (groupsOverlap(maxButtonWidth())) {
+                        moveInputsDown();
+                    }
+                }
+                else {
+                    moveInputsDown();
+                }
+            }
+            else if (dropdown === 'responsive') {
+                this.expandButtons();
+            }
+        }
+        else if (buttonGroup && dropdown === 'responsive') {
+            if (this.initialButtonGroupWidth > chart.plotWidth) {
+                this.collapseButtons(xOffsetForExportButton);
+            }
+            else {
+                this.expandButtons();
+            }
+        }
+    };
+    /**
+     * Collapse the buttons and put the select element on top.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#collapseButtons
+     * @param {number} xOffsetForExportButton
+     */
+    RangeSelector.prototype.collapseButtons = function (xOffsetForExportButton) {
+        var _a = this, buttons = _a.buttons, buttonOptions = _a.buttonOptions, chart = _a.chart, dropdown = _a.dropdown, options = _a.options, zoomText = _a.zoomText;
+        var userButtonTheme = (chart.userOptions.rangeSelector &&
+            chart.userOptions.rangeSelector.buttonTheme) || {};
+        var getAttribs = function (text) { return ({
+            text: text ? text + " \u25BE" : '▾',
+            width: 'auto',
+            paddingLeft: pick(options.buttonTheme.paddingLeft, userButtonTheme.padding, 8),
+            paddingRight: pick(options.buttonTheme.paddingRight, userButtonTheme.padding, 8)
+        }); };
+        if (zoomText) {
+            zoomText.hide();
+        }
+        var hasActiveButton = false;
+        buttonOptions.forEach(function (rangeOptions, i) {
+            var button = buttons[i];
+            if (button.state !== 2) {
+                button.hide();
+            }
+            else {
+                button.show();
+                button.attr(getAttribs(rangeOptions.text));
+                hasActiveButton = true;
+            }
+        });
+        if (!hasActiveButton) {
+            if (dropdown) {
+                dropdown.selectedIndex = 0;
+            }
+            buttons[0].show();
+            buttons[0].attr(getAttribs(this.zoomText && this.zoomText.textStr));
+        }
+        var align = options.buttonPosition.align;
+        this.positionButtons();
+        if (align === 'right' || align === 'center') {
+            this.alignButtonGroup(xOffsetForExportButton, buttons[this.currentButtonIndex()].getBBox().width);
+        }
+        this.showDropdown();
+    };
+    /**
+     * Show all the buttons and hide the select element.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#expandButtons
+     */
+    RangeSelector.prototype.expandButtons = function () {
+        var _a = this, buttons = _a.buttons, buttonOptions = _a.buttonOptions, options = _a.options, zoomText = _a.zoomText;
+        this.hideDropdown();
+        if (zoomText) {
+            zoomText.show();
+        }
+        buttonOptions.forEach(function (rangeOptions, i) {
+            var button = buttons[i];
+            button.show();
+            button.attr({
+                text: rangeOptions.text,
+                width: options.buttonTheme.width || 28,
+                paddingLeft: pick(options.buttonTheme.paddingLeft, 'unset'),
+                paddingRight: pick(options.buttonTheme.paddingRight, 'unset')
+            });
+            if (button.state < 2) {
+                button.setState(0);
+            }
+        });
+        this.positionButtons();
+    };
+    /**
+     * Get the index of the visible button when the buttons are collapsed.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#currentButtonIndex
+     */
+    RangeSelector.prototype.currentButtonIndex = function () {
+        var dropdown = this.dropdown;
+        if (dropdown && dropdown.selectedIndex > 0) {
+            return dropdown.selectedIndex - 1;
+        }
+        return 0;
+    };
+    /**
+     * Position the select element on top of the button.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#showDropdown
+     */
+    RangeSelector.prototype.showDropdown = function () {
+        var _a = this, buttonGroup = _a.buttonGroup, buttons = _a.buttons, chart = _a.chart, dropdown = _a.dropdown;
+        if (buttonGroup && dropdown) {
+            var translateX = buttonGroup.translateX, translateY = buttonGroup.translateY;
+            var bBox = buttons[this.currentButtonIndex()].getBBox();
+            css(dropdown, {
+                left: (chart.plotLeft + translateX) + 'px',
+                top: (translateY + 0.5) + 'px',
+                width: bBox.width + 'px',
+                height: bBox.height + 'px'
+            });
+            this.hasVisibleDropdown = true;
+        }
+    };
+    /**
+     * @private
+     * @function Highcharts.RangeSelector#hideDropdown
+     */
+    RangeSelector.prototype.hideDropdown = function () {
+        var dropdown = this.dropdown;
+        if (dropdown) {
+            css(dropdown, {
+                top: '-9999em',
+                width: '1px',
+                height: '1px'
+            });
+            this.hasVisibleDropdown = false;
+        }
+    };
+    /**
+     * Extracts height of range selector
+     *
+     * @private
+     * @function Highcharts.RangeSelector#getHeight
+     * @return {number}
+     * Returns rangeSelector height
+     */
+    RangeSelector.prototype.getHeight = function () {
+        var rangeSelector = this, options = rangeSelector.options, rangeSelectorGroup = rangeSelector.group, inputPosition = options.inputPosition, buttonPosition = options.buttonPosition, yPosition = options.y, buttonPositionY = buttonPosition.y, inputPositionY = inputPosition.y, rangeSelectorHeight = 0, minPosition;
+        if (options.height) {
+            return options.height;
+        }
+        // Align the elements before we read the height in case we're switching
+        // between wrapped and non-wrapped layout
+        this.alignElements();
+        rangeSelectorHeight = rangeSelectorGroup ?
+            // 13px to keep back compatibility
+            (rangeSelectorGroup.getBBox(true).height) + 13 +
+                yPosition :
+            0;
+        minPosition = Math.min(inputPositionY, buttonPositionY);
+        if ((inputPositionY < 0 && buttonPositionY < 0) ||
+            (inputPositionY > 0 && buttonPositionY > 0)) {
+            rangeSelectorHeight += Math.abs(minPosition);
+        }
+        return rangeSelectorHeight;
+    };
+    /**
+     * Detect collision with title or subtitle
+     *
+     * @private
+     * @function Highcharts.RangeSelector#titleCollision
+     * @return {boolean}
+     * Returns collision status
+     */
+    RangeSelector.prototype.titleCollision = function (chart) {
+        return !(chart.options.title.text ||
+            chart.options.subtitle.text);
+    };
+    /**
+     * Update the range selector with new options
+     *
+     * @private
+     * @function Highcharts.RangeSelector#update
+     * @param {Highcharts.RangeSelectorOptions} options
+     */
+    RangeSelector.prototype.update = function (options) {
+        var chart = this.chart;
+        merge(true, chart.options.rangeSelector, options);
+        this.destroy();
+        this.init(chart);
+        this.render();
+    };
+    /**
+     * Destroys allocated elements.
+     *
+     * @private
+     * @function Highcharts.RangeSelector#destroy
+     */
+    RangeSelector.prototype.destroy = function () {
+        var rSelector = this, minInput = rSelector.minInput, maxInput = rSelector.maxInput;
+        if (rSelector.eventsToUnbind) {
+            rSelector.eventsToUnbind.forEach(function (unbind) { return unbind(); });
+            rSelector.eventsToUnbind = void 0;
+        }
+        // Destroy elements in collections
+        destroyObjectProperties(rSelector.buttons);
+        // Clear input element events
+        if (minInput) {
+            minInput.onfocus = minInput.onblur = minInput.onchange = null;
+        }
+        if (maxInput) {
+            maxInput.onfocus = maxInput.onblur = maxInput.onchange = null;
+        }
+        // Destroy HTML and SVG elements
+        objectEach(rSelector, function (val, key) {
+            if (val && key !== 'chart') {
+                if (val instanceof SVGElement) {
+                    // SVGElement
+                    val.destroy();
+                }
+                else if (val instanceof window.HTMLElement) {
+                    // HTML element
+                    discardElement(val);
+                }
+            }
+            if (val !== RangeSelector.prototype[key]) {
+                rSelector[key] = null;
+            }
+        }, this);
+    };
+    return RangeSelector;
+}());
+/**
+ * The default buttons for pre-selecting time frames
+ */
+RangeSelector.prototype.defaultButtons = [{
+        type: 'month',
+        count: 1,
+        text: '1m',
+        title: 'View 1 month'
+    }, {
+        type: 'month',
+        count: 3,
+        text: '3m',
+        title: 'View 3 months'
+    }, {
+        type: 'month',
+        count: 6,
+        text: '6m',
+        title: 'View 6 months'
+    }, {
+        type: 'ytd',
+        text: 'YTD',
+        title: 'View year to date'
+    }, {
+        type: 'year',
+        count: 1,
+        text: '1y',
+        title: 'View 1 year'
+    }, {
+        type: 'all',
+        text: 'All',
+        title: 'View all'
+    }];
+/**
+ * The date formats to use when setting min, max and value on date inputs
+ */
+RangeSelector.prototype.inputTypeFormats = {
+    'datetime-local': '%Y-%m-%dT%H:%M:%S',
+    'date': '%Y-%m-%d',
+    'time': '%H:%M:%S'
+};
+/**
+ * Get the preferred input type based on a date format string.
+ *
+ * @private
+ * @function preferredInputType
+ */
+function preferredInputType(format) {
+    var ms = format.indexOf('%L') !== -1;
+    if (ms) {
+        return 'text';
+    }
+    var date = ['a', 'A', 'd', 'e', 'w', 'b', 'B', 'm', 'o', 'y', 'Y']
+        .some(function (char) { return format.indexOf('%' + char) !== -1; });
+    var time = ['H', 'k', 'I', 'l', 'M', 'S'].some(function (char) {
+        return format.indexOf('%' + char) !== -1;
+    });
+    if (date && time) {
+        return 'datetime-local';
+    }
+    if (date) {
+        return 'date';
+    }
+    if (time) {
+        return 'time';
+    }
+    return 'text';
+}
+/**
+ * Get the axis min value based on the range option and the current max. For
+ * stock charts this is extended via the {@link RangeSelector} so that if the
+ * selected range is a multiple of months or years, it is compensated for
+ * various month lengths.
+ *
+ * @private
+ * @function Highcharts.Axis#minFromRange
+ * @return {number|undefined}
+ *         The new minimum value.
+ */
+Axis.prototype.minFromRange = function () {
+    var rangeOptions = this.range, type = rangeOptions.type, min, max = this.max, dataMin, range, time = this.chart.time, 
+    // Get the true range from a start date
+    getTrueRange = function (base, count) {
+        var timeName = type === 'year' ?
+            'FullYear' : 'Month';
+        var date = new time.Date(base);
+        var basePeriod = time.get(timeName, date);
+        time.set(timeName, date, basePeriod + count);
+        if (basePeriod === time.get(timeName, date)) {
+            time.set('Date', date, 0); // #6537
+        }
+        return date.getTime() - base;
+    };
+    if (isNumber(rangeOptions)) {
+        min = max - rangeOptions;
+        range = rangeOptions;
+    }
+    else {
+        min = max + getTrueRange(max, -rangeOptions.count);
+        // Let the fixedRange reflect initial settings (#5930)
+        if (this.chart) {
+            this.chart.fixedRange = max - min;
+        }
+    }
+    dataMin = pick(this.dataMin, Number.MIN_VALUE);
+    if (!isNumber(min)) {
+        min = dataMin;
+    }
+    if (min <= dataMin) {
+        min = dataMin;
+        if (typeof range === 'undefined') { // #4501
+            range = getTrueRange(min, rangeOptions.count);
+        }
+        this.newMax = Math.min(min + range, this.dataMax);
+    }
+    if (!isNumber(max)) {
+        min = void 0;
+    }
+    return min;
+};
+if (!H.RangeSelector) {
+    var chartDestroyEvents_1 = [];
+    var initRangeSelector_1 = function (chart) {
+        var extremes, rangeSelector = chart.rangeSelector, legend, alignTo, verticalAlign;
+        /**
+         * @private
+         */
+        function render() {
+            if (rangeSelector) {
+                extremes = chart.xAxis[0].getExtremes();
+                legend = chart.legend;
+                verticalAlign = (rangeSelector &&
+                    rangeSelector.options.verticalAlign);
+                if (isNumber(extremes.min)) {
+                    rangeSelector.render(extremes.min, extremes.max);
+                }
+                // Re-align the legend so that it's below the rangeselector
+                if (legend.display &&
+                    verticalAlign === 'top' &&
+                    verticalAlign === legend.options.verticalAlign) {
+                    // Create a new alignment box for the legend.
+                    alignTo = merge(chart.spacingBox);
+                    if (legend.options.layout === 'vertical') {
+                        alignTo.y = chart.plotTop;
+                    }
+                    else {
+                        alignTo.y += rangeSelector.getHeight();
+                    }
+                    legend.group.placed = false; // Don't animate the alignment.
+                    legend.align(alignTo);
+                }
+            }
+        }
+        if (rangeSelector) {
+            var events = find(chartDestroyEvents_1, function (e) { return e[0] === chart; });
+            if (!events) {
+                chartDestroyEvents_1.push([chart, [
+                        // redraw the scroller on setExtremes
+                        addEvent(chart.xAxis[0], 'afterSetExtremes', function (e) {
+                            if (rangeSelector) {
+                                rangeSelector.render(e.min, e.max);
+                            }
+                        }),
+                        // redraw the scroller chart resize
+                        addEvent(chart, 'redraw', render)
+                    ]]);
+            }
+            // do it now
+            render();
+        }
+    };
+    // Initialize rangeselector for stock charts
+    addEvent(Chart, 'afterGetContainer', function () {
+        if (this.options.rangeSelector &&
+            this.options.rangeSelector.enabled) {
+            this.rangeSelector = new RangeSelector(this);
+        }
+    });
+    addEvent(Chart, 'beforeRender', function () {
+        var chart = this, axes = chart.axes, rangeSelector = chart.rangeSelector, verticalAlign;
+        if (rangeSelector) {
+            if (isNumber(rangeSelector.deferredYTDClick)) {
+                rangeSelector.clickButton(rangeSelector.deferredYTDClick);
+                delete rangeSelector.deferredYTDClick;
+            }
+            axes.forEach(function (axis) {
+                axis.updateNames();
+                axis.setScale();
+            });
+            chart.getAxisMargins();
+            rangeSelector.render();
+            verticalAlign = rangeSelector.options.verticalAlign;
+            if (!rangeSelector.options.floating) {
+                if (verticalAlign === 'bottom') {
+                    this.extraBottomMargin = true;
+                }
+                else if (verticalAlign !== 'middle') {
+                    this.extraTopMargin = true;
+                }
+            }
+        }
+    });
+    addEvent(Chart, 'update', function (e) {
+        var chart = this, options = e.options, optionsRangeSelector = options.rangeSelector, rangeSelector = chart.rangeSelector, verticalAlign, extraBottomMarginWas = this.extraBottomMargin, extraTopMarginWas = this.extraTopMargin;
+        if (optionsRangeSelector &&
+            optionsRangeSelector.enabled &&
+            !defined(rangeSelector) &&
+            this.options.rangeSelector) {
+            this.options.rangeSelector.enabled = true;
+            this.rangeSelector = rangeSelector = new RangeSelector(this);
+        }
+        this.extraBottomMargin = false;
+        this.extraTopMargin = false;
+        if (rangeSelector) {
+            initRangeSelector_1(this);
+            verticalAlign = (optionsRangeSelector &&
+                optionsRangeSelector.verticalAlign) || (rangeSelector.options && rangeSelector.options.verticalAlign);
+            if (!rangeSelector.options.floating) {
+                if (verticalAlign === 'bottom') {
+                    this.extraBottomMargin = true;
+                }
+                else if (verticalAlign !== 'middle') {
+                    this.extraTopMargin = true;
+                }
+            }
+            if (this.extraBottomMargin !== extraBottomMarginWas ||
+                this.extraTopMargin !== extraTopMarginWas) {
+                this.isDirtyBox = true;
+            }
+        }
+    });
+    addEvent(Chart, 'render', function () {
+        var chart = this, rangeSelector = chart.rangeSelector, verticalAlign;
+        if (rangeSelector && !rangeSelector.options.floating) {
+            rangeSelector.render();
+            verticalAlign = rangeSelector.options.verticalAlign;
+            if (verticalAlign === 'bottom') {
+                this.extraBottomMargin = true;
+            }
+            else if (verticalAlign !== 'middle') {
+                this.extraTopMargin = true;
+            }
+        }
+    });
+    addEvent(Chart, 'getMargins', function () {
+        var rangeSelector = this.rangeSelector, rangeSelectorHeight;
+        if (rangeSelector) {
+            rangeSelectorHeight = rangeSelector.getHeight();
+            if (this.extraTopMargin) {
+                this.plotTop += rangeSelectorHeight;
+            }
+            if (this.extraBottomMargin) {
+                this.marginBottom += rangeSelectorHeight;
+            }
+        }
+    });
+    Chart.prototype.callbacks.push(initRangeSelector_1);
+    // Remove resize/afterSetExtremes at chart destroy
+    addEvent(Chart, 'destroy', function destroyEvents() {
+        for (var i = 0; i < chartDestroyEvents_1.length; i++) {
+            var events = chartDestroyEvents_1[i];
+            if (events[0] === this) {
+                events[1].forEach(function (unbind) { return unbind(); });
+                chartDestroyEvents_1.splice(i, 1);
+                return;
+            }
+        }
+    });
+    H.RangeSelector = RangeSelector;
+}
+export default RangeSelector;