highcharts 10.0.0 → 10.2.1

package/es-modules/Extensions/Annotations/Popup.js

@@ -1,1123 +0,0 @@
-/* *
- *
- *  Popup generator for Stock tools
- *
- *  (c) 2009-2021 Sebastian Bochan
- *
- *  License: www.highcharts.com/license
- *
- *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
- *
- * */
-import AST from '../../Core/Renderer/HTML/AST.js';
-import H from '../../Core/Globals.js';
-var doc = H.doc, isFirefox = H.isFirefox;
-import NavigationBindings from './NavigationBindings.js';
-import D from '../../Core/DefaultOptions.js';
-var getOptions = D.getOptions;
-import Pointer from '../../Core/Pointer.js';
-import U from '../../Core/Utilities.js';
-var addEvent = U.addEvent, createElement = U.createElement, defined = U.defined, fireEvent = U.fireEvent, isArray = U.isArray, isObject = U.isObject, objectEach = U.objectEach, pick = U.pick, stableSort = U.stableSort, wrap = U.wrap;
-var indexFilter = /\d/g, PREFIX = 'highcharts-', A = 'a', DIV = 'div', INPUT = 'input', LABEL = 'label', BUTTON = 'button', SELECT = 'select', OPTION = 'option', SPAN = 'span', UL = 'ul', LI = 'li', H3 = 'h3';
-/**
- * Enum for properties which should have dropdown list.
- * @private
- */
-var DropdownProperties;
-(function (DropdownProperties) {
-    DropdownProperties[DropdownProperties["params.algorithm"] = 0] = "params.algorithm";
-    DropdownProperties[DropdownProperties["params.average"] = 1] = "params.average";
-})(DropdownProperties || (DropdownProperties = {}));
-/**
- * List of available algorithms for the specific indicator.
- * @private
- */
-var dropdownParameters = {
-    'algorithm-pivotpoints': ['standard', 'fibonacci', 'camarilla'],
-    'average-disparityindex': ['sma', 'ema', 'dema', 'tema', 'wma']
-};
-/* eslint-disable no-invalid-this, valid-jsdoc */
-// onContainerMouseDown blocks internal popup events, due to e.preventDefault.
-// Related issue #4606
-wrap(Pointer.prototype, 'onContainerMouseDown', function (proceed, e) {
-    // elements is not in popup
-    if (!this.inClass(e.target, PREFIX + 'popup')) {
-        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
-    }
-});
-H.Popup = function (parentDiv, iconsURL, chart) {
-    this.init(parentDiv, iconsURL, chart);
-};
-H.Popup.prototype = {
-    /**
-     * Initialize the popup. Create base div and add close button.
-     * @private
-     * @param {Highcharts.HTMLDOMElement} parentDiv
-     * Container where popup should be placed
-     * @param {string} iconsURL
-     * Icon URL
-     */
-    init: function (parentDiv, iconsURL, chart) {
-        this.chart = chart;
-        // create popup div
-        this.container = createElement(DIV, {
-            className: PREFIX + 'popup highcharts-no-tooltip'
-        }, void 0, parentDiv);
-        addEvent(this.container, 'mousedown', function () {
-            var activeAnnotation = chart &&
-                chart.navigationBindings &&
-                chart.navigationBindings.activeAnnotation;
-            if (activeAnnotation) {
-                activeAnnotation.cancelClick = true;
-                var unbind_1 = addEvent(H.doc, 'click', function () {
-                    setTimeout(function () {
-                        activeAnnotation.cancelClick = false;
-                    }, 0);
-                    unbind_1();
-                });
-            }
-        });
-        this.lang = this.getLangpack();
-        this.iconsURL = iconsURL;
-        // add close button
-        this.addCloseBtn();
-    },
-    /**
-     * Create HTML element and attach click event (close popup).
-     * @private
-     */
-    addCloseBtn: function () {
-        var _self = this, closeBtn;
-        var iconsURL = this.iconsURL;
-        // create close popup btn
-        closeBtn = createElement(DIV, {
-            className: PREFIX + 'popup-close'
-        }, void 0, this.container);
-        closeBtn.style['background-image'] = 'url(' +
-            (iconsURL.match(/png|svg|jpeg|jpg|gif/ig) ?
-                iconsURL : iconsURL + 'close.svg') + ')';
-        ['click', 'touchstart'].forEach(function (eventName) {
-            addEvent(closeBtn, eventName, function () {
-                if (_self.chart) {
-                    fireEvent(_self.chart.navigationBindings, 'closePopup');
-                }
-                else {
-                    _self.closePopup();
-                }
-            });
-        });
-    },
-    /**
-     * Create two columns (divs) in HTML.
-     * @private
-     * @param {Highcharts.HTMLDOMElement} container
-     * Container of columns
-     * @return {Highcharts.Dictionary<Highcharts.HTMLDOMElement>}
-     * Reference to two HTML columns (lhsCol, rhsCol)
-     */
-    addColsContainer: function (container) {
-        var rhsCol, lhsCol;
-        // left column
-        lhsCol = createElement(DIV, {
-            className: PREFIX + 'popup-lhs-col'
-        }, void 0, container);
-        // right column
-        rhsCol = createElement(DIV, {
-            className: PREFIX + 'popup-rhs-col'
-        }, void 0, container);
-        // wrapper content
-        createElement(DIV, {
-            className: PREFIX + 'popup-rhs-col-wrapper'
-        }, void 0, rhsCol);
-        return {
-            lhsCol: lhsCol,
-            rhsCol: rhsCol
-        };
-    },
-    /**
-     * Create input with label.
-     *
-     * @private
-     *
-     * @param {string} option
-     *        Chain of fields i.e params.styles.fontSize separeted by the dot.
-     *
-     * @param {string} indicatorType
-     *        Type of the indicator i.e. sma, ema...
-     *
-     * @param {HTMLDOMElement} parentDiv
-     *        HTML parent element.
-     *
-     * @param {Highcharts.InputAttributes} inputAttributes
-     *        Attributes of the input.
-     *
-     * @return {HTMLInputElement}
-     *         Return created input element.
-     */
-    addInput: function (option, indicatorType, parentDiv, inputAttributes) {
-        var optionParamList = option.split('.'), optionName = optionParamList[optionParamList.length - 1], lang = this.lang, inputName = PREFIX + indicatorType + '-' + pick(inputAttributes.htmlFor, optionName);
-        var input;
-        if (!inputName.match(indexFilter)) {
-            // add label
-            createElement(LABEL, {
-                htmlFor: inputName,
-                className: inputAttributes.labelClassName
-            }, void 0, parentDiv).appendChild(doc.createTextNode(lang[optionName] || optionName));
-        }
-        // add input
-        input = createElement(INPUT, {
-            name: inputName,
-            value: inputAttributes.value,
-            type: inputAttributes.type,
-            className: PREFIX + 'popup-field'
-        }, void 0, parentDiv);
-        input.setAttribute(PREFIX + 'data-name', option);
-        return input;
-    },
-    /**
-     * Create button.
-     * @private
-     * @param {Highcharts.HTMLDOMElement} parentDiv
-     * Container where elements should be added
-     * @param {string} label
-     * Text placed as button label
-     * @param {string} type
-     * add | edit | remove
-     * @param {Function} callback
-     * On click callback
-     * @param {Highcharts.HTMLDOMElement} fieldsDiv
-     * Container where inputs are generated
-     * @return {Highcharts.HTMLDOMElement}
-     * HTML button
-     */
-    addButton: function (parentDiv, label, type, fieldsDiv, callback) {
-        var _self = this, closePopup = this.closePopup, getFields = this.getFields, button;
-        button = createElement(BUTTON, void 0, void 0, parentDiv);
-        button.appendChild(doc.createTextNode(label));
-        if (callback) {
-            ['click', 'touchstart'].forEach(function (eventName) {
-                addEvent(button, eventName, function () {
-                    closePopup.call(_self);
-                    return callback(getFields(fieldsDiv, type));
-                });
-            });
-        }
-        return button;
-    },
-    /**
-     * Get values from all inputs and selections then create JSON.
-     *
-     * @private
-     *
-     * @param {Highcharts.HTMLDOMElement} parentDiv
-     * The container where inputs and selections are created.
-     *
-     * @param {string} type
-     * Type of the popup bookmark (add|edit|remove).
-     */
-    getFields: function (parentDiv, type) {
-        var inputList = Array.prototype.slice.call(parentDiv.querySelectorAll(INPUT)), selectList = Array.prototype.slice.call(parentDiv.querySelectorAll(SELECT)), optionSeries = '#' + PREFIX + 'select-series > option:checked', optionVolume = '#' + PREFIX + 'select-volume > option:checked', linkedTo = parentDiv.querySelectorAll(optionSeries)[0], volumeTo = parentDiv.querySelectorAll(optionVolume)[0];
-        var fieldsOutput;
-        fieldsOutput = {
-            actionType: type,
-            linkedTo: linkedTo && linkedTo.getAttribute('value') || '',
-            fields: {}
-        };
-        inputList.forEach(function (input) {
-            var param = input.getAttribute(PREFIX + 'data-name'), seriesId = input.getAttribute(PREFIX + 'data-series-id');
-            // params
-            if (seriesId) {
-                fieldsOutput.seriesId = input.value;
-            }
-            else if (param) {
-                fieldsOutput.fields[param] = input.value;
-            }
-            else {
-                // type like sma / ema
-                fieldsOutput.type = input.value;
-            }
-        });
-        selectList.forEach(function (select) {
-            var id = select.id;
-            // Get inputs only for the parameters, not for series and volume.
-            if (id !== PREFIX + 'select-series' &&
-                id !== PREFIX + 'select-volume') {
-                var parameter = id.split('highcharts-select-')[1];
-                fieldsOutput.fields[parameter] = select.value;
-            }
-        });
-        if (volumeTo) {
-            fieldsOutput.fields['params.volumeSeriesID'] = volumeTo
-                .getAttribute('value') || '';
-        }
-        return fieldsOutput;
-    },
-    /**
-     * Reset content of the current popup and show.
-     * @private
-     */
-    showPopup: function () {
-        var popupDiv = this.container, toolbarClass = PREFIX + 'annotation-toolbar', popupCloseBtn = popupDiv
-            .querySelectorAll('.' + PREFIX + 'popup-close')[0];
-        this.formType = void 0;
-        // reset content
-        popupDiv.innerHTML = AST.emptyHTML;
-        // reset toolbar styles if exists
-        if (popupDiv.className.indexOf(toolbarClass) >= 0) {
-            popupDiv.classList.remove(toolbarClass);
-            // reset toolbar inline styles
-            popupDiv.removeAttribute('style');
-        }
-        // add close button
-        popupDiv.appendChild(popupCloseBtn);
-        popupDiv.style.display = 'block';
-        popupDiv.style.height = '';
-    },
-    /**
-     * Hide popup.
-     * @private
-     */
-    closePopup: function () {
-        var container = pick(this.popup && this.popup.container, this.container);
-        container.style.display = 'none';
-    },
-    /**
-     * Create content and show popup.
-     * @private
-     * @param {string} - type of popup i.e indicators
-     * @param {Highcharts.Chart} - chart
-     * @param {Highcharts.AnnotationsOptions} - options
-     * @param {Function} - on click callback
-     */
-    showForm: function (type, chart, options, callback) {
-        if (!chart) {
-            return;
-        }
-        this.popup = chart.navigationBindings.popup;
-        // show blank popup
-        this.showPopup();
-        // indicator form
-        if (type === 'indicators') {
-            this.indicators.addForm.call(this, chart, options, callback);
-        }
-        // annotation small toolbar
-        if (type === 'annotation-toolbar') {
-            this.annotations.addToolbar.call(this, chart, options, callback);
-        }
-        // annotation edit form
-        if (type === 'annotation-edit') {
-            this.annotations.addForm.call(this, chart, options, callback);
-        }
-        // flags form - add / edit
-        if (type === 'flag') {
-            this.annotations.addForm.call(this, chart, options, callback, true);
-        }
-        this.formType = type;
-        // Explicit height is needed to make inner elements scrollable
-        this.container.style.height = this.container.offsetHeight + 'px';
-    },
-    /**
-     * Return lang definitions for popup.
-     * @private
-     * @return {Highcharts.Dictionary<string>} - elements translations.
-     */
-    getLangpack: function () {
-        return getOptions().lang.navigation.popup;
-    },
-    annotations: {
-        /**
-         * Create annotation simple form. It contains two buttons
-         * (edit / remove) and text label.
-         * @private
-         * @param {Highcharts.Chart} - chart
-         * @param {Highcharts.AnnotationsOptions} - options
-         * @param {Function} - on click callback
-         */
-        addToolbar: function (chart, options, callback) {
-            var _self = this, lang = this.lang, popupDiv = this.popup.container, showForm = this.showForm, toolbarClass = PREFIX + 'annotation-toolbar', button;
-            // set small size
-            if (popupDiv.className.indexOf(toolbarClass) === -1) {
-                popupDiv.className += ' ' + toolbarClass;
-            }
-            // set position
-            if (chart) {
-                popupDiv.style.top = chart.plotTop + 10 + 'px';
-            }
-            // create label
-            createElement(SPAN, void 0, void 0, popupDiv).appendChild(doc.createTextNode(pick(
-            // Advanced annotations:
-            lang[options.langKey] || options.langKey, 
-            // Basic shapes:
-            options.shapes && options.shapes[0].type)));
-            // add buttons
-            button = this.addButton(popupDiv, lang.removeButton || 'remove', 'remove', popupDiv, callback);
-            button.className += ' ' + PREFIX + 'annotation-remove-button';
-            button.style['background-image'] = 'url(' +
-                this.iconsURL + 'destroy.svg)';
-            button = this.addButton(popupDiv, lang.editButton || 'edit', 'edit', popupDiv, function () {
-                showForm.call(_self, 'annotation-edit', chart, options, callback);
-            });
-            button.className += ' ' + PREFIX + 'annotation-edit-button';
-            button.style['background-image'] = 'url(' +
-                this.iconsURL + 'edit.svg)';
-        },
-        /**
-         * Create annotation simple form.
-         * It contains fields with param names.
-         * @private
-         * @param {Highcharts.Chart} chart
-         * Chart
-         * @param {Object} options
-         * Options
-         * @param {Function} callback
-         * On click callback
-         * @param {boolean} [isInit]
-         * If it is a form declared for init annotation
-         */
-        addForm: function (chart, options, callback, isInit) {
-            var popupDiv = this.popup.container, lang = this.lang, bottomRow, lhsCol;
-            if (!chart) {
-                return;
-            }
-            // create title of annotations
-            lhsCol = createElement('h2', {
-                className: PREFIX + 'popup-main-title'
-            }, void 0, popupDiv);
-            lhsCol.appendChild(doc.createTextNode(lang[options.langKey] || options.langKey || ''));
-            // left column
-            lhsCol = createElement(DIV, {
-                className: (PREFIX + 'popup-lhs-col ' + PREFIX + 'popup-lhs-full')
-            }, void 0, popupDiv);
-            bottomRow = createElement(DIV, {
-                className: PREFIX + 'popup-bottom-row'
-            }, void 0, popupDiv);
-            this.annotations.addFormFields.call(this, lhsCol, chart, '', options, [], true);
-            this.addButton(bottomRow, isInit ?
-                (lang.addButton || 'add') :
-                (lang.saveButton || 'save'), isInit ? 'add' : 'save', popupDiv, callback);
-        },
-        /**
-         * Create annotation's form fields.
-         * @private
-         * @param {Highcharts.HTMLDOMElement} parentDiv
-         * Div where inputs are placed
-         * @param {Highcharts.Chart} chart
-         * Chart
-         * @param {string} parentNode
-         * Name of parent to create chain of names
-         * @param {Highcharts.AnnotationsOptions} options
-         * Options
-         * @param {Array<unknown>} storage
-         * Array where all items are stored
-         * @param {boolean} [isRoot]
-         * Recursive flag for root
-         */
-        addFormFields: function (parentDiv, chart, parentNode, options, storage, isRoot) {
-            var _self = this, addFormFields = this.annotations.addFormFields, addInput = this.addInput, lang = this.lang, parentFullName, titleName;
-            if (!chart) {
-                return;
-            }
-            objectEach(options, function (value, option) {
-                // create name like params.styles.fontSize
-                parentFullName = parentNode !== '' ?
-                    parentNode + '.' + option : option;
-                if (isObject(value)) {
-                    if (
-                    // value is object of options
-                    !isArray(value) ||
-                        // array of objects with params. i.e labels in Fibonacci
-                        (isArray(value) && isObject(value[0]))) {
-                        titleName = lang[option] || option;
-                        if (!titleName.match(indexFilter)) {
-                            storage.push([
-                                true,
-                                titleName,
-                                parentDiv
-                            ]);
-                        }
-                        addFormFields.call(_self, parentDiv, chart, parentFullName, value, storage, false);
-                    }
-                    else {
-                        storage.push([
-                            _self,
-                            parentFullName,
-                            'annotation',
-                            parentDiv,
-                            value
-                        ]);
-                    }
-                }
-            });
-            if (isRoot) {
-                stableSort(storage, function (a) {
-                    return a[1].match(/format/g) ? -1 : 1;
-                });
-                if (isFirefox) {
-                    storage.reverse(); // (#14691)
-                }
-                storage.forEach(function (genInput) {
-                    if (genInput[0] === true) {
-                        createElement(SPAN, {
-                            className: PREFIX + 'annotation-title'
-                        }, void 0, genInput[2]).appendChild(doc.createTextNode(genInput[1]));
-                    }
-                    else {
-                        genInput[4] = {
-                            value: genInput[4][0],
-                            type: genInput[4][1]
-                        };
-                        addInput.apply(genInput[0], genInput.splice(1));
-                    }
-                });
-            }
-        }
-    },
-    indicators: {
-        /**
-         * Create indicator's form. It contains two tabs (ADD and EDIT) with
-         * content.
-         * @private
-         */
-        addForm: function (chart, _options, callback) {
-            var tabsContainers, indicators = this.indicators, lang = this.lang, buttonParentDiv;
-            if (!chart) {
-                return;
-            }
-            // add tabs
-            this.tabs.init.call(this, chart);
-            // get all tabs content divs
-            tabsContainers = this.popup.container
-                .querySelectorAll('.' + PREFIX + 'tab-item-content');
-            // ADD tab
-            this.addColsContainer(tabsContainers[0]);
-            indicators.addSearchBox.call(this, chart, tabsContainers[0]);
-            indicators.addIndicatorList.call(this, chart, tabsContainers[0], 'add');
-            buttonParentDiv = tabsContainers[0]
-                .querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0];
-            this.addButton(buttonParentDiv, lang.addButton || 'add', 'add', buttonParentDiv, callback);
-            // EDIT tab
-            this.addColsContainer(tabsContainers[1]);
-            indicators.addIndicatorList.call(this, chart, tabsContainers[1], 'edit');
-            buttonParentDiv = tabsContainers[1]
-                .querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0];
-            this.addButton(buttonParentDiv, lang.saveButton || 'save', 'edit', buttonParentDiv, callback);
-            this.addButton(buttonParentDiv, lang.removeButton || 'remove', 'remove', buttonParentDiv, callback);
-        },
-        /**
-         * Filter object of series which are not indicators.
-         * If the filter string exists, check against it.
-         *
-         * @private
-         *
-         * @param {Highcharts.FilteredSeries} series
-         *        All series are available in the plotOptions.
-         *
-         * @param {string|undefined} filter
-         *        Applied filter string from the input.
-         *        For the first iteration, it's an empty string.
-         *
-         * @return {Array<Highcharts.FilteredSeries>} filteredSeriesArray
-         *         Returns array of filtered series based on filter string.
-         */
-        filterSeries: function (series, filter) {
-            var popup = this, indicators = popup.indicators, lang = popup.chart && popup.chart.options.lang, indicatorAliases = lang &&
-                lang.navigation &&
-                lang.navigation.popup &&
-                lang.navigation.popup.indicatorAliases;
-            var filteredSeriesArray = [], filteredSeries;
-            objectEach(series, function (series, value) {
-                var seriesOptions = series.options;
-                // Allow only indicators.
-                if (series.params || seriesOptions &&
-                    seriesOptions.params) {
-                    var _a = indicators.getNameType(series, value), indicatorFullName = _a.indicatorFullName, indicatorType = _a.indicatorType;
-                    if (filter) {
-                        // Replace invalid characters.
-                        var validFilter = filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-                        var regex = new RegExp(validFilter, 'i'), alias = indicatorAliases &&
-                            indicatorAliases[indicatorType] &&
-                            indicatorAliases[indicatorType].join(' ') || '';
-                        if (indicatorFullName.match(regex) ||
-                            alias.match(regex)) {
-                            filteredSeries = {
-                                indicatorFullName: indicatorFullName,
-                                indicatorType: indicatorType,
-                                series: series
-                            };
-                            filteredSeriesArray.push(filteredSeries);
-                        }
-                    }
-                    else {
-                        filteredSeries = {
-                            indicatorFullName: indicatorFullName,
-                            indicatorType: indicatorType,
-                            series: series
-                        };
-                        filteredSeriesArray.push(filteredSeries);
-                    }
-                }
-            });
-            return filteredSeriesArray;
-        },
-        /**
-         * Filter an array of series and map its names and types.
-         *
-         * @private
-         *
-         * @param {Highcharts.FilteredSeries} series
-         *        All series that are available in the plotOptions.
-         *
-         * @return {Array<Highcharts.FilteredSeries>} filteredSeriesArray
-         *         Returns array of filtered series based on filter string.
-         */
-        filterSeriesArray: function (series) {
-            var filteredSeriesArray = [], filteredSeries;
-            // Allow only indicators.
-            series.forEach(function (series) {
-                var seriesOptions = series.options;
-                if (series.is('sma')) {
-                    filteredSeries = {
-                        indicatorFullName: series.name,
-                        indicatorType: series.type,
-                        series: series
-                    };
-                    filteredSeriesArray.push(filteredSeries);
-                }
-            });
-            return filteredSeriesArray;
-        },
-        /**
-         * Create HTML list of all indicators (ADD mode) or added indicators
-         * (EDIT mode).
-         *
-         * @private
-         *
-         * @param {Highcharts.AnnotationChart} chart
-         *        The chart object.
-         *
-         * @param {string} [optionName]
-         *        Name of the option into which selection is being added.
-         *
-         * @param {HTMLDOMElement} [parentDiv]
-         *        HTML parent element.
-         *
-         * @param {string} listType
-         *        Type of list depending on the selected bookmark.
-         *        Might be 'add' or 'edit'.
-         *
-         * @param {string|undefined} filter
-         *        Applied filter string from the input.
-         *        For the first iteration, it's an empty string.
-         */
-        addIndicatorList: function (chart, parentDiv, listType, filter) {
-            var popup = this, indicators = popup.indicators, lang = popup.lang, lhsCol = parentDiv.querySelectorAll('.' + PREFIX + 'popup-lhs-col')[0], rhsCol = parentDiv.querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0], isEdit = listType === 'edit', addFormFields = this.indicators.addFormFields, series = (isEdit ?
-                chart.series : // EDIT mode
-                chart.options.plotOptions || {} // ADD mode
-            );
-            if (!chart && series) {
-                return;
-            }
-            var rhsColWrapper, indicatorList, item, filteredSeriesArray = [];
-            // Filter and sort the series.
-            if (!isEdit && !isArray(series)) {
-                // Apply filters only for the 'add' indicator list.
-                filteredSeriesArray = indicators.filterSeries.call(this, series, filter);
-            }
-            else if (isArray(series)) {
-                filteredSeriesArray = indicators.filterSeriesArray.call(this, series);
-            }
-            // Sort indicators alphabeticaly.
-            stableSort(filteredSeriesArray, function (a, b) {
-                var seriesAName = a.indicatorFullName.toLowerCase(), seriesBName = b.indicatorFullName.toLowerCase();
-                return (seriesAName < seriesBName) ?
-                    -1 : (seriesAName > seriesBName) ? 1 : 0;
-            });
-            // If the list exists remove it from the DOM
-            // in order to create a new one with different filters.
-            if (lhsCol.children[1]) {
-                lhsCol.children[1].remove();
-            }
-            // Create wrapper for list.
-            indicatorList = createElement(UL, {
-                className: PREFIX + 'indicator-list'
-            }, void 0, lhsCol);
-            rhsColWrapper = rhsCol.querySelectorAll('.' + PREFIX + 'popup-rhs-col-wrapper')[0];
-            filteredSeriesArray.forEach(function (seriesSet) {
-                var indicatorFullName = seriesSet.indicatorFullName, indicatorType = seriesSet.indicatorType, series = seriesSet.series;
-                item = createElement(LI, {
-                    className: PREFIX + 'indicator-list'
-                }, void 0, indicatorList);
-                item.appendChild(doc.createTextNode(indicatorFullName));
-                ['click', 'touchstart'].forEach(function (eventName) {
-                    addEvent(item, eventName, function () {
-                        var button = rhsColWrapper.parentNode
-                            .children[1];
-                        addFormFields.call(popup, chart, series, indicatorType, rhsColWrapper);
-                        if (button) {
-                            button.style.display = 'block';
-                        }
-                        // add hidden input with series.id
-                        if (isEdit && series.options) {
-                            createElement(INPUT, {
-                                type: 'hidden',
-                                name: PREFIX + 'id-' + indicatorType,
-                                value: series.options.id
-                            }, void 0, rhsColWrapper).setAttribute(PREFIX + 'data-series-id', series.options.id);
-                        }
-                    });
-                });
-            });
-            // select first item from the list
-            if (indicatorList.childNodes.length > 0) {
-                indicatorList.childNodes[0].click();
-            }
-            else if (!isEdit) {
-                AST.setElementHTML(rhsColWrapper.parentNode.children[0], lang.noFilterMatch || '');
-                rhsColWrapper.parentNode.children[1]
-                    .style.display = 'none';
-            }
-        },
-        /**
-         * Add searchbox HTML element and its' label.
-         *
-         * @private
-         *
-         * @param {Highcharts.AnnotationChart} chart
-         *        The chart object.
-         *
-         * @param {HTMLDOMElement} parentDiv
-         *        HTML parent element.
-         */
-        addSearchBox: function (chart, parentDiv) {
-            var popup = this, lhsCol = parentDiv.querySelectorAll('.' + PREFIX + 'popup-lhs-col')[0], options = 'searchIndicators', inputAttributes = {
-                value: '',
-                type: 'text',
-                htmlFor: 'search-indicators',
-                labelClassName: 'highcharts-input-search-indicators-label'
-            }, clearFilterText = this.lang.clearFilter, inputWrapper = createElement(DIV, {
-                className: 'highcharts-input-wrapper'
-            }, void 0, lhsCol);
-            var handleInputChange = function (inputText) {
-                // Apply some filters.
-                popup.indicators.addIndicatorList.call(popup, chart, popup.container, 'add', inputText);
-            };
-            // Add input field with the label and button.
-            var input = this.addInput(options, INPUT, inputWrapper, inputAttributes), button = createElement(A, {
-                textContent: clearFilterText
-            }, void 0, inputWrapper);
-            input.classList.add('highcharts-input-search-indicators');
-            button.classList.add('clear-filter-button');
-            // Add input change events.
-            addEvent(input, 'input', function (e) {
-                handleInputChange(this.value);
-                // Show clear filter button.
-                if (this.value.length) {
-                    button.style.display = 'inline-block';
-                }
-                else {
-                    button.style.display = 'none';
-                }
-            });
-            // Add clear filter click event.
-            ['click', 'touchstart'].forEach(function (eventName) {
-                addEvent(button, eventName, function () {
-                    // Clear the input.
-                    input.value = '';
-                    handleInputChange('');
-                    // Hide clear filter button- no longer nececary.
-                    button.style.display = 'none';
-                });
-            });
-        },
-        /**
-         * Add selection HTML element and its' label.
-         *
-         * @private
-         *
-         * @param {string} indicatorType
-         * Type of the indicator i.e. sma, ema...
-         *
-         * @param {string} [optionName]
-         * Name of the option into which selection is being added.
-         *
-         * @param {HTMLDOMElement} [parentDiv]
-         * HTML parent element.
-         */
-        addSelection: function (indicatorType, optionName, parentDiv) {
-            var optionParamList = optionName.split('.'), labelText = optionParamList[optionParamList.length - 1];
-            var selectName = PREFIX + optionName + '-type-' + indicatorType, lang = this.lang, selectBox;
-            // Add a label for the selection box.
-            createElement(LABEL, {
-                htmlFor: selectName
-            }, null, parentDiv).appendChild(doc.createTextNode(lang[labelText] || optionName));
-            // Create a selection box.
-            selectBox = createElement(SELECT, {
-                name: selectName,
-                className: PREFIX + 'popup-field',
-                id: PREFIX + 'select-' + optionName
-            }, null, parentDiv);
-            selectBox.setAttribute('id', PREFIX + 'select-' + optionName);
-            return selectBox;
-        },
-        /**
-         * Get and add selection options.
-         *
-         * @private
-         *
-         * @param {Highcharts.AnnotationChart} chart
-         *        The chart object.
-         *
-         * @param {string} [optionName]
-         *        Name of the option into which selection is being added.
-         *
-         * @param {HTMLSelectElement} [selectBox]
-         *        HTML select box element to which the options are being added.
-         *
-         * @param {string|undefined} indicatorType
-         *        Type of the indicator i.e. sma, ema...
-         *
-         * @param {string|undefined} parameterName
-         *        Name of the parameter which should be applied.
-         *
-         * @param {string|undefined} selectedOption
-         *        Default value in dropdown.
-         */
-        addSelectionOptions: function (chart, optionName, selectBox, indicatorType, parameterName, selectedOption, currentSeries) {
-            var popup = this;
-            // Get and apply selection options for the possible series.
-            if (optionName === 'series' || optionName === 'volume') {
-                // List all series which have id - mandatory for indicator.
-                chart.series.forEach(function (series) {
-                    var seriesOptions = series.options, seriesName = seriesOptions.name ||
-                        seriesOptions.params ?
-                        series.name :
-                        seriesOptions.id || '';
-                    if (seriesOptions.id !== PREFIX + 'navigator-series' &&
-                        seriesOptions.id !== (currentSeries &&
-                            currentSeries.options &&
-                            currentSeries.options.id)) {
-                        if (!defined(selectedOption) &&
-                            optionName === 'volume' &&
-                            series.type === 'column') {
-                            selectedOption = seriesOptions.id;
-                        }
-                        createElement(OPTION, {
-                            value: seriesOptions.id
-                        }, void 0, selectBox).appendChild(doc.createTextNode(seriesName));
-                    }
-                });
-            }
-            else if (indicatorType && parameterName) {
-                // Get and apply options for the possible parameters.
-                var dropdownKey = parameterName + '-' + indicatorType, parameterOption = dropdownParameters[dropdownKey];
-                parameterOption.forEach(function (element) {
-                    createElement(OPTION, {
-                        value: element
-                    }, void 0, selectBox).appendChild(doc.createTextNode(element));
-                });
-            }
-            // Add the default dropdown value if defined.
-            if (defined(selectedOption)) {
-                selectBox.value = selectedOption;
-            }
-        },
-        /**
-         * Extract full name and type of requested indicator.
-         *
-         * @private
-         *
-         * @param {Highcharts.Series} series
-         * Series which name is needed(EDITmode - defaultOptions.series,
-         * ADDmode - indicator series).
-         *
-         * @param {string} [indicatorType]
-         * Type of the indicator i.e. sma, ema...
-         *
-         * @return {Highcharts.Dictionary<string>}
-         * Full name and series type.
-         */
-        getNameType: function (series, indicatorType) {
-            var options = series.options, seriesTypes = H.seriesTypes;
-            // add mode
-            var seriesName = (seriesTypes[indicatorType] &&
-                seriesTypes[indicatorType].prototype.nameBase) ||
-                indicatorType.toUpperCase(), seriesType = indicatorType;
-            // edit
-            if (options && options.type) {
-                seriesType = series.options.type;
-                seriesName = series.name;
-            }
-            return {
-                indicatorFullName: seriesName,
-                indicatorType: seriesType
-            };
-        },
-        /**
-         * Create the selection box for the series,
-         * add options and apply the default one.
-         *
-         * @private
-         *
-         * @param {string} indicatorType
-         *        Type of the indicator i.e. sma, ema...
-         *
-         * @param {string} [optionName]
-         *        Name of the option into which selection is being added.
-         *
-         * @param {Highcharts.AnnotationChart} chart
-         *        The chart object.
-         *
-         * @param {HTMLDOMElement} [parentDiv]
-         *        HTML parent element.
-         *
-         * @param {string|undefined} selectedOption
-         *        Default value in dropdown.
-         */
-        listAllSeries: function (indicatorType, optionName, chart, parentDiv, currentSeries, selectedOption) {
-            var popup = this, indicators = popup.indicators;
-            // Won't work without the chart.
-            if (!chart) {
-                return;
-            }
-            // Add selection boxes.
-            var selectBox = indicators.addSelection.call(popup, indicatorType, optionName, parentDiv);
-            // Add possible dropdown options.
-            indicators.addSelectionOptions.call(popup, chart, optionName, selectBox, void 0, void 0, void 0, currentSeries);
-            // Add the default dropdown value if defined.
-            if (defined(selectedOption)) {
-                selectBox.value = selectedOption;
-            }
-        },
-        /**
-         * Create typical inputs for chosen indicator. Fields are extracted from
-         * defaultOptions (ADD mode) or current indicator (ADD mode). Two extra
-         * fields are added:
-         * - hidden input - contains indicator type (required for callback)
-         * - select - list of series which can be linked with indicator
-         * @private
-         * @param {Highcharts.Chart} chart
-         * Chart
-         * @param {Highcharts.Series} series
-         * Indicator
-         * @param {string} seriesType
-         * Indicator type like: sma, ema, etc.
-         * @param {Highcharts.HTMLDOMElement} rhsColWrapper
-         * Element where created HTML list is added
-         */
-        addFormFields: function (chart, series, seriesType, rhsColWrapper) {
-            var fields = series.params || series.options.params, getNameType = this.indicators.getNameType;
-            // reset current content
-            rhsColWrapper.innerHTML = AST.emptyHTML;
-            // create title (indicator name in the right column)
-            createElement(H3, {
-                className: PREFIX + 'indicator-title'
-            }, void 0, rhsColWrapper).appendChild(doc.createTextNode(getNameType(series, seriesType).indicatorFullName));
-            // input type
-            createElement(INPUT, {
-                type: 'hidden',
-                name: PREFIX + 'type-' + seriesType,
-                value: seriesType
-            }, void 0, rhsColWrapper);
-            // list all series with id
-            this.indicators.listAllSeries.call(this, seriesType, 'series', chart, rhsColWrapper, series, series.linkedParent && series.linkedParent.options.id);
-            if (fields.volumeSeriesID) {
-                this.indicators.listAllSeries.call(this, seriesType, 'volume', chart, rhsColWrapper, series, series.linkedParent && fields.volumeSeriesID);
-            }
-            // add param fields
-            this.indicators.addParamInputs.call(this, chart, 'params', fields, seriesType, rhsColWrapper);
-        },
-        /**
-         * Recurent function which lists all fields, from params object and
-         * create them as inputs. Each input has unique `data-name` attribute,
-         * which keeps chain of fields i.e params.styles.fontSize.
-         * @private
-         * @param {Highcharts.Chart} chart
-         * Chart
-         * @param {string} parentNode
-         * Name of parent to create chain of names
-         * @param {Highcharts.PopupFieldsDictionary<string>} fields
-         * Params which are based for input create
-         * @param {string} type
-         * Indicator type like: sma, ema, etc.
-         * @param {Highcharts.HTMLDOMElement} parentDiv
-         * Element where created HTML list is added
-         */
-        addParamInputs: function (chart, parentNode, fields, type, parentDiv) {
-            var popup = this, indicators = popup.indicators;
-            var addParamInputs = this.indicators.addParamInputs, addInput = this.addInput, parentFullName;
-            if (!chart) {
-                return;
-            }
-            objectEach(fields, function (value, fieldName) {
-                // create name like params.styles.fontSize
-                parentFullName = parentNode + '.' + fieldName;
-                if (defined(value) && // skip if field is unnecessary, #15362
-                    parentFullName) {
-                    if (isObject(value)) {
-                        // (15733) 'Periods' has an arrayed value. Label must be
-                        // created here.
-                        addInput.call(popup, parentFullName, type, parentDiv, {});
-                        addParamInputs.call(popup, chart, parentFullName, value, type, parentDiv);
-                    }
-                    // If the option is listed in dropdown enum,
-                    // add the selection box for it.
-                    if (parentFullName in DropdownProperties) {
-                        // Add selection boxes.
-                        var selectBox = indicators.addSelection.call(popup, type, parentFullName, parentDiv);
-                        // Add possible dropdown options.
-                        indicators.addSelectionOptions.call(popup, chart, parentNode, selectBox, type, fieldName, value);
-                    }
-                    else if (
-                    // Skip volume field which is created by addFormFields.
-                    parentFullName !== 'params.volumeSeriesID' &&
-                        !isArray(value) // Skip params declared in array.
-                    ) {
-                        addInput.call(popup, parentFullName, type, parentDiv, {
-                            value: value,
-                            type: 'text'
-                        } // all inputs are text type
-                        );
-                    }
-                }
-            });
-        },
-        /**
-         * Get amount of indicators added to chart.
-         * @private
-         * @return {number} - Amount of indicators
-         */
-        getAmount: function () {
-            var series = this.series, counter = 0;
-            series.forEach(function (serie) {
-                var seriesOptions = serie.options;
-                if (serie.params ||
-                    seriesOptions && seriesOptions.params) {
-                    counter++;
-                }
-            });
-            return counter;
-        }
-    },
-    tabs: {
-        /**
-         * Init tabs. Create tab menu items, tabs containers
-         * @private
-         * @param {Highcharts.Chart} chart
-         * Reference to current chart
-         */
-        init: function (chart) {
-            var tabs = this.tabs, indicatorsCount = this.indicators.getAmount.call(chart), firstTab; // run by default
-            if (!chart) {
-                return;
-            }
-            // create menu items
-            firstTab = tabs.addMenuItem.call(this, 'add');
-            tabs.addMenuItem.call(this, 'edit', indicatorsCount);
-            // create tabs containers
-            tabs.addContentItem.call(this, 'add');
-            tabs.addContentItem.call(this, 'edit');
-            tabs.switchTabs.call(this, indicatorsCount);
-            // activate first tab
-            tabs.selectTab.call(this, firstTab, 0);
-        },
-        /**
-         * Create tab menu item
-         * @private
-         * @param {string} tabName
-         * `add` or `edit`
-         * @param {number} [disableTab]
-         * Disable tab when 0
-         * @return {Highcharts.HTMLDOMElement}
-         * Created HTML tab-menu element
-         */
-        addMenuItem: function (tabName, disableTab) {
-            var popupDiv = this.popup.container, className = PREFIX + 'tab-item', lang = this.lang, menuItem;
-            if (disableTab === 0) {
-                className += ' ' + PREFIX + 'tab-disabled';
-            }
-            // tab 1
-            menuItem = createElement(SPAN, {
-                className: className
-            }, void 0, popupDiv);
-            menuItem.appendChild(doc.createTextNode(lang[tabName + 'Button'] || tabName));
-            menuItem.setAttribute(PREFIX + 'data-tab-type', tabName);
-            return menuItem;
-        },
-        /**
-         * Create tab content
-         * @private
-         * @return {HTMLDOMElement} - created HTML tab-content element
-         */
-        addContentItem: function () {
-            var popupDiv = this.popup.container;
-            return createElement(DIV, {
-                // #12100
-                className: PREFIX + 'tab-item-content ' +
-                    PREFIX + 'no-mousewheel'
-            }, void 0, popupDiv);
-        },
-        /**
-         * Add click event to each tab
-         * @private
-         * @param {number} disableTab
-         * Disable tab when 0
-         */
-        switchTabs: function (disableTab) {
-            var _self = this, popupDiv = this.popup.container, tabs = popupDiv.querySelectorAll('.' + PREFIX + 'tab-item'), dataParam;
-            tabs.forEach(function (tab, i) {
-                dataParam = tab.getAttribute(PREFIX + 'data-tab-type');
-                if (dataParam === 'edit' && disableTab === 0) {
-                    return;
-                }
-                ['click', 'touchstart'].forEach(function (eventName) {
-                    addEvent(tab, eventName, function () {
-                        // reset class on other elements
-                        _self.tabs.deselectAll.call(_self);
-                        _self.tabs.selectTab.call(_self, this, i);
-                    });
-                });
-            });
-        },
-        /**
-         * Set tab as visible
-         * @private
-         * @param {globals.Element} - current tab
-         * @param {number} - Index of tab in menu
-         */
-        selectTab: function (tab, index) {
-            var allTabs = this.popup.container
-                .querySelectorAll('.' + PREFIX + 'tab-item-content');
-            tab.className += ' ' + PREFIX + 'tab-item-active';
-            allTabs[index].className += ' ' + PREFIX + 'tab-item-show';
-        },
-        /**
-         * Set all tabs as invisible.
-         * @private
-         */
-        deselectAll: function () {
-            var popupDiv = this.popup.container, tabs = popupDiv
-                .querySelectorAll('.' + PREFIX + 'tab-item'), tabsContent = popupDiv
-                .querySelectorAll('.' + PREFIX + 'tab-item-content'), i;
-            for (i = 0; i < tabs.length; i++) {
-                tabs[i].classList.remove(PREFIX + 'tab-item-active');
-                tabsContent[i].classList.remove(PREFIX + 'tab-item-show');
-            }
-        }
-    }
-};
-addEvent(NavigationBindings, 'showPopup', function (config) {
-    if (!this.popup) {
-        // Add popup to main container
-        this.popup = new H.Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
-            (this.chart.options.stockTools &&
-                this.chart.options.stockTools.gui.iconsURL) ||
-            'https://code.highcharts.com/10.0.0/gfx/stock-icons/'), this.chart);
-    }
-    this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
-});
-addEvent(NavigationBindings, 'closePopup', function () {
-    if (this.popup) {
-        this.popup.closePopup();
-    }
-});
-export default H.Popup;