highcharts 10.2.1 → 10.3.1

package/es-modules/{Extensions → Stock/RangeSelector}/RangeSelector.js

@@ -8,545 +8,50 @@
  *
  * */
 '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';
+import Axis from '../../Core/Axis/Axis.js';
+import D from '../../Core/Defaults.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
+import H from '../../Core/Globals.js';
+import RangeSelectorComposition from './RangeSelectorComposition.js';
+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, fireEvent = U.fireEvent, isNumber = U.isNumber, merge = U.merge, objectEach = U.objectEach, pad = U.pad, pick = U.pick, pInt = U.pInt, splat = U.splat;
+/* *
  *
- * @param {global.Event} e
- *        Event arguments.
+ *  Functions
  *
- * @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.
+ * Get the preferred input type based on a date format string.
  *
- * @return {number}
- *         Parsed JavaScript time value.
+ * @private
+ * @function preferredInputType
  */
-/* ************************************************************************** *
- * 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" /* Palette.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" /* Palette.neutralColor60 */
-        }
+function preferredInputType(format) {
+    var ms = format.indexOf('%L') !== -1;
+    if (ms) {
+        return 'text';
     }
-});
-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.
+    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';
+}
+/* *
  *
- * ```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'
- *         ]
- *     }
- * });
- * ```
+ *  Class
  *
- * @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.
  *
@@ -556,10 +61,15 @@ extend(defaultOptions.lang,
  * @param {Highcharts.Chart} chart
  */
 var RangeSelector = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
     function RangeSelector(chart) {
         /* *
          *
-         * Properties
+         *  Properties
          *
          * */
         this.buttons = void 0;
@@ -567,9 +77,24 @@ var RangeSelector = /** @class */ (function () {
         this.initialButtonGroupWidth = 0;
         this.options = void 0;
         this.chart = chart;
-        // Run RangeSelector
         this.init(chart);
     }
+    /* *
+     *
+     *  Static Functions
+     *
+     * */
+    /**
+     * @private
+     */
+    RangeSelector.compose = function (AxisClass, ChartClass) {
+        RangeSelectorComposition.compose(AxisClass, ChartClass, RangeSelector);
+    };
+    /* *
+     *
+     *  Functions
+     *
+     * */
     /**
      * The method to run when one of the buttons in the range selectors is
      * clicked
@@ -581,8 +106,9 @@ var RangeSelector = /** @class */ (function () {
      * @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, addOffsetMin = true;
+        var rangeSelector = this, chart = rangeSelector.chart, rangeOptions = rangeSelector.buttonOptions[i], baseAxis = chart.xAxis[0], unionExtremes = (chart.scroller && chart.scroller.getUnionExtremes()) || baseAxis || {}, type = rangeOptions.type, dataGrouping = rangeOptions.dataGrouping;
+        var dataMin = unionExtremes.dataMin, dataMax = unionExtremes.dataMax, newMin, newMax = baseAxis && Math.round(Math.min(baseAxis.max, pick(dataMax, baseAxis.max))), // #1568
+        baseXAxisOptions, range = rangeOptions._range, rangeMin, minSetting, rangeSetting, ctx, ytdExtremes, addOffsetMin = true;
         // chart has no data, base series is removed
         if (dataMin === null || dataMax === null) {
             return;
@@ -773,9 +299,10 @@ var RangeSelector = /** @class */ (function () {
     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;
+            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, allButtonsEnabled = rangeSelector.options.allButtonsEnabled, buttons = rangeSelector.buttons;
+        var selectedExists = isNumber(selected);
         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 -
+            var range = rangeOptions._range, type = rangeOptions.type, count = rangeOptions.count || 1, button = buttons[i], offsetRange = rangeOptions._offsetMax -
                 rangeOptions._offsetMin, isSelected = i === selected, 
             // Disable buttons where the range exceeds what is allowed in
             // the current view
@@ -783,7 +310,8 @@ var RangeSelector = /** @class */ (function () {
                 dataMax - dataMin, 
             // Disable buttons where the range is smaller than the minimum
             // range
-            isTooSmallRange = range < baseAxis.minRange, 
+            isTooSmallRange = range < baseAxis.minRange;
+            var state = 0, 
             // Do not select the YTD button if not explicitly told so
             isYTDButNotSelected = false, 
             // Disable the All button if we're already showing all
@@ -811,12 +339,12 @@ var RangeSelector = /** @class */ (function () {
             // 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 &&
+            var disable = (!allButtonsEnabled &&
                 (isTooGreatRange ||
                     isTooSmallRange ||
                     isAllButAlreadyShowingAll ||
                     hasNoData));
-            select = ((isSelected && isSameRange) ||
+            var select = ((isSelected && isSameRange) ||
                 (isSameRange && !selectedExists && !isYTDButNotSelected) ||
                 (isSelected && rangeSelector.frozenStates));
             if (disable) {
@@ -1044,10 +572,10 @@ var RangeSelector = /** @class */ (function () {
          * @private
          */
         function updateExtremes() {
-            var value = rangeSelector.getInputValue(name), chartAxis = chart.xAxis[0], dataAxis = chart.scroller && chart.scroller.xAxis ?
+            var maxInput = rangeSelector.maxInput, minInput = rangeSelector.minInput, 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;
+            var value = rangeSelector.getInputValue(name);
             if (value !== Number(input.getAttribute('data-hc-time-previous')) &&
                 isNumber(value)) {
                 input.setAttribute('data-hc-time-previous', value);
@@ -1209,11 +737,9 @@ var RangeSelector = /** @class */ (function () {
      * 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 ?
+        var time = this.chart.time, 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();
+            +new time.Date(year, 0, 1), min = Math.max(dataMin, startOfYear), ts = now.getTime();
         return {
             max: Math.min(dataMax || ts, ts),
             min: min
@@ -1378,8 +904,8 @@ var RangeSelector = /** @class */ (function () {
             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;
+                var buttonEvents = (rangeOptions.events && rangeOptions.events.click);
+                var callDefaultEvent;
                 if (buttonEvents) {
                     callDefaultEvent =
                         buttonEvents.call(rangeOptions, e);
@@ -1586,7 +1112,7 @@ var RangeSelector = /** @class */ (function () {
             buttonLeft += buttonPosition.x +
                 zoomText.getBBox().width + 5;
         }
-        this.buttonOptions.forEach(function (rangeOptions, i) {
+        for (var i = 0, iEnd = this.buttonOptions.length; i < iEnd; ++i) {
             if (buttons[i].visibility !== 'hidden') {
                 buttons[i][verb]({ x: buttonLeft });
                 // increase button position for the next button
@@ -1595,7 +1121,7 @@ var RangeSelector = /** @class */ (function () {
             else {
                 buttons[i][verb]({ x: plotLeft });
             }
-        });
+        }
     };
     /**
      * Handle collision between the button group and the input group
@@ -1824,7 +1350,8 @@ var RangeSelector = /** @class */ (function () {
      * 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;
+        var rangeSelector = this, options = rangeSelector.options, rangeSelectorGroup = rangeSelector.group, inputPosition = options.inputPosition, buttonPosition = options.buttonPosition, yPosition = options.y, buttonPositionY = buttonPosition.y, inputPositionY = inputPosition.y;
+        var rangeSelectorHeight = 0;
         if (options.height) {
             return options.height;
         }
@@ -1836,7 +1363,7 @@ var RangeSelector = /** @class */ (function () {
             (rangeSelectorGroup.getBBox(true).height) + 13 +
                 yPosition :
             0;
-        minPosition = Math.min(inputPositionY, buttonPositionY);
+        var minPosition = Math.min(inputPositionY, buttonPositionY);
         if ((inputPositionY < 0 && buttonPositionY < 0) ||
             (inputPositionY > 0 && buttonPositionY > 0)) {
             rangeSelectorHeight += Math.abs(minPosition);
@@ -1909,278 +1436,87 @@ var RangeSelector = /** @class */ (function () {
     };
     return RangeSelector;
 }());
+extend(RangeSelector.prototype, {
+    /**
+     * The default buttons for pre-selecting time frames.
+     * @private
+     */
+    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.
+     * @private
+     */
+    inputTypeFormats: {
+        'datetime-local': '%Y-%m-%dT%H:%M:%S',
+        'date': '%Y-%m-%d',
+        'time': '%H:%M:%S'
+    }
+});
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default RangeSelector;
+/* *
+ *
+ *  API Options
+ *
+ * */
 /**
- * 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
+ * Define the time span for the button
+ *
+ * @typedef {"all"|"day"|"hour"|"millisecond"|"minute"|"month"|"second"|"week"|"year"|"ytd"} Highcharts.RangeSelectorButtonTypeValue
  */
-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.
+ * Callback function to react on button clicks.
  *
- * @private
- * @function preferredInputType
+ * @callback Highcharts.RangeSelectorClickCallbackFunction
+ *
+ * @param {global.Event} e
+ *        Event arguments.
+ *
+ * @param {boolean|undefined}
+ *        Return false to cancel the default button event.
  */
-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.
+ * Callback function to parse values entered in the input boxes and return a
+ * valid JavaScript time as milliseconds since 1970.
  *
- * @private
- * @function Highcharts.Axis#minFromRange
- * @return {number|undefined}
- *         The new minimum value.
+ * @callback Highcharts.RangeSelectorParseCallbackFunction
+ *
+ * @param {string} value
+ *        Input value to parse.
+ *
+ * @return {number}
+ *         Parsed JavaScript time 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 if (rangeOptions) {
-        min = max + getTrueRange(max, -(rangeOptions.count || 1));
-        // 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, pick(this.dataMax, Number.MAX_VALUE));
-    }
-    if (!isNumber(max)) {
-        min = void 0;
-    }
-    else if (!isNumber(rangeOptions) &&
-        rangeOptions &&
-        rangeOptions._offsetMin) {
-        min += rangeOptions._offsetMin;
-    }
-    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;
+(''); // keeps doclets above in JS file