/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-CfUQZtlH.js');
var index$1 = require('./index.cjs.js');

const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414" clip-rule="evenodd"/></svg>';
const close_small = icon$1;

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 11.442A7.44 7.44 0 0 1 11.44 4c6.24 0 9.617 7.154 5.923 11.949l2.844 2.844a1 1 0 0 1-1.414 1.414l-2.837-2.837C11.21 21.045 4 17.73 4 11.441m11.277 3.867C11.846 18.714 6 16.284 6 11.442A5.44 5.44 0 0 1 11.44 6c4.724 0 7.204 5.605 4.026 9.1z" clip-rule="evenodd"/></svg>';
const search = icon;

const translations = {
    SEARCH: {
        en: 'Search',
        sv: 'Sök',
        da: 'Søg',
        fi: 'Hae',
        no: 'Søk',
    },
    CLEAR: {
        en: 'Clear search field',
        sv: 'Rensa sökfältet',
        da: 'Ryd søgefeltet',
        fi: 'Tyhjennä hakukenttä',
        no: 'Tøm søkefeltet',
    },
};

const pnSearchFieldCss = () => `${index.transformTag("pn-search-field")}{display:inline-block}${index.transformTag("pn-search-field")} .pn-search-field{display:flex;gap:0.5em}${index.transformTag("pn-search-field")} .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}${index.transformTag("pn-search-field")} .pn-search-field-input{color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:0.5em;padding:0.75em;font-family:inherit;font-size:1em;font-weight:500;line-height:1.5em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill,${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:hover,${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:focus,${index.transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}${index.transformTag("pn-search-field")} .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${index.transformTag("pn-search-field")} .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${index.transformTag("pn-search-field")} .pn-search-field-input{transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-search-field")} .pn-search-field-input{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-search-field")} .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}${index.transformTag("pn-search-field")} .pn-search-field-input:hover{border-color:#005d92}${index.transformTag("pn-search-field")} .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${index.transformTag("pn-search-field")} .pn-search-field-input{min-height:3em;height:100%;width:100%;border-radius:3em}${index.transformTag("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button{display:none}${index.transformTag("pn-search-field")} .pn-search-field-inline{pointer-events:none;position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}${index.transformTag("pn-search-field")} .pn-search-field-inline ${index.transformTag("pn-button")}{position:absolute;left:50%;top:50%;transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${index.transformTag("pn-search-field")} .pn-search-field-inline ${index.transformTag("pn-button")}{transition-duration:0s;transition-delay:0s}}${index.transformTag("pn-search-field")} .pn-search-field-inline ${index.transformTag("pn-button")}{transition-delay:0.2s;transform:translate(100%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field-submit{white-space:nowrap}${index.transformTag("pn-search-field")} .pn-search-field-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}${index.transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] ${index.transformTag("pn-button")}{transform:translate(100%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}${index.transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}${index.transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}${index.transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only][data-loading] .pn-button-bg{width:4em;height:4em}${index.transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}${index.transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}`;

const PnSearchField = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.search = index.createEvent(this, "search");
        this.update = index.createEvent(this, "update");
    }
    id = `pn-search-field-${index$1.uuidv4()}`;
    searchElement;
    get hostElement() { return index.getElement(this); }
    /** 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 index$1.awaitTopbar(this.hostElement);
    }
    translate(prop) {
        return translations?.[prop]?.[this.language || index$1.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 (index.h(index.Host, { key: 'd6e76c457e99f83b3d47a4b0c951168c6b5fc086' }, index.h("div", { key: '203055449e80dfd9bf19d94f340e4081d358a7b5', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, index.h("div", { key: 'bb86197c5f7e88c162eac8c899557bb5941ed6c6', class: "pn-search-field-container" }, index.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) }), index.h("div", { key: 'bd11b1ec64b10dbc3b93fd0bcc163d5d120766cf', class: "pn-search-field-inline" }, this.searchAuto() && (index.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 && (index.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() && index.h("pn-spinner", { key: 'f681e4d08d66c9658f09b9cd947b70e4cd0f0837', class: "pn-search-field-spinner" }))), !this.searchAuto() && (index.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 }) })))));
    }
};
PnSearchField.style = pnSearchFieldCss();

exports.pn_search_field = PnSearchField;
