Source: widget/learning/FeedbackBubbleContentControl.js

(function() {
    /**
     * @typedef {Object} Help4.widget.learning.FeedbackBubbleContentControl.Data
     * @property {number} rating - feedback rating
     * @property {string} text - feedback text
     */

    /**
     * Feedback bubble content.
     * @augments Help4.control2.bubble.content.BubbleContent
     */
    Help4.widget.learning.FeedbackBubbleContentControl = class extends Help4.control2.bubble.content.BubbleContent {
        /**
         * @override
         * @param {Help4.control2.bubble.content.BubbleContent.Params} params
         */
        constructor(params) {
            super(params, {
                params: {},
                statics: {
                    _caption:       {},
                    _ratingLabel:   {},
                    _rating:        {},
                    _feedbackLabel: {},
                    _feedback:      {}
                },
                config: {
                    css: 'bubble-feedback-content'
                }
            });
        }

        /**
         * @override
         * @param {HTMLElement} dom - control DOM
         */
        _onDomCreated(dom) {
            const {
                control2: {
                    container: {Rating},
                    input: {Text : TextInput},
                    Text
                },
                Localization,
                Element
            } = Help4;

            const textareaId = `${this.id}-feedback`;

            this._caption = this._createControl(Text, {tag: 'h3', css: 'caption', text: Localization.getText('label.rating.content'), dom});
            this._rating = this._createControl(Rating, {count: 5, dom})
            .addListener('change', event => _onChangeEvent.call(this, event));

            this._feedbackLabel = this._createControl(Text, {tag: 'label', css: 'label', text: Localization.getText('label.feedback.feedbackText'), dom});
            Element.setAttribute(this._feedbackLabel.getDom(), {'for': textareaId});

            this._feedback = this._createControl(TextInput, {
                id: textareaId,
                tag: 'textarea',
                css: 'size-full',
                placeholder: Localization.getText('placeholder.feedback.feedbackText'),
                dom
            })
            .addListener('change', event => _onChangeEvent.call(this, event));
        }
    }

    /**
     * @memberof Help4.widget.learning.FeedbackBubbleContentControl#
     * @private
     */
    function _onChangeEvent() {
        const {_rating, _feedback} = this;
        const data = /** @type {Help4.widget.learning.FeedbackBubbleContentControl.Data} */ {
            rating: _rating.value,
            text: Help4.removeHTMLTags(Help4.sanitizeHtml(_feedback.value?.trim()))
        };
        this._fireEvent({type: 'change', data});
    }
})();