'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-9a9efa1c.js');
const close_small = require('./close_small-cd4578e1.js');
const search = require('./search-3785cc26.js');

const pnMarketwebSearchCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}:host{display:inline-flex}:host>pn-button{margin-left:0.35em}:host>pn-button button .pn-button-bg{transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s}:host>pn-button[data-loading=true] .pn-button-bg{left:0;transform:translateX(0);transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s}:host>pn-button[data-loading=true] pn-spinner{left:0.75em}:host input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}:host input::-webkit-search-cancel-button{display:none}:host input::placeholder{color:#969087;font-weight:normal}:host input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host input:hover{border:0.1rem solid #00a0d6}:host input:disabled{background:#f3f2f2;border:none}:host>.input-container{width:100%;position:relative}:host>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}:host[list] :host>.input-container .button-container{display:none}:host>.input-container button{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);background:#ffffff;border:none;color:#005d92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}:host>.input-container button.clear,:host>.input-container button.search{cursor:pointer}:host>.input-container button:focus{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host>.input-container button:hover,:host>.input-container button:focus{background:#e0f8ff}:host>.input-container button:active{background:#005d92}:host>.input-container button:active pn-icon svg,:host>.input-container button:active pn-icon svg path{fill:white}:host .searching button.search{transform:translate(150%, -50%)}:host .searching button.clear{transform:translate(-50%, -50%)}:host .button-none input,:host .button-icon-inline input{padding-right:3.3em}:host .button-none pn-spinner,:host .button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}:host .button-none button.search,:host .button-icon-inline button.search{transform:translate(-50%, -50%)}:host .button-none.loading button,:host .button-icon-inline.loading button{transform:translate(100%, -50%)}:host .button-none.loading pn-spinner,:host .button-icon-inline.loading pn-spinner{transform:translate(-50%, -50%)}:host .button-none.searching button.search{transform:translate(100%, -50%)}:host .button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;transform:translateX(-50%)}";
const PnMarketwebSearchStyle0 = pnMarketwebSearchCss;

const PnMarketwebSearch = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.search = index.createEvent(this, "search", 7);
        this.update = index.createEvent(this, "update", 7);
        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 = [];
    }
    get hostElement() { return index.getElement(this); }
    /** 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 (index.h(index.Host, { key: 'cc98c9ba68e33ec9829c96b8d7e3f41e4f12a75e' }, index.h("div", { key: 'b8eabcb55c9b333f5e31d916cbb8c88c143677c7', class: `input-container ${this.getClassNames()}`, "data-haslist": (this.list !== null) + '' }, index.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) }), index.h("div", { key: 'f9c68a3ec4645e23829abe057ff5a4f1966b317e', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (index.h("button", { key: '2ac302a7c2715a653125b4d59fe7ebaa8990afa6', class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: e => this.emitSearch(e), "aria-label": "search", title: "search" }, index.h("pn-icon", { key: 'd7ff3ffc58c66f914bae81c6b1585602308bdf43', icon: search.search, color: "blue700" }))), this.button !== 'icon-inline' && (index.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) }, index.h("pn-icon", { key: '2479c191019b8ce64032085db4ae0b1d2f86120d', icon: close_small.close_small, color: "blue700" }))), this.button === 'none' || (this.button === 'icon-inline' && index.h("pn-spinner", { key: '6618a5eb4aee10b29a5cef7b03bf49a282e2a7d4' })))), this.button !== 'none' && this.button !== 'icon-inline' && (index.h("pn-button", { key: '9ac13f86ecc3819f98f115bc19250a3a951b3bd2', onClick: e => this.emitSearch(e), loading: this.loading, icon: search.search, appearance: this.light ? 'light' : 'dark', tooltip: this.button === 'icon' ? this.label : null }, this.label)), this.list && (index.h("datalist", { key: '6bdf261a540f9502679549d38ebd38a601290583', id: this.list }, this.listSuggestion.map(item => {
            return index.h("option", null, item);
        })))));
    }
};
PnMarketwebSearch.style = PnMarketwebSearchStyle0;

exports.pn_marketweb_search = PnMarketwebSearch;

//# sourceMappingURL=pn-marketweb-search.cjs.entry.js.map