@limetech/lime-elements
Version:
155 lines (154 loc) • 5.66 kB
JavaScript
import { Host, h } from "@stencil/core";
/**
* This is a low-level private component that renders individual radio button elements.
* It's used internally by the list-item component to render radio buttons when
* `type="radio"` is specified.
*
* ## Usage in the Library
*
* This template is primarily used by:
* - `limel-list` component when `type="radio"`
* - `limel-radio-button-group` component (which wraps `limel-list`)
*
* ## Why This Exists
*
* While we have `limel-radio-button-group` for most use cases, this template provides
* the actual radio button HTML structure with proper MDC classes and accessibility
* attributes. It ensures consistent styling and behavior across all radio button
* implementations in the library.
*
* ## Design Philosophy
*
* This follows the principle that individual radio buttons should not be standalone
* components, as a single radio button is never useful in a UI. Instead, this template
* is used to build groups of radio buttons through higher-level components.
*
* However, since this is a private component, consumers who need to use a radio button
* outside of the context of a list or group, can still use the `limel-radio-button`
* component directly according to in their UI needs.
*
* @private
*/
export class RadioButtonComponent {
render() {
return (h(Host, { key: '64623e09534c5b4e457029cbed4865d97d3cc19e', class: {
'boolean-input': true,
'radio-button': true,
checked: this.checked,
disabled: this.disabled,
} }, h("input", { key: '4eb816e8031d20bbfa5beb32798e50e5d3747895', type: "radio", id: this.id, checked: this.checked, disabled: this.disabled, onChange: this.onChange }), h("div", { key: '9e7d7db22981a16b4655d7cbcd7c3eb2462a7953', class: "box" }), h("label", { key: '4b2061d351b2d4d03d6e5763bc132be46d146e48', class: "boolean-input-label", htmlFor: this.id }, this.label)));
}
static get is() { return "limel-radio-button"; }
static get originalStyleUrls() {
return {
"$": ["radio-button.scss"]
};
}
static get styleUrls() {
return {
"$": ["radio-button.css"]
};
}
static get properties() {
return {
"checked": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Indicates whether the radio button is checked."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "checked"
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Disables the radio button when set to `true`."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled"
},
"id": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "Associates the internal input with an external label."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "id"
},
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Visual label shown next to the radio button."
},
"getter": false,
"setter": false,
"reflect": false,
"attribute": "label"
},
"onChange": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "(event: Event) => void",
"resolved": "(event: Event) => void",
"references": {
"Event": {
"location": "global",
"id": "global::Event"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "Change handler forwarded to the underlying input element."
},
"getter": false,
"setter": false
}
};
}
}