Source: control2/hotspot/Numbered.js

(function() {
    /**
     * @typedef {Help4.control2.hotspot.Connected.Params} Help4.control2.hotspot.Numbered.Params
     * @property {number} number - the to be displayed number
     */

    /**
     * Adds a number to every hotspot. Useful for tour editing where multiple hotspots are visible on the screen and need to be allocated to the corresponding tour steps.
     * @augments Help4.control2.hotspot.Connected
     * @property {number} number - the to be displayed number
     */
    Help4.control2.hotspot.Numbered = class extends Help4.control2.hotspot.Connected {
        /**
         * @override
         * @param {Help4.control2.hotspot.Numbered.Params} [params]
         */
        constructor(params) {
            const T = Help4.jscore.ControlBase.TYPES;
            super(params, {
                params: {
                    number: {type: T.number, mandatory: true}
                },
                config: {
                    css: 'control-numberedhotspot'
                }
            });
        }

        /**
         * @override
         * @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
         */
        _applyPropertyToDom({name, value, oldValue}) {
            name === 'number'
                ? this._hotspot.setText(value + '')
                : super._applyPropertyToDom({name, value, oldValue});
        }
    }
})();