@postnord/web-components
Version:
PostNord Web Components
510 lines (509 loc) • 20.3 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { uuidv4, awaitTopbar, en } from "../../../globals/helpers";
import { h, Host } from "@stencil/core";
import { close_small, search } from "pn-design-assets/pn-assets/icons.js";
import { translations } from "./translations";
/**
* The search field has multiple button variants that changes the visual appearance.
*
* @nativeInput Use the `input` event to listen to content being modified by the user. It is emitted everytime a user writes or removes content in the input.
* @nativeChange The `change` event is emitted when the input loses focus, the user clicks `Enter` or makes a selection (such as auto complete or suggestions).
*/
export class PnSearchField {
id = `pn-search-field-${uuidv4()}`;
searchElement;
hostElement;
/** 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 }) })))));
}
static get is() { return "pn-search-field"; }
static get originalStyleUrls() {
return {
"$": ["pn-search-field.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-search-field.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Provide an aria-label for the search field."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"value": {
"type": "string",
"mutable": true,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set the value of the search field."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value",
"defaultValue": "''"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a search field placeholder. This is no replacement for a `label`."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "placeholder"
},
"searchid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set a unique ID for the search input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "searchid",
"defaultValue": "this.id"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set HTML name of the search input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"autocomplete": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Allow the browser to autocomplete the search field."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "autocomplete"
},
"list": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Point to a datalist element with this id."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "list"
},
"language": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnLanguages",
"resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
"references": {
"PnLanguages": {
"location": "import",
"path": "@/globals/types",
"id": "src/globals/types.ts::PnLanguages",
"referenceLocation": "PnLanguages"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Override the pntopbar language."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "language",
"defaultValue": "null"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Disable the search field."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the search field as required."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "required",
"defaultValue": "false"
},
"loading": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Display loading animation."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "loading",
"defaultValue": "false"
},
"button": {
"type": "string",
"mutable": false,
"complexType": {
"original": "PnSearchFieldButton",
"resolved": "\"\" | \"auto\" | \"icon\" | \"icon-inline\" | \"jumbo\" | \"none\" | \"simple\"",
"references": {
"PnSearchFieldButton": {
"location": "import",
"path": "@/globals/types",
"id": "src/globals/types.ts::PnSearchFieldButton",
"referenceLocation": "PnSearchFieldButton"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "since",
"text": "v7.18.0: Use `''`, `simple`, `auto` or `jumbo`."
}, {
"name": "category",
"text": "Button"
}],
"text": "Button variant changes the visual of the search field:\n- `''` Standard with a blue button.\n- `simple` | ~~`icon`~~ with simple white icon only button.\n- `auto` |\u00A0~~`icon-inline`~~ | ~~`none`~~ with a white inline search button.\n- `jumbo` with a larger blue icon only button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "button",
"defaultValue": "''"
},
"buttonLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Button"
}],
"text": "Label for the button element."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "button-label"
},
"buttonTooltip": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Button"
}],
"text": "Add a tooltip to the search button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "button-tooltip"
},
"buttonLight": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "deprecated",
"text": "The color is now set automatically based on the button prop."
}, {
"name": "category",
"text": "Button"
}],
"text": "Light instead of dark search button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "button-light",
"defaultValue": "false"
}
};
}
static get events() {
return [{
"method": "search",
"name": "search",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "This is emitted on search submission both with keyboard and mouse."
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}, {
"method": "update",
"name": "update",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two."
},
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
}
}];
}
static get elementRef() { return "hostElement"; }
static get listeners() {
return [{
"name": "input",
"method": "inputHandler",
"target": undefined,
"capture": false,
"passive": false
}];
}
}