@limetech/lime-elements
Version:
175 lines (174 loc) • 5.59 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() {
this.handleChange = (event) => {
event.stopPropagation();
if (this.disabled) {
return;
}
this.change.emit(event.detail);
};
this.items = undefined;
this.selectedItem = undefined;
this.disabled = false;
this.badgeIcons = undefined;
this.maxLinesSecondaryText = 3;
}
render() {
return (h("limel-list", { 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"
},
"ListItem": {
"location": "import",
"path": "../list/list-item.types"
},
"ListSeparator": {
"location": "import",
"path": "../list/list-item.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Array of radio button options to display"
}
},
"selectedItem": {
"type": "unknown",
"mutable": false,
"complexType": {
"original": "ListItem<string | number>",
"resolved": "ListItem<string | number>",
"references": {
"ListItem": {
"location": "import",
"path": "../list/list-item.types"
}
}
},
"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`."
}
},
"disabled": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Disables all radio buttons when `true`"
},
"attribute": "disabled",
"reflect": true,
"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"
},
"attribute": "badge-icons",
"reflect": true
},
"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."
},
"attribute": "max-lines-secondary-text",
"reflect": true,
"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/list-item.types"
}
}
}
}];
}
}
//# sourceMappingURL=radio-button-group.js.map