@postnord/web-components
Version:
PostNord Web Components
122 lines (114 loc) • 9.6 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
'use strict';
var index = require('./index-DVv2io0H.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 = "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}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{outline:0.2rem solid transparent;outline-offset:0.2rem}pn-search-field input:focus-visible{outline-color:#005d92;background-color:#ffffff;border-color:#005d92}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){pn-search-field input{transition-duration:0s;transition-delay:0s}}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{min-height:3em;height:100%;width:100%;border-radius:3em}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)}@media (prefers-reduced-motion: reduce){pn-search-field>.input-container pn-button{transition-duration:0s;transition-delay:0s}}pn-search-field>.input-container pn-button{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 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. */
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 type, options are `none` for no button, `icon` for a labelless button with just a search icon and `icon-inline` for a search button inside of the search field (this last option disables the clear field button). @category Button */
button = '';
/** Label for the button element. @category Button */
buttonLabel;
/** Light instead of dark search button. @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)
return;
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();
}
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 (index.h(index.Host, { key: '138e285c92f8174bda3d33f2a7e45a22c038ed0f', class: this.getClassNames() }, index.h("div", { key: 'a174c72928544e2a4f14201630806c318fdc31fe', class: "input-container" }, index.h("input", { key: 'b933d16d8856d4aee23a95c0e63a41710653ab2d', 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: 'b4a2196cbf07365a2737ddd39b7687a78e28ca04', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (index.h("pn-button", { key: '455ee7cac809361ba685650ed8509e450c3b812a', 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' && (index.h("pn-button", { key: '8489c359bf649bbda8692476467b79c9f77f122d', 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' && index.h("pn-spinner", { key: '1cb42a68523fe54e812c12b44e1c219f1f85d9ed' })))), this.button !== 'none' && this.button !== 'icon-inline' && (index.h("pn-button", { key: 'c5522efd6eda3dead922f71a6a96fcbf6a137c7e', 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 }) }))));
}
};
PnSearchField.style = pnSearchFieldCss;
exports.pn_search_field = PnSearchField;
//# sourceMappingURL=pn-search-field.entry.cjs.js.map