@postnord/web-components/components/pn-search-field2.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { u as uuidv4, j as awaitTopbar, e as en } from './helpers.js';
import { d as defineCustomElement$3 } from './pn-button2.js';
import { d as defineCustomElement$2 } from './pn-icon2.js';
import { d as defineCustomElement$1 } from './pn-spinner2.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 = "pn-search-field{display:inline-flex;gap:0.5em}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;outline:0.2rem solid transparent;outline-offset:0.2rem;transition-property:outline-color, background-color, border-color, color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);min-height:3em;height:100%;width:100%;border-radius:3em}pn-search-field input:-webkit-autofill,pn-search-field input:-webkit-autofill:hover,pn-search-field input:-webkit-autofill:focus,pn-search-field input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 10em #e0f8ff inset;-webkit-text-fill-color:#2d2013}pn-search-field input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}pn-search-field input::placeholder{color:#5e554a;font-weight:normal}pn-search-field input:hover{border-color:#005d92}pn-search-field input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}pn-search-field input::-webkit-search-cancel-button{display:none}pn-search-field>.input-container{width:100%;position:relative}pn-search-field>.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}pn-search-field>.input-container 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);transition-delay:0.2s;transform:translate(100%, -50%)}pn-search-field.searching pn-button.search{transform:translate(150%, -50%)}pn-search-field.searching pn-button.clear{transform:translate(-50%, -50%)}pn-search-field.button-none input,pn-search-field.button-icon-inline input{padding-right:2em}pn-search-field.button-none pn-spinner,pn-search-field.button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s;transform:translate(100%, -50%)}pn-search-field.button-none pn-button.search,pn-search-field.button-icon-inline pn-button.search{transform:translate(-50%, -50%)}pn-search-field.button-none.loading pn-button,pn-search-field.button-icon-inline.loading pn-button{transform:translate(100%, -50%)}pn-search-field.button-none.loading pn-spinner,pn-search-field.button-icon-inline.loading pn-spinner{transform:translate(-50%, -50%)}pn-search-field.button-none.searching pn-button.search{transform:translate(100%, -50%)}pn-search-field.button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;transform:translateX(-50%)}";
const PnSearchFieldStyle0 = pnSearchFieldCss;

const PnSearchField = /*@__PURE__*/ proxyCustomElement(class PnSearchField extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.search = createEvent(this, "search", 7);
        this.update = createEvent(this, "update", 7);
        this.label = undefined;
        this.value = '';
        this.placeholder = undefined;
        this.searchid = this.id;
        this.name = undefined;
        this.autocomplete = undefined;
        this.list = undefined;
        this.language = null;
        this.disabled = false;
        this.required = false;
        this.loading = false;
        this.button = '';
        this.buttonLabel = undefined;
        this.buttonLight = false;
    }
    id = `pn-search-field-${uuidv4()}`;
    searchElement;
    get hostElement() { return 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);
    }
    async componentWillLoad() {
        if (this.language)
            return;
        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();
    }
    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;
    }
    render() {
        return (h(Host, { key: '832efc417d5cdac506bd633c278850c6632b37f4', class: this.getClassNames() }, h("div", { key: '4216bce9ecec34c4f9d8c638da80b2c44c8615be', class: "input-container" }, h("input", { key: '817f49b544f9ef97d8f281cc6c8bcee65edb231a', 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: '2f5c2f864712551c7928ceb57733837720a1bc2e', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("pn-button", { key: '69f28fbd1dc19c68d2125a8f689ac067e77c68bf', small: true, class: "search", type: "button", appearance: "light", icon: search, iconOnly: true, noTab: this.button !== 'icon-inline', arialabel: this.translate('SEARCH'), onPnClick: e => this.emitSearch({ click: e.detail }) })), this.button !== 'icon-inline' && (h("pn-button", { key: '82f9599ab84356609cce0a03f2c9be24f28d950f', small: true, class: "clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: this.value && (!this.loading || this.button !== 'none'), onPnClick: () => this.clearInput() })), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", { key: '42c3319f161dd199695d2b460311d43abfc31e30' })))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { key: '9fc3a87ad30f92688b65762d98787319bba06df0', label: this.buttonLabel, appearance: this.buttonLight ? 'light' : null, icon: search, iconOnly: true, arialabel: this.button === 'icon' ? this.buttonLabel : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) }))));
    }
    static get style() { return PnSearchFieldStyle0; }
}, [0, "pn-search-field", {
        "label": [1],
        "value": [1025],
        "placeholder": [1],
        "searchid": [1],
        "name": [1],
        "autocomplete": [1],
        "list": [1],
        "language": [1],
        "disabled": [4],
        "required": [4],
        "loading": [4],
        "button": [1],
        "buttonLabel": [1, "button-label"],
        "buttonLight": [4, "button-light"]
    }, [[0, "input", "inputHandler"]]]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-search-field", "pn-button", "pn-icon", "pn-spinner"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-search-field":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnSearchField);
            }
            break;
        case "pn-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "pn-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "pn-spinner":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}

export { PnSearchField as P, defineCustomElement as d };

//# sourceMappingURL=pn-search-field2.js.map