@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: '68e3b652705f9abb8f235a95d10744d3e89092e8' }, h("input", { key: '47b698cae8463a65910771c226a8b70f7bb7dce1', 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: 'bce9d6324e9715a126cacc343c086dae45d3c983', class: "pn-radio", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: 'ccb27713de4efc025a6f565a85b6dfd1153d93d4', class: "pn-radio-container" }, h("div", { key: '1522b327478147860d22ca792cfaf188338ececd', class: "pn-radio-outer" }, h("div", { key: '4c90dac7a275a6836cc20ed79f3e7ce38e4271c2', class: "pn-radio-inner" }))), (this.label || this.helpertext) && (h("p", { key: 'f6dbf0ff2e1fecc12d6bd48f342fecf66fcf8bb6', class: "pn-radio-content" }, this.label && (h("label", { key: '2ec84da175f2f32c0a659e4b887c629a62f0314f', htmlFor: this.radioid, class: "pn-radio-label" }, this.label)), this.helpertext && (h("span", { key: 'c1b5ab3bd22314ecea520e7beadf956a2e74b6f2', id: this.idHelper, class: "pn-radio-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '7a6a9591942fbb1b1028f41b95c0d1d16d0b25ec', 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