Source: control2/bubble/content/Selection.js

(function() {
    /**
     * @typedef {Help4.control2.bubble.content.BubbleContent.Params} Help4.control2.bubble.content.Selection.Params
     * @property {string} [message = ''] - message
     * @property {data} [data = null] - data to be shown in the selection
     * @property {string} [value = ''] - value
     */

    /**
     * Control to show Selection of content.
     * @augments Help4.control2.bubble.content.BubbleContent
     * @property {string} message - message
     * @property {Array<Help4.control2.bubble.content.Selection.Data>} data - data to be shown in the selection
     * @property {string} value - value
     * @property {?Help4.control2.Select} _select
     */
    Help4.control2.bubble.content.Selection = class extends Help4.control2.bubble.content.BubbleContent {
        /**
         * @override
         * @param {Help4.control2.bubble.content.Selection.Params} [params]
         */
        constructor(params) {
            const {TYPES: T} = Help4.jscore.ControlBase;

            super(params, {
                params: {
                    message:  {type: T.string, init: '', readonly: true},
                    data:     {type: T.array, init: [], readonly: true},
                    value:    {type: T.string, init: ''},
                    textOnly: {init: false}
                },
                statics: {
                    _select: {}
                },
                config: {
                    css: 'control-bubble-content-selection'
                }
            });
        }

        /**
         * @override
         * @returns {Help4.control2.bubble.content.Selection}
         */
        focus() {
            this._select.focus();
            return this;
        }

        /**
         * @override
         * @param {HTMLElement} dom - control DOM
         */
        _onDomCreated(dom) {
            super._onDomCreated(dom);
            const {control2: {Text, Select}} = Help4;
            const {data, value, message, id} = this;

            this._createControl(Text, {
                id: `${id}-text`,
                dom,
                text: message,
                tag: 'label',
                css: 'label'
            });

            this._select = this._createControl(Select, {
                id: `${id}-select`,
                dom,
                data,
                value,
                css: 'language'
            })
            .addListener('change', ({value}) => this._fireEvent({type: 'selectionchange', value}));
        }
    }
})();