import { r as registerInstance, c as createEvent, h } from './materials-6a67d110.js';
/**
* Class that represent an autocomplete element
* composed by a textfield
* and a menu with selectable items for autocompletion
*/
var Autocomplete = /** @class */ (function () {
    function Autocomplete(hostRef) {
        registerInstance(this, hostRef);
        /**
        * Apply low density on the element
        */
        this.dense = false;
        this.change = createEvent(this, "change", 7);
    }
    Autocomplete.prototype.componentDidLoad = function () {
        this.watchValue();
    };
    Autocomplete.prototype.componentWillLoad = function () {
        this.watchValue();
    };
    Autocomplete.prototype.watchValue = function () {
        if (this.value) {
            this.value.label = this.value.label ? this.value.label : this.value.value;
        }
        else {
            this.value = {
                value: null,
                label: null
            };
        }
    };
    Autocomplete.prototype.selectSuggestion = function (key) {
        this.menuElement.close();
        if (this.suggestions) {
            var newValue = {
                value: key,
                label: this.suggestions.get(key)
            };
            this.value = Object.assign({}, newValue);
        }
        this.change.emit(this.value);
    };
    Autocomplete.prototype.execAutocomplete = function (event) {
        var _this = this;
        this.value.label = event.target.value;
        this.autocomplete(event.target.value).then(function (suggests) { return _this.suggestions = suggests; });
        this.menuElement.open();
    };
    Autocomplete.prototype.emptyField = function () {
        if (!this.textElement.value) {
            this.value = null;
            this.change.emit(this.value);
        }
    };
    Autocomplete.prototype.render = function () {
        var _this = this;
        return ([
            h("materials-text-field", { ref: function (el) { return _this.textElement = el; }, dense: this.dense, label: this.label, value: this.value.label, onInput: function (ev) { return _this.execAutocomplete(ev); }, onChange: function (ev) {
                    ev.stopPropagation();
                    ev.preventDefault();
                    _this.emptyField();
                } }),
            h("materials-menu", { ref: function (el) { return _this.menuElement = el; } }, this.suggestions ? Array.from(this.suggestions.keys()).map(function (key) { return h("materials-list-item", { onClick: function () { return _this.selectSuggestion(key); } }, _this.suggestions.get(key)); }) : null)
        ]);
    };
    Object.defineProperty(Autocomplete, "watchers", {
        get: function () {
            return {
                "value": ["watchValue"]
            };
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(Autocomplete, "style", {
        get: function () { return ":host{display:block}"; },
        enumerable: true,
        configurable: true
    });
    return Autocomplete;
}());
export { Autocomplete as materials_autocomplete };
