name is passed as a property automatically from calcite-radio-button-group. */
@Prop({ reflect: true }) name!: string;
@@ -110,7 +114,7 @@ export class CalciteRadioButton {
}
/** The value of the radio button. */
- @Prop() value!: string;
+ @Prop({ reflect: true }) value!: string;
//--------------------------------------------------------------------------
//
@@ -173,6 +177,9 @@ export class CalciteRadioButton {
@Event()
calciteRadioButtonChange: EventEmitter;
+ @Event()
+ calciteRadioButtonFocusedChange: EventEmitter;
+
//--------------------------------------------------------------------------
//
// Event Listeners
@@ -188,6 +195,16 @@ export class CalciteRadioButton {
}
}
+ @Listen("mouseenter")
+ mouseenter() {
+ this.hovered = true;
+ }
+
+ @Listen("mouseleave")
+ mouseleave() {
+ this.hovered = false;
+ }
+
onInputBlur() {
this.focused = false;
}
@@ -211,6 +228,12 @@ export class CalciteRadioButton {
}
}
+ componentDidLoad() {
+ if (this.name) {
+ this.checkFirstRadioButton();
+ }
+ }
+
disconnectedCallback() {
this.input.parentNode.removeChild(this.input);
this.titleAttributeObserver.disconnect();
@@ -259,20 +282,25 @@ export class CalciteRadioButton {
}
this.input.type = "radio";
-
- // This renders the input as a sibling of calcite-radio-button because as it turns out
- // doing appendChild as hjorthhansen suggests doesn't really keep it out of the
- // shadow DOM as far as slot behavior goes. This is required to render {this.value} as fallback slot content.
- this.el.insertAdjacentElement("afterend", this.input);
+ this.el.insertAdjacentElement("beforeend", this.input);
}
render() {
+ const hasLabel = this.el.textContent ? true : false;
return (
- name is passed as a property automatically from calcite-radio-button-group. | `string` | `undefined` |
| `required` | `required` | Requires that a value is selected for the radio button group before the parent form will submit. | `boolean` | `false` |
| `scale` | `scale` | The scale (size) of the radio button. scale is passed as a property automatically from calcite-radio-button-group. | `"l" \| "m" \| "s"` | `"m"` |
@@ -19,9 +20,10 @@
## Events
-| Event | Description | Type |
-| -------------------------- | ----------- | ------------------ |
-| `calciteRadioButtonChange` | | `CustomEventinput element and changes on click.
-
-
input element.
-