Source: control2/container/PanelSearch.js

(function() {
    /**
     * @typedef {Help4.control2.Control.Params} Help4.control2.input.PanelSearch.Params
     * @property {string} [searchTerm = ''] - the search term
     */

    /**
     * Creates a search input field.
     * @augments Help4.control2.container.Container
     * @property {string} searchTerm - the search term
     */
    Help4.control2.container.PanelSearch = class extends Help4.control2.container.Container {
        /**
         * @override
         * @param {Help4.control2.input.PanelSearch.Params} [params]
         */
        constructor(params) {
            const T = Help4.jscore.ControlBase.TYPES;
            super(params, {
                params: {
                    value: {type: T.string},
                },
                config: {
                    css: 'control-panel-search'
                },
                statics: {
                    _input: {}
                }
            });
        }

        /**
         * @override
         * @param {HTMLElement} dom
         */
        _onDomAvailable(dom) {
            const {Localization} = Help4;
            const onSearch = () => this._fireEvent({type: 'search', value: this.value});
            const placeholder = Localization.getText('placeholder.search.all');
            const ariaLabel = Localization.getText('placeholder.search.all');

            const input = this._input = this.add({
                _metadata: {type: 'input'},
                controlType: 'input.Text',
                type: 'search',
                value: this.value,
                css: 'search',
                placeholder,
                ariaLabel,
                ariaAutocomplete: 'none',
                ariaHaspopup: 'false',
                ariaControls: 'widget-filter-result',
                autoComplete: 'off',
                autoCorrect: 'off'
            })
            .addListener('enter', onSearch);  // send "search" event on ENTER

            input.dataFunctions.onChange.addListener(({name, value}) => (name === 'value') && (this.value = value));

            const btnAriaLabel = Localization.getText('tooltip.search.button');
            const btnTitle = Localization.getText('tooltip.search.button');
            this.add({
                controlType: 'button.Button',
                icon: Help4.control2.ICONS.search,
                css: 'icon primary search compact',
                ariaLabel: btnAriaLabel,
                title: btnTitle,
            })
            .addListener(['click', 'enter', 'space'], onSearch);
        }

        /**
         * @override
         * @param {Help4.jscore.ControlBase.PropertyChangeEvent} event - the change event
         */
        _applyPropertyToDom({name, value}) {
            if (name === 'value') {
                this._input.value = value;
            } else {
                super._applyPropertyToDom({name, value});
            }
        }

        /**
         * @override
         * @returns {Help4.control2.container.PanelSearch}
         */
        focus() {
            this._input.focus();
            return this;
        }
    }
})();