@postnord/web-components
Version:
PostNord Web Components
273 lines (272 loc) • 10.3 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { h, Host } from "@stencil/core";
import { uuidv4 } from "../../../globals/helpers";
/**
* The `pn-radio-button` is built with a native `input[type="radio"]` in the background.
* This means you can use native events to listen to the changes.
*
* @nativeChange Use the `change` event to listen when the radio state is being changed.
*/
export class PnRadioButton {
constructor() {
this.label = '';
this.value = undefined;
this.name = undefined;
this.checked = false;
this.helpertext = undefined;
this.radioid = this.id;
this.disabled = false;
this.required = false;
this.invalid = false;
this.tile = false;
this.icon = null;
}
id = `pn-radio-button-${uuidv4()}`;
idHelper = `${this.id}-helpertext`;
hostElement;
handleId() {
this.idHelper = `${this.radioid}-helpertext`;
}
componentWillLoad() {
this.handleId();
}
render() {
return (h(Host, { key: 'ae520e0cfb3de29899ac40377cbb55061cd01b68' }, h("input", { key: 'd2195982014090f751f36f46687dc9c1e049e32d', type: "radio", id: this.radioid, value: this.value, name: this.name, disabled: this.disabled, required: this.required, checked: this.checked, "aria-describedby": !!this.helpertext && this.idHelper, "aria-invalid": this.invalid?.toString() }), h("div", { key: '0ebb9fa07ebb3b896e8efd3545bc7fe295c56d05', class: "pn-radio", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: 'a76dd992f2b3f2afb54e1db31ee50638002d5b4a', class: "pn-radio-container" }, h("div", { key: 'e456252ee2011d1dee97aff66f6ba4c122a5ca80', class: "pn-radio-outer" }, h("div", { key: 'dd7aee8305f27590d524b63336c619d7b440a781', class: "pn-radio-inner" }))), (this.label || this.helpertext) && (h("p", { key: '664c532213f996509cf6abe4a9d557b21ba60464', class: "pn-radio-content" }, this.label && (h("label", { key: '090e79852aa459100d0a382778bc30b75e61fe32', htmlFor: this.radioid, class: "pn-radio-label" }, this.label)), this.helpertext && (h("span", { key: '1785f82b7d25eff5117587777db5d02584609885', id: this.idHelper, class: "pn-radio-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '2902b6b37407a1b3dc7b60d47405de5ead710a57', color: "gray900", icon: this.icon }))));
}
static get is() { return "pn-radio-button"; }
static get originalStyleUrls() {
return {
"$": ["pn-radio-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["pn-radio-button.css"]
};
}
static get properties() {
return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The radio button label"
},
"attribute": "label",
"reflect": false,
"defaultValue": "''"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "This will be emitted on `change` and `input`, like a native radio button (required)"
},
"attribute": "value",
"reflect": true
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The name of the radio button group that will hold this button, like a native radio button (required)"
},
"attribute": "name",
"reflect": false
},
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Check the radio button"
},
"attribute": "checked",
"reflect": false,
"defaultValue": "false"
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "With this prop you can add an optional helper text element to radio button."
},
"attribute": "helpertext",
"reflect": false
},
"radioid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Give the radio button a custom ID"
},
"attribute": "radioid",
"reflect": false,
"defaultValue": "this.id"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Disable the radio button."
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Set the radio button as required."
},
"attribute": "required",
"reflect": false,
"defaultValue": "false"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "State"
}],
"text": "Trigger the red error state."
},
"attribute": "invalid",
"reflect": false,
"defaultValue": "false"
},
"tile": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Tile"
}],
"text": "Turn this radio-button into a radio-tile."
},
"attribute": "tile",
"reflect": false,
"defaultValue": "false"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Tile"
}],
"text": "Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work."
},
"attribute": "icon",
"reflect": false,
"defaultValue": "null"
}
};
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "radioid",
"methodName": "handleId"
}];
}
}
//# sourceMappingURL=pn-radio-button.js.map