Source: control2/Tile.js

(function() {
    /**
     * @typedef {Help4.control2.Control.Params} Help4.control2.Tile.Params
     * @property {string} [caption = ''] - caption of tour
     * @property {string} [description = ''] - description of tour
     * @property {?string} [icon = null] - to be displayed icon
     */

    /**
     * Base class for tile controls.
     * @augments Help4.control2.Control
     * @property {string} caption - caption of tour
     * @property {string} description - description of tour
     * @property {?string} icon - to be displayed icon
     */
    Help4.control2.Tile = class extends Help4.control2.Control {
        /**
         * @override
         * @param {Help4.control2.Tile.Params} [params]
         * @param {Help4.jscore.ControlBase.Params} [derived]
         */
        constructor(params, derived) {
            const {ControlBase} = Help4.jscore;
            const T = ControlBase.TYPES;
            const TT = ControlBase.TEXT_TYPES;

            super(params, {
                params: {
                    role:        {init: 'listitem'},
                    tabIndex:    {init: 0},

                    caption:     {type: T.string},
                    description: {type: T.string},
                    icon:        {type: T.string_null},

                    autoEvent:   {init: true}
                },
                statics: {
                    _caption:     {destroy: false},
                    _description: {destroy: false}
                },
                config: {
                    css: 'control-tile'
                },
                texts: {
                    caption: TT.innerText,
                    description: TT.innerText
                },
                derived
            });
        }

        /**
         * @override
         * @param {HTMLElement} dom - control DOM
         */
        _onDomAvailable(dom) {
            // enable automatic readout of tile
            Help4.Element.setAttribute(dom, {ariaLabelledby: this.id});

            const header = this._createElement('header', {css: 'header'});
            this._caption = this._createElement('h3', {
                id: '-c',
                css: 'caption',
                dom: header,
                text: ''  // XRAY-1064
            });

            this._description = this._createElement('p', {
                id: '-d',
                css: 'description',
                text: ''  // XRAY-1064
            });
        }

        /**
         * @override
         * @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
         */
        _applyPropertyToDom({name, value, oldValue}) {
            switch (name) {
                case 'caption':
                    _setCaption.call(this, value);
                    break;
                case 'description':
                    _setDescription.call(this, value);
                    break;
                case 'icon':
                    _setIcon.call(this, value);
                    break;
                case 'title':
                    this.ariaLabel = value;
                    super._applyPropertyToDom({name, value, oldValue});
                    break;
                default:
                    super._applyPropertyToDom({name, value, oldValue});
                    break;
            }
        }
    }

    /**
     * @memberof Help4.control2.Tile#
     * @private
     */
    function _setCaption() {
        const {_caption, caption: text} = this;
        Help4.Element.setText(_caption, '\u2060' + text);  // XRAY-3583: \u2060 = ⁠
        this._applyTextAttribute(_caption, 'caption', !!text);
    }

    /**
     * @memberof Help4.control2.Tile#
     * @private
     */
    function _setDescription() {
        // XRAY-1213: remove all tags
        const text = this.description.replace(/<[^>]*>/g, ' ');

        const {_description} = this;
        Help4.Element.setText(_description, text);
        this._applyTextAttribute(_description, 'description', !!text);
    }

    /**
     * @memberof Help4.control2.Tile#
     * @private
     */
    function _setIcon() {
        let {icon} = this;
        if (icon === 'noicon') icon = null;
        icon = icon ? `icon_${icon}` : null;
        Help4.Element.setAttribute(this.getDom(), {'data-icon': icon});
    }
})();