import { h, Host } from "@stencil/core";
import { close_small, search } from "pn-design-assets/pn-assets/icons.js";
export class PnMarketwebSearch {
    constructor() {
        this.disabled = false;
        this.placeholder = null;
        this.inputid = null;
        this.name = null;
        this.autocomplete = null;
        this.list = null;
        this.value = null;
        this.label = null;
        this.loading = false;
        this.button = '';
        this.light = false;
        this.suggestionObserver = null;
        this.hasClonedInput = false;
        this.listSuggestion = [];
    }
    hostElement;
    /** This is emitted on search submission both with keyboard and mouse */
    search;
    /** custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */
    update;
    inputHandler() {
        this.update.emit(this.value);
    }
    emitSearch(e) {
        if (e.type === 'click' || (e.type === 'keydown' && e.key === 'Enter')) {
            // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead
            e.preventDefault();
            this.search.emit(this.value);
        }
    }
    setVal(e) {
        this.value = e.target.value;
    }
    clearInput(e) {
        this.value = '';
        this.update.emit(this.value);
        const closestInputField = e.target.closest("div.input-container")?.querySelector("input[type=search]");
        closestInputField?.focus();
    }
    getClassNames() {
        let classNames = '';
        const buttonTypes = ['none', 'icon', 'icon-inline'];
        if (this.value)
            classNames += 'searching ';
        if (this.loading)
            classNames += 'loading ';
        if (buttonTypes.includes(this.button))
            classNames += `button-${this.button} `;
        return classNames;
    }
    componentWillRender() {
        this.cloneListContent();
        this.autocompleteEventBinding();
    }
    onSuggestionUpdate() {
        this.cloneListContent();
    }
    autocompleteEventBinding() {
        if (this.suggestionObserver !== null || !this.list || !this.hostElement || !document.getElementById(this.list)) {
            return;
        }
        const targetNode = document.getElementById(this.list);
        this.suggestionObserver = new MutationObserver(this.onSuggestionUpdate.bind(this));
        this.suggestionObserver.observe(targetNode, { attributes: true, childList: true, subtree: true });
    }
    cloneListContent() {
        if (!this.list || !this.hostElement || !document.getElementById(this.list)) {
            return;
        }
        const options = [...document.getElementById(this.list).querySelectorAll('option')];
        this.listSuggestion = options.map((item) => {
            if (item.hasAttribute('value')) {
                return item.getAttribute('value');
            }
            return item.innerText;
        });
    }
    render() {
        return (h(Host, { key: 'cc98c9ba68e33ec9829c96b8d7e3f41e4f12a75e' }, h("div", { key: 'b8eabcb55c9b333f5e31d916cbb8c88c143677c7', class: `input-container ${this.getClassNames()}`, "data-haslist": (this.list !== null) + '' }, h("input", { key: 'dc0e2947af117a1eb630a471efdbf1d71410a942', type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: e => this.emitSearch(e), onInput: e => this.setVal(e) }), h("div", { key: 'f9c68a3ec4645e23829abe057ff5a4f1966b317e', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("button", { key: '2ac302a7c2715a653125b4d59fe7ebaa8990afa6', class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: e => this.emitSearch(e), "aria-label": "search", title: "search" }, h("pn-icon", { key: 'd7ff3ffc58c66f914bae81c6b1585602308bdf43', icon: search, color: "blue700" }))), this.button !== 'icon-inline' && (h("button", { key: '10f3f63221a43eb978a3ce50399f063497aea459', class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: (e) => this.clearInput(e) }, h("pn-icon", { key: '2479c191019b8ce64032085db4ae0b1d2f86120d', icon: close_small, color: "blue700" }))), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", { key: '6618a5eb4aee10b29a5cef7b03bf49a282e2a7d4' })))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { key: '9ac13f86ecc3819f98f115bc19250a3a951b3bd2', onClick: e => this.emitSearch(e), loading: this.loading, icon: search, appearance: this.light ? 'light' : 'dark', tooltip: this.button === 'icon' ? this.label : null }, this.label)), this.list && (h("datalist", { key: '6bdf261a540f9502679549d38ebd38a601290583', id: this.list }, this.listSuggestion.map(item => {
            return h("option", null, item);
        })))));
    }
    static get is() { return "pn-marketweb-search"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-marketweb-search.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-marketweb-search.css"]
        };
    }
    static get properties() {
        return {
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "placeholder",
                "reflect": false,
                "defaultValue": "null"
            },
            "inputid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "inputid",
                "reflect": false,
                "defaultValue": "null"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "name",
                "reflect": false,
                "defaultValue": "null"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "autocomplete",
                "reflect": false,
                "defaultValue": "null"
            },
            "list": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "list",
                "reflect": false,
                "defaultValue": "null"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "attribute": "value",
                "reflect": false,
                "defaultValue": "null"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Label for the button"
                },
                "attribute": "label",
                "reflect": false,
                "defaultValue": "null"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Loading animation"
                },
                "attribute": "loading",
                "reflect": false,
                "defaultValue": "false"
            },
            "button": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Button type, options are 'none' for no button, 'icon' for a labelless button with just a search icon and 'icon-inline' for a search button inside of the search field (this last option disables the clear field button)"
                },
                "attribute": "button",
                "reflect": false,
                "defaultValue": "''"
            },
            "light": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Light instead of dark search button"
                },
                "attribute": "light",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get states() {
        return {
            "suggestionObserver": {},
            "hasClonedInput": {},
            "listSuggestion": {}
        };
    }
    static get events() {
        return [{
                "method": "search",
                "name": "search",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "This is emitted on search submission both with keyboard and mouse"
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }, {
                "method": "update",
                "name": "update",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two."
                },
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get listeners() {
        return [{
                "name": "input",
                "method": "inputHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
//# sourceMappingURL=pn-marketweb-search.js.map
