@scania/tegel
Version:
Tegel Design System
229 lines (228 loc) • 8.26 kB
JavaScript
import { h } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
/**
* @slot label - Slot for the label text.
*/
export class TdsRadioButton {
constructor() {
this.handleChange = () => {
this.tdsChange.emit({
radioId: this.radioId,
value: this.value,
});
};
this.name = undefined;
this.value = undefined;
this.radioId = generateUniqueId();
this.checked = false;
this.required = false;
this.disabled = false;
this.tdsAriaLabel = undefined;
this.tdsTabIndex = undefined;
}
/** Method to programmatically focus the radio button element */
async focusElement() {
if (this.inputElement) {
this.inputElement.focus();
}
}
render() {
return (h("div", { key: '6f44a40cb5ccf890bdee47d36f47a79d5f8b603c', class: "tds-radio-button" }, h("input", { key: '1da8f9df168c631a634172385c3471a5c6bb03aa', ref: (inputEl) => (this.inputElement = inputEl), "aria-label": this.tdsAriaLabel, class: "tds-form-input", type: "radio", role: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, required: this.required, disabled: this.disabled, onChange: () => this.handleChange(), tabIndex: this.tdsTabIndex }), h("label", { key: '0acf59236ffd3ee0136f2bdef9db8a36afe666ff', htmlFor: this.radioId }, h("slot", { key: 'add4ebdebbb4d5e15126a876c0c0940734b7b068', name: "label" }))));
}
static get is() { return "tds-radio-button"; }
static get encapsulation() { return "scoped"; }
static get originalStyleUrls() {
return {
"$": ["radio-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["radio-button.css"]
};
}
static get properties() {
return {
"name": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Name of Radio Button, used for reference."
},
"attribute": "name",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Value of input."
},
"attribute": "value",
"reflect": false
},
"radioId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Unique Radio Button identifier."
},
"attribute": "radio-id",
"reflect": false,
"defaultValue": "generateUniqueId()"
},
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decides if the Radio Button is checked or not."
},
"attribute": "checked",
"reflect": true,
"defaultValue": "false"
},
"required": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decides if the Radio Button is required or not."
},
"attribute": "required",
"reflect": false,
"defaultValue": "false"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Decides if the Radio Button is disabled or not."
},
"attribute": "disabled",
"reflect": false,
"defaultValue": "false"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provides an accessible name for the component"
},
"attribute": "tds-aria-label",
"reflect": false
},
"tdsTabIndex": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Provides a tabindex used when radio buttons are grouped"
},
"attribute": "tds-tab-index",
"reflect": false
}
};
}
static get events() {
return [{
"method": "tdsChange",
"name": "tdsChange",
"bubbles": true,
"cancelable": false,
"composed": true,
"docs": {
"tags": [],
"text": "Sends unique Radio Button identifier and status when it is checked.\nIf no ID is specified, a random one will be generated.\nTo use this listener, don't use the randomized ID, use a specific one of your choosing."
},
"complexType": {
"original": "{\n radioId: string;\n value: string;\n }",
"resolved": "{ radioId: string; value: string; }",
"references": {}
}
}];
}
static get methods() {
return {
"focusElement": {
"complexType": {
"signature": "() => Promise<void>",
"parameters": [],
"references": {
"Promise": {
"location": "global",
"id": "global::Promise"
}
},
"return": "Promise<void>"
},
"docs": {
"text": "Method to programmatically focus the radio button element",
"tags": []
}
}
};
}
static get elementRef() { return "host"; }
}