import { r as registerInstance, d as createEvent, h, H as Host, c as getElement } from './core-b78a8f7e.js';
import { N as NativeValidationStrategy } from './native-validation-strategy-a4373eb1.js';
import { o as onBoolValueChanged, g as derivedId } from './utils-3aef1637.js';

let typeAheadId = 0;
const TypeAhead = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.optionListListener = (e) => this.onSelect(e);
        this.expanded = false;
        this.query = '';
        /**
         * Is the select disabled
         */
        this.disabled = false;
        /**
         * The select id
         */
        this.inputId = `anj-ta-${typeAheadId++}`;
        /**
         * The name of the select
         */
        this.name = this.inputId;
        /**
         * If true, the user cannot modify the value. Defaults to `false`.
         */
        this.readonly = false;
        /**
         * If true, the user must fill in a value before submitting a form.
         */
        this.required = false;
        /**
         * If true, the typeahead with look like a filter but still have a dropdown.
         */
        this.search = false;
        /**
         * @internal
         * The validation strategy to use
         */
        this.validationStrategy = new NativeValidationStrategy();
        this.anjChange = createEvent(this, "anjChange", 7);
        this.anjInvalid = createEvent(this, "anjInvalid", 7);
        this.anjQuery = createEvent(this, "anjQuery", 7);
    }
    invalidChanged(newVal, oldVal) {
        onBoolValueChanged(newVal, oldVal, this.anjInvalid.emit);
    }
    valueChanged() {
        this.setInputValue();
        this.anjChange.emit({ value: this.value });
    }
    disconnectedCallback() {
        this.unbindOptionList();
        this.overlay = null;
    }
    onInputDidLoad(event) {
        this.input = event.target;
        if (this.value) {
            this.setInputValue();
        }
    }
    async onFocus() {
        this.overlay = this.bindOverlay();
        // if the overlay just closed this *should* not exist, so that's our sign.
        if (!this.overlay)
            return;
        if (!this.optionList) {
            this.optionList = this.bindOptionList();
        }
        this.activeOption = await this.optionList.reset();
        await this.overlay.open(this.element);
        this.expanded = true;
    }
    async onBlur() {
        if (this.overlay) {
            await this.overlay.close();
        }
        this.expanded = false;
        return this.validationStrategy.onTouched(this.element);
    }
    async onSelect(event) {
        this.value = event.detail;
        await this.onBlur();
        this.setQuery('');
    }
    onValidChange(event) {
        this.invalid = event.detail;
    }
    /**
     * Checks the native element validity use native validators
     */
    async checkValidity() {
        const valid = await this.input.checkValidity();
        this.invalid = !valid;
        return valid;
    }
    async onKeyDown(event) {
        if (!this.expanded) {
            await this.onFocus();
        }
        if (this.expanded && event.key === 'Escape') {
            return this.overlay.close();
        }
        this.activeOption = await this.optionList.onKeyAction(event);
    }
    onChange(event) {
        event.stopPropagation();
        if (this.expanded || event.detail.value === '') {
            this.setQuery(event.detail.value);
        }
        if (event.detail.value === '') {
            this.value = '';
        }
    }
    setInputValue() {
        this.input.value = this.display && this.value ? this.value[this.display] : this.value;
    }
    setQuery(query) {
        this.query = query;
        this.anjQuery.emit(this.query);
    }
    ariaActive() {
        if (this.expanded && this.activeOption) {
            return this.activeOption.id;
        }
        return null;
    }
    bindOptionList() {
        const el = this.element.querySelector('anj-option-list');
        if (el) {
            el.addEventListener('anjSelect', this.optionListListener);
        }
        return el;
    }
    unbindOptionList() {
        if (!this.optionList)
            return;
        this.optionList.removeEventListener('anjSelect', this.optionListListener);
        this.optionList = null;
    }
    bindOverlay() {
        return this.element.querySelector('anj-overlay');
    }
    render() {
        const olClass = this.optionList && this.optionList.options && this.optionList.options.length > 0
            ? 'anj-dropdown-menu anj-select-menu' : 'anj-opts-hidden';
        const optListId = derivedId(this.inputId, 'options');
        const overlayWidth = this.element.offsetWidth;
        const inputAttrs = {
            'aria-autocomplete': 'list',
            'aria-controls': optListId,
            'aria-activedescendant': this.ariaActive()
        };
        return (h(Host, null, h("anj-input", { attrs: inputAttrs, "aria-owns": derivedId(this.inputId, 'options'), "aria-haspopup": "listbox", "aria-expanded": `${!!this.expanded}`, placeholder: this.placeholder, clearable: true, debounce: 300, role: "combobox", disabled: this.disabled, readonly: this.readonly, required: this.required, onKeyDown: (event) => this.onKeyDown(event), onAnjChange: (event) => this.onChange(event), validationStrategy: this.validationStrategy }, this.search ?
            h("anj-input-prefix", null, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24" }, h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))) : undefined), h("anj-overlay", { class: olClass, placement: "bottom-start", style: { 'min-width': `${overlayWidth}px` } }, h("anj-option-list", { id: optListId, role: "listbox", "aria-label": optListId }, h("slot", null)))));
    }
    get element() { return getElement(this); }
    static get watchers() { return {
        "invalid": ["invalidChanged"],
        "value": ["valueChanged"]
    }; }
    static get style() { return ".sc-anj-type-ahead-h {\n  display: inline-block;\n  font-size: 0.875rem;\n  font-family: var(--anj-font-family);\n  font-weight: normal;\n  line-height: 1.5;\n  outline: none;\n  width: 100%;\n}\n.sc-anj-type-ahead-h, .sc-anj-type-ahead-h::before, .sc-anj-type-ahead-h::after {\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n  outline: none;\n}\n.sc-anj-type-ahead-h:focus, .sc-anj-type-ahead-h:active, .sc-anj-type-ahead-h *.sc-anj-type-ahead:focus, .sc-anj-type-ahead-h *.sc-anj-type-ahead:active {\n  outline: none;\n}\n[search].sc-anj-type-ahead-h anj-input-prefix.sc-anj-type-ahead {\n  left: 0.25rem !important;\n}\n.sc-anj-type-ahead-h .anj-opts-hidden.sc-anj-type-ahead {\n  visibility: hidden;\n}"; }
};

export { TypeAhead as anj_type_ahead };
