@postnord/web-components
Version:
PostNord Web Components
304 lines (303 loc) • 11.6 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 {
id = `pn-radio-button-${uuidv4()}`;
idHelper = `${this.id}-helpertext`;
hostElement;
/** The radio button label */
label = '';
/** This will be emitted on `change` and `input`, like a native radio button (required)*/
value;
/** The name of the radio button group that will hold this button, like a native radio button (required) */
name;
/** Check the radio button */
checked = false;
/** With this prop you can add an optional helper text element to radio button. */
helpertext;
/** Give the radio button a custom ID */
radioid = this.id;
/** Disable the radio button. @category State */
disabled = false;
/** Set the radio button as required. @category State */
required = false;
/** Trigger the red error state. @category State */
invalid = false;
/** Turn this radio-button into a radio-tile. @category Tile */
tile = false;
/** Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work. @category Tile */
icon = null;
handleId() {
this.idHelper = `${this.radioid}-helpertext`;
}
componentWillLoad() {
this.handleId();
}
render() {
return (h(Host, { key: '68e3b652705f9abb8f235a95d10744d3e89092e8' }, h("input", { key: '6132e5bb106f5d1b17c96192a6d0f9e4d459118f', 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 }), h("div", { key: '0050033b5f5d8a11a6dcb23ef1002deead7ef19f', class: "pn-radio", "data-tile": this.tile, "data-invalid": this.invalid }, h("div", { key: '217cd61094ba74d12b66b0f1ce4a62a738cd9ea1', class: "pn-radio-container" }, h("div", { key: 'a49818c6446d4a2de16c5cb7347810daa6cc762b', class: "pn-radio-outer" }, h("div", { key: '0bc4d654b6b5b3b297cae0556c07fc325c344ab3', class: "pn-radio-inner" }))), (this.label || this.helpertext) && (h("p", { key: '9b2ae7ed9948e20e86a55ecf7ac054018c3b11ca', class: "pn-radio-content" }, this.label && (h("label", { key: '152513820b14572e2a62129d21b7dd2096ea771d', htmlFor: this.radioid, class: "pn-radio-label" }, this.label)), this.helpertext && (h("span", { key: 'e2b8df55b8f6fd4652d7e153a0442f2574791768', id: this.idHelper, class: "pn-radio-helpertext" }, this.helpertext)))), this.tile && this.icon && h("pn-icon", { key: '23937af22e63746d80008031aaa34cbb982ea357', 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"
},
"getter": false,
"setter": false,
"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)"
},
"getter": false,
"setter": false,
"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)"
},
"getter": false,
"setter": false,
"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"
},
"getter": false,
"setter": false,
"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."
},
"getter": false,
"setter": false,
"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"
},
"getter": false,
"setter": false,
"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."
},
"getter": false,
"setter": false,
"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."
},
"getter": false,
"setter": false,
"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."
},
"getter": false,
"setter": false,
"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."
},
"getter": false,
"setter": false,
"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."
},
"getter": false,
"setter": false,
"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