@postnord/web-components
Version:
PostNord Web Components
404 lines (403 loc) • 15.7 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";
export class PnSearchField {
constructor() {
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;
hostElement;
/** 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: 'e37e5e244250cfa6f2f042b2c4b78952fa7d9a79', class: this.getClassNames() }, h("div", { key: 'eed981fb9d9fb396fbd18242e54efb2f7d7045aa', class: "input-container" }, h("input", { key: '218ba7784220d2709d65ed94b818e14d9d49c08a', 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: '90487db137ea5f86500d4cebe40c101085aa6dff', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("pn-button", { key: 'db7bd6327c382b49b3a3f1d4ae355273b64f01b3', 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: '44b876f97d6a961b12363c0e3e342399ddccad1f', 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: '8f116b75dee2226c3efb89bbc4df1a1cf1e21175' })))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { key: 'a952f2dce26f841f3e934d2195649ab8c584c297', 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 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."
},
"attribute": "label",
"reflect": false
},
"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."
},
"attribute": "value",
"reflect": false,
"defaultValue": "''"
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Set a search field placeholder."
},
"attribute": "placeholder",
"reflect": false
},
"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"
},
"attribute": "searchid",
"reflect": false,
"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."
},
"attribute": "name",
"reflect": false
},
"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."
},
"attribute": "autocomplete",
"reflect": false
},
"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."
},
"attribute": "list",
"reflect": false
},
"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"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Override the pntopbar language."
},
"attribute": "language",
"reflect": false,
"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."
},
"attribute": "disabled",
"reflect": false,
"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."
},
"attribute": "required",
"reflect": false,
"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."
},
"attribute": "loading",
"reflect": false,
"defaultValue": "false"
},
"button": {
"type": "string",
"mutable": false,
"complexType": {
"original": "'' | 'none' | 'icon' | 'icon-inline'",
"resolved": "\"\" | \"icon\" | \"icon-inline\" | \"none\"",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Button"
}],
"text": "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)."
},
"attribute": "button",
"reflect": false,
"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."
},
"attribute": "button-label",
"reflect": false
},
"buttonLight": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Button"
}],
"text": "Light instead of dark search button."
},
"attribute": "button-light",
"reflect": false,
"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
}];
}
}
//# sourceMappingURL=pn-search-field.js.map