@postnord/web-components
Version:
PostNord Web Components
161 lines (154 loc) • 12.7 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-XKg-ydzH.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{min-height:3em;height:100%;width:100%;color:#2d2013;background-color:#ffffff;border:0.0625em solid #969087;border-radius:3em;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::-webkit-calendar-picker-indicator,${transformTag("pn-search-field")} .pn-search-field-input::-webkit-search-cancel-button,${transformTag("pn-search-field")} .pn-search-field-input::-webkit-search-decoration{display:none !important}${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", 7);
this.update = createEvent(this, "update", 7);
}
id = `pn-search-field-${uuidv4()}`;
get hostElement() { return getElement(this); }
/** Provide an aria-label for the search field. */
label;
/** Override the pntopbar language. */
language = undefined;
/** Set the value of the search field. @category Native attributes */
value = '';
/** Set HTML name of the search input. @category Native attributes */
name;
/** Set a search field placeholder. @category Native attributes */
placeholder;
/** Allow the browser to autocomplete the search field. @category Native attributes */
autocomplete;
/** Point to a datalist element with this id. @category Native attributes */
list;
/** Set the search field as required. @category Native attributes */
required = false;
/** Disable the search field. @category Native attributes */
disabled = false;
/** Display loading animation. @category Features */
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 Features
*/
button = '';
/** Label for the button element. @category Features */
buttonLabel;
/** Add a tooltip to the search button. @category Features */
buttonTooltip;
/**
* Light instead of dark search button.
*
* @deprecated The color is now set automatically based on the button prop.
* @category Features
*/
buttonLight = false;
/** Set a custom ID for the search input. @since v7.25.0 @category HTML attributes */
pnId;
/**
* Provide the label from another element via its ID.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabelledby;
/** Set a unique ID for the search input. @deprecated Use `pn-id` instead. @category HTML attributes */
searchid;
/** 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 === undefined)
await awaitTopbar(this.hostElement);
}
getId() {
return this.pnId || this.searchid || this.id;
}
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();
}
displayLabel() {
return !!this.label;
}
getAriaLabelledby() {
return !this.displayLabel() ? this.pnAriaLabelledby : null;
}
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: '5ffa0c58cd54c1a6588147e5ec9a72e0045e16aa' }, h("div", { key: 'd18a2bdaef46229ff87fe1612d39489443fd70cc', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, h("div", { key: '1a7c9e872e0c7696f0d1d84a3420eade2b1cd2ed', class: "pn-search-field-container" }, h("input", { key: '3ff3e9809123283f66ea933f7bc9fb5a92489e51', class: "pn-search-field-input", id: this.getId(), type: "search", value: this.value, name: this.name, placeholder: this.placeholder, autocomplete: this.autocomplete, list: this.list, required: this.required, disabled: this.disabled, "aria-label": this.label, "aria-labelledby": this.getAriaLabelledby(), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: 'eeb6d382c93f98da5561b30219ef829c668eab54', class: "pn-search-field-inline" }, this.searchAuto() && (h("pn-button", { key: '65d7049753656a7f4bce29e7e8c99305e99f15e2', 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: '58bae5e2fc05c66cee21081e71904530ca75a0b9', 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: 'd3955278766f786897eb0024c7523179a2ad78c4', class: "pn-search-field-spinner" }))), !this.searchAuto() && (h("pn-button", { key: 'fd46d299cfd9600e671e827daa4a00675a6bd25b', 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 };