highcharts 9.2.2 → 9.3.3

package/modules/annotations.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v9.2.2 (2021-08-24)
+ * @license Highcharts JS v9.3.3 (2022-02-01)
  *
  * Annotations module
  *
@@ -49,7 +49,6 @@
          *
          * @private
          * @mixin
-         * @memberOf Annotation
          */
         var eventEmitterMixin = {
                 /**
@@ -293,8 +292,7 @@
          * @param {Highcharts.AnnotationControllable} target
          * @return {Highcharts.PositionObject}
          */
-        var extend = U.extend,
-            merge = U.merge,
+        var merge = U.merge,
             pick = U.pick;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
@@ -362,7 +360,6 @@
              * @param {boolean} visible
              * Visibility of the control point.
              *
-             * @return {void}
              */
             ControlPoint.prototype.setVisibility = function (visible) {
                 this.graphic.attr('visibility', visible ? 'visible' : 'hidden');
@@ -412,7 +409,6 @@
              * @param {Partial<Highcharts.AnnotationControlPointOptionsObject>} userOptions
              * New options for the control point.
              *
-             * @return {void}
              */
             ControlPoint.prototype.update = function (userOptions) {
                 var chart = this.chart,
@@ -967,7 +963,8 @@
              */
             getPointsOptions: function () {
                 var options = this.options;
-                return (options.points || (options.point && splat(options.point)));
+                return (options.points ||
+                    (options.point && splat(options.point)));
             },
             /**
              * Utility function for mapping item's options
@@ -1188,8 +1185,11 @@
              *
              * @param {number} dx translation for x coordinate
              * @param {number} dy translation for y coordinate
+             * @param {boolean|undefined} translateSecondPoint If the shape has two
+             * points attached to it, this option allows you to translate also
+             * the second point
              */
-            translateShape: function (dx, dy) {
+            translateShape: function (dx, dy, translateSecondPoint) {
                 var chart = this.annotation.chart, 
                     // Annotation.options
                     shapeOptions = this.annotation.userOptions, 
@@ -1197,11 +1197,16 @@
                     annotationIndex = chart.annotations.indexOf(this.annotation),
                     chartOptions = chart.options.annotations[annotationIndex];
                 this.translatePoint(dx, dy, 0);
+                if (translateSecondPoint) {
+                    this.translatePoint(dx, dy, 1);
+                }
                 // Options stored in:
                 // - chart (for exporting)
                 // - current config (for redraws)
-                chartOptions[this.collection][this.index].point = this.options.point;
-                shapeOptions[this.collection][this.index].point = this.options.point;
+                chartOptions[this.collection][this.index]
+                    .point = this.options.point;
+                shapeOptions[this.collection][this.index]
+                    .point = this.options.point;
             },
             /**
              * Rotate a controllable.
@@ -1419,13 +1424,13 @@
             fill = itemOptions.fill,
             color = defined(fill) && fill !== 'none' ?
                         fill :
-                        itemOptions.stroke,
-            setMarker = function (markerType) {
+                        itemOptions.stroke;
+                var setMarker = function (markerType) {
                         var markerId = itemOptions[markerType],
-            def,
-            predefinedMarker,
-            key,
-            marker;
+                    def,
+                    predefinedMarker,
+                    key,
+                    marker;
                     if (markerId) {
                         for (key in defs) { // eslint-disable-line guard-for-in
                             def = defs[key];
@@ -1440,13 +1445,13 @@
                         }
                         if (predefinedMarker) {
                             marker = item[markerType] = chart.renderer
-                                .addMarker((itemOptions.id || uniqueKey()) + '-' +
-                                markerId, merge(predefinedMarker, { color: color }));
+                                .addMarker((itemOptions.id || uniqueKey()) + '-' + markerId, merge(predefinedMarker, { color: color }));
                             item.attr(markerType, marker.getAttribute('id'));
                         }
                     }
                 };
-                ['markerStart', 'markerEnd'].forEach(setMarker);
+                ['markerStart', 'markerEnd']
+                    .forEach(setMarker);
             }
         };
         addEvent(Chart, 'afterGetContainer', function () {
@@ -1517,7 +1522,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.setMarkers = MarkerMixin.setItemMarkers;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -1581,7 +1586,8 @@
                     null;
             };
             ControllablePath.prototype.shouldBeDrawn = function () {
-                return (ControllableMixin.shouldBeDrawn.call(this) || Boolean(this.options.d));
+                return (ControllableMixin.shouldBeDrawn.call(this) ||
+                    Boolean(this.options.d));
             };
             ControllablePath.prototype.render = function (parent) {
                 var options = this.options,
@@ -1708,7 +1714,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -1818,7 +1824,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -1890,6 +1896,215 @@
 
         return ControllableCircle;
     });
+    _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableEllipse.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Core/Utilities.js']], function (ControllableMixin, ControllablePath, U) {
+        /* *
+         *
+         * Author: Pawel Lysy
+         *
+         *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+         *
+         * */
+        var merge = U.merge,
+            defined = U.defined;
+        /**
+         * A controllable ellipse class.
+         *
+         * @requires modules/annotations
+         *
+         * @private
+         * @class
+         * @name Highcharts.AnnotationControllableEllipse
+         *
+         * @param {Highcharts.Annotation} annotation an annotation instance
+         * @param {Highcharts.AnnotationsShapeOptions} options a shape's options
+         * @param {number} index of the Ellipse
+         */
+        var ControllableEllipse = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructor
+                 *
+                 * */
+                function ControllableEllipse(annotation, options, index) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.addControlPoints = ControllableMixin.addControlPoints;
+                this.anchor = ControllableMixin.anchor;
+                this.attr = ControllableMixin.attr;
+                this.attrsFromOptions = ControllableMixin.attrsFromOptions;
+                this.destroy = ControllableMixin.destroy;
+                this.getPointsOptions = ControllableMixin.getPointsOptions;
+                this.linkPoints = ControllableMixin.linkPoints;
+                this.point = ControllableMixin.point;
+                this.scale = ControllableMixin.scale;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
+                this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
+                this.transform = ControllableMixin.transform;
+                this.translatePoint = ControllableMixin.translatePoint;
+                this.transformPoint = ControllableMixin.transformPoint;
+                /**
+                 * @type 'ellipse'
+                 */
+                this.type = 'ellipse';
+                this.init(annotation, options, index);
+                this.collection = 'shapes';
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            ControllableEllipse.prototype.init = function (annotation, options, index) {
+                if (defined(options.yAxis)) {
+                    options.points.forEach(function (point) {
+                        point.yAxis = options.yAxis;
+                    });
+                }
+                if (defined(options.xAxis)) {
+                    options.points.forEach(function (point) {
+                        point.xAxis = options.xAxis;
+                    });
+                }
+                ControllableMixin.init.call(this, annotation, options, index);
+            };
+            /**
+             *
+             * Render the element
+             * @param parent parent SVG element.
+             */
+            ControllableEllipse.prototype.render = function (parent) {
+                this.graphic = this.annotation.chart.renderer.createElement('ellipse')
+                    .attr(this.attrsFromOptions(this.options))
+                    .add(parent);
+                ControllableMixin.render.call(this);
+            };
+            /**
+             * Translate the points.
+             * Mostly used to handle dragging of the ellipse.
+             */
+            ControllableEllipse.prototype.translate = function (dx, dy) {
+                ControllableMixin.translateShape.call(this, dx, dy, true);
+            };
+            /**
+             * Get the distance from the line to the point.
+             * @param point1 first point which is on the line
+             * @param point2 second point
+             * @param x0 point's x value from which you want to calculate the distance from
+             * @param y0 point's y value from which you want to calculate the distance from
+             */
+            ControllableEllipse.prototype.getDistanceFromLine = function (point1, point2, x0, y0) {
+                return Math.abs((point2.y - point1.y) * x0 - (point2.x - point1.x) * y0 +
+                    point2.x * point1.y - point2.y * point1.x) / Math.sqrt((point2.y - point1.y) * (point2.y - point1.y) +
+                    (point2.x - point1.x) * (point2.x - point1.x));
+            };
+            /**
+             * The fuction calculates the svg attributes of the ellipse, and returns all
+             * parameters neccessary to draw the ellipse.
+             * @param position absolute position of the first point in points array
+             * @param position2 absolute position of the second point in points array
+             */
+            ControllableEllipse.prototype.getAttrs = function (position, position2) {
+                var x1 = position.x,
+                    y1 = position.y,
+                    x2 = position2.x,
+                    y2 = position2.y,
+                    cx = (x1 + x2) / 2,
+                    cy = (y1 + y2) / 2,
+                    rx = Math.sqrt((x1 - x2) * (x1 - x2) / 4 + (y1 - y2) * (y1 - y2) / 4),
+                    tan = (y2 - y1) / (x2 - x1);
+                var angle = Math.atan(tan) * 180 / Math.PI;
+                if (cx < x1) {
+                    angle += 180;
+                }
+                var ry = this.getRY();
+                return { cx: cx, cy: cy, rx: rx, ry: ry, angle: angle };
+            };
+            /**
+             * Get the value of minor radius of the ellipse.
+             */
+            ControllableEllipse.prototype.getRY = function () {
+                var yAxis = this.getYAxis();
+                return defined(yAxis) ?
+                    Math.abs(yAxis.toPixels(this.options.ry) - yAxis.toPixels(0)) :
+                    this.options.ry;
+            };
+            /**
+             * get the yAxis object to which the ellipse is pinned.
+             */
+            ControllableEllipse.prototype.getYAxis = function () {
+                var yAxisIndex = this.options.yAxis;
+                return this.chart.yAxis[yAxisIndex];
+            };
+            /**
+             * Get the absolute coordinates of the MockPoint
+             * @param point MockPoint that is added through options
+             */
+            ControllableEllipse.prototype.getAbsolutePosition = function (point) {
+                return this.anchor(point).absolutePosition;
+            };
+            /**
+             *
+             * Redraw the element
+             * @param animation display an annimation
+             */
+            ControllableEllipse.prototype.redraw = function (animation) {
+                var position = this.getAbsolutePosition(this.points[0]),
+                    position2 = this.getAbsolutePosition(this.points[1]),
+                    attrs = this.getAttrs(position,
+                    position2);
+                if (position) {
+                    this.graphic[animation ? 'animate' : 'attr']({
+                        cx: attrs.cx,
+                        cy: attrs.cy,
+                        rx: attrs.rx,
+                        ry: attrs.ry,
+                        rotation: attrs.angle,
+                        rotationOriginX: attrs.cx,
+                        rotationOriginY: attrs.cy
+                    });
+                }
+                else {
+                    this.graphic.attr({
+                        x: 0,
+                        y: -9e9
+                    });
+                }
+                this.graphic.placed = Boolean(position);
+                ControllableMixin.redraw.call(this, animation);
+            };
+            /**
+             * Set the radius Y.
+             *
+             * @param {number} ry a radius in y direction to be set
+             */
+            ControllableEllipse.prototype.setYRadius = function (ry) {
+                this.options.ry = ry;
+                this.annotation.userOptions.shapes[0].ry = ry;
+                this.annotation.options.shapes[0].ry = ry;
+            };
+            /* *
+             *
+             *  Static Properties
+             *
+             * */
+            /**
+             * A map object which allows to map options attributes to element
+             * attributes.
+             *
+             * @name Highcharts.AnnotationControllableEllipse.attrsMap
+             * @type {Highcharts.Dictionary<string>}
+             */
+            ControllableEllipse.attrsMap = merge(ControllablePath.attrsMap, {
+                ry: 'ry'
+            });
+            return ControllableEllipse;
+        }());
+
+        return ControllableEllipse;
+    });
     _registerModule(_modules, 'Extensions/Annotations/Controllables/ControllableLabel.js', [_modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Core/FormatUtilities.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Renderer/SVG/SVGRenderer.js'], _modules['Core/Tooltip.js'], _modules['Core/Utilities.js']], function (ControllableMixin, F, MockPoint, SVGRenderer, Tooltip, U) {
         /* *
          *
@@ -1945,7 +2160,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -2178,10 +2393,6 @@
             };
             /**
              * Returns the label position relative to its anchor.
-             *
-             * @param {Highcharts.AnnotationAnchorObject} anchor
-             *
-             * @return {Highcharts.PositionObject|null}
              */
             ControllableLabel.prototype.position = function (anchor) {
                 var item = this.graphic,
@@ -2210,7 +2421,8 @@
                             plotY: anchorRelativePosition.y,
                             negative: point.negative,
                             ttBelow: point.ttBelow,
-                            h: (anchorRelativePosition.height || anchorRelativePosition.width)
+                            h: (anchorRelativePosition.height ||
+                                anchorRelativePosition.width)
                         });
                     }
                     else if (itemOptions.positioner) {
@@ -2358,7 +2570,7 @@
                 this.point = ControllableMixin.point;
                 this.rotate = ControllableMixin.rotate;
                 this.scale = ControllableMixin.scale;
-                this.setControlPointsVisibility = ControllableMixin.setControlPointsVisibility;
+                this.setControlPointsVisibility = (ControllableMixin.setControlPointsVisibility);
                 this.shouldBeDrawn = ControllableMixin.shouldBeDrawn;
                 this.transform = ControllableMixin.transform;
                 this.transformPoint = ControllableMixin.transformPoint;
@@ -2424,7 +2636,7 @@
 
         return ControllableImage;
     });
-    _registerModule(_modules, 'Extensions/Annotations/Annotations.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Chart/Chart.js'], _modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllableRect.js'], _modules['Extensions/Annotations/Controllables/ControllableCircle.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Extensions/Annotations/Controllables/ControllableImage.js'], _modules['Extensions/Annotations/Controllables/ControllableLabel.js'], _modules['Extensions/Annotations/ControlPoint.js'], _modules['Extensions/Annotations/Mixins/EventEmitterMixin.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js'], _modules['Core/Color/Palette.js']], function (A, Chart, ControllableMixin, ControllableRect, ControllableCircle, ControllablePath, ControllableImage, ControllableLabel, ControlPoint, EventEmitterMixin, H, MockPoint, Pointer, U, palette) {
+    _registerModule(_modules, 'Extensions/Annotations/Annotations.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Chart/Chart.js'], _modules['Extensions/Annotations/Mixins/ControllableMixin.js'], _modules['Extensions/Annotations/Controllables/ControllableRect.js'], _modules['Extensions/Annotations/Controllables/ControllableCircle.js'], _modules['Extensions/Annotations/Controllables/ControllableEllipse.js'], _modules['Extensions/Annotations/Controllables/ControllablePath.js'], _modules['Extensions/Annotations/Controllables/ControllableImage.js'], _modules['Extensions/Annotations/Controllables/ControllableLabel.js'], _modules['Extensions/Annotations/ControlPoint.js'], _modules['Extensions/Annotations/Mixins/EventEmitterMixin.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/MockPoint.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js']], function (A, Chart, ControllableMixin, ControllableRect, ControllableCircle, ControllableEllipse, ControllablePath, ControllableImage, ControllableLabel, ControlPoint, EventEmitterMixin, H, MockPoint, Pointer, U) {
         /* *
          *
          *  (c) 2009-2021 Highsoft, Black Label
@@ -2646,7 +2858,10 @@
             };
             Annotation.prototype.addClipPaths = function () {
                 this.setClipAxes();
-                if (this.clipXAxis && this.clipYAxis) {
+                if (this.clipXAxis &&
+                    this.clipYAxis &&
+                    this.options.crop // #15399
+                ) {
                     this.clipRect = this.chart.renderer.clipRect(this.getClipBox());
                 }
             };
@@ -2748,8 +2963,10 @@
                     .add();
                 this.shapesGroup = renderer
                     .g('annotation-shapes')
-                    .add(this.graphic)
-                    .clip(this.chart.plotBoxClip);
+                    .add(this.graphic);
+                if (this.options.crop) { // #15399
+                    this.shapesGroup.clip(this.chart.plotBoxClip);
+                }
                 this.labelsGroup = renderer
                     .g('annotation-labels')
                     .attr({
@@ -2835,7 +3052,6 @@
              * @param {Partial<Highcharts.AnnotationsOptions>} userOptions
              * New user options for the annotation.
              *
-             * @return {void}
              */
             Annotation.prototype.update = function (userOptions, redraw) {
                 var chart = this.chart,
@@ -2865,7 +3081,11 @@
             /**
              * Initialisation of a single shape
              * @private
-             * @param {Object} shapeOptions - a confg object for a single shape
+             * @param {Object} shapeOptions
+             * a confg object for a single shape
+             * @param {number} index
+             * annotation may have many shapes, this is the shape's index saved in
+             * shapes.index.
              */
             Annotation.prototype.initShape = function (shapeOptions, index) {
                 var options = merge(this.options.shapeOptions, {
@@ -2971,6 +3191,7 @@
             Annotation.shapesMap = {
                 'rect': ControllableRect,
                 'circle': ControllableCircle,
+                'ellipse': ControllableEllipse,
                 'path': ControllablePath,
                 'image': ControllableImage
             };
@@ -3047,9 +3268,18 @@
                  *          Animation defer settings
                  * @type {boolean|Partial<Highcharts.AnimationOptionsObject>}
                  * @since 8.2.0
-                 * @apioption annotations.animation
                  */
                 animation: {},
+                /**
+                 * Whether to hide the part of the annotation
+                 * that is outside the plot area.
+                 *
+                 * @sample highcharts/annotations/label-crop-overflow/
+                 *         Crop line annotation
+                 * @type  {boolean}
+                 * @since 9.3.0
+                 */
+                crop: true,
                 /**
                  * The animation delay time in milliseconds.
                  * Set to `0` renders annotation immediately.
@@ -3114,7 +3344,7 @@
                      *
                      * @type {Highcharts.ColorString}
                      */
-                    borderColor: palette.neutralColor100,
+                    borderColor: "#000000" /* neutralColor100 */,
                     /**
                      * The border radius in pixels for the annotaiton's label.
                      *
@@ -3409,6 +3639,32 @@
                  * @requires  modules/annotations
                  */
                 shapeOptions: {
+                    /**
+                     *
+                     * The radius of the shape in y direction.
+                     * Used for the ellipse.
+                     *
+                     * @sample highcharts/annotations/ellipse/
+                     *         Ellipse annotation
+                     *
+                     * @type      {number}
+                     * @apioption annotations.shapeOptions.ry
+                     **/
+                    /**
+                     *
+                     * The xAxis index to which the points should be attached.
+                     * Used for the ellipse.
+                     *
+                     * @type      {number}
+                     * @apioption annotations.shapeOptions.xAxis
+                     **/
+                    /**
+                     * The yAxis index to which the points should be attached.
+                     * Used for the ellipse.
+                     *
+                     * @type      {number}
+                     * @apioption annotations.shapeOptions.yAxis
+                     **/
                     /**
                      * The width of the shape.
                      *
@@ -3428,11 +3684,15 @@
                      * @apioption annotations.shapeOptions.height
                      */
                     /**
-                     * The type of the shape, e.g. circle or rectangle.
+                     * The type of the shape.
+                     * Avaliable options are circle, rect and ellipse.
                      *
                      * @sample highcharts/annotations/shape/
                      *         Basic shape annotation
                      *
+                     * @sample highcharts/annotations/ellipse/
+                     *         Ellipse annotation
+                     *
                      * @type      {string}
                      * @default   rect
                      * @apioption annotations.shapeOptions.type
@@ -3514,9 +3774,10 @@
                     width: 10,
                     height: 10,
                     style: {
-                        stroke: palette.neutralColor100,
-                        'stroke-width': 2,
-                        fill: palette.backgroundColor
+                        cursor: 'pointer',
+                        fill: "#ffffff" /* backgroundColor */,
+                        stroke: "#000000" /* neutralColor100 */,
+                        'stroke-width': 2
                     },
                     visible: false,
                     events: {}
@@ -3567,7 +3828,8 @@
          ******************************************************************** */
         extend(chartProto, /** @lends Highcharts.Chart# */ {
             initAnnotation: function (userOptions) {
-                var Constructor = Annotation.types[userOptions.type] || Annotation,
+                var Constructor = Annotation
+                        .types[userOptions.type] || Annotation,
                     annotation = new Constructor(this,
                     userOptions);
                 this.annotations.push(annotation);
@@ -3579,7 +3841,8 @@
              * @param  {Highcharts.AnnotationsOptions} options
              *         The annotation options for the new, detailed annotation.
              * @param {boolean} [redraw]
-             *
+             * @sample highcharts/annotations/add-annotation/
+             *         Add annotation
              * @return {Highcharts.Annotation} - The newly generated annotation.
              */
             addAnnotation: function (userOptions, redraw) {
@@ -3601,7 +3864,7 @@
              */
             removeAnnotation: function (idOrAnnotation) {
                 var annotations = this.annotations,
-                    annotation = idOrAnnotation.coll === 'annotations' ?
+                    annotation = (idOrAnnotation.coll === 'annotations') ?
                         idOrAnnotation :
                         find(annotations,
                     function (annotation) {
@@ -3720,15 +3983,15 @@
                                     // Annotation placed on a exported data point
                                     // - add new column
                                     if (!wasAdded) {
-                                        event.dataRows.forEach(function (row, rowIndex) {
+                                        event.dataRows.forEach(function (row) {
                                             if (!wasAdded &&
                                                 row.xValues &&
                                                 xAxisIndex !== void 0 &&
                                                 annotationX === row.xValues[xAxisIndex]) {
                                                 if (joinAnnotations &&
                                                     row.length > startRowLength) {
-                                                    row[row.length - 1] +=
-                                                        annotationSeparator + annotationText_1;
+                                                    row[row.length - 1] += (annotationSeparator +
+                                                        annotationText_1);
                                                 }
                                                 else {
                                                     row.push(annotationText_1);
@@ -3846,7 +4109,7 @@
 
         return Annotation;
     });
-    _registerModule(_modules, 'Mixins/Navigation.js', [], function () {
+    _registerModule(_modules, 'Core/Chart/ChartNavigationComposition.js', [], function () {
         /**
          *
          *  (c) 2010-2021 Paweł Fus
@@ -3856,56 +4119,91 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var chartNavigation = {
-                /**
-                 * Initializes `chart.navigation` object which delegates `update()` methods
-                 * to all other common classes (used in exporting and navigationBindings).
-                 *
-                 * @private
-                 * @param {Highcharts.Chart} chart
-                 *        The chart instance.
-                 * @return {void}
-                 */
-                initUpdate: function (chart) {
-                    if (!chart.navigation) {
-                        chart.navigation = {
-                            updates: [],
-                            update: function (options,
-            redraw) {
-                                this.updates.forEach(function (updateConfig) {
-                                    updateConfig.update.call(updateConfig.context,
-            options,
-            redraw);
-                            });
-                        }
-                    };
-                }
-            },
-            /**
-             * Registers an `update()` method in the `chart.navigation` object.
+        /* *
+         *
+         *  Composition
+         *
+         * */
+        var ChartNavigationComposition;
+        (function (ChartNavigationComposition) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
              *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
              * @private
-             * @param {Highcharts.ChartNavigationUpdateFunction} update
-             *        The `update()` method that will be called in `chart.update()`.
-             * @param {Highcharts.Chart} chart
-             *        The chart instance. `update()` will use that as a context
-             *        (`this`).
-             * @return {void}
              */
-            addUpdate: function (update, chart) {
+            function compose(chart) {
                 if (!chart.navigation) {
-                    this.initUpdate(chart);
+                    chart.navigation = new Additions(chart);
                 }
-                chart.navigation.updates.push({
-                    update: update,
-                    context: chart
-                });
+                return chart;
             }
-        };
+            ChartNavigationComposition.compose = compose;
+            /* *
+             *
+             *  Class
+             *
+             * */
+            /**
+             * Initializes `chart.navigation` object which delegates `update()` methods
+             * to all other common classes (used in exporting and navigationBindings).
+             * @private
+             */
+            var Additions = /** @class */ (function () {
+                    /* *
+                     *
+                     *  Constructor
+                     *
+                     * */
+                    function Additions(chart) {
+                        this.updates = [];
+                    this.chart = chart;
+                }
+                /* *
+                 *
+                 *  Functions
+                 *
+                 * */
+                /**
+                 * Registers an `update()` method in the `chart.navigation` object.
+                 *
+                 * @private
+                 * @param {UpdateFunction} updateFn
+                 * The `update()` method that will be called in `chart.update()`.
+                 */
+                Additions.prototype.addUpdate = function (updateFn) {
+                    this.chart.navigation.updates.push(updateFn);
+                };
+                /**
+                 * @private
+                 */
+                Additions.prototype.update = function (options, redraw) {
+                    var _this = this;
+                    this.updates.forEach(function (updateFn) {
+                        updateFn.call(_this.chart, options, redraw);
+                    });
+                };
+                return Additions;
+            }());
+            ChartNavigationComposition.Additions = Additions;
+        })(ChartNavigationComposition || (ChartNavigationComposition = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return chartNavigation;
+        return ChartNavigationComposition;
     });
-    _registerModule(_modules, 'Extensions/Annotations/NavigationBindings.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Core/Chart/Chart.js'], _modules['Mixins/Navigation.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Utilities.js']], function (Annotation, Chart, chartNavigationMixin, F, H, D, U) {
+    _registerModule(_modules, 'Extensions/Annotations/NavigationBindings.js', [_modules['Extensions/Annotations/Annotations.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Chart/ChartNavigationComposition.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Utilities.js']], function (Annotation, Chart, ChartNavigationComposition, F, H, D, U) {
         /* *
          *
          *  (c) 2009-2021 Highsoft, Black Label
@@ -4053,8 +4351,9 @@
              */
             getAssignedAxis: function (coords) {
                 return coords.filter(function (coord) {
-                    var axisMin = coord.axis.min,
-                        axisMax = coord.axis.max, 
+                    var extremes = coord.axis.getExtremes(),
+                        axisMin = extremes.min,
+                        axisMax = extremes.max, 
                         // Correct axis edges when axis has series
                         // with pointRange (like column)
                         minPointOffset = pick(coord.axis.minPointOffset, 0);
@@ -4125,7 +4424,9 @@
                     navigation.eventsToUnbind.push(addEvent(subContainer, 'click', function (event) {
                         var bindings = navigation.getButtonEvents(subContainer,
                             event);
-                        if (bindings && bindings.button.className.indexOf('highcharts-disabled-btn') === -1) {
+                        if (bindings &&
+                            bindings.button.className
+                                .indexOf('highcharts-disabled-btn') === -1) {
                             navigation.bindingsButtonClick(bindings.button, bindings.events, event);
                         }
                     }));
@@ -4155,9 +4456,11 @@
              */
             NavigationBindings.prototype.initUpdate = function () {
                 var navigation = this;
-                chartNavigationMixin.addUpdate(function (options) {
+                ChartNavigationComposition
+                    .compose(this.chart).navigation
+                    .addUpdate(function (options) {
                     navigation.update(options);
-                }, this.chart);
+                });
             };
             /**
              * Hook for click on a button, method selcts/unselects buttons,
@@ -4169,7 +4472,7 @@
              * @param {Highcharts.HTMLDOMElement} [button]
              *        Clicked button
              *
-             * @param {object} events
+             * @param {Object} events
              *        Events passed down from bindings (`init`, `start`, `step`, `end`)
              *
              * @param {Highcharts.PointerEventObject} clickEvent
@@ -4177,8 +4480,13 @@
              */
             NavigationBindings.prototype.bindingsButtonClick = function (button, events, clickEvent) {
                 var navigation = this,
-                    chart = navigation.chart;
+                    chart = navigation.chart,
+                    svgContainer = chart.renderer.boxWrapper;
+                var shouldEventBeFired = true;
                 if (navigation.selectedButtonElement) {
+                    if (navigation.selectedButtonElement.classList === button.classList) {
+                        shouldEventBeFired = false;
+                    }
                     fireEvent(navigation, 'deselectButton', { button: navigation.selectedButtonElement });
                     if (navigation.nextEvent) {
                         // Remove in-progress annotations adders:
@@ -4189,15 +4497,24 @@
                         navigation.mouseMoveEvent = navigation.nextEvent = false;
                     }
                 }
-                navigation.selectedButton = events;
-                navigation.selectedButtonElement = button;
-                fireEvent(navigation, 'selectButton', { button: button });
-                // Call "init" event, for example to open modal window
-                if (events.init) {
-                    events.init.call(navigation, button, clickEvent);
+                if (shouldEventBeFired) {
+                    navigation.selectedButton = events;
+                    navigation.selectedButtonElement = button;
+                    fireEvent(navigation, 'selectButton', { button: button });
+                    // Call "init" event, for example to open modal window
+                    if (events.init) {
+                        events.init.call(navigation, button, clickEvent);
+                    }
+                    if (events.start || events.steps) {
+                        chart.renderer.boxWrapper.addClass(PREFIX + 'draw-mode');
+                    }
                 }
-                if (events.start || events.steps) {
-                    chart.renderer.boxWrapper.addClass(PREFIX + 'draw-mode');
+                else {
+                    chart.stockTools && chart.stockTools.toggleButtonAciveClass(button);
+                    svgContainer.removeClass(PREFIX + 'draw-mode');
+                    navigation.nextEvent = false;
+                    navigation.mouseMoveEvent = false;
+                    navigation.selectedButton = null;
                 }
             };
             /**
@@ -4268,8 +4585,7 @@
                         navigation.stepIndex++;
                         if (selectedButton.steps[navigation.stepIndex]) {
                             // If we have more steps, bind them one by one:
-                            navigation.mouseMoveEvent = navigation.nextEvent =
-                                selectedButton.steps[navigation.stepIndex];
+                            navigation.mouseMoveEvent = navigation.nextEvent = selectedButton.steps[navigation.stepIndex];
                         }
                         else {
                             fireEvent(navigation, 'deselectButton', { button: navigation.selectedButtonElement });
@@ -4403,10 +4719,10 @@
                  * @param {string} key
                  *        Option name, for example "visible" or "x", "y"
                  *
-                 * @param {object} parentEditables
+                 * @param {Object} parentEditables
                  *        Editables from NavigationBindings.annotationsEditable
                  *
-                 * @param {object} parent
+                 * @param {Object} parent
                  *        Where new options will be assigned
                  */
                 function traverse(option, key, parentEditables, parent) {
@@ -4447,7 +4763,9 @@
                                 parent[key] = nextParent;
                             }
                             objectEach(option, function (nestedOption, nestedKey) {
-                                traverse(nestedOption, nestedKey, key === 0 ? parentEditables : nestedEditables[key], nextParent);
+                                traverse(nestedOption, nestedKey, key === 0 ?
+                                    parentEditables :
+                                    nestedEditables[key], nextParent);
                             });
                         }
                         else {
@@ -4486,14 +4804,14 @@
              *
              * @function Highcharts.NavigationBindings#getClickedClassNames
              *
-             * @param {Highcharts.HTMLDOMElement}
-             *        Container that event is bound to.
+             * @param {Highcharts.HTMLDOMElement} container
+             * Container that event is bound to.
              *
              * @param {global.Event} event
-             *        Browser's event.
+             * Browser's event.
              *
              * @return {Array<Array<string, Highcharts.HTMLDOMElement>>}
-             *         Array of class names with corresponding elements
+             * Array of class names with corresponding elements
              */
             NavigationBindings.prototype.getClickedClassNames = function (container, event) {
                 var element = event.target,
@@ -4531,7 +4849,7 @@
              * @param {global.Event} event
              *        Browser's event.
              *
-             * @return {object}
+             * @return {Object}
              *         Object with events (init, start, steps, and end)
              */
             NavigationBindings.prototype.getButtonEvents = function (container, event) {
@@ -4602,6 +4920,7 @@
                 },
                 // Simple shapes:
                 circle: ['shapes'],
+                ellipse: ['shapes'],
                 verticalLine: [],
                 label: ['labelOptions'],
                 // Measure
@@ -4618,7 +4937,9 @@
             // Define non editable fields per annotation, for example Rectangle inherits
             // options from Measure, but crosshairs are not available
             NavigationBindings.annotationsNonEditable = {
-                rectangle: ['crosshairX', 'crosshairY', 'label']
+                rectangle: ['crosshairX', 'crosshairY', 'labelOptions'],
+                ellipse: ['labelOptions'],
+                circle: ['labelOptions']
             };
             return NavigationBindings;
         }());
@@ -4695,10 +5016,10 @@
                                 if (annotation.options.type === 'measure') {
                                     // Manually disable crooshars according to
                                     // stroke width of the shape:
-                                    typeOptions.crosshairY.enabled =
-                                        typeOptions.crosshairY.strokeWidth !== 0;
-                                    typeOptions.crosshairX.enabled =
-                                        typeOptions.crosshairX.strokeWidth !== 0;
+                                    typeOptions.crosshairY.enabled = (typeOptions.crosshairY
+                                        .strokeWidth !== 0);
+                                    typeOptions.crosshairX.enabled = (typeOptions.crosshairX
+                                        .strokeWidth !== 0);
                                 }
                                 annotation.update(config);
                             }
@@ -4735,7 +5056,6 @@
                  * Configure the Popup strings in the chart. Requires the
                  * `annotations.js` or `annotations-advanced.src.js` module to be
                  * loaded.
-                 *
                  * @since   7.0.0
                  * @product highcharts highstock
                  */
@@ -4749,6 +5069,7 @@
                         simpleShapes: 'Simple shapes',
                         lines: 'Lines',
                         circle: 'Circle',
+                        ellipse: 'Ellipse',
                         rectangle: 'Rectangle',
                         label: 'Label',
                         shapeOptions: 'Shape options',
@@ -4809,9 +5130,16 @@
                  * - `end`: last event to be called after last step event
                  *
                  * @type         {Highcharts.Dictionary<Highcharts.NavigationBindingsOptionsObject>|*}
-                 * @sample       stock/stocktools/stocktools-thresholds
-                 *               Custom bindings in Highcharts Stock
+                 *
+                 * @sample {highstock} stock/stocktools/stocktools-thresholds
+                 *               Custom bindings
+                 * @sample {highcharts} highcharts/annotations/bindings/
+                 *               Simple binding
+                 * @sample {highcharts} highcharts/annotations/bindings-custom-annotation/
+                 *               Custom annotation binding
+                 *
                  * @since        7.0.0
+                 * @requires     modules/annotations
                  * @product      highcharts highstock
                  */
                 bindings: {
@@ -4848,10 +5176,7 @@
                                         },
                                         r: 5
                                     }]
-                            }, navigation
-                                .annotationsOptions, navigation
-                                .bindings
-                                .circleAnnotation
+                            }, navigation.annotationsOptions, navigation.bindings.circleAnnotation
                                 .annotationsOptions));
                         },
                         /** @ignore-option */
@@ -4859,16 +5184,14 @@
                             function (e, annotation) {
                                 var mockPointOpts = annotation.options.shapes[0]
                                         .point,
-                                    inverted = this.chart.inverted,
-                                    x,
-                                    y,
                                     distance;
                                 if (isNumber(mockPointOpts.xAxis) &&
                                     isNumber(mockPointOpts.yAxis)) {
-                                    x = this.chart.xAxis[mockPointOpts.xAxis]
-                                        .toPixels(mockPointOpts.x);
-                                    y = this.chart.yAxis[mockPointOpts.yAxis]
-                                        .toPixels(mockPointOpts.y);
+                                    var inverted = this.chart.inverted,
+                                        x = this.chart.xAxis[mockPointOpts.xAxis]
+                                            .toPixels(mockPointOpts.x),
+                                        y = this.chart.yAxis[mockPointOpts.yAxis]
+                                            .toPixels(mockPointOpts.y);
                                     distance = Math.max(Math.sqrt(Math.pow(inverted ? y - e.chartX : x - e.chartX, 2) +
                                         Math.pow(inverted ? x - e.chartY : y - e.chartY, 2)), 5);
                                 }
@@ -4880,6 +5203,59 @@
                             }
                         ]
                     },
+                    ellipseAnnotation: {
+                        className: 'highcharts-ellipse-annotation',
+                        start: function (e) {
+                            var coords = this.chart.pointer.getCoordinates(e),
+                                coordsX = this.utils.getAssignedAxis(coords.xAxis),
+                                coordsY = this.utils.getAssignedAxis(coords.yAxis),
+                                navigation = this.chart.options.navigation;
+                            if (!coordsX || !coordsY) {
+                                return;
+                            }
+                            return this.chart.addAnnotation(merge({
+                                langKey: 'ellipse',
+                                type: 'basicAnnotation',
+                                shapes: [
+                                    {
+                                        type: 'ellipse',
+                                        xAxis: coordsX.axis.options.index,
+                                        yAxis: coordsY.axis.options.index,
+                                        points: [{
+                                                x: coordsX.value,
+                                                y: coordsY.value
+                                            }, {
+                                                x: coordsX.value,
+                                                y: coordsY.value
+                                            }],
+                                        ry: 1
+                                    }
+                                ]
+                            }, navigation.annotationsOptions, navigation.bindings.ellipseAnnotation
+                                .annotationOptions));
+                        },
+                        steps: [
+                            function (e, annotation) {
+                                var target = annotation.shapes[0],
+                                    position = target.getAbsolutePosition(target.points[1]);
+                                target.translatePoint(e.chartX - position.x, e.chartY - position.y, 1);
+                                target.redraw(false);
+                            },
+                            function (e, annotation) {
+                                var target = annotation.shapes[0],
+                                    position = target.getAbsolutePosition(target.points[0]),
+                                    position2 = target.getAbsolutePosition(target.points[1]),
+                                    newR = target.getDistanceFromLine(position,
+                                    position2,
+                                    e.chartX,
+                                    e.chartY),
+                                    yAxis = target.getYAxis(),
+                                    newRY = Math.abs(yAxis.toValue(0) - yAxis.toValue(newR));
+                                target.setYRadius(newRY);
+                                target.redraw(false);
+                            }
+                        ]
+                    },
                     /**
                      * A rectangle annotation bindings. Includes `start` and one event
                      * in `steps` array.
@@ -4913,7 +5289,8 @@
                                             { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
                                             { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
                                             { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
-                                            { xAxis: xAxis, yAxis: yAxis, x: x, y: y }
+                                            { xAxis: xAxis, yAxis: yAxis, x: x, y: y },
+                                            { command: 'Z' }
                                         ]
                                     }]
                             }, navigation
@@ -4998,7 +5375,7 @@
                  * from a different server.
                  *
                  * @type      {string}
-                 * @default   https://code.highcharts.com/9.2.2/gfx/stock-icons/
+                 * @default   https://code.highcharts.com/9.3.3/gfx/stock-icons/
                  * @since     7.1.3
                  * @apioption navigation.iconsURL
                  */
@@ -5054,6 +5431,7 @@
                  * @extends   annotations
                  * @exclude   crookedLine, elliottWave, fibonacci, infinityLine,
                  *            measure, pitchfork, tunnel, verticalLine, basicAnnotation
+                 * @requires     modules/annotations
                  * @apioption navigation.annotationsOptions
                  */
                 annotationsOptions: {
@@ -5080,28 +5458,29 @@
                     if (chart.navigationBindings &&
                         chart.navigationBindings.container &&
                         chart.navigationBindings.container[0]) {
-                        // Get the HTML element coresponding to the
-                        // className taken from StockToolsBindings.
-                        var buttonNode = chart.navigationBindings.container[0].querySelectorAll('.' + key);
+                        // Get the HTML element coresponding to the className taken
+                        // from StockToolsBindings.
+                        var buttonNode = chart.navigationBindings.container[0]
+                                .querySelectorAll('.' + key);
                         if (buttonNode) {
                             for (var i = 0; i < buttonNode.length; i++) {
-                                var button = buttonNode[i];
+                                var button = buttonNode[i],
+                                    cls = button.className;
                                 if (value.noDataState === 'normal') {
-                                    // If button has noDataState: 'normal',
-                                    // and has disabledClassName,
-                                    // remove this className.
-                                    if (button.className.indexOf(disabledClassName) !== -1) {
+                                    // If button has noDataState: 'normal', and has
+                                    // disabledClassName, remove this className.
+                                    if (cls.indexOf(disabledClassName) !== -1) {
                                         button.classList.remove(disabledClassName);
                                     }
                                 }
                                 else if (!buttonsEnabled_1) {
-                                    if (button.className.indexOf(disabledClassName) === -1) {
+                                    if (cls.indexOf(disabledClassName) === -1) {
                                         button.className += ' ' + disabledClassName;
                                     }
                                 }
                                 else {
                                     // Enable all buttons by deleting the className.
-                                    if (button.className.indexOf(disabledClassName) !== -1) {
+                                    if (cls.indexOf(disabledClassName) !== -1) {
                                         button.classList.remove(disabledClassName);
                                     }
                                 }
@@ -5117,7 +5496,7 @@
 
         return NavigationBindings;
     });
-    _registerModule(_modules, 'Extensions/Annotations/Popup.js', [_modules['Core/Globals.js'], _modules['Extensions/Annotations/NavigationBindings.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js']], function (H, NavigationBindings, D, Pointer, U) {
+    _registerModule(_modules, 'Extensions/Annotations/Popup.js', [_modules['Core/Renderer/HTML/AST.js'], _modules['Core/Globals.js'], _modules['Extensions/Annotations/NavigationBindings.js'], _modules['Core/DefaultOptions.js'], _modules['Core/Pointer.js'], _modules['Core/Utilities.js']], function (AST, H, NavigationBindings, D, Pointer, U) {
         /* *
          *
          *  Popup generator for Stock tools
@@ -5138,20 +5517,34 @@
             fireEvent = U.fireEvent,
             isArray = U.isArray,
             isObject = U.isObject,
-            isString = U.isString,
             objectEach = U.objectEach,
             pick = U.pick,
             stableSort = U.stableSort,
             wrap = U.wrap;
-        var indexFilter = /\d/g, PREFIX = 'highcharts-', DIV = 'div', INPUT = 'input', LABEL = 'label', BUTTON = 'button', SELECT = 'select', OPTION = 'option', SPAN = 'span', UL = 'ul', LI = 'li', H3 = 'h3';
+        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) {
-            var popupClass = e.target && e.target.className;
             // elements is not in popup
-            if (!(isString(popupClass) &&
-                popupClass.indexOf(PREFIX + 'popup-field') >= 0)) {
+            if (!this.inClass(e.target, PREFIX + 'popup')) {
                 proceed.apply(this, Array.prototype.slice.call(arguments, 1));
             }
         });
@@ -5172,7 +5565,22 @@
                 // create popup div
                 this.container = createElement(DIV, {
                     className: PREFIX + 'popup highcharts-no-tooltip'
-                }, null, parentDiv);
+                }, 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
@@ -5189,7 +5597,7 @@
                 // create close popup btn
                 closeBtn = createElement(DIV, {
                     className: PREFIX + 'popup-close'
-                }, null, this.container);
+                }, void 0, this.container);
                 closeBtn.style['background-image'] = 'url(' +
                     (iconsURL.match(/png|svg|jpeg|jpg|gif/ig) ?
                         iconsURL : iconsURL + 'close.svg') + ')';
@@ -5218,15 +5626,15 @@
                 // left column
                 lhsCol = createElement(DIV, {
                     className: PREFIX + 'popup-lhs-col'
-                }, null, container);
+                }, void 0, container);
                 // right column
                 rhsCol = createElement(DIV, {
                     className: PREFIX + 'popup-rhs-col'
-                }, null, container);
+                }, void 0, container);
                 // wrapper content
                 createElement(DIV, {
                     className: PREFIX + 'popup-rhs-col-wrapper'
-                }, null, rhsCol);
+                }, void 0, rhsCol);
                 return {
                     lhsCol: lhsCol,
                     rhsCol: rhsCol
@@ -5234,34 +5642,43 @@
             },
             /**
              * Create input with label.
+             *
              * @private
+             *
              * @param {string} option
-             * Chain of fields i.e params.styles.fontSize
-             * @param {string} type
-             * Indicator type
-             * @param {Highhcharts.HTMLDOMElement}
-             * Container where elements should be added
-             * @param {string} value
-             * Default value of input i.e period value is 14, extracted from
-             * defaultOptions (ADD mode) or series options (EDIT mode)
+             *        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, type, parentDiv, value) {
-                var optionParamList = option.split('.'), optionName = optionParamList[optionParamList.length - 1], lang = this.lang, inputName = PREFIX + type + '-' + optionName;
+            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
+                        htmlFor: inputName,
+                        className: inputAttributes.labelClassName
                     }, void 0, parentDiv).appendChild(doc.createTextNode(lang[optionName] || optionName));
                 }
                 // add input
-                if (value !== '') {
-                    createElement(INPUT, {
-                        name: inputName,
-                        value: value[0],
-                        type: value[1],
-                        className: PREFIX + 'popup-field'
-                    }, void 0, parentDiv).setAttribute(PREFIX + 'data-name', option);
-                }
+                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.
@@ -5279,38 +5696,44 @@
              * @return {Highcharts.HTMLDOMElement}
              * HTML button
              */
-            addButton: function (parentDiv, label, type, callback, fieldsDiv) {
+            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));
-                ['click', 'touchstart'].forEach(function (eventName) {
-                    addEvent(button, eventName, function () {
-                        closePopup.call(_self);
-                        return callback(getFields(fieldsDiv, type));
+                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 create JSON.
+             * Get values from all inputs and selections then create JSON.
+             *
              * @private
-             * @param {Highcharts.HTMLDOMElement} - container where inputs are created
-             * @param {string} - add | edit | remove
-             * @return {Highcharts.PopupFieldsObject} - fields
+             *
+             * @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 = parentDiv.querySelectorAll('input'), optionSeries = '#' + PREFIX + 'select-series > option:checked', optionVolume = '#' + PREFIX + 'select-volume > option:checked', linkedTo = parentDiv.querySelectorAll(optionSeries)[0], volumeTo = parentDiv.querySelectorAll(optionVolume)[0], seriesId, param, fieldsOutput;
+                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'),
+                    linkedTo: linkedTo && linkedTo.getAttribute('value') || '',
                     fields: {}
                 };
-                [].forEach.call(inputList, function (input) {
-                    param = input.getAttribute(PREFIX + 'data-name');
-                    seriesId = input.getAttribute(PREFIX + 'data-series-id');
+                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;
@@ -5323,8 +5746,18 @@
                         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');
+                    fieldsOutput.fields['params.volumeSeriesID'] = volumeTo
+                        .getAttribute('value') || '';
                 }
                 return fieldsOutput;
             },
@@ -5339,7 +5772,7 @@
                         .querySelectorAll('.' + PREFIX + 'popup-close')[0];
                 this.formType = void 0;
                 // reset content
-                popupDiv.innerHTML = '';
+                popupDiv.innerHTML = AST.emptyHTML;
                 // reset toolbar styles if exists
                 if (popupDiv.className.indexOf(toolbarClass) >= 0) {
                     popupDiv.classList.remove(toolbarClass);
@@ -5434,13 +5867,13 @@
                     // Basic shapes:
                     options.shapes && options.shapes[0].type)));
                     // add buttons
-                    button = this.addButton(popupDiv, lang.removeButton || 'remove', 'remove', callback, popupDiv);
+                    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', function () {
+                    button = this.addButton(popupDiv, lang.editButton || 'edit', 'edit', popupDiv, function () {
                         showForm.call(_self, 'annotation-edit', chart, options, callback);
-                    }, popupDiv);
+                    });
                     button.className += ' ' + PREFIX + 'annotation-edit-button';
                     button.style['background-image'] = 'url(' +
                         this.iconsURL + 'edit.svg)';
@@ -5473,15 +5906,15 @@
                     lhsCol.appendChild(doc.createTextNode(lang[options.langKey] || options.langKey || ''));
                     // left column
                     lhsCol = createElement(DIV, {
-                        className: PREFIX + 'popup-lhs-col ' + PREFIX + 'popup-lhs-full'
-                    }, null, popupDiv);
+                        className: (PREFIX + 'popup-lhs-col ' + PREFIX + 'popup-lhs-full')
+                    }, void 0, popupDiv);
                     bottomRow = createElement(DIV, {
                         className: PREFIX + 'popup-bottom-row'
-                    }, null, popupDiv);
+                    }, 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', callback, popupDiv);
+                        (lang.saveButton || 'save'), isInit ? 'add' : 'save', popupDiv, callback);
                 },
                 /**
                  * Create annotation's form fields.
@@ -5554,6 +5987,10 @@
                                 }, 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));
                             }
                         });
@@ -5581,138 +6018,435 @@
                         .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', callback, buttonParentDiv);
+                    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', callback, buttonParentDiv);
-                    this.addButton(buttonParentDiv, lang.removeButton || 'remove', 'remove', callback, buttonParentDiv);
+                    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) {
-                    var _self = this, lhsCol = parentDiv.querySelectorAll('.' + PREFIX + 'popup-lhs-col')[0], rhsCol = parentDiv.querySelectorAll('.' + PREFIX + 'popup-rhs-col')[0], isEdit = listType === 'edit', series = (isEdit ?
+                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
-                        ), addFormFields = this.indicators.addFormFields, rhsColWrapper, indicatorList, item;
-                    if (!chart) {
+                            chart.options.plotOptions || {} // ADD mode
+                        );
+                    if (!chart && series) {
                         return;
                     }
-                    // create wrapper for list
+                    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'
-                    }, null, lhsCol);
-                    rhsColWrapper = rhsCol
-                        .querySelectorAll('.' + PREFIX + 'popup-rhs-col-wrapper')[0];
-                    objectEach(series, function (serie, value) {
-                        var seriesOptions = serie.options;
-                        if (serie.params ||
-                            seriesOptions && seriesOptions.params) {
-                            var indicatorNameType_1 = _self.indicators.getNameType(serie,
-                                value),
-                                indicatorType_1 = indicatorNameType_1.type;
-                            item = createElement(LI, {
-                                className: PREFIX + 'indicator-list'
-                            }, void 0, indicatorList);
-                            item.appendChild(doc.createTextNode(indicatorNameType_1.name));
-                            ['click', 'touchstart'].forEach(function (eventName) {
-                                addEvent(item, eventName, function () {
-                                    addFormFields.call(_self, chart, isEdit ? serie : series[indicatorType_1], indicatorNameType_1.type, rhsColWrapper);
-                                    // add hidden input with series.id
-                                    if (isEdit && serie.options) {
-                                        createElement(INPUT, {
-                                            type: 'hidden',
-                                            name: PREFIX + 'id-' + indicatorType_1,
-                                            value: serie.options.id
-                                        }, null, rhsColWrapper)
-                                            .setAttribute(PREFIX + 'data-series-id', serie.options.id);
-                                    }
-                                });
+                    }, 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. (EDIT mode - defaultOptions.series, ADD
-                 * mode - indicator series).
-                 * @param {string} - indicator type like: sma, ema, etc.
-                 * @return {Object} - series name and type like: sma, ema, etc.
+                 * 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, type) {
+                getNameType: function (series, indicatorType) {
                     var options = series.options,
-                        seriesTypes = H.seriesTypes, 
-                        // add mode
-                        seriesName = seriesTypes[type] &&
-                            seriesTypes[type].prototype.nameBase || type.toUpperCase(),
-                        seriesType = type;
+                        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 {
-                        name: seriesName,
-                        type: seriesType
+                        indicatorFullName: seriesName,
+                        indicatorType: seriesType
                     };
                 },
                 /**
-                 * List all series with unique ID. Its mandatory for indicators to set
-                 * correct linking.
+                 * Create the selection box for the series,
+                 * add options and apply the default one.
+                 *
                  * @private
-                 * @param {string} type
-                 * Indicator type like: sma, ema, etc.
-                 * @param {string} optionName
-                 * Type of select i.e series or volume.
-                 * @param {Highcharts.Chart} chart
-                 * Chart
-                 * @param {Highcharts.HTMLDOMElement} parentDiv
-                 * Element where created HTML list is added
-                 * @param {string} selectedOption
-                 *         optional param for default value in dropdown
+                 *
+                 * @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 (type, optionName, chart, parentDiv, selectedOption) {
-                    var selectName = PREFIX + optionName + '-type-' + type,
-                        lang = this.lang,
-                        selectBox,
-                        seriesOptions;
+                listAllSeries: function (indicatorType, optionName, chart, parentDiv, currentSeries, selectedOption) {
+                    var popup = this,
+                        indicators = popup.indicators;
+                    // Won't work without the chart.
                     if (!chart) {
                         return;
                     }
-                    createElement(LABEL, {
-                        htmlFor: selectName
-                    }, null, parentDiv).appendChild(doc.createTextNode(lang[optionName] || optionName));
-                    // select type
-                    selectBox = createElement(SELECT, {
-                        name: selectName,
-                        className: PREFIX + 'popup-field'
-                    }, null, parentDiv);
-                    selectBox.setAttribute('id', PREFIX + 'select-' + optionName);
-                    // list all series which have id - mandatory for creating indicator
-                    chart.series.forEach(function (serie) {
-                        seriesOptions = serie.options;
-                        if (!seriesOptions.params &&
-                            seriesOptions.id &&
-                            seriesOptions.id !== PREFIX + 'navigator-series') {
-                            createElement(OPTION, {
-                                value: seriesOptions.id
-                            }, null, selectBox).appendChild(doc.createTextNode(seriesOptions.name || seriesOptions.id));
-                        }
-                    });
+                    // 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;
                     }
@@ -5737,21 +6471,21 @@
                     var fields = series.params || series.options.params,
                         getNameType = this.indicators.getNameType;
                     // reset current content
-                    rhsColWrapper.innerHTML = '';
+                    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).name));
+                    }, void 0, rhsColWrapper).appendChild(doc.createTextNode(getNameType(series, seriesType).indicatorFullName));
                     // input type
                     createElement(INPUT, {
                         type: 'hidden',
                         name: PREFIX + 'type-' + seriesType,
                         value: seriesType
-                    }, null, rhsColWrapper);
+                    }, void 0, rhsColWrapper);
                     // list all series with id
-                    this.indicators.listAllSeries.call(this, seriesType, 'series', chart, rhsColWrapper, series.linkedParent && fields.volumeSeriesID);
+                    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.linkedParent && series.linkedParent.options.id);
+                        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);
@@ -5773,8 +6507,9 @@
                  * Element where created HTML list is added
                  */
                 addParamInputs: function (chart, parentNode, fields, type, parentDiv) {
-                    var _self = this,
-                        addParamInputs = this.indicators.addParamInputs,
+                    var popup = this,
+                        indicators = popup.indicators;
+                    var addParamInputs = this.indicators.addParamInputs,
                         addInput = this.addInput,
                         parentFullName;
                     if (!chart) {
@@ -5783,16 +6518,34 @@
                     objectEach(fields, function (value, fieldName) {
                         // create name like params.styles.fontSize
                         parentFullName = parentNode + '.' + fieldName;
-                        if (value !== void 0) { // skip if field is unnecessary, #15362
+                        if (defined(value) && // skip if field is unnecessary, #15362
+                            parentFullName) {
                             if (isObject(value)) {
-                                addInput.call(// (15733) 'Periods' has an arrayed value. Label must be created here.
-                                _self, parentFullName, type, parentDiv, '');
-                                addParamInputs.call(_self, chart, parentFullName, value, type, parentDiv);
+                                // (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') {
-                                addInput.call(_self, parentFullName, type, parentDiv, [value, 'text'] // all inputs are text type
+                            // 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
                                 );
                             }
                         }
@@ -5874,8 +6627,10 @@
                 addContentItem: function () {
                     var popupDiv = this.popup.container;
                     return createElement(DIV, {
-                        className: PREFIX + 'tab-item-content ' + PREFIX + 'no-mousewheel' // #12100
-                    }, null, popupDiv);
+                        // #12100
+                        className: PREFIX + 'tab-item-content ' +
+                            PREFIX + 'no-mousewheel'
+                    }, void 0, popupDiv);
                 },
                 /**
                  * Add click event to each tab
@@ -5938,7 +6693,7 @@
                 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/9.2.2/gfx/stock-icons/'), this.chart);
+                    'https://code.highcharts.com/9.3.3/gfx/stock-icons/'), this.chart);
             }
             this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
         });