import { Component , Element , h , Prop } from '@stencil/core' ; import { withComponentRegistry } from '../../../core/player/withComponentRegistry' ; /**
 * A simple container that enables player controls to be organized into groups. Each group starts on
 * a new line.
 *
 * ## Visual
 *
 * <img
 *   src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/controls/control-group/control-group.png"
 *   alt="Vime control group component"
 * />
 */ @ Component ( { tag : 'vm-control-group' , styleUrl : 'control-group.css' , shadow : true , } ) export class ControlNewLine { @ Element ( ) host ! : HTMLVmControlGroupElement ; /**
     * Determines where to add spacing/margin. The amount of spacing is determined by the CSS variable
     * `--control-group-spacing`.
     */ @ Prop ( ) space : 'top' | 'bottom' | 'both' | 'none' = 'none' ; constructor ( ) { withComponentRegistry ( this ) ; } render ( ) { return ( < div class = { { controlGroup : true , spaceTop : this . space !== 'none' && this . space !== 'bottom' , spaceBottom : this . space !== 'none' && this . space !== 'top' , } } > < slot /> < /div>); } }