@scania/tegel
Version:
Tegel Design System
248 lines (247 loc) • 9.01 kB
JavaScript
import { h } from "@stencil/core";
import generateUniqueId from "../../utils/generateUniqueId";
/**
* @slot label - Slot for the label text.
*/
export class TdsRadioButton {
constructor() {
/** Unique Radio Button identifier. */
this.radioId = generateUniqueId();
/** Decides if the Radio Button is checked or not. */
this.checked = false;
/** Decides if the Radio Button is required or not. */
this.required = false;
/** Decides if the Radio Button is disabled or not. */
this.disabled = false;
this.handleChange = () => {
this.tdsChange.emit({
radioId: this.radioId,
value: this.value,
});
};
}
/** Method to programmatically focus the radio button element */
async focusElement() {
if (this.inputElement) {
this.inputElement.focus();
}
}
render() {
return (h("div", { key: 'f0a5a86e2ba270ab7c9f6bd4028765fcbd6b178f', class: "tds-radio-button" }, h("input", { key: '70a293a321ad72ba290a1274bfad25954895ec69', ref: (inputEl) => {
if (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: 'aa5928d97053deb16341661ba8bb218e2f12eb73', htmlFor: this.radioId }, h("slot", { key: '631da0a3930529351185f3b287ba9269caa0159b', 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 | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Name of Radio Button, used for reference."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "name"
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Value of input."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "value"
},
"radioId": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Unique Radio Button identifier."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "radio-id",
"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."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "checked",
"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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "required",
"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."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "disabled",
"defaultValue": "false"
},
"tdsAriaLabel": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Provides an accessible name for the component"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-aria-label"
},
"tdsTabIndex": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Provides a tabindex used when radio buttons are grouped"
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "tds-tab-index"
}
};
}
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 | undefined;\n }",
"resolved": "{ radioId: string; value: string | undefined; }",
"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"; }
}