@postnord/web-components
Version:
PostNord Web Components
144 lines (137 loc) • 11.8 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { t as transformTag, r as registerInstance, c as createEvent, g as getElement, h, a as Host } from './index-CAEP792y.js';
import { uuidv4, awaitTopbar, en } from './index.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 = () => `${transformTag("pn-search-field")}{display:inline-block}${transformTag("pn-search-field")} .pn-search-field{display:flex;gap:0.5em}${transformTag("pn-search-field")} .pn-search-field-container{width:100%;flex:1 1 100%;position:relative}${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}${transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill,${transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:hover,${transformTag("pn-search-field")} .pn-search-field-input:-webkit-autofill:focus,${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}${transformTag("pn-search-field")} .pn-search-field-input{outline:0.2rem solid transparent;outline-offset:0.2rem}${transformTag("pn-search-field")} .pn-search-field-input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}${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)} (prefers-reduced-motion: reduce){${transformTag("pn-search-field")} .pn-search-field-input{transition-duration:0s;transition-delay:0s}}${transformTag("pn-search-field")} .pn-search-field-input::placeholder{color:#5e554a;font-weight:normal}${transformTag("pn-search-field")} .pn-search-field-input:hover{border-color:#005d92}${transformTag("pn-search-field")} .pn-search-field-input:disabled{color:#5e554a;background-color:#f3f2f2;border-color:#f3f2f2}${transformTag("pn-search-field")} .pn-search-field-input{min-height:3em;height:100%;width:100%;border-radius:3em}${transformTag("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button{display:none}${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}${transformTag("pn-search-field")} .pn-search-field-inline ${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)} (prefers-reduced-motion: reduce){${transformTag("pn-search-field")} .pn-search-field-inline ${transformTag("pn-button")}{transition-duration:0s;transition-delay:0s}}${transformTag("pn-search-field")} .pn-search-field-inline ${transformTag("pn-button")}{transition-delay:0.2s;transform:translate(100%, -50%)}${transformTag("pn-search-field")} .pn-search-field-submit{white-space:nowrap}${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%)}${transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-inline{pointer-events:unset}${transformTag("pn-search-field")} .pn-search-field[data-inline] .pn-search-field-button{transform:translate(-50%, -50%)}${transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] ${transformTag("pn-button")}{transform:translate(100%, -50%)}${transformTag("pn-search-field")} .pn-search-field[data-inline][data-loading] .pn-search-field-spinner{transform:translate(-50%, -50%)}${transformTag("pn-search-field")} .pn-search-field[data-inline][data-searching] .pn-search-field-button{transform:translate(150%, -50%)}${transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-input{min-height:4em;padding-left:1.25em}${transformTag("pn-search-field")} .pn-search-field[data-jumbo] .pn-search-field-submit .pn-button[data-icon-only]{width:4em;height:4em}${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}${transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-inline{pointer-events:unset}${transformTag("pn-search-field")} .pn-search-field[data-searching] .pn-search-field-clear{transform:translate(-50%, -50%)}`;
const PnSearchField = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.search = createEvent(this, "search");
this.update = createEvent(this, "update");
}
id = `pn-search-field-${uuidv4()}`;
searchElement;
get hostElement() { return 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 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 }) })))));
}
};
PnSearchField.style = pnSearchFieldCss();
export { PnSearchField as pn_search_field };