@limetech/lime-elements
Version:
199 lines (198 loc) • 8.15 kB
JavaScript
import { h } from "@stencil/core";
/**
* The Radio Button component provides a convenient way to create a group of radio buttons
* from an array of options. Radio buttons allow users to select a single option from
* multiple choices, making them ideal for exclusive selections.
*
* :::note
* A single radio button is never useful in a UI. Radio buttons should always come in groups
* of at least 2 options where only one can be selected at a time.
* :::
*
* @exampleComponent limel-example-radio-button-group-basic
* @exampleComponent limel-example-radio-button-group-deselect-selected
* @exampleComponent limel-example-radio-button-group-icons
* @exampleComponent limel-example-radio-button-group-multiple-lines
* @beta
*/
export class RadioButtonGroup {
constructor() {
/**
* Disables all radio buttons when `true`
*/
this.disabled = false;
/**
* By default, lists will display 3 lines of text, and then truncate the rest.
* Consumers can increase or decrease this number by specifying
* `maxLinesSecondaryText`. If consumer enters zero or negative
* numbers we default to 1; and if they type decimals we round up.
*/
this.maxLinesSecondaryText = 3;
this.handleChange = (event) => {
event.stopPropagation();
if (this.disabled) {
return;
}
this.change.emit(event.detail);
};
}
render() {
return (h("limel-list", { key: 'd42e6342d4fd79d34cb2c6a9d25d3dfe577e9a99', items: this.createItems(), type: "radio", badgeIcons: this.badgeIcons, maxLinesSecondaryText: this.maxLinesSecondaryText, onChange: this.handleChange }));
}
createItems() {
return this.items.map((option) => {
var _a;
if ('separator' in option) {
return option;
}
return Object.assign(Object.assign({}, option), { selected: option.value === ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.value), disabled: this.disabled || option.disabled });
});
}
static get is() { return "limel-radio-button-group"; }
static get properties() {
return {
"items": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "Array<ListItem | ListSeparator>",
"resolved": "(ListSeparator | ListItem<any>)[]",
"references": {
"Array": {
"location": "global",
"id": "global::Array"
},
"ListItem": {
"location": "import",
"path": "../list-item/list-item.types",
"id": "src/components/list-item/list-item.types.ts::ListItem",
"referenceLocation": "ListItem"
},
"ListSeparator": {
"location": "import",
"path": "../list-item/list-item.types",
"id": "src/components/list-item/list-item.types.ts::ListSeparator",
"referenceLocation": "ListSeparator"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Array of radio button options to display"
},
"getter": false,
"setter": false
},
"selectedItem": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ListItem<string | number>",
"resolved": "ListItem<string | number>",
"references": {
"ListItem": {
"location": "import",
"path": "../list-item/list-item.types",
"id": "src/components/list-item/list-item.types.ts::ListItem",
"referenceLocation": "ListItem"
}
}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The currently selected item in the radio button group.\nThis is a ListItem object that contains the value and other properties of the selected item.\nIf no item is selected, this will be `undefined`."
},
"getter": false,
"setter": false
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disables all radio buttons when `true`"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "disabled",
"defaultValue": "false"
},
"badgeIcons": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Set to `true` if the radio button group should display larger icons with a background"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "badge-icons"
},
"maxLinesSecondaryText": {
"type": "number",
"mutable": false,
"complexType": {
"original": "number",
"resolved": "number",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "By default, lists will display 3 lines of text, and then truncate the rest.\nConsumers can increase or decrease this number by specifying\n`maxLinesSecondaryText`. If consumer enters zero or negative\nnumbers we default to 1; and if they type decimals we round up."
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "max-lines-secondary-text",
"defaultValue": "3"
}
};
}
static get events() {
return [{
"method": "change",
"name": "change",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the selection changes with the full ListItem payload"
},
"complexType": {
"original": "ListItem<string | number | undefined>",
"resolved": "ListItem<string | number>",
"references": {
"ListItem": {
"location": "import",
"path": "../list-item/list-item.types",
"id": "src/components/list-item/list-item.types.ts::ListItem",
"referenceLocation": "ListItem"
}
}
}
}];
}
}