/*!
 * Built with Stencil
 * By PostNord.
 */
import { uuidv4, awaitTopbar, en } from "../../../globals/helpers";
import { h, Host } from "@stencil/core";
import { close_small, search } from "pn-design-assets/pn-assets/icons.js";
import { translations } from "./translations";
/**
 * The search field has multiple button variants that changes the visual appearance.
 *
 * @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
 * @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
 */
export class PnSearchField {
    id = `pn-search-field-${uuidv4()}`;
    searchElement;
    hostElement;
    /** Provide an aria-label for the search field. */
    label;
    /** Set the value of the search field. */
    value = '';
    /** Set a search field placeholder. This is no replacement for a `label`. */
    placeholder;
    /** Set a unique ID for the search input. */
    searchid = this.id;
    /** Set HTML name of the search input. */
    name;
    /** Allow the browser to autocomplete the search field. */
    autocomplete;
    /** Point to a datalist element with this id. */
    list;
    /** Override the pntopbar language. */
    language = null;
    /** Disable the search field. @category State */
    disabled = false;
    /** Set the search field as required. @category State */
    required = false;
    /** Display loading animation. @category State */
    loading = false;
    /**
     * Button variant changes the visual of the search field:
     * - `''` Standard with a blue button.
     * - `simple` | ~~`icon`~~ with simple white icon only button.
     * - `auto` | ~~`icon-inline`~~ | ~~`none`~~ with a white inline search button.
     * - `jumbo` with a larger blue icon only button.
     *
     * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`.
     *
     * @category Button
     */
    button = '';
    /** Label for the button element. @category Button */
    buttonLabel;
    /** Add a tooltip to the search button. @category Button */
    buttonTooltip;
    /**
     * Light instead of dark search button.
     *
     * @deprecated The color is now set automatically based on the button prop.
     * @category Button
     */
    buttonLight = false;
    /** 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);
    }
    async componentWillLoad() {
        if (this.language === null)
            await awaitTopbar(this.hostElement);
    }
    translate(prop) {
        return translations?.[prop]?.[this.language || en];
    }
    emitSearch({ click, button }) {
        if (click?.type === 'click' || (button?.type === 'keydown' && button?.key === 'Enter')) {
            // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead
            const event = click || button;
            event.preventDefault();
            this.search.emit(this.value);
        }
    }
    setVal(e) {
        this.value = e.target.value;
    }
    clearInput() {
        this.value = '';
        this.update.emit(this.value);
        this.hostElement.querySelector('input').focus();
    }
    getButtonLabel() {
        return this.buttonLabel || this.translate('SEARCH');
    }
    /** icon === simple-search */
    searchSimple() {
        return this.button === 'icon' || this.button === 'simple';
    }
    /** none | icon-inline  === auto-search */
    searchAuto() {
        return this.button === 'icon-inline' || this.button === 'none' || this.button === 'auto';
    }
    searchJumbo() {
        return this.button === 'jumbo';
    }
    searchButtonAppearance() {
        return this.searchSimple() ? 'light' : null;
    }
    searchButtonVariant() {
        return this.searchSimple() ? 'outlined' : null;
    }
    render() {
        return (h(Host, { key: 'd6e76c457e99f83b3d47a4b0c951168c6b5fc086' }, h("div", { key: '203055449e80dfd9bf19d94f340e4081d358a7b5', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, h("div", { key: 'bb86197c5f7e88c162eac8c899557bb5941ed6c6', class: "pn-search-field-container" }, h("input", { key: 'ba497f96d2afd9554e842010edf8cef656a994fc', class: "pn-search-field-input", type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: 'bd11b1ec64b10dbc3b93fd0bcc163d5d120766cf', class: "pn-search-field-inline" }, this.searchAuto() && (h("pn-button", { key: 'c8961cb53609cc7d290b528af7e23a363a348833', class: "pn-search-field-button", type: "button", appearance: "light", small: true, icon: search, iconOnly: true, arialabel: this.getButtonLabel(), noTab: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })), !this.disabled && (h("pn-button", { key: '45197b884106304f5e3a4dc66b58333d8b79d4cb', small: true, class: "pn-search-field-clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: !this.value || this.loading, onPnClick: () => this.clearInput() })), this.searchAuto() && h("pn-spinner", { key: 'f681e4d08d66c9658f09b9cd947b70e4cd0f0837', class: "pn-search-field-spinner" }))), !this.searchAuto() && (h("pn-button", { key: '8498355d5d49c64755c58ce4d599938e3e25c84b', class: "pn-search-field-submit", label: this.getButtonLabel(), tooltip: this.buttonTooltip, appearance: this.searchButtonAppearance(), variant: this.searchButtonVariant(), icon: search, iconOnly: this.searchSimple() || this.searchJumbo(), arialabel: this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })))));
    }
    static get is() { return "pn-search-field"; }
    static get originalStyleUrls() {
        return {
            "$": ["pn-search-field.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pn-search-field.css"]
        };
    }
    static get properties() {
        return {
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Provide an aria-label for the search field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label"
            },
            "value": {
                "type": "string",
                "mutable": true,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set the value of the search field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value",
                "defaultValue": "''"
            },
            "placeholder": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set a search field placeholder. This is no replacement for a `label`."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "placeholder"
            },
            "searchid": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Set a unique ID for the search input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "searchid",
                "defaultValue": "this.id"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Set HTML name of the search input."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "autocomplete": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Allow the browser to autocomplete the search field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "autocomplete"
            },
            "list": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Point to a datalist element with this id."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "list"
            },
            "language": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "PnLanguages",
                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
                    "references": {
                        "PnLanguages": {
                            "location": "import",
                            "path": "@/globals/types",
                            "id": "src/globals/types.ts::PnLanguages",
                            "referenceLocation": "PnLanguages"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Override the pntopbar language."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "language",
                "defaultValue": "null"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Disable the search field."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Set the search field as required."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required",
                "defaultValue": "false"
            },
            "loading": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "State"
                        }],
                    "text": "Display loading animation."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "loading",
                "defaultValue": "false"
            },
            "button": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "PnSearchFieldButton",
                    "resolved": "\"\" | \"auto\" | \"icon\" | \"icon-inline\" | \"jumbo\" | \"none\" | \"simple\"",
                    "references": {
                        "PnSearchFieldButton": {
                            "location": "import",
                            "path": "@/globals/types",
                            "id": "src/globals/types.ts::PnSearchFieldButton",
                            "referenceLocation": "PnSearchFieldButton"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "since",
                            "text": "v7.18.0: Use `''`, `simple`, `auto` or `jumbo`."
                        }, {
                            "name": "category",
                            "text": "Button"
                        }],
                    "text": "Button variant changes the visual of the search field:\n- `''` Standard with a blue button.\n- `simple` | ~~`icon`~~ with simple white icon only button.\n- `auto` |\u00A0~~`icon-inline`~~ | ~~`none`~~ with a white inline search button.\n- `jumbo` with a larger blue icon only button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button",
                "defaultValue": "''"
            },
            "buttonLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Button"
                        }],
                    "text": "Label for the button element."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button-label"
            },
            "buttonTooltip": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "category",
                            "text": "Button"
                        }],
                    "text": "Add a tooltip to the search button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button-tooltip"
            },
            "buttonLight": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "deprecated",
                            "text": "The color is now set automatically based on the button prop."
                        }, {
                            "name": "category",
                            "text": "Button"
                        }],
                    "text": "Light instead of dark search button."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "button-light",
                "defaultValue": "false"
            }
        };
    }
    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": "string",
                    "resolved": "string",
                    "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": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "hostElement"; }
    static get listeners() {
        return [{
                "name": "input",
                "method": "inputHandler",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
