@postnord/web-components
Version:
PostNord Web Components
323 lines (322 loc) • 12 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host, forceUpdate } from "@stencil/core";
import { alert_exclamation_circle, angle_down } from "pn-design-assets/pn-assets/icons.js";
import { uuidv4 } from "../../../index";
/**
* The `pn-select` uses a native `select` element under the hood.
* Use the slot to include `option` elements.
*
* Just like a regular `select`, you can use the `selected` prop on the nested option elements to preselect an option.
*
* @nativeChange Use the `change` event to listen to changes on the select element.
*/
export class PnSelect {
id = `pn-select-${uuidv4()}`;
idHelpertext = `${this.id}-text`;
select;
mo;
hostElement;
/** Label placed above the select. */
label;
/** Display a helper text underneath the select. */
helpertext;
/** Select HTML id */
selectId = this.id;
/** Display an icon to the left of the select input. */
icon;
/** HTML select name. @category HTML */
name;
/** HTML form name. @category HTML */
form;
/** HTML autocomplete. @category HTML */
autocomplete;
/**
* Set the select as required.
* @category Validation
*/
required = false;
/**
* Disable the select.
* @category Validation
*/
disabled = false;
/**
* Trigger the invalid state.
* @category Validation
*/
invalid = false;
/**
* Display an error message and trigger the invalid state.
* @category Validation
*/
error;
componentDidLoad() {
if (this.mo)
this.mo.disconnect();
this.mo = new MutationObserver(() => forceUpdate(this.hostElement));
this.mo.observe(this.hostElement, { childList: true, subtree: true });
}
hasError() {
return this.invalid || !!this.error;
}
hasMessage() {
return !!this.helpertext || !!this.error;
}
render() {
return (h(Host, { key: 'b22e1294fc75ddb12a9b61d7aecb5b94c3a7e5ea' }, h("div", { key: '9dfd36bd61dcd7241ef80747ec01c3efc307a788', class: "pn-select", "data-error": this.hasError() }, this.label && (h("label", { key: '40fcb64c25c3c01cb225246426101740f0802877', htmlFor: this.selectId, class: "pn-select-label" }, h("span", { key: '5d5d642416cf9e44448ea1c8064eb21095739c2b' }, this.label))), h("div", { key: '1bc7f4013682dfcb6a45720ab8a52fafae99ef05', class: "pn-select-input" }, this.icon && (h("pn-icon", { key: '0abe168e599ae4783d3a62fe953f7b85e420f383', class: "pn-select-icon", icon: this.icon, color: "gray900", "data-custom": true, "aria-hidden": "true" })), this.hasError() && (h("pn-icon", { key: 'f64407ac88df899600462af7fa199705ca226171', class: "pn-select-icon", icon: alert_exclamation_circle, color: "warning", "data-error": true, "aria-hidden": "true" })), h("pn-icon", { key: '9aa3d74b2bacd00a686830f109988c509e2cb103', class: "pn-select-icon", icon: angle_down, color: "blue700", "data-default": true, "aria-hidden": "true" }), h("select", { key: 'a134ae653d810be65dd2f7887d1184ac0b86f393', id: this.selectId, class: "pn-select-element", name: this.name, form: this.form, autocomplete: this.autocomplete, "aria-describedby": this.hasMessage() && this.idHelpertext, "aria-invalid": this.hasError().toString(), disabled: this.disabled, "data-placeholder": this.select?.value === '', ref: el => (this.select = el) }, h("slot", { key: 'fc2a42e32ec1482a12023182ab900fdba73303c3' }))), this.hasMessage() && (h("p", { key: '33b03c81c1e237c3ccd2ccf5e4302388342c6679', id: this.idHelpertext, class: "pn-select-helper", role: !!this.error ? 'alert' : null }, h("span", { key: 'adfe979c701aa29203fd29497910a24e0041c759' }, this.error || this.helpertext))))));
}
static get is() { return "pn-select"; }
static get originalStyleUrls() {
return {
"$": ["pn-select.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-select.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Label placed above the select."
},
"getter": false,
"setter": false,
"attribute": "label",
"reflect": false
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Display a helper text underneath the select."
},
"getter": false,
"setter": false,
"attribute": "helpertext",
"reflect": false
},
"selectId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Select HTML id"
},
"getter": false,
"setter": false,
"attribute": "select-id",
"reflect": false,
"defaultValue": "this.id"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Display an icon to the left of the select input."
},
"getter": false,
"setter": false,
"attribute": "icon",
"reflect": false
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "HTML"
}],
"text": "HTML select name."
},
"getter": false,
"setter": false,
"attribute": "name",
"reflect": false
},
"form": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "HTML"
}],
"text": "HTML form name."
},
"getter": false,
"setter": false,
"attribute": "form",
"reflect": false
},
"autocomplete": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "HTML"
}],
"text": "HTML autocomplete."
},
"getter": false,
"setter": false,
"attribute": "autocomplete",
"reflect": false
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Validation"
}],
"text": "Set the select as required."
},
"getter": false,
"setter": false,
"attribute": "required",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Validation"
}],
"text": "Disable the select."
},
"getter": false,
"setter": false,
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Validation"
}],
"text": "Trigger the invalid state."
},
"getter": false,
"setter": false,
"attribute": "invalid",
"reflect": false,
"defaultValue": "false"
},
"error": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Validation"
}],
"text": "Display an error message and trigger the invalid state."
},
"getter": false,
"setter": false,
"attribute": "error",
"reflect": false
}
};
}
static get elementRef() { return "hostElement"; }
}
//# sourceMappingURL=pn-select.js.map