Zabbix

/*

** Copyright (C) 2001-2025 Zabbix SIA

**

** This program is free software: you can redistribute it and/or modify it under the terms of

** the GNU Affero General Public License as published by the Free Software Foundation, version 3.

**

** This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;

** without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

** See the GNU Affero General Public License for more details.

**

** You should have received a copy of the GNU Affero General Public License along with this program.

** If not, see <https://www.gnu.org/licenses/>.

**/

​

​

class ZSelect extends HTMLElement {

​

    constructor() {

        super();

​

        this._options_map = new Map();

​

        this._option_template = "#{label}";

        this._selected_option_template = "#{label}";

​

        this._highlighted_index = -1;

        this._preselected_index = -1;

​

        this._expanded = false;

        this._list_hovered = false;

​

        this._button = document.createElement('button');

        this._input = document.createElement('input');

        this._list = document.createElement('ul');

​

        this._events = {};

​

        this._is_connected = false;

    }

​

    connectedCallback() {

        this._is_connected = true;

​

        this.init();

        this.registerEvents();

    }

​

    disconnectedCallback() {

        this.unregisterEvents();

    }

​

    /**

     * @return {array}

     */

    static get observedAttributes() {

        return ['name', 'value', 'disabled', 'readonly', 'width'];

    }

​

    attributeChangedCallback(name, old_value, new_value) {

        switch (name) {

            case 'name':

                this._input.name = new_value;

                break;

​

            case 'value':

                if (!this._is_connected || this._input.value !== new_value) {

                    const option = this.getOptionByValue(new_value);

​

                    this._highlight(option ? option._index : -1);

                    this._preselect(this._highlighted_index);

​

                    if (option && !option.disabled) {

                        this._input.value = option.value;

                        this.dispatchEvent(new Event('change', {bubbles: true}));

                    }

                    else {

                        this._input.value = null;

                    }

                }

                break;

​

            case 'disabled':

                this._button.disabled = (new_value !== null);

                this._input.disabled = (new_value !== null);

                break;

​

            case 'readonly':

                this._button.readOnly = (new_value !== null);

                this._input.readOnly = (new_value !== null);

                break;

​