var _a;
import { select, option } from "@bokehjs/core/dom";
import { isString } from "@bokehjs/core/util/types";
import { InputWidget, InputWidgetView } from "@bokehjs/models/widgets/input_widget";
import * as inputs from "@bokehjs/styles/widgets/inputs.css";
export class SingleSelectView extends InputWidgetView {
    connect_signals() {
        super.connect_signals();
        this.connect(this.model.properties.value.change, () => this.render_selection());
        this.connect(this.model.properties.options.change, () => this.render());
        this.connect(this.model.properties.disabled_options.change, () => this.render());
        this.connect(this.model.properties.size.change, () => this.render());
        this.connect(this.model.properties.disabled.change, () => this.render());
    }
    render() {
        super.render();
        const options = this.model.options.map((opt) => {
            let value, _label;
            if (isString(opt))
                value = _label = opt;
            else
                [value, _label] = opt;
            let disabled = this.model.disabled_options.includes(value);
            return option({ value: value, disabled: disabled }, _label);
        });
        this.input_el = select({
            multiple: false,
            class: inputs.input,
            name: this.model.name,
            disabled: this.model.disabled,
        }, options);
        this.input_el.style.backgroundImage = 'none';
        this.input_el.addEventListener("change", () => this.change_input());
        this.group_el.appendChild(this.input_el);
        this.render_selection();
    }
    render_selection() {
        const selected = this.model.value;
        for (const el of this.input_el.querySelectorAll('option'))
            if (el.value === selected)
                el.selected = true;
        // Note that some browser implementations might not reduce
        // the number of visible options for size <= 3.
        this.input_el.size = this.model.size;
    }
    change_input() {
        const is_focused = this.el.querySelector('select:focus') != null;
        let value = null;
        for (const el of this.shadow_el.querySelectorAll('option')) {
            if (el.selected) {
                value = el.value;
                break;
            }
        }
        this.model.value = value;
        super.change_input();
        // Restore focus back to the <select> afterwards,
        // so that even if python on_change callback is invoked,
        // focus remains on <select> and one can seamlessly scroll
        // up/down.
        if (is_focused)
            this.input_el.focus();
    }
}
SingleSelectView.__name__ = "SingleSelectView";
export class SingleSelect extends InputWidget {
    constructor(attrs) {
        super(attrs);
    }
}
_a = SingleSelect;
SingleSelect.__name__ = "SingleSelect";
SingleSelect.__module__ = "panel.models.widgets";
(() => {
    _a.prototype.default_view = SingleSelectView;
    _a.define(({ Any, Array, Int, Nullable, String }) => ({
        disabled_options: [Array(String), []],
        options: [Array(Any), []],
        size: [Int, 4],
        value: [Nullable(String), null],
    }));
})();
//# sourceMappingURL=singleselect.js.map