@postnord/web-components
Version:
PostNord Web Components
592 lines (591 loc) • 23.3 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { uuidv4 } from "../../../globals/helpers";
import { h, Host, Mixin } from "@stencil/core";
import { animateHeightFactory } from "../../../globals/mixins/index";
/**
* 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.
*
* @slot - The default slot for adding custom HTML under the label/helpertext. {@since v7.17.0}
* @slot helpertext - Use this slot to add custom HTML inside of the helpertext element.
* Only recommended if you need a link without the `tile` prop. {@since v7.17.0}
* @slot content - When using the `tile` and `expand` props, this slot will be revealed when the input is checked. {@since v7.17.0}
*/
export class PnRadioButton extends Mixin(animateHeightFactory) {
constructor() {
super();
}
id = `pn-radio-${uuidv4()}`;
idHelpertext = `${this.id}-helpertext`;
contentArea;
radioInput;
hostElement;
/** The radio label */
label;
/** This adds an optional helpertext under the label. */
helpertext;
/** This will be emitted on change and input events. @category Native attributes */
value;
/** The name of the radio group. @category Native attributes */
name;
/** Programmatically check the input. @category Native attributes */
checked = false;
/** Set the radio as required. @category Native attributes */
required = false;
/** Disable the radio. @category Native attributes */
disabled = false;
/**
* Turn the radio into a clickable tile. A border and padding is added.
*
* **Do not** use interactive elements (links/buttons) inside of the slots when using this prop.
* An exception is made when using the `tile` + `expand` props together,
* which allows you to use interactive elements.
*
* @category Features
*/
tile = false;
/**
* Allow the radio to control the slot area "content".
* When checked, the area is visible, when unchecked, the area is hidden.
*
* The prop `tile` must be used at the same time.
* @see {@link tile}
* @since v7.17.0
* @category Features
*/
expand = false;
/**
* Add an icon on the right of your radio tile. The `tile` prop must be `true` for the icon to work.
* @see {@link tile}
* @category Features
*/
icon = null;
/**
* If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio.
* @category Features
*/
invalid = false;
/** A unique HTML ID for the radio. @since v7.25.0 @category HTML attributes */
pnId;
/**
* Provide the label via an aria attribute.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabel;
/**
* Provide the label from another element via its ID.
* We strongly recommend you use the `label` prop instead.
* @since v7.25.0
* @category HTML attributes
*/
pnAriaLabelledby;
/**
* A unique HTML ID for the radio.
* @deprecated Use `pn-id` instead.
* @category HTML attributes
*/
radioid;
handleId() {
this.idHelpertext = `${this.getId()}-helpertext`;
}
handleChecked(checked) {
this.checked = checked ?? this.radioInput.checked;
if (!this.displayContent())
return;
if (this.checked) {
this.openDropdown(this.contentArea);
this.uncheckOtherRadios();
}
else {
this.closeDropdown(this.contentArea);
}
}
handleChange(e) {
const target = e.target;
const { name } = target;
const isSameRadioGroup = name === this.name;
const isSameRadio = target === this.radioInput && target.checked;
/**
* Since content can be nested inside of this component,
* double check that the event is coming from this specific radio.
*/
if (isSameRadioGroup)
this.checked = isSameRadio;
}
/**
* This is the same as the native `change` event, but without bubbling.
* This is useful when you want to listen to the event directly on the `pn-radio-button` element without
* having to worry about catching events from nested pn-radio-buttons.
*
* @since v7.25.0
**/
pnRadioChange;
componentDidLoad() {
requestAnimationFrame(() => this.displayContent() && this.checked && this.openDropdown(this.contentArea));
}
getId() {
return this.pnId || this.radioid || this.id;
}
uncheckOtherRadios() {
if (!this.name)
return;
const selector = `pn-radio-button[name="${this.name}"]`;
const list = document.querySelectorAll(selector);
const radios = Array.from(list);
radios.forEach(radio => radio !== this.hostElement && (radio.checked = false));
}
isInvalid() {
return this.invalid && !this.disabled;
}
displayText() {
return this.displayLabel() || this.displayHelpertext();
}
displayLabel() {
return !!this.label;
}
displayHelpertext() {
return !!(this.helpertext || this.hostElement.querySelector('[slot="helpertext"]')?.textContent);
}
displayIcon() {
return this.tile && !!this.icon;
}
displayContent() {
return this.tile && this.expand;
}
getAriaLabel() {
return !this.displayLabel() && !this.pnAriaLabelledby ? this.pnAriaLabel : null;
}
getAriaLabelledby() {
return !this.displayLabel() && !this.pnAriaLabel ? this.pnAriaLabelledby : null;
}
render() {
return (h(Host, { key: '52305f6cf3826500739510f0cf1fd0ab2abc7dc2' }, h("input", { key: 'cc4f799fb58073ca59af798601d70baf88263aca', type: "radio", id: this.getId(), class: "pn-radio-input", value: this.value, name: this.name, disabled: this.disabled, checked: this.checked, required: this.required, "aria-label": this.getAriaLabel(), "aria-labelledby": this.getAriaLabelledby(), "aria-invalid": this.isInvalid()?.toString(), "aria-describedby": this.displayHelpertext() ? this.idHelpertext : null, "data-tile": this.tile, "data-expand": this.expand, onChange: event => this.pnRadioChange.emit(event), ref: el => (this.radioInput = el) }), h("div", { key: '05e2a10face9b2ca1b0ced1f6f38f1173f15d1c0', class: "pn-radio", "data-tile": this.tile, "data-expand": this.expand, "data-invalid": this.isInvalid() }, h("div", { key: 'b5274e03c47ac3d53103af945b3e8ce211eec827', class: "pn-radio-button" }, h("div", { key: '1f4a592f7d243312e00259f67ce60836a449f42d', class: "pn-radio-outer" }, h("div", { key: '05cb629b8c45724c6831271a40620ba5ec6e66ef', class: "pn-radio-inner" }))), h("div", { key: 'a91835bcaa01888fd2a2b1b768def02203b58038', class: "pn-radio-content", hidden: !this.displayText() }, h("label", { key: 'c11016410fd25dbb3288640ef5f239553991f0f8', htmlFor: this.getId(), class: "pn-radio-label", hidden: !this.displayLabel() }, this.label), h("p", { key: '6d4d46978e2a4f326af1558c4c6dd04c3c29956b', id: this.idHelpertext, class: "pn-radio-helpertext", hidden: !this.displayHelpertext() }, this.helpertext, h("slot", { key: '3167af1f4d47e1a9c8010bc9316b32c5499f66ee', name: "helpertext" })), h("slot", { key: '1a4b466d8a8ba4e06ae96977e33fad1c502d5ea2' })), this.displayIcon() && h("pn-icon", { key: '67f80f5c1db91e7310cf5baefdf6f3c346c83397', icon: this.icon, color: "gray900" }), h("div", { key: 'e296239a734c33c40035b489d79b1edf44f1a2b7', class: "pn-radio-container", "data-open": this.checked, hidden: !this.displayContent(), style: { height: '0px' }, ref: el => (this.contentArea = el) }, h("div", { key: 'f6245b5b2c9611da4b59a3fdb3047fe8365f1678', class: "pn-radio-area" }, h("slot", { key: 'b985712da1ea4504025d17cc507588f14d9ebfff', name: "content" }))))));
}
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 label"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"helpertext": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "This adds an optional helpertext under the label."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "helpertext"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "This will be emitted on change and input events."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "value"
},
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "The name of the radio group."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Programmatically check the input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "checked",
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Set the radio as required."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "required",
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Native attributes"
}],
"text": "Disable the radio."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"tile": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "Turn the radio into a clickable tile. A border and padding is added.\n\n**Do not** use interactive elements (links/buttons) inside of the slots when using this prop.\nAn exception is made when using the `tile` + `expand` props together,\nwhich allows you to use interactive elements."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tile",
"defaultValue": "false"
},
"expand": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link tile }"
}, {
"name": "since",
"text": "v7.17.0"
}, {
"name": "category",
"text": "Features"
}],
"text": "Allow the radio to control the slot area \"content\".\nWhen checked, the area is visible, when unchecked, the area is hidden.\n\nThe prop `tile` must be used at the same time."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "expand",
"defaultValue": "false"
},
"icon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "see",
"text": "{@link tile }"
}, {
"name": "category",
"text": "Features"
}],
"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,
"reflect": false,
"attribute": "icon",
"defaultValue": "null"
},
"invalid": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "category",
"text": "Features"
}],
"text": "If set to true, color scheme will turn red, indicating that there is an issue or incorrect input related the radio."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "invalid",
"defaultValue": "false"
},
"pnId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "A unique HTML ID for the radio."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-id"
},
"pnAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Provide the label via an aria attribute.\nWe strongly recommend you use the `label` prop instead."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-aria-label"
},
"pnAriaLabelledby": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "pn-aria-labelledby"
},
"radioid": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [{
"name": "deprecated",
"text": "Use `pn-id` instead."
}, {
"name": "category",
"text": "HTML attributes"
}],
"text": "A unique HTML ID for the radio."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "radioid"
}
};
}
static get events() {
return [{
"method": "pnRadioChange",
"name": "pnRadioChange",
"bubbles": false,
"cancelable": true,
"composed": true,
"docs": {
"tags": [{
"name": "since",
"text": "v7.25.0"
}],
"text": "This is the same as the native `change` event, but without bubbling.\nThis is useful when you want to listen to the event directly on the `pn-radio-button` element without\nhaving to worry about catching events from nested pn-radio-buttons."
},
"complexType": {
"original": "Event",
"resolved": "Event",
"references": {
"Event": {
"location": "import",
"path": "@stencil/core",
"id": "node_modules::Event",
"referenceLocation": "Event"
}
}
}
}];
}
static get elementRef() { return "hostElement"; }
static get watchers() {
return [{
"propName": "radioid",
"methodName": "handleId"
}, {
"propName": "pnId",
"methodName": "handleId",
"handlerOptions": {
"immediate": true
}
}, {
"propName": "checked",
"methodName": "handleChecked"
}];
}
static get listeners() {
return [{
"name": "change",
"method": "handleChange",
"target": "window",
"capture": false,
"passive": false
}];
}
}