import { Component , Event , EventEmitter , h , Prop } from '@stencil/core' ; import { withComponentRegistry } from '../../../core/player/withComponentRegistry' ; /**
 * Menu radio buttons are presented in radio groups (a collection of radio buttons describing a set
 * of related options). Only one radio button in a group can be selected at the same time.
 *
 * ## Visual
 *
 * <img
 *   src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/settings/menu-radio/menu-radio.png"
 *   alt="Vime settings menu radio component"
 * />
 */ @ Component ( { tag : 'vm-menu-radio' , shadow : true , } ) export class MenuRadio { /**
     * The title of the radio item displayed to the user.
     */ @ Prop ( ) label ! : string ; /**
     * The value associated with this radio item.
     */ @ Prop ( ) value ! : string ; /**
     * Whether the radio item is selected or not.
     */ @ Prop ( { mutable : true } ) checked = false ; /**
     * This can provide additional context about the value. For example, if the option is for a set of
     * video qualities, the badge could describe whether the quality is UHD, HD etc.
     */ @ Prop ( ) badge ? : string ; /**
     * The URL to an SVG element or fragment to load.
     */ @ Prop ( ) checkIcon ? : string = 'check' ; /**
     * The name of an icon library to use. Defaults to the library defined by the `icons` player
     * property.
     */ @ Prop ( ) icons ? : string ; /**
     * Emitted when the radio button is selected.
     */ @ Event ( ) vmCheck ! : EventEmitter < void > ; constructor ( ) { withComponentRegistry ( this ) ; } private onClick ( ) { this . checked = true ; this . vmCheck . emit ( ) ; } render ( ) { return ( < vm - menu - item label = { this . label } checked = { this . checked } badge = { this . badge } checkIcon = { this . checkIcon } icons = { this . icons } onClick = { this . onClick . bind ( this ) } / > ) ; } }